[9.2] a11y: Fix @elastic/eui/require-aria-label-for-modals violations across 43 presentation/maps/canvas files (#259314) (#260758)

# Backport

This will backport the following commits from `main` to `9.2`:
- [a11y: Fix `@elastic/eui/require-aria-label-for-modals` violations
across 43 presentation/maps/canvas files
(#259314)](#259314)

<!--- Backport version: 10.2.0 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT
[{"author":{"name":"Copilot","email":"198982749+Copilot@users.noreply.github.com"},"sourceCommit":{"committedDate":"2026-03-31T19:09:22Z","message":"a11y:
Fix `@elastic/eui/require-aria-label-for-modals` violations across 43
presentation/maps/canvas files (#259314)\n\nCloses:
https://github.com/elastic/kibana/issues/259305\n\n43 EUI overlay
components (`EuiModal`, `EuiFlyout`,
`EuiPopover`,\n`EuiWrappingPopover`) were missing required `aria-label`
or\n`aria-labelledby` props, failing WCAG 2.2 AA screen-reader
accessibility\nrequirements.\n\n## Approach\n\n**EuiModal / EuiFlyout**
— preferred `aria-labelledby` pattern
using\n`useGeneratedHtmlId`:\n```tsx\nconst modalTitleId =
useGeneratedHtmlId();\n// ...\n<EuiModal aria-labelledby={modalTitleId}
...>\n <EuiModalHeader>\n <EuiModalHeaderTitle
id={modalTitleId}>...</EuiModalHeaderTitle>\n```\n\n**EuiPopover /
EuiWrappingPopover** — `aria-label` with i18n
string:\n```tsx\n<EuiPopover\n
aria-label={i18n.translate('xpack.maps.tileErrorsList.popoverAriaLabel',
{\n defaultMessage: 'Tile errors',\n })}\n ...\n>\n```\n\n## Scope\n\n-
**6 modal/flyout components**:
`delete_grid_section_modal`,\n`labs_flyout`, `asset_manager`,
`keyboard_shortcuts_doc`,\n`saved_elements_modal`, `custom_icon_modal`
(class component — used\n`aria-label` with title prop)\n- **37 popover
components**: reused existing label variables\n(`displayName`,
`strings.getMoreActionsLabel()`, etc.) where available;\nadded new
`i18n.translate()` calls otherwise\n- Added `i18n` and
`useGeneratedHtmlId` imports only where needed\n\n\n---\n\n📱 Kick off
Copilot coding agent tasks wherever you are with
[GitHub\nMobile](https://gh.io/cca-mobile-docs), available on iOS and
Android.\n\n---------\n\nCo-authored-by: copilot-swe-agent[bot]
<198982749+Copilot@users.noreply.github.com>\nCo-authored-by: Copilot
<223556219+Copilot@users.noreply.github.com>\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by:
Alexey Antonov <alexwizp@gmail.com>\nCo-authored-by: alexwizp
<20072247+alexwizp@users.noreply.github.com>","sha":"93c442574a5ea72f599daa9ebca41a4b71601544","branchLabelMapping":{"^v9.4.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","💝community","backport:version","v9.4.0","v9.3.3","v9.2.8","a11y:agent-pr"],"title":"a11y:
Fix `@elastic/eui/require-aria-label-for-modals` violations across 43
presentation/maps/canvas
files","number":259314,"url":"https://github.com/elastic/kibana/pull/259314","mergeCommit":{"message":"a11y:
Fix `@elastic/eui/require-aria-label-for-modals` violations across 43
presentation/maps/canvas files (#259314)\n\nCloses:
https://github.com/elastic/kibana/issues/259305\n\n43 EUI overlay
components (`EuiModal`, `EuiFlyout`,
`EuiPopover`,\n`EuiWrappingPopover`) were missing required `aria-label`
or\n`aria-labelledby` props, failing WCAG 2.2 AA screen-reader
accessibility\nrequirements.\n\n## Approach\n\n**EuiModal / EuiFlyout**
— preferred `aria-labelledby` pattern
using\n`useGeneratedHtmlId`:\n```tsx\nconst modalTitleId =
useGeneratedHtmlId();\n// ...\n<EuiModal aria-labelledby={modalTitleId}
...>\n <EuiModalHeader>\n <EuiModalHeaderTitle
id={modalTitleId}>...</EuiModalHeaderTitle>\n```\n\n**EuiPopover /
EuiWrappingPopover** — `aria-label` with i18n
string:\n```tsx\n<EuiPopover\n
aria-label={i18n.translate('xpack.maps.tileErrorsList.popoverAriaLabel',
{\n defaultMessage: 'Tile errors',\n })}\n ...\n>\n```\n\n## Scope\n\n-
**6 modal/flyout components**:
`delete_grid_section_modal`,\n`labs_flyout`, `asset_manager`,
`keyboard_shortcuts_doc`,\n`saved_elements_modal`, `custom_icon_modal`
(class component — used\n`aria-label` with title prop)\n- **37 popover
components**: reused existing label variables\n(`displayName`,
`strings.getMoreActionsLabel()`, etc.) where available;\nadded new
`i18n.translate()` calls otherwise\n- Added `i18n` and
`useGeneratedHtmlId` imports only where needed\n\n\n---\n\n📱 Kick off
Copilot coding agent tasks wherever you are with
[GitHub\nMobile](https://gh.io/cca-mobile-docs), available on iOS and
Android.\n\n---------\n\nCo-authored-by: copilot-swe-agent[bot]
<198982749+Copilot@users.noreply.github.com>\nCo-authored-by: Copilot
<223556219+Copilot@users.noreply.github.com>\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by:
Alexey Antonov <alexwizp@gmail.com>\nCo-authored-by: alexwizp
<20072247+alexwizp@users.noreply.github.com>","sha":"93c442574a5ea72f599daa9ebca41a4b71601544"}},"sourceBranch":"main","suggestedTargetBranches":["9.3","9.2"],"targetPullRequestStates":[{"branch":"main","label":"v9.4.0","branchLabelMappingKey":"^v9.4.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/259314","number":259314,"mergeCommit":{"message":"a11y:
Fix `@elastic/eui/require-aria-label-for-modals` violations across 43
presentation/maps/canvas files (#259314)\n\nCloses:
https://github.com/elastic/kibana/issues/259305\n\n43 EUI overlay
components (`EuiModal`, `EuiFlyout`,
`EuiPopover`,\n`EuiWrappingPopover`) were missing required `aria-label`
or\n`aria-labelledby` props, failing WCAG 2.2 AA screen-reader
accessibility\nrequirements.\n\n## Approach\n\n**EuiModal / EuiFlyout**
— preferred `aria-labelledby` pattern
using\n`useGeneratedHtmlId`:\n```tsx\nconst modalTitleId =
useGeneratedHtmlId();\n// ...\n<EuiModal aria-labelledby={modalTitleId}
...>\n <EuiModalHeader>\n <EuiModalHeaderTitle
id={modalTitleId}>...</EuiModalHeaderTitle>\n```\n\n**EuiPopover /
EuiWrappingPopover** — `aria-label` with i18n
string:\n```tsx\n<EuiPopover\n
aria-label={i18n.translate('xpack.maps.tileErrorsList.popoverAriaLabel',
{\n defaultMessage: 'Tile errors',\n })}\n ...\n>\n```\n\n## Scope\n\n-
**6 modal/flyout components**:
`delete_grid_section_modal`,\n`labs_flyout`, `asset_manager`,
`keyboard_shortcuts_doc`,\n`saved_elements_modal`, `custom_icon_modal`
(class component — used\n`aria-label` with title prop)\n- **37 popover
components**: reused existing label variables\n(`displayName`,
`strings.getMoreActionsLabel()`, etc.) where available;\nadded new
`i18n.translate()` calls otherwise\n- Added `i18n` and
`useGeneratedHtmlId` imports only where needed\n\n\n---\n\n📱 Kick off
Copilot coding agent tasks wherever you are with
[GitHub\nMobile](https://gh.io/cca-mobile-docs), available on iOS and
Android.\n\n---------\n\nCo-authored-by: copilot-swe-agent[bot]
<198982749+Copilot@users.noreply.github.com>\nCo-authored-by: Copilot
<223556219+Copilot@users.noreply.github.com>\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by:
Alexey Antonov <alexwizp@gmail.com>\nCo-authored-by: alexwizp
<20072247+alexwizp@users.noreply.github.com>","sha":"93c442574a5ea72f599daa9ebca41a4b71601544"}},{"branch":"9.3","label":"v9.3.3","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.2","label":"v9.2.8","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

---------

Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>

Author: alexwizp

examples/embeddable_examples/public/app/presentation_container_example/components/add_button.tsx

@@ -10,6 +10,7 @@
 import type { ReactElement } from 'react';
 import React, { useEffect, useState } from 'react';
 import { EuiButton, EuiContextMenuItem, EuiContextMenuPanel, EuiPopover } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import type { UiActionsStart } from '@kbn/ui-actions-plugin/public';
 import { ADD_PANEL_TRIGGER } from '@kbn/ui-actions-plugin/public';
 import type { PublishingSubject, ViewMode } from '@kbn/presentation-publishing';
@@ -79,6 +80,9 @@ export function AddButton({ pageApi, uiActions }: { pageApi: unknown; uiActions:
       }}
       panelPaddingSize="none"
       anchorPosition="downLeft"
+      aria-label={i18n.translate('embeddableExamples.addPanelPopover.ariaLabel', {
+        defaultMessage: 'Add panel',
+      })}
     >
       <EuiContextMenuPanel items={items} />
     </EuiPopover>

examples/grid_example/public/grid_layout_options.tsx

@@ -43,6 +43,9 @@ export const GridLayoutOptions = ({
       }
       isOpen={isSettingsPopoverOpen}
       closePopover={() => setIsSettingsPopoverOpen(false)}
+      aria-label={i18n.translate('examples.gridExample.settingsPopover.ariaLabel', {
+        defaultMessage: 'Layout settings',
+      })}
     >
       <>
         <EuiFormRow

src/platform/packages/private/kbn-grid-layout/grid/grid_section/delete_grid_section_modal.tsx

@@ -17,6 +17,7 @@ import {
   EuiModalFooter,
   EuiModalHeader,
   EuiModalHeaderTitle,
+  useGeneratedHtmlId,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
@@ -32,16 +33,18 @@ export const DeleteGridSectionModal = ({
   setDeleteModalVisible: (visible: boolean) => void;
 }) => {
   const { gridLayoutStateManager } = useGridLayoutContext();
+  const modalTitleId = useGeneratedHtmlId();
 
   return (
     <EuiModal
       data-test-subj={`kbnGridLayoutDeleteSectionModal-${sectionId}`}
+      aria-labelledby={modalTitleId}
       onClose={() => {
         setDeleteModalVisible(false);
       }}
     >
       <EuiModalHeader>
-        <EuiModalHeaderTitle>
+        <EuiModalHeaderTitle id={modalTitleId}>
           {i18n.translate('kbnGridLayout.deleteGridSectionModal.title', {
             defaultMessage: 'Delete section',
           })}

src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx

@@ -477,6 +477,7 @@ export const PresentationPanelHoverActions = ({
                 isOpen={isContextMenuOpen}
                 className={contextMenuClasses}
                 closePopover={onClose}
+                aria-label={getContextMenuAriaLabel(title, index)}
                 data-test-subj={
                   isContextMenuOpen
                     ? 'embeddablePanelContextMenuOpen'

src/platform/plugins/shared/dashboard/public/dashboard_actions/filters_notification_popover.tsx

@@ -110,6 +110,7 @@ export function FiltersNotificationPopover({ api }: { api: FiltersNotificationAc
         }
       }}
       anchorPosition="upCenter"
+      aria-label={displayName}
     >
       <EuiForm
         component="div"

src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx

@@ -296,6 +296,7 @@ export function InternalDashboardTopNav({
               isOpen={isPopoverOpen}
               closePopover={() => setIsPopoverOpen(false)}
               panelStyle={{ maxWidth: 250 }}
+              aria-label={dashboardManagedBadge.getBadgeAriaLabel()}
             >
               <FormattedMessage
                 id="dashboard.managedContentPopoverButton"

src/platform/plugins/shared/inspector/public/ui/inspector_view_chooser.tsx

@@ -8,6 +8,7 @@
  */
 
 import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import {
@@ -117,6 +118,9 @@ export class InspectorViewChooser extends Component<Props, State> {
         panelPaddingSize="none"
         anchorPosition="downRight"
         repositionOnScroll
+        aria-label={i18n.translate('inspector.viewChooser.popover.ariaLabel', {
+          defaultMessage: 'Inspector view selector',
+        })}
       >
         <EuiContextMenuPanel items={views.map(this.renderView)} />
       </EuiPopover>

src/platform/plugins/shared/presentation_util/public/components/labs/labs_flyout.tsx

@@ -20,6 +20,7 @@ import {
   EuiSpacer,
   EuiText,
   EuiTitle,
+  useGeneratedHtmlId,
 } from '@elastic/eui';
 import type { ReactNode } from 'react';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
@@ -64,6 +65,7 @@ export const getOverridenCount = (projects: Record<ProjectID, Project>) =>
 export const LabsFlyout = (props: Props) => {
   const { solutions, onEnabledCountChange = () => {}, onClose } = props;
   const labsService = useMemo(() => getPresentationLabsService(), []);
+  const flyoutTitleId = useGeneratedHtmlId();
 
   const [projects, setProjects] = useState(labsService.getProjects());
   const [overrideCount, setOverrideCount] = useState(getOverridenCount(projects));
@@ -134,10 +136,11 @@ export const LabsFlyout = (props: Props) => {
       onClose={onClose}
       hideCloseButton={true}
       maskProps={{ headerZindexLocation: 'below' }}
+      aria-labelledby={flyoutTitleId}
     >
       <EuiFlyoutHeader hasBorder>
         <EuiTitle size="m">
-          <h2>
+          <h2 id={flyoutTitleId}>
             <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
               <EuiFlexItem grow={false}>
                 <EuiIcon type="beaker" size="l" />

src/platform/plugins/shared/unified_search/public/filters_builder/filter_item/actions/minimised_actions.tsx

@@ -33,7 +33,13 @@ export const MinimisedFilterItemActions: FC<FilterItemActionsProps> = (props) =>
   );
 
   return (
-    <EuiPopover ownFocus={false} button={button} isOpen={isPopoverOpen} closePopover={closePopover}>
+    <EuiPopover
+      ownFocus={false}
+      button={button}
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+      aria-label={strings.getMoreActionsLabel()}
+    >
       <FilterItemActions {...props} minimizePaddings={true} />
     </EuiPopover>
   );

src/platform/plugins/shared/unified_search/public/query_string_input/add_filter_popover.tsx

@@ -92,6 +92,7 @@ const AddFilterPopoverComponent = React.memo(function AddFilterPopover({
         initialFocus=".filterEditor__hiddenItem"
         ownFocus
         repositionOnScroll
+        aria-label={strings.getAddFilterButtonLabel()}
       >
         <FilterEditorWrapper
           indexPatterns={indexPatterns}