feat(eslint-plugin): add new @elastic/eui/consistent-is-invalid-props rule #8843
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
|
@alexwizp I think the commit message (and consequently the PR title) is incorrect. But the changes look alright! |
alexwizp
changed the title
alexwizp
force-pushed
the
require-aria-label-for-modals-rule
branch
from
4876bf4 to
96ded9d
Compare
Collaborator
💚 Build SucceededHistory
|
Collaborator
💚 Build Succeeded
History
|
weronikaolejniczak
approved these changes
Jul 8, 2025
weronikaolejniczak
added a commit
to elastic/kibana
that referenced
this pull request
Jul 15, 2025
`@elastic/eslint-plugin-eui`: `2.0.0` ⏩ `2.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes This PR updates the `@elastic/eslint-plugin-eui` version to latest: [`v2.1.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.1.0) ### `@elastic/eui/require-aria-label-for-modals` (fixed with GenAI: #227623) Ensures that EUI modal components (`EuiModal`, `EuiFlyout`, `EuiConfirmModal`) have either an `aria-label` or `aria-labelledby` prop for accessibility. This helps screen reader users understand the purpose and content of modal dialogs. ### `@elastic/eui/consistent-is-invalid-props` (auto-fix available) Ensures that form control components within `EuiFormRow` components have matching `isInvalid` prop values. This maintains consistent validation state between parent form rows and their child form controls, leading to a more predictable and accessible user experience. ### `@elastic/eui/sr_output_disabled_tooltip` (auto-fix available) Ensures `disableScreenReaderOutput` is set when `EuiToolTip` content matches `EuiButtonIcon`'s `aria-label`. > [!NOTE] > `@elastic/eui/sr_output_disabled_tooltip` will be renamed to `@elastic/eui/sr-output-disabled-tooltip` for consistent rule naming. ## Package updates ### `@elastic/eslint-plugin-eui` - Added new `sr_output_disabled_tooltip` rule. ([#8848](elastic/eui#8848)) - Added new `consistent-is-invalid-props` rule. ([#8843](elastic/eui#8843)) - Added new `require-aria-label-for-modals` rule. ([#8811](elastic/eui#8811))
alexwizp
added a commit
to elastic/kibana
that referenced
this pull request
Jul 18, 2025
…SLint rule (#226787) ## Summary This PR applies the auto-fix for the newly introduced `@elastic/eui/consistent-is-invalid-props` ESLint rule across the codebase. The rule ensures consistent validation state handling between `EuiFormRow` components and their child form controls. ## Changes - Auto-fixed instances where `isInvalid` prop values were inconsistent between parent `EuiFormRow` components and their form control children ## Related - elastic/eui#8843 --------- Co-authored-by: Robert Jaszczurek <[email protected]> Co-authored-by: kibanamachine <[email protected]>
kibanamachine
added a commit
to kibanamachine/kibana
that referenced
this pull request
Jul 18, 2025
…SLint rule (elastic#226787) ## Summary This PR applies the auto-fix for the newly introduced `@elastic/eui/consistent-is-invalid-props` ESLint rule across the codebase. The rule ensures consistent validation state handling between `EuiFormRow` components and their child form controls. ## Changes - Auto-fixed instances where `isInvalid` prop values were inconsistent between parent `EuiFormRow` components and their form control children ## Related - elastic/eui#8843 --------- Co-authored-by: Robert Jaszczurek <[email protected]> Co-authored-by: kibanamachine <[email protected]> (cherry picked from commit 00082ef)
kibanamachine
added a commit
to elastic/kibana
that referenced
this pull request
Jul 18, 2025
…rops ESLint rule (#226787) (#228557) # Backport This will backport the following commits from `main` to `9.1`: - [Auto-fix violations of the @elastic/eui/consistent-is-invalid-props ESLint rule (#226787)](#226787) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Alexey Antonov","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-07-18T08:20:03Z","message":"Auto-fix violations of the @elastic/eui/consistent-is-invalid-props ESLint rule (#226787)\n\n## Summary\nThis PR applies the auto-fix for the newly introduced\n`@elastic/eui/consistent-is-invalid-props` ESLint rule across the\ncodebase. The rule ensures consistent validation state handling between\n`EuiFormRow` components and their child form controls.\n\n## Changes\n- Auto-fixed instances where `isInvalid` prop values were inconsistent\nbetween parent `EuiFormRow` components and their form control children\n\n## Related\n- elastic/eui#8843\n\n---------\n\nCo-authored-by: Robert Jaszczurek <[email protected]>\nCo-authored-by: kibanamachine <[email protected]>","sha":"00082ef4b2ad0fa144c3bc1f648da0b9dc15ca02","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","Team:Fleet","backport:prev-minor","Team:obs-ux-infra_services","Team:obs-ux-management","v9.2.0"],"title":"Auto-fix violations of the @elastic/eui/consistent-is-invalid-props ESLint rule","number":226787,"url":"https://github.com/elastic/kibana/pull/226787","mergeCommit":{"message":"Auto-fix violations of the @elastic/eui/consistent-is-invalid-props ESLint rule (#226787)\n\n## Summary\nThis PR applies the auto-fix for the newly introduced\n`@elastic/eui/consistent-is-invalid-props` ESLint rule across the\ncodebase. The rule ensures consistent validation state handling between\n`EuiFormRow` components and their child form controls.\n\n## Changes\n- Auto-fixed instances where `isInvalid` prop values were inconsistent\nbetween parent `EuiFormRow` components and their form control children\n\n## Related\n- elastic/eui#8843\n\n---------\n\nCo-authored-by: Robert Jaszczurek <[email protected]>\nCo-authored-by: kibanamachine <[email protected]>","sha":"00082ef4b2ad0fa144c3bc1f648da0b9dc15ca02"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/226787","number":226787,"mergeCommit":{"message":"Auto-fix violations of the @elastic/eui/consistent-is-invalid-props ESLint rule (#226787)\n\n## Summary\nThis PR applies the auto-fix for the newly introduced\n`@elastic/eui/consistent-is-invalid-props` ESLint rule across the\ncodebase. The rule ensures consistent validation state handling between\n`EuiFormRow` components and their child form controls.\n\n## Changes\n- Auto-fixed instances where `isInvalid` prop values were inconsistent\nbetween parent `EuiFormRow` components and their form control children\n\n## Related\n- elastic/eui#8843\n\n---------\n\nCo-authored-by: Robert Jaszczurek <[email protected]>\nCo-authored-by: kibanamachine <[email protected]>","sha":"00082ef4b2ad0fa144c3bc1f648da0b9dc15ca02"}}]}] BACKPORT--> Co-authored-by: Alexey Antonov <[email protected]> Co-authored-by: Robert Jaszczurek <[email protected]>
Bluefinger
pushed a commit
to Bluefinger/kibana
that referenced
this pull request
Jul 22, 2025
`@elastic/eslint-plugin-eui`: `2.0.0` ⏩ `2.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes This PR updates the `@elastic/eslint-plugin-eui` version to latest: [`v2.1.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.1.0) ### `@elastic/eui/require-aria-label-for-modals` (fixed with GenAI: elastic#227623) Ensures that EUI modal components (`EuiModal`, `EuiFlyout`, `EuiConfirmModal`) have either an `aria-label` or `aria-labelledby` prop for accessibility. This helps screen reader users understand the purpose and content of modal dialogs. ### `@elastic/eui/consistent-is-invalid-props` (auto-fix available) Ensures that form control components within `EuiFormRow` components have matching `isInvalid` prop values. This maintains consistent validation state between parent form rows and their child form controls, leading to a more predictable and accessible user experience. ### `@elastic/eui/sr_output_disabled_tooltip` (auto-fix available) Ensures `disableScreenReaderOutput` is set when `EuiToolTip` content matches `EuiButtonIcon`'s `aria-label`. > [!NOTE] > `@elastic/eui/sr_output_disabled_tooltip` will be renamed to `@elastic/eui/sr-output-disabled-tooltip` for consistent rule naming. ## Package updates ### `@elastic/eslint-plugin-eui` - Added new `sr_output_disabled_tooltip` rule. ([elastic#8848](elastic/eui#8848)) - Added new `consistent-is-invalid-props` rule. ([elastic#8843](elastic/eui#8843)) - Added new `require-aria-label-for-modals` rule. ([elastic#8811](elastic/eui#8811))
Bluefinger
pushed a commit
to Bluefinger/kibana
that referenced
this pull request
Jul 22, 2025
…SLint rule (elastic#226787) ## Summary This PR applies the auto-fix for the newly introduced `@elastic/eui/consistent-is-invalid-props` ESLint rule across the codebase. The rule ensures consistent validation state handling between `EuiFormRow` components and their child form controls. ## Changes - Auto-fixed instances where `isInvalid` prop values were inconsistent between parent `EuiFormRow` components and their form control children ## Related - elastic/eui#8843 --------- Co-authored-by: Robert Jaszczurek <[email protected]> Co-authored-by: kibanamachine <[email protected]>
alexwizp
added a commit
to elastic/kibana
that referenced
this pull request
Jul 24, 2025
… ESLint rule (#227623) > [!CAUTION] >⚠️ Changes were made by GenAI. Please review carefully. > [!NOTE] > Only `EuiConfirmModal` part ## Summary This PR applies the auto-fix for the newly introduced `@elastic/eui/require-aria-label-for-modals` Ensures that EUI modal components `EuiConfirmModal` have either an `aria-label` or `aria-labelledby` prop for accessibility. This helps screen reader users understand the purpose and content of modal dialogs. ## Changes - For **function components**: 1. Verify whether `useGeneratedHtmlId` is imported from the `@elastic/eui` package. If not, add the following import. 2. Inside the render method, define a new constant: `const confirmModalTitleId = useGeneratedHtmlId();` - For **class components**: 1. Verify whether `htmlIdGenerator` is imported from the `@elastic/eui` package. If not, add the following import. 2. Inside the render method, define a new constant: `const confirmModalTitleId = htmlIdGenerator()('confirmModalTitle');` In both cases, add the following props to the `EuiConfirmModal` component: - `aria-labelledby={confirmModalTitleId}` - `titleProps={{ id: confirmModalTitleId }}` ## Related - elastic/eui#8843 --------- Co-authored-by: kibanamachine <[email protected]>
kibanamachine
added a commit
to kibanamachine/kibana
that referenced
this pull request
Jul 24, 2025
… ESLint rule (elastic#227623) > [!CAUTION] >⚠️ Changes were made by GenAI. Please review carefully. > [!NOTE] > Only `EuiConfirmModal` part ## Summary This PR applies the auto-fix for the newly introduced `@elastic/eui/require-aria-label-for-modals` Ensures that EUI modal components `EuiConfirmModal` have either an `aria-label` or `aria-labelledby` prop for accessibility. This helps screen reader users understand the purpose and content of modal dialogs. ## Changes - For **function components**: 1. Verify whether `useGeneratedHtmlId` is imported from the `@elastic/eui` package. If not, add the following import. 2. Inside the render method, define a new constant: `const confirmModalTitleId = useGeneratedHtmlId();` - For **class components**: 1. Verify whether `htmlIdGenerator` is imported from the `@elastic/eui` package. If not, add the following import. 2. Inside the render method, define a new constant: `const confirmModalTitleId = htmlIdGenerator()('confirmModalTitle');` In both cases, add the following props to the `EuiConfirmModal` component: - `aria-labelledby={confirmModalTitleId}` - `titleProps={{ id: confirmModalTitleId }}` ## Related - elastic/eui#8843 --------- Co-authored-by: kibanamachine <[email protected]> (cherry picked from commit f0dbc67)
kertal
pushed a commit
to kertal/kibana
that referenced
this pull request
Jul 25, 2025
`@elastic/eslint-plugin-eui`: `2.0.0` ⏩ `2.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes This PR updates the `@elastic/eslint-plugin-eui` version to latest: [`v2.1.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.1.0) ### `@elastic/eui/require-aria-label-for-modals` (fixed with GenAI: elastic#227623) Ensures that EUI modal components (`EuiModal`, `EuiFlyout`, `EuiConfirmModal`) have either an `aria-label` or `aria-labelledby` prop for accessibility. This helps screen reader users understand the purpose and content of modal dialogs. ### `@elastic/eui/consistent-is-invalid-props` (auto-fix available) Ensures that form control components within `EuiFormRow` components have matching `isInvalid` prop values. This maintains consistent validation state between parent form rows and their child form controls, leading to a more predictable and accessible user experience. ### `@elastic/eui/sr_output_disabled_tooltip` (auto-fix available) Ensures `disableScreenReaderOutput` is set when `EuiToolTip` content matches `EuiButtonIcon`'s `aria-label`. > [!NOTE] > `@elastic/eui/sr_output_disabled_tooltip` will be renamed to `@elastic/eui/sr-output-disabled-tooltip` for consistent rule naming. ## Package updates ### `@elastic/eslint-plugin-eui` - Added new `sr_output_disabled_tooltip` rule. ([elastic#8848](elastic/eui#8848)) - Added new `consistent-is-invalid-props` rule. ([elastic#8843](elastic/eui#8843)) - Added new `require-aria-label-for-modals` rule. ([elastic#8811](elastic/eui#8811))
kertal
pushed a commit
to kertal/kibana
that referenced
this pull request
Jul 25, 2025
…SLint rule (elastic#226787) ## Summary This PR applies the auto-fix for the newly introduced `@elastic/eui/consistent-is-invalid-props` ESLint rule across the codebase. The rule ensures consistent validation state handling between `EuiFormRow` components and their child form controls. ## Changes - Auto-fixed instances where `isInvalid` prop values were inconsistent between parent `EuiFormRow` components and their form control children ## Related - elastic/eui#8843 --------- Co-authored-by: Robert Jaszczurek <[email protected]> Co-authored-by: kibanamachine <[email protected]>
kertal
pushed a commit
to kertal/kibana
that referenced
this pull request
Jul 25, 2025
… ESLint rule (elastic#227623) > [!CAUTION] >⚠️ Changes were made by GenAI. Please review carefully. > [!NOTE] > Only `EuiConfirmModal` part ## Summary This PR applies the auto-fix for the newly introduced `@elastic/eui/require-aria-label-for-modals` Ensures that EUI modal components `EuiConfirmModal` have either an `aria-label` or `aria-labelledby` prop for accessibility. This helps screen reader users understand the purpose and content of modal dialogs. ## Changes - For **function components**: 1. Verify whether `useGeneratedHtmlId` is imported from the `@elastic/eui` package. If not, add the following import. 2. Inside the render method, define a new constant: `const confirmModalTitleId = useGeneratedHtmlId();` - For **class components**: 1. Verify whether `htmlIdGenerator` is imported from the `@elastic/eui` package. If not, add the following import. 2. Inside the render method, define a new constant: `const confirmModalTitleId = htmlIdGenerator()('confirmModalTitle');` In both cases, add the following props to the `EuiConfirmModal` component: - `aria-labelledby={confirmModalTitleId}` - `titleProps={{ id: confirmModalTitleId }}` ## Related - elastic/eui#8843 --------- Co-authored-by: kibanamachine <[email protected]>
eokoneyo
pushed a commit
to eokoneyo/kibana
that referenced
this pull request
Jul 31, 2025
… ESLint rule (elastic#227623) > [!CAUTION] >⚠️ Changes were made by GenAI. Please review carefully. > [!NOTE] > Only `EuiConfirmModal` part ## Summary This PR applies the auto-fix for the newly introduced `@elastic/eui/require-aria-label-for-modals` Ensures that EUI modal components `EuiConfirmModal` have either an `aria-label` or `aria-labelledby` prop for accessibility. This helps screen reader users understand the purpose and content of modal dialogs. ## Changes - For **function components**: 1. Verify whether `useGeneratedHtmlId` is imported from the `@elastic/eui` package. If not, add the following import. 2. Inside the render method, define a new constant: `const confirmModalTitleId = useGeneratedHtmlId();` - For **class components**: 1. Verify whether `htmlIdGenerator` is imported from the `@elastic/eui` package. If not, add the following import. 2. Inside the render method, define a new constant: `const confirmModalTitleId = htmlIdGenerator()('confirmModalTitle');` In both cases, add the following props to the `EuiConfirmModal` component: - `aria-labelledby={confirmModalTitleId}` - `titleProps={{ id: confirmModalTitleId }}` ## Related - elastic/eui#8843 --------- Co-authored-by: kibanamachine <[email protected]>
kibanamachine
added a commit
to elastic/kibana
that referenced
this pull request
Aug 1, 2025
…modals ESLint rule (#227623) (#229259) # Backport This will backport the following commits from `main` to `9.1`: - [Auto-fix violations of the @elastic/eui/require-aria-label-for-modals ESLint rule (#227623)](#227623) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Alexey Antonov","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-07-24T08:36:00Z","message":"Auto-fix violations of the @elastic/eui/require-aria-label-for-modals ESLint rule (#227623)\n\n> [!CAUTION]\n>⚠️ Changes were made by GenAI. Please review carefully.\n\n> [!NOTE]\n> Only `EuiConfirmModal` part\n\n## Summary\nThis PR applies the auto-fix for the newly introduced\n`@elastic/eui/require-aria-label-for-modals` Ensures that EUI modal\ncomponents `EuiConfirmModal` have either an `aria-label` or\n`aria-labelledby` prop for accessibility. This helps screen reader users\nunderstand the purpose and content of modal dialogs.\n\n## Changes\n\n- For **function components**:\n1. Verify whether `useGeneratedHtmlId` is imported from the\n`@elastic/eui` package. If not, add the following import.\n2. Inside the render method, define a new constant: `const\nconfirmModalTitleId = useGeneratedHtmlId();`\n- For **class components**:\n1. Verify whether `htmlIdGenerator` is imported from the `@elastic/eui`\npackage. If not, add the following import.\n2. Inside the render method, define a new constant: `const\nconfirmModalTitleId = htmlIdGenerator()('confirmModalTitle');`\n\nIn both cases, add the following props to the `EuiConfirmModal`\ncomponent:\n- `aria-labelledby={confirmModalTitleId}`\n- `titleProps={{ id: confirmModalTitleId }}`\n\n## Related\n- elastic/eui#8843\n\n---------\n\nCo-authored-by: kibanamachine <[email protected]>","sha":"f0dbc67c4c1d2ad236a0fb9f65815df2b5aeaae5","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","Team:Fleet","backport:prev-minor","ci:project-deploy-observability","Team:obs-ux-infra_services","Team:obs-ux-management","v9.2.0"],"title":"Auto-fix violations of the @elastic/eui/require-aria-label-for-modals ESLint rule","number":227623,"url":"https://github.com/elastic/kibana/pull/227623","mergeCommit":{"message":"Auto-fix violations of the @elastic/eui/require-aria-label-for-modals ESLint rule (#227623)\n\n> [!CAUTION]\n>⚠️ Changes were made by GenAI. Please review carefully.\n\n> [!NOTE]\n> Only `EuiConfirmModal` part\n\n## Summary\nThis PR applies the auto-fix for the newly introduced\n`@elastic/eui/require-aria-label-for-modals` Ensures that EUI modal\ncomponents `EuiConfirmModal` have either an `aria-label` or\n`aria-labelledby` prop for accessibility. This helps screen reader users\nunderstand the purpose and content of modal dialogs.\n\n## Changes\n\n- For **function components**:\n1. Verify whether `useGeneratedHtmlId` is imported from the\n`@elastic/eui` package. If not, add the following import.\n2. Inside the render method, define a new constant: `const\nconfirmModalTitleId = useGeneratedHtmlId();`\n- For **class components**:\n1. Verify whether `htmlIdGenerator` is imported from the `@elastic/eui`\npackage. If not, add the following import.\n2. Inside the render method, define a new constant: `const\nconfirmModalTitleId = htmlIdGenerator()('confirmModalTitle');`\n\nIn both cases, add the following props to the `EuiConfirmModal`\ncomponent:\n- `aria-labelledby={confirmModalTitleId}`\n- `titleProps={{ id: confirmModalTitleId }}`\n\n## Related\n- elastic/eui#8843\n\n---------\n\nCo-authored-by: kibanamachine <[email protected]>","sha":"f0dbc67c4c1d2ad236a0fb9f65815df2b5aeaae5"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/227623","number":227623,"mergeCommit":{"message":"Auto-fix violations of the @elastic/eui/require-aria-label-for-modals ESLint rule (#227623)\n\n> [!CAUTION]\n>⚠️ Changes were made by GenAI. Please review carefully.\n\n> [!NOTE]\n> Only `EuiConfirmModal` part\n\n## Summary\nThis PR applies the auto-fix for the newly introduced\n`@elastic/eui/require-aria-label-for-modals` Ensures that EUI modal\ncomponents `EuiConfirmModal` have either an `aria-label` or\n`aria-labelledby` prop for accessibility. This helps screen reader users\nunderstand the purpose and content of modal dialogs.\n\n## Changes\n\n- For **function components**:\n1. Verify whether `useGeneratedHtmlId` is imported from the\n`@elastic/eui` package. If not, add the following import.\n2. Inside the render method, define a new constant: `const\nconfirmModalTitleId = useGeneratedHtmlId();`\n- For **class components**:\n1. Verify whether `htmlIdGenerator` is imported from the `@elastic/eui`\npackage. If not, add the following import.\n2. Inside the render method, define a new constant: `const\nconfirmModalTitleId = htmlIdGenerator()('confirmModalTitle');`\n\nIn both cases, add the following props to the `EuiConfirmModal`\ncomponent:\n- `aria-labelledby={confirmModalTitleId}`\n- `titleProps={{ id: confirmModalTitleId }}`\n\n## Related\n- elastic/eui#8843\n\n---------\n\nCo-authored-by: kibanamachine <[email protected]>","sha":"f0dbc67c4c1d2ad236a0fb9f65815df2b5aeaae5"}}]}] BACKPORT--> --------- Co-authored-by: Alexey Antonov <[email protected]>
delanni
pushed a commit
to delanni/kibana
that referenced
this pull request
Aug 5, 2025
… ESLint rule (elastic#227623) > [!CAUTION] >⚠️ Changes were made by GenAI. Please review carefully. > [!NOTE] > Only `EuiConfirmModal` part ## Summary This PR applies the auto-fix for the newly introduced `@elastic/eui/require-aria-label-for-modals` Ensures that EUI modal components `EuiConfirmModal` have either an `aria-label` or `aria-labelledby` prop for accessibility. This helps screen reader users understand the purpose and content of modal dialogs. ## Changes - For **function components**: 1. Verify whether `useGeneratedHtmlId` is imported from the `@elastic/eui` package. If not, add the following import. 2. Inside the render method, define a new constant: `const confirmModalTitleId = useGeneratedHtmlId();` - For **class components**: 1. Verify whether `htmlIdGenerator` is imported from the `@elastic/eui` package. If not, add the following import. 2. Inside the render method, define a new constant: `const confirmModalTitleId = htmlIdGenerator()('confirmModalTitle');` In both cases, add the following props to the `EuiConfirmModal` component: - `aria-labelledby={confirmModalTitleId}` - `titleProps={{ id: confirmModalTitleId }}` ## Related - elastic/eui#8843 --------- Co-authored-by: kibanamachine <[email protected]>
alexwizp
added a commit
to elastic/kibana
that referenced
this pull request
Oct 10, 2025
) > [!CAUTION] >⚠️ **Changes / translations were made by GenAI**. I’ve reviewed them carefully, but your code owners’ expert eyes will ensure they’re 100% right. ## Summary This PR applies the auto-fix for the newly introduced `@elastic/eui/no-unnamed-interactive-element` Ensure that appropriate aria-attributes are set for `EuiBetaBadge`, `EuiButtonIcon`, `EuiComboBox`, `EuiSelect`, `EuiSelectWithWidth`,`EuiSuperSelect`,`EuiPagination`, `EuiTreeView`, `EuiBreadcrumbs`. Without this rule, screen reader users lose context, keyboard navigation can be confusing. ## Changes 1. 🎯 Added missing ARIA attributes to elements flagged by `@elastic/eui/no-unnamed-interactive-element` — accessibility leveled up! ## Related - [elastic/eui#8843](elastic/eui#8973) --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Pete Harverson <[email protected]> Co-authored-by: Cristina Amico <[email protected]> Co-authored-by: Julia Rechkunova <[email protected]> Co-authored-by: Paulina Shakirova <[email protected]>
alexwizp
added a commit
to alexwizp/kibana
that referenced
this pull request
Oct 13, 2025
…tic#237317) > [!CAUTION] >⚠️ **Changes / translations were made by GenAI**. I’ve reviewed them carefully, but your code owners’ expert eyes will ensure they’re 100% right. ## Summary This PR applies the auto-fix for the newly introduced `@elastic/eui/no-unnamed-interactive-element` Ensure that appropriate aria-attributes are set for `EuiBetaBadge`, `EuiButtonIcon`, `EuiComboBox`, `EuiSelect`, `EuiSelectWithWidth`,`EuiSuperSelect`,`EuiPagination`, `EuiTreeView`, `EuiBreadcrumbs`. Without this rule, screen reader users lose context, keyboard navigation can be confusing. ## Changes 1. 🎯 Added missing ARIA attributes to elements flagged by `@elastic/eui/no-unnamed-interactive-element` — accessibility leveled up! ## Related - [elastic/eui#8843](elastic/eui#8973) --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Pete Harverson <[email protected]> Co-authored-by: Cristina Amico <[email protected]> Co-authored-by: Julia Rechkunova <[email protected]> Co-authored-by: Paulina Shakirova <[email protected]> (cherry picked from commit b419244) # Conflicts: # x-pack/platform/plugins/shared/ml/public/application/explorer/anomaly_timeline.tsx
alexwizp
added a commit
to elastic/kibana
that referenced
this pull request
Oct 13, 2025
…#237317) (#238577) # Backport This will backport the following commits from `main` to `9.2`: - [fix violations of `@elastic/eui/no-unnamed-interactive-element` (#237317)](#237317) <!--- Backport version: 10.0.2 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Alexey Antonov","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-10-10T19:30:11Z","message":"fix violations of `@elastic/eui/no-unnamed-interactive-element` (#237317)\n\n> [!CAUTION]\n>⚠️ **Changes / translations were made by GenAI**. I’ve reviewed them\ncarefully, but your code owners’ expert eyes will ensure they’re 100%\nright.\n\n## Summary\nThis PR applies the auto-fix for the newly introduced\n`@elastic/eui/no-unnamed-interactive-element` Ensure that appropriate\naria-attributes are set for `EuiBetaBadge`, `EuiButtonIcon`,\n`EuiComboBox`, `EuiSelect`,\n`EuiSelectWithWidth`,`EuiSuperSelect`,`EuiPagination`, `EuiTreeView`,\n`EuiBreadcrumbs`. Without this rule, screen reader users lose context,\nkeyboard navigation can be confusing.\n\n## Changes\n\n1. 🎯 Added missing ARIA attributes to elements flagged by\n`@elastic/eui/no-unnamed-interactive-element` — accessibility leveled\nup!\n\n## Related\n- [elastic/eui#8843](https://github.com/elastic/eui/pull/8973)\n\n---------\n\nCo-authored-by: kibanamachine <[email protected]>\nCo-authored-by: Pete Harverson <[email protected]>\nCo-authored-by: Cristina Amico <[email protected]>\nCo-authored-by: Julia Rechkunova <[email protected]>\nCo-authored-by: Paulina Shakirova <[email protected]>","sha":"b41924466f0db68cb2766ba8ff1c08c6b2f13d4c","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","Team:Fleet","Team:Obs AI Assistant","ci:project-deploy-observability","Team:obs-ux-infra_services","Team:obs-ux-management","backport:version","v9.2.0","v9.3.0","v9.1.6"],"title":"fix violations of `@elastic/eui/no-unnamed-interactive-element`","number":237317,"url":"https://github.com/elastic/kibana/pull/237317","mergeCommit":{"message":"fix violations of `@elastic/eui/no-unnamed-interactive-element` (#237317)\n\n> [!CAUTION]\n>⚠️ **Changes / translations were made by GenAI**. I’ve reviewed them\ncarefully, but your code owners’ expert eyes will ensure they’re 100%\nright.\n\n## Summary\nThis PR applies the auto-fix for the newly introduced\n`@elastic/eui/no-unnamed-interactive-element` Ensure that appropriate\naria-attributes are set for `EuiBetaBadge`, `EuiButtonIcon`,\n`EuiComboBox`, `EuiSelect`,\n`EuiSelectWithWidth`,`EuiSuperSelect`,`EuiPagination`, `EuiTreeView`,\n`EuiBreadcrumbs`. Without this rule, screen reader users lose context,\nkeyboard navigation can be confusing.\n\n## Changes\n\n1. 🎯 Added missing ARIA attributes to elements flagged by\n`@elastic/eui/no-unnamed-interactive-element` — accessibility leveled\nup!\n\n## Related\n- [elastic/eui#8843](https://github.com/elastic/eui/pull/8973)\n\n---------\n\nCo-authored-by: kibanamachine <[email protected]>\nCo-authored-by: Pete Harverson <[email protected]>\nCo-authored-by: Cristina Amico <[email protected]>\nCo-authored-by: Julia Rechkunova <[email protected]>\nCo-authored-by: Paulina Shakirova <[email protected]>","sha":"b41924466f0db68cb2766ba8ff1c08c6b2f13d4c"}},"sourceBranch":"main","suggestedTargetBranches":["9.2","9.1"],"targetPullRequestStates":[{"branch":"9.2","label":"v9.2.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.3.0","branchLabelMappingKey":"^v9.3.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/237317","number":237317,"mergeCommit":{"message":"fix violations of `@elastic/eui/no-unnamed-interactive-element` (#237317)\n\n> [!CAUTION]\n>⚠️ **Changes / translations were made by GenAI**. I’ve reviewed them\ncarefully, but your code owners’ expert eyes will ensure they’re 100%\nright.\n\n## Summary\nThis PR applies the auto-fix for the newly introduced\n`@elastic/eui/no-unnamed-interactive-element` Ensure that appropriate\naria-attributes are set for `EuiBetaBadge`, `EuiButtonIcon`,\n`EuiComboBox`, `EuiSelect`,\n`EuiSelectWithWidth`,`EuiSuperSelect`,`EuiPagination`, `EuiTreeView`,\n`EuiBreadcrumbs`. Without this rule, screen reader users lose context,\nkeyboard navigation can be confusing.\n\n## Changes\n\n1. 🎯 Added missing ARIA attributes to elements flagged by\n`@elastic/eui/no-unnamed-interactive-element` — accessibility leveled\nup!\n\n## Related\n- [elastic/eui#8843](https://github.com/elastic/eui/pull/8973)\n\n---------\n\nCo-authored-by: kibanamachine <[email protected]>\nCo-authored-by: Pete Harverson <[email protected]>\nCo-authored-by: Cristina Amico <[email protected]>\nCo-authored-by: Julia Rechkunova <[email protected]>\nCo-authored-by: Paulina Shakirova <[email protected]>","sha":"b41924466f0db68cb2766ba8ff1c08c6b2f13d4c"}},{"branch":"9.1","label":"v9.1.6","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT-->
rylnd
pushed a commit
to rylnd/kibana
that referenced
this pull request
Oct 17, 2025
…tic#237317) > [!CAUTION] >⚠️ **Changes / translations were made by GenAI**. I’ve reviewed them carefully, but your code owners’ expert eyes will ensure they’re 100% right. ## Summary This PR applies the auto-fix for the newly introduced `@elastic/eui/no-unnamed-interactive-element` Ensure that appropriate aria-attributes are set for `EuiBetaBadge`, `EuiButtonIcon`, `EuiComboBox`, `EuiSelect`, `EuiSelectWithWidth`,`EuiSuperSelect`,`EuiPagination`, `EuiTreeView`, `EuiBreadcrumbs`. Without this rule, screen reader users lose context, keyboard navigation can be confusing. ## Changes 1. 🎯 Added missing ARIA attributes to elements flagged by `@elastic/eui/no-unnamed-interactive-element` — accessibility leveled up! ## Related - [elastic/eui#8843](elastic/eui#8973) --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Pete Harverson <[email protected]> Co-authored-by: Cristina Amico <[email protected]> Co-authored-by: Julia Rechkunova <[email protected]> Co-authored-by: Paulina Shakirova <[email protected]>
nickpeihl
pushed a commit
to nickpeihl/kibana
that referenced
this pull request
Oct 23, 2025
…tic#237317) > [!CAUTION] >⚠️ **Changes / translations were made by GenAI**. I’ve reviewed them carefully, but your code owners’ expert eyes will ensure they’re 100% right. ## Summary This PR applies the auto-fix for the newly introduced `@elastic/eui/no-unnamed-interactive-element` Ensure that appropriate aria-attributes are set for `EuiBetaBadge`, `EuiButtonIcon`, `EuiComboBox`, `EuiSelect`, `EuiSelectWithWidth`,`EuiSuperSelect`,`EuiPagination`, `EuiTreeView`, `EuiBreadcrumbs`. Without this rule, screen reader users lose context, keyboard navigation can be confusing. ## Changes 1. 🎯 Added missing ARIA attributes to elements flagged by `@elastic/eui/no-unnamed-interactive-element` — accessibility leveled up! ## Related - [elastic/eui#8843](elastic/eui#8973) --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Pete Harverson <[email protected]> Co-authored-by: Cristina Amico <[email protected]> Co-authored-by: Julia Rechkunova <[email protected]> Co-authored-by: Paulina Shakirova <[email protected]>
NicholasPeretti
pushed a commit
to NicholasPeretti/kibana
that referenced
this pull request
Oct 27, 2025
…tic#237317) > [!CAUTION] >⚠️ **Changes / translations were made by GenAI**. I’ve reviewed them carefully, but your code owners’ expert eyes will ensure they’re 100% right. ## Summary This PR applies the auto-fix for the newly introduced `@elastic/eui/no-unnamed-interactive-element` Ensure that appropriate aria-attributes are set for `EuiBetaBadge`, `EuiButtonIcon`, `EuiComboBox`, `EuiSelect`, `EuiSelectWithWidth`,`EuiSuperSelect`,`EuiPagination`, `EuiTreeView`, `EuiBreadcrumbs`. Without this rule, screen reader users lose context, keyboard navigation can be confusing. ## Changes 1. 🎯 Added missing ARIA attributes to elements flagged by `@elastic/eui/no-unnamed-interactive-element` — accessibility leveled up! ## Related - [elastic/eui#8843](elastic/eui#8973) --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Pete Harverson <[email protected]> Co-authored-by: Cristina Amico <[email protected]> Co-authored-by: Julia Rechkunova <[email protected]> Co-authored-by: Paulina Shakirova <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR introduces a new ESLint rule to improve form validation consistency in EUI:
-
@elastic/eui/consistent-is-invalid-propsThis rule ensures that form control components within
EuiFormRowcomponents have matchingisInvalidprop values. This maintains consistent validation state between parent form rows and their child form controls, leading to a more predictable and accessible user experience.Problem
Form controls nested within
EuiFormRowcomponents can have mismatchedisInvalidpropsScreen