diff --git a/CHANGELOG.md b/CHANGELOG.md index f9b1b9a6029..7221cb06ecf 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/src/services/accessibility/html_id_generator.js b/src/services/accessibility/html_id_generator.js index 8a78aa75d0b..3e5536d504b 100644 --- a/src/services/accessibility/html_id_generator.js +++ b/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()}`; } diff --git a/src/services/accessibility/html_id_generator.test.js b/src/services/accessibility/html_id_generator.test.js index 0b46fdd6bf5..0f5c9ce3c66 100644 --- a/src/services/accessibility/html_id_generator.test.js +++ b/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());