EuiFormRow automatically generates an id to link together field label with field input.
This works fine in production and dev. However, in a test environment this functionality is disabled and instead a static string is returned for every field: https://github.com/elastic/eui/blob/master/src/services/accessibility/html_id_generator.testenv.ts
This means each input element in a form with multiple fields now has the same id during testing which is invalid. It also breaks expected behaviour since clicking any field label will now focus the same input element (whichever is the first one in the form) instead of the actual input element wrapped by the EuiFormRow.
This behaviour stops us from using react-testing-library which approach is to force developers to query elements by role or label text instead of DOM elements to ensure accessibility requirements are met:
await findByLabelText('Username'); // Will throw since 'Username' label resolves to 'generated-id' which matches multiple inputsWhat is the purpose of the static generated-id ids during testing?
Is there a way to disable this behaviour?
My only option right now seems to be to manually set each field's id, which defeats the purpose of having automatic id generation in the first place, and runs the danger of clashing with other ids on the page.
It would be great if this could be opt-in via a mock so that devs who require static ids (e.g. for snapshot testing) can easily opt into this behaviour without breaking other tests.
EuiFormRowautomatically generates an id to link together field label with field input.This works fine in production and dev. However, in a test environment this functionality is disabled and instead a static string is returned for every field: https://github.com/elastic/eui/blob/master/src/services/accessibility/html_id_generator.testenv.ts
This means each input element in a form with multiple fields now has the same id during testing which is invalid. It also breaks expected behaviour since clicking any field label will now focus the same input element (whichever is the first one in the form) instead of the actual input element wrapped by the
EuiFormRow.This behaviour stops us from using
react-testing-librarywhich approach is to force developers to query elements by role or label text instead of DOM elements to ensure accessibility requirements are met:What is the purpose of the static
generated-idids during testing?Is there a way to disable this behaviour?
My only option right now seems to be to manually set each field's
id, which defeats the purpose of having automatic id generation in the first place, and runs the danger of clashing with other ids on the page.It would be great if this could be opt-in via a mock so that devs who require static ids (e.g. for snapshot testing) can easily opt into this behaviour without breaking other tests.