Fix violations of the @elastic/eui/require-aria-label-for-modals ESLint rule (Step 3) #229616
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
# Conflicts: # 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:
|
cnasikas
approved these changes
Jul 29, 2025
tonyghiani
approved these changes
Jul 31, 2025
Contributor
tonyghiani
left a comment
tonyghiani
left a comment
There was a problem hiding this comment.
streams_app changes LGTM
Contributor
💚 Build Succeeded
Metrics [docs]Async chunks
Page load bundle
History
|
Contributor
Author
|
@elastic/workflows-eng please review |
Contributor
Author
|
@elastic/stack-monitoring please review |
Contributor
|
Starting backport for target branches: 9.1 https://github.com/elastic/kibana/actions/runs/16722929369 |
Contributor
💔 All backports failedManual backportTo create the backport manually run: Questions ?Please refer to the Backport tool documentation |
(#230255)
Contributor
Author
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
alexwizp
added a commit
to alexwizp/kibana
that referenced
this pull request
Aug 4, 2025
…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
alexwizp
added a commit
that referenced
this pull request
Aug 4, 2025
…s ESLint rule (Step 3) (#229616) (#230417) # Backport This will backport the following commits from `main` to `9.1`: - [Fix violations of the @elastic/eui/require-aria-label-for-modals ESLint rule (Step 3) (#229616)](#229616) <!--- Backport version: 10.0.1 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Alexey Antonov","email":"alexwizp@gmail.com"},"sourceCommit":{"committedDate":"2025-08-04T12:18:33Z","message":"Fix violations of the @elastic/eui/require-aria-label-for-modals ESLint rule (Step 3) (#229616)\n\n## Summary\n\nThis PR manually fixes some remaining violations of the following rule\nthat, for some reason, were not addressed in the previous PR:\nhttps://github.com//pull/227821\n\nIt applies the auto-fix for the newly introduced\n`@elastic/eui/require-aria-label-for-modals` rule. This rule ensures\nthat `EUI` modal components (`EuiModal` and `EuiFlyout`) include either\nan aria-label or `aria-labelledby` prop to support screen reader\naccessibility. These attributes help users understand the purpose and\ncontent of modal dialogs.\n\n## Changes Made\n\n1. **Identified the modal title/header element** used within `EuiModal`\nor `EuiFlyout`.\nCommon elements include: `EuiFlyoutTitle`, `EuiModalTitle`, `EuiTitle`,\n`<h2>`, `<h3>`, or other heading tags.\n\n2. **Ensured the title element has an `id`:**\nIf the header element lacked an `id`, one was programmatically\ngenerated:\n\n * **For function components:**\n\n* Imported `useGeneratedHtmlId` from `@elastic/eui` if not already\npresent:\n\n ```ts\n import { useGeneratedHtmlId } from '@elastic/eui';\n ```\n * Defined a unique ID before the `return` statement:\n\n ```ts\n const modalTitleId = useGeneratedHtmlId();\n ```\n * Applied the ID to the title element:\n\n ```tsx\n <EuiModalTitle id={modalTitleId}>Title</EuiModalTitle>\n ```\n\n * **For class components:**\n\n* Imported `htmlIdGenerator` from `@elastic/eui` if not already present:\n\n ```ts\n import { htmlIdGenerator } from '@elastic/eui';\n ```\n * Defined a unique ID within the `render()` method:\n\n ```ts\n const modalTitleId = htmlIdGenerator()('modalTitle');\n ```\n * Applied the ID to the title element:\n\n ```tsx\n <EuiModalTitle id={modalTitleId}>Title</EuiModalTitle>\n ```\n\n3. **Updated the `EuiModal` or `EuiFlyout` component** to include the\n`aria-labelledby` attribute referencing the generated title ID:\n\n ```tsx\n <EuiModal aria-labelledby={modalTitleId} />\n ```\n\n\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"ef05e61a64ff49080636578a37d6502492f9c947","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","v9.2.0"],"title":"Fix violations of the @elastic/eui/require-aria-label-for-modals ESLint rule (Step 3)","number":229616,"url":"https://github.com/elastic/kibana/pull/229616","mergeCommit":{"message":"Fix violations of the @elastic/eui/require-aria-label-for-modals ESLint rule (Step 3) (#229616)\n\n## Summary\n\nThis PR manually fixes some remaining violations of the following rule\nthat, for some reason, were not addressed in the previous PR:\nhttps://github.com//pull/227821\n\nIt applies the auto-fix for the newly introduced\n`@elastic/eui/require-aria-label-for-modals` rule. This rule ensures\nthat `EUI` modal components (`EuiModal` and `EuiFlyout`) include either\nan aria-label or `aria-labelledby` prop to support screen reader\naccessibility. These attributes help users understand the purpose and\ncontent of modal dialogs.\n\n## Changes Made\n\n1. **Identified the modal title/header element** used within `EuiModal`\nor `EuiFlyout`.\nCommon elements include: `EuiFlyoutTitle`, `EuiModalTitle`, `EuiTitle`,\n`<h2>`, `<h3>`, or other heading tags.\n\n2. **Ensured the title element has an `id`:**\nIf the header element lacked an `id`, one was programmatically\ngenerated:\n\n * **For function components:**\n\n* Imported `useGeneratedHtmlId` from `@elastic/eui` if not already\npresent:\n\n ```ts\n import { useGeneratedHtmlId } from '@elastic/eui';\n ```\n * Defined a unique ID before the `return` statement:\n\n ```ts\n const modalTitleId = useGeneratedHtmlId();\n ```\n * Applied the ID to the title element:\n\n ```tsx\n <EuiModalTitle id={modalTitleId}>Title</EuiModalTitle>\n ```\n\n * **For class components:**\n\n* Imported `htmlIdGenerator` from `@elastic/eui` if not already present:\n\n ```ts\n import { htmlIdGenerator } from '@elastic/eui';\n ```\n * Defined a unique ID within the `render()` method:\n\n ```ts\n const modalTitleId = htmlIdGenerator()('modalTitle');\n ```\n * Applied the ID to the title element:\n\n ```tsx\n <EuiModalTitle id={modalTitleId}>Title</EuiModalTitle>\n ```\n\n3. **Updated the `EuiModal` or `EuiFlyout` component** to include the\n`aria-labelledby` attribute referencing the generated title ID:\n\n ```tsx\n <EuiModal aria-labelledby={modalTitleId} />\n ```\n\n\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"ef05e61a64ff49080636578a37d6502492f9c947"}},"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/229616","number":229616,"mergeCommit":{"message":"Fix violations of the @elastic/eui/require-aria-label-for-modals ESLint rule (Step 3) (#229616)\n\n## Summary\n\nThis PR manually fixes some remaining violations of the following rule\nthat, for some reason, were not addressed in the previous PR:\nhttps://github.com//pull/227821\n\nIt applies the auto-fix for the newly introduced\n`@elastic/eui/require-aria-label-for-modals` rule. This rule ensures\nthat `EUI` modal components (`EuiModal` and `EuiFlyout`) include either\nan aria-label or `aria-labelledby` prop to support screen reader\naccessibility. These attributes help users understand the purpose and\ncontent of modal dialogs.\n\n## Changes Made\n\n1. **Identified the modal title/header element** used within `EuiModal`\nor `EuiFlyout`.\nCommon elements include: `EuiFlyoutTitle`, `EuiModalTitle`, `EuiTitle`,\n`<h2>`, `<h3>`, or other heading tags.\n\n2. **Ensured the title element has an `id`:**\nIf the header element lacked an `id`, one was programmatically\ngenerated:\n\n * **For function components:**\n\n* Imported `useGeneratedHtmlId` from `@elastic/eui` if not already\npresent:\n\n ```ts\n import { useGeneratedHtmlId } from '@elastic/eui';\n ```\n * Defined a unique ID before the `return` statement:\n\n ```ts\n const modalTitleId = useGeneratedHtmlId();\n ```\n * Applied the ID to the title element:\n\n ```tsx\n <EuiModalTitle id={modalTitleId}>Title</EuiModalTitle>\n ```\n\n * **For class components:**\n\n* Imported `htmlIdGenerator` from `@elastic/eui` if not already present:\n\n ```ts\n import { htmlIdGenerator } from '@elastic/eui';\n ```\n * Defined a unique ID within the `render()` method:\n\n ```ts\n const modalTitleId = htmlIdGenerator()('modalTitle');\n ```\n * Applied the ID to the title element:\n\n ```tsx\n <EuiModalTitle id={modalTitleId}>Title</EuiModalTitle>\n ```\n\n3. **Updated the `EuiModal` or `EuiFlyout` component** to include the\n`aria-labelledby` attribute referencing the generated title ID:\n\n ```tsx\n <EuiModal aria-labelledby={modalTitleId} />\n ```\n\n\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"ef05e61a64ff49080636578a37d6502492f9c947"}}]}] BACKPORT-->
szaffarano
pushed a commit
to szaffarano/kibana
that referenced
this pull request
Aug 5, 2025
…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>
delanni
pushed a commit
to delanni/kibana
that referenced
this pull request
Aug 5, 2025
…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>
NicholasPeretti
pushed a commit
to NicholasPeretti/kibana
that referenced
this pull request
Aug 18, 2025
…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>
alexwizp
added a commit
that referenced
this pull request
Aug 27, 2025
…le from announcement (#232972) Closes: #216990 **Description** Dialog modal, flyout, field visible title should be announced for the users, especially using assistive technology to know what dialog modal, flyout opened, what field is active and what is needed to enter in it. **Preconditions** 1. Analytics -> Machine Learning -> Anomaly Detection -> Settings -> Calendar management -> Edit page. 2. Use Screen Reader (NVDA). **Changes made** 1. added required aria attributes **Notes for reviewers** Second case (`Import events`) was already fixed within #229616
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Aug 27, 2025
…le from announcement (elastic#232972) Closes: elastic#216990 **Description** Dialog modal, flyout, field visible title should be announced for the users, especially using assistive technology to know what dialog modal, flyout opened, what field is active and what is needed to enter in it. **Preconditions** 1. Analytics -> Machine Learning -> Anomaly Detection -> Settings -> Calendar management -> Edit page. 2. Use Screen Reader (NVDA). **Changes made** 1. added required aria attributes **Notes for reviewers** Second case (`Import events`) was already fixed within elastic#229616 (cherry picked from commit b9e73ce)
kibanamachine
added a commit
that referenced
this pull request
Aug 27, 2025
…ng title from announcement (#232972) (#233083) # Backport This will backport the following commits from `main` to `9.1`: - [fix: [ML] Anomaly Detection: Calendar event dialog modals missing title from announcement (#232972)](#232972) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Alexey Antonov","email":"alexwizp@gmail.com"},"sourceCommit":{"committedDate":"2025-08-27T10:54:20Z","message":"fix: [ML] Anomaly Detection: Calendar event dialog modals missing title from announcement (#232972)\n\nCloses: #216990\n\n**Description**\nDialog modal, flyout, field visible title should be announced for the\nusers, especially using assistive technology to know what dialog modal,\nflyout opened, what field is active and what is needed to enter in it.\n\n**Preconditions**\n1. Analytics -> Machine Learning -> Anomaly Detection -> Settings ->\nCalendar management -> Edit page.\n2. Use Screen Reader (NVDA).\n\n**Changes made**\n1. added required aria attributes \n\n**Notes for reviewers**\nSecond case (`Import events`) was already fixed within #229616","sha":"b9e73ce3852ad49b12cc75f5c10165c7d74ee4f8","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility",":ml","Feature:Anomaly Detection","release_note:skip","backport:prev-minor","v9.2.0"],"title":"fix: [ML] Anomaly Detection: Calendar event dialog modals missing title from announcement","number":232972,"url":"https://github.com/elastic/kibana/pull/232972","mergeCommit":{"message":"fix: [ML] Anomaly Detection: Calendar event dialog modals missing title from announcement (#232972)\n\nCloses: #216990\n\n**Description**\nDialog modal, flyout, field visible title should be announced for the\nusers, especially using assistive technology to know what dialog modal,\nflyout opened, what field is active and what is needed to enter in it.\n\n**Preconditions**\n1. Analytics -> Machine Learning -> Anomaly Detection -> Settings ->\nCalendar management -> Edit page.\n2. Use Screen Reader (NVDA).\n\n**Changes made**\n1. added required aria attributes \n\n**Notes for reviewers**\nSecond case (`Import events`) was already fixed within #229616","sha":"b9e73ce3852ad49b12cc75f5c10165c7d74ee4f8"}},"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/232972","number":232972,"mergeCommit":{"message":"fix: [ML] Anomaly Detection: Calendar event dialog modals missing title from announcement (#232972)\n\nCloses: #216990\n\n**Description**\nDialog modal, flyout, field visible title should be announced for the\nusers, especially using assistive technology to know what dialog modal,\nflyout opened, what field is active and what is needed to enter in it.\n\n**Preconditions**\n1. Analytics -> Machine Learning -> Anomaly Detection -> Settings ->\nCalendar management -> Edit page.\n2. Use Screen Reader (NVDA).\n\n**Changes made**\n1. added required aria attributes \n\n**Notes for reviewers**\nSecond case (`Import events`) was already fixed within #229616","sha":"b9e73ce3852ad49b12cc75f5c10165c7d74ee4f8"}}]}] BACKPORT--> Co-authored-by: Alexey Antonov <alexwizp@gmail.com>
kowalczyk-krzysztof
pushed a commit
to kowalczyk-krzysztof/kibana
that referenced
this pull request
Aug 30, 2025
…le from announcement (elastic#232972) Closes: elastic#216990 **Description** Dialog modal, flyout, field visible title should be announced for the users, especially using assistive technology to know what dialog modal, flyout opened, what field is active and what is needed to enter in it. **Preconditions** 1. Analytics -> Machine Learning -> Anomaly Detection -> Settings -> Calendar management -> Edit page. 2. Use Screen Reader (NVDA). **Changes made** 1. added required aria attributes **Notes for reviewers** Second case (`Import events`) was already fixed within elastic#229616
qn895
pushed a commit
to qn895/kibana
that referenced
this pull request
Sep 2, 2025
…le from announcement (elastic#232972) Closes: elastic#216990 **Description** Dialog modal, flyout, field visible title should be announced for the users, especially using assistive technology to know what dialog modal, flyout opened, what field is active and what is needed to enter in it. **Preconditions** 1. Analytics -> Machine Learning -> Anomaly Detection -> Settings -> Calendar management -> Edit page. 2. Use Screen Reader (NVDA). **Changes made** 1. added required aria attributes **Notes for reviewers** Second case (`Import events`) was already fixed within elastic#229616
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
16 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 manually fixes some remaining violations of the following rule that, for some reason, were not addressed in the previous PR: #227821
It applies the auto-fix for the newly introduced
@elastic/eui/require-aria-label-for-modalsrule. This rule ensures thatEUImodal components (EuiModalandEuiFlyout) include either an aria-label oraria-labelledbyprop to support screen reader accessibility. These attributes help users understand the purpose and content of modal dialogs.Changes Made
Identified the modal title/header element used within
EuiModalorEuiFlyout.Common elements include:
EuiFlyoutTitle,EuiModalTitle,EuiTitle,<h2>,<h3>, or other heading tags.Ensured the title element has an
id:If the header element lacked an
id, one was programmatically generated:For function components:
Imported
useGeneratedHtmlIdfrom@elastic/euiif not already present:Defined a unique ID before the
returnstatement:Applied the ID to the title element:
For class components:
Imported
htmlIdGeneratorfrom@elastic/euiif not already present:Defined a unique ID within the
render()method:Applied the ID to the title element:
Updated the
EuiModalorEuiFlyoutcomponent to include thearia-labelledbyattribute referencing the generated title ID: