[9.1] Fix violations of the @elastic/eui/require-aria-label-for-modals ESLint rule (Step 3) (#229616) #230417
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
…nt rule (Step 3) (elastic#229616) ## Summary This PR manually fixes some remaining violations of the following rule that, for some reason, were not addressed in the previous PR: elastic#227821 It applies the auto-fix for the newly introduced `@elastic/eui/require-aria-label-for-modals` rule. This rule ensures that `EUI` modal components (`EuiModal` and `EuiFlyout`) include either an aria-label or `aria-labelledby` prop to support screen reader accessibility. These attributes help users understand the purpose and content of modal dialogs. ## Changes Made 1. **Identified the modal title/header element** used within `EuiModal` or `EuiFlyout`. Common elements include: `EuiFlyoutTitle`, `EuiModalTitle`, `EuiTitle`, `<h2>`, `<h3>`, or other heading tags. 2. **Ensured the title element has an `id`:** If the header element lacked an `id`, one was programmatically generated: * **For function components:** * Imported `useGeneratedHtmlId` from `@elastic/eui` if not already present: ```ts import { useGeneratedHtmlId } from '@elastic/eui'; ``` * Defined a unique ID before the `return` statement: ```ts const modalTitleId = useGeneratedHtmlId(); ``` * Applied the ID to the title element: ```tsx <EuiModalTitle id={modalTitleId}>Title</EuiModalTitle> ``` * **For class components:** * Imported `htmlIdGenerator` from `@elastic/eui` if not already present: ```ts import { htmlIdGenerator } from '@elastic/eui'; ``` * Defined a unique ID within the `render()` method: ```ts const modalTitleId = htmlIdGenerator()('modalTitle'); ``` * Applied the ID to the title element: ```tsx <EuiModalTitle id={modalTitleId}>Title</EuiModalTitle> ``` 3. **Updated the `EuiModal` or `EuiFlyout` component** to include the `aria-labelledby` attribute referencing the generated title ID: ```tsx <EuiModal aria-labelledby={modalTitleId} /> ``` <!--ONMERGE {"backportTargets":["9.1"]} ONMERGE--> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit ef05e61) # Conflicts: # src/platform/plugins/shared/workflows_management/public/features/run_workflow/ui/test_workflow_modal.tsx # src/platform/plugins/shared/workflows_management/public/features/run_workflow/ui/workflow_event_modal.tsx
botelastic
bot
added
ci:project-deploy-observability
Contributor
|
Pinging @elastic/fleet (Team:Fleet) |
Contributor
🤖 GitHub commentsExpand to view the GitHub comments
Just comment with:
|
paulinashakirova
approved these changes
Aug 4, 2025
Contributor
Author
|
/ci |
Contributor
💚 Build Succeeded
Metrics [docs]Async chunks
Page load bundle
History
|
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.
Backport
This will backport the following commits from
mainto9.1:Questions ?
Please refer to the Backport tool documentation