Generate HTML4 compliant ids

src/services/accessibility/html_id_generator.js

@@ -4,9 +4,10 @@ import uuid from 'uuid';
  * This function returns a function to generate ids.
  * This can be used to generate unique, but predictable ids to pair labels
  * with their inputs. It takes an optional prefix as a parameter. If you don't
- * specify it, it generates a random id prefix.
+ * specify it, it generates a random id prefix. If you specify a custom prefix
+ * it should begin with an letter to be HTML4 compliant.
  */
 export function htmlIdGenerator(idPrefix) {
-  const prefix = idPrefix || uuid.v1();
+  const prefix = idPrefix || `i${uuid.v1()}`;
   return (suffix) => `${prefix}_${suffix || uuid.v1()}`;
 }

src/services/accessibility/html_id_generator.test.js

@@ -31,6 +31,10 @@ describe('htmlIdGenerator', () => {
     expect(idGenerator1('foo')).not.toBe(idGenerator2('foo'));
   });
 
+  it('should generate ids beginning with "i" when not passing a prefix', () => {
+    expect(htmlIdGenerator()()).toMatch(/^i/);
+  });
+
   it('should generate different ids if no suffix is passed', () => {
     const generator = htmlIdGenerator();
     expect(generator()).not.toBe(generator());