From 2dc81e3503a4fe7f546e7b2b4a56d0ac1f6205e6 Mon Sep 17 00:00:00 2001 From: Tim Roes Date: Fri, 6 Apr 2018 13:04:44 +0200 Subject: [PATCH 1/2] Generate HTML4 compliant ids --- src/services/accessibility/html_id_generator.js | 5 +++-- src/services/accessibility/html_id_generator.test.js | 4 ++++ 2 files changed, 7 insertions(+), 2 deletions(-) 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()); From 2fa0212e480c22900745f7977b6c11d25977f320 Mon Sep 17 00:00:00 2001 From: Tim Roes Date: Wed, 26 Sep 2018 11:23:52 +0200 Subject: [PATCH 2/2] Add CHANGELOG entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6ffc85fbbb0..4ae73086480 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - 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)) ## [`4.2.0`](https://github.com/elastic/eui/tree/v4.2.0)