Auto-fix violations of the @elastic/eui/require-aria-label-for-modals ESLint rule (Step 2) #227821

alexwizp · 2025-07-14T13:08:55Z

Caution

⚠️ Changes were made by GenAI. Please review carefully.

Summary

This PR 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

Identified the modal title/header element used within EuiModal or EuiFlyout.
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 useGeneratedHtmlId from @elastic/eui if not already present:
```
import { useGeneratedHtmlId } from '@elastic/eui';
```
  - Defined a unique ID before the return statement:
```
const modalTitleId = useGeneratedHtmlId();
```
  - Applied the ID to the title element:
```
<EuiModalTitle id={modalTitleId}>Title</EuiModalTitle>
```
- For class components:
  - Imported htmlIdGenerator from @elastic/eui if not already present:
```
import { htmlIdGenerator } from '@elastic/eui';
```
  - Defined a unique ID within the render() method:
```
const modalTitleId = htmlIdGenerator()('modalTitle');
```
  - Applied the ID to the title element:
```
<EuiModalTitle id={modalTitleId}>Title</EuiModalTitle>
```
Updated the EuiModal or EuiFlyout component to include the aria-labelledby attribute referencing the generated title ID:
```
<EuiModal aria-labelledby={modalTitleId} />
```

… ESLint rule (Step 2)

…no-cache --fix'

kibanamachine · 2025-07-24T15:06:24Z

Starting backport for target branches: 9.1

https://github.com/elastic/kibana/actions/runs/16500615336

kibanamachine · 2025-07-24T15:12:39Z

💔 All backports failed

Status	Branch	Result
❌	9.1	Backport failed because of merge conflicts You might need to backport the following PRs to 9.1: - Auto-fix violations of the @elastic/eui/require-aria-label-for-modals ESLint rule (#227623)

Manual backport

To create the backport manually run:

node scripts/backport --pr 227821

Questions ?

Please refer to the Backport tool documentation

alexwizp · 2025-07-24T15:26:19Z

💚 All backports created successfully

Status	Branch	Result
✅	9.1

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

… ESLint rule (Step 2) (elastic#227821) > \[!CAUTION] > ⚠️ Changes were made by GenAI. Please review carefully. ## Summary This PR 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} /> ``` --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit a3b63e3) # Conflicts: # x-pack/platform/plugins/private/index_lifecycle_management/public/extend_index_management/components/add_lifecycle_confirm_modal.tsx # x-pack/platform/plugins/shared/ml/public/application/components/model_snapshots/revert_model_snapshot_flyout/revert_model_snapshot_flyout.tsx

… ESLint rule (Step 2) (elastic#227821) > \[!CAUTION] > ⚠️ Changes were made by GenAI. Please review carefully. ## Summary This PR 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} /> ``` --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

kibanamachine · 2025-07-25T15:50:28Z

Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync.
cc: @alexwizp

…modals ESLint rule (Step 2) (#227821) (#229342) # 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 (Step 2) (#227821)](#227821)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)

… ESLint rule (Step 2) (elastic#227821) > \[!CAUTION] > ⚠️ Changes were made by GenAI. Please review carefully. ## Summary This PR 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} /> ``` --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

…nt rule (Step 3) (#229616) ## 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-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} /> ```  --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

…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} /> ```  --------- 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

…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)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)

…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} /> ```  --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

… ESLint rule (Step 2) (elastic#227821) > \[!CAUTION] > ⚠️ Changes were made by GenAI. Please review carefully. ## Summary This PR 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} /> ``` --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

…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} /> ```  --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

alexwizp force-pushed the jul-14 branch from 844d3bf to 51002d9 Compare July 14, 2025 13:33

Auto-fix violations of the @elastic/eui/require-aria-label-for-modals…

990b13c

… ESLint rule (Step 2)

alexwizp force-pushed the jul-14 branch from 3fb4f79 to 990b13c Compare July 14, 2025 13:48

alexwizp and others added 7 commits July 14, 2025 21:03

fix linter

3f70f99

fix linter

32ecfb8

[CI] Auto-commit changed files from 'node scripts/eslint_all_files --…

a75568d

…no-cache --fix'

fix JEST

4996e14

Merge branch 'main' into jul-14

ec69b21

fix JEST

a6fcb4a

revert wrong change

a1da3cc

alexwizp marked this pull request as ready for review July 16, 2025 13:37

alexwizp requested review from a team as code owners July 16, 2025 13:38

alexwizp requested a review from a team July 16, 2025 13:38

alexwizp requested review from a team as code owners July 16, 2025 13:38

alexwizp merged commit a3b63e3 into elastic:main Jul 24, 2025
12 checks passed

kibanamachine added the v9.2.0 label Jul 24, 2025

alexwizp mentioned this pull request Jul 24, 2025

[9.1] Auto-fix violations of the @elastic/eui/require-aria-label-for-modals ESLint rule (Step 2) (#227821) #229342

Merged

kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Jul 25, 2025

kibanamachine added v9.1.0 and removed backport missing Added to PRs automatically when the are determined to be missing a backport. labels Jul 28, 2025

alexwizp mentioned this pull request Jul 28, 2025

Fix violations of the @elastic/eui/require-aria-label-for-modals ESLint rule (Step 3) #229616

Merged

mistic added v9.1.1 and removed v9.1.0 labels Jul 29, 2025

bhavyarm mentioned this pull request Jul 30, 2025

[Security:Cases] Add field, template and observable type flyouts announced incorrectly #229981

Closed

alexwizp mentioned this pull request Aug 1, 2025

[Security:Assets:Fleet:View agent page]Modal dialogs, flyouts missing title from announcement #204729

Closed

alexwizp mentioned this pull request Aug 6, 2025

[Observability:SLOs:Create page]Flyouts, dialogs missing title from announcement #211556

Closed

This was referenced Aug 26, 2025

[Observability:Synthetics:Settings]Flyout missing title from announcement #221353

Closed

[Platform:StackManagement:IndexLifecyclePolicies:Edit Policy page]Flyout missing title from announcement #218990

Closed

janmonschke mentioned this pull request Oct 15, 2025

[Security:Cases:Settings page]Modal dialogs, flyouts missing title from announcement #205697

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Auto-fix violations of the @elastic/eui/require-aria-label-for-modals ESLint rule (Step 2) #227821

Auto-fix violations of the @elastic/eui/require-aria-label-for-modals ESLint rule (Step 2) #227821

Uh oh!

alexwizp commented Jul 14, 2025 •

edited by kibanamachine

Loading

Uh oh!

Uh oh!

kibanamachine commented Jul 24, 2025

Uh oh!

kibanamachine commented Jul 24, 2025

Uh oh!

alexwizp commented Jul 24, 2025

Uh oh!

kibanamachine commented Jul 25, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

20 participants

Auto-fix violations of the @elastic/eui/require-aria-label-for-modals ESLint rule (Step 2) #227821

Auto-fix violations of the @elastic/eui/require-aria-label-for-modals ESLint rule (Step 2) #227821

Uh oh!

Conversation

alexwizp commented Jul 14, 2025 • edited by kibanamachine Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes Made

Uh oh!

Uh oh!

kibanamachine commented Jul 24, 2025

Uh oh!

kibanamachine commented Jul 24, 2025

💔 All backports failed

Manual backport

Questions ?

Uh oh!

alexwizp commented Jul 24, 2025

💚 All backports created successfully

Questions ?

Uh oh!

kibanamachine commented Jul 25, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

20 participants

alexwizp commented Jul 14, 2025 •

edited by kibanamachine

Loading