Generate HTML4 compliant ids

CHANGELOG.md

@@ -6,6 +6,7 @@ No public interface changes since `4.3.0`.
 
 - Added a new `colorPalette` service for retrieving and generating color arrays for use in charts ([#1209](https://github.com/elastic/eui/pull/1209))
 - Added `1` as a valid value for the `columns` prop in `EuiFlexGrid` ([#1210](https://github.com/elastic/eui/pull/1210))
+- Make `htmlIdGenerator` only return valid HTML4 ids ([#637](https://github.com/elastic/eui/pull/637))
 - Use `cursor: pointer` to indicate clickable `EuiTable` rows ([#1213](https://github.com/elastic/eui/pull/1213))
 - Add `lockOpen` icon ([#1215](https://github.com/elastic/eui/pull/1215))
 

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());