[9.3] Fix @elastic/eui/require-aria-label-for-modals violations across kibana-data-discovery files (#259315)

examples/discover_customization_examples/moon.yml

@@ -27,6 +27,7 @@ dependsOn:
   - '@kbn/data-plugin'
   - '@kbn/saved-search-plugin'
   - '@kbn/content-management-utils'
+  - '@kbn/i18n'
 tags:
   - plugin
   - prod

examples/discover_customization_examples/public/plugin.tsx

@@ -9,6 +9,7 @@
 
 import type { IconType } from '@elastic/eui';
 import { EuiButton, EuiContextMenu, EuiFlexItem, EuiPopover } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import type { CoreSetup, CoreStart, Plugin } from '@kbn/core/public';
 import type { DeveloperExamplesSetup } from '@kbn/developer-examples-plugin/public';
 import type {
@@ -135,6 +136,10 @@ export class DiscoverCustomizationExamplesPlugin implements Plugin {
           return (
             <EuiFlexItem grow={false}>
               <EuiPopover
+                aria-label={i18n.translate(
+                  'discoverCustomizationExamples.logsViewSelectorAriaLabel',
+                  { defaultMessage: 'Logs view selector' }
+                )}
                 button={
                   <EuiButton
                     iconType="arrowDown"

examples/discover_customization_examples/tsconfig.json

@@ -15,6 +15,7 @@
     "@kbn/data-plugin",
     "@kbn/saved-search-plugin",
     "@kbn/content-management-utils",
+    "@kbn/i18n",
   ],
   "exclude": ["target/**/*"]
 }

src/platform/packages/shared/kbn-search-response-warnings/src/components/search_response_warnings/badge.tsx

@@ -30,6 +30,9 @@ export const SearchResponseWarningsBadge = (props: Props) => {
   return (
     <EuiPopover
       panelPaddingSize="none"
+      aria-label={i18n.translate('searchResponseWarnings.badgePopoverAriaLabel', {
+        defaultMessage: 'Search response warnings',
+      })}
       button={
         <EuiButton
           minWidth={0}

src/platform/packages/shared/kbn-search-response-warnings/src/components/search_response_warnings/view_details_popover.tsx

@@ -10,6 +10,7 @@
 import React, { useState } from 'react';
 import type { EuiContextMenuPanelDescriptor } from '@elastic/eui';
 import { EuiButton, EuiIcon, EuiLink, EuiContextMenu, EuiPopover } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { viewDetailsLabel } from './i18n_utils';
 import type { SearchResponseWarning } from '../../types';
 
@@ -70,6 +71,9 @@ export const ViewDetailsPopover = (props: Props) => {
   return (
     <EuiPopover
       id="ViewDetailsPopover"
+      aria-label={i18n.translate('searchResponseWarnings.viewDetailsPopoverAriaLabel', {
+        defaultMessage: 'View details',
+      })}
       button={
         props.displayAsLink ? (
           <EuiLink

src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.tsx

@@ -178,6 +178,9 @@ export function FieldTypeFilter<T extends FieldListItem = DataViewField>({
   return (
     <EuiPopover
       id="unifiedFieldTypeFilter"
+      aria-label={i18n.translate('unifiedFieldList.fieldTypeFilter.popoverAriaLabel', {
+        defaultMessage: 'Field type filter',
+      })}
       panelProps={{ css: { width: euiTheme.base * 18 } }}
       panelPaddingSize="none"
       anchorPosition="rightUp"

src/platform/packages/shared/kbn-unified-tabs/src/components/tab_menu/tab_menu.tsx

@@ -88,6 +88,7 @@ export const TabMenu: React.FC<TabMenuProps> = ({
   return (
     <EuiPopover
       id={contextMenuPopoverId}
+      aria-label={menuButtonLabel}
       isOpen={isPopoverOpen}
       panelPaddingSize="none"
       hasArrow={false}

src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar_menu/tabs_bar_menu.tsx

@@ -128,6 +128,7 @@ export const TabsBarMenu: React.FC<TabsBarMenuProps> = React.memo(
       <EuiPopover
         data-test-subj="unifiedTabs_tabsBarMenu"
         id={contextMenuPopoverId}
+        aria-label={menuButtonLabel}
         isOpen={isPopoverOpen}
         closePopover={closePopover}
         panelPaddingSize="none"

src/platform/plugins/shared/data_view_editor/public/components/form_fields/title_docs_popover.tsx

@@ -41,6 +41,9 @@ export const TitleDocsPopover: React.FC = () => {
       display="inlineBlock"
       panelPaddingSize="none"
       anchorPosition="upRight"
+      aria-label={i18n.translate('indexPatternEditor.titleDocsPopover.ariaLabel', {
+        defaultMessage: 'Index pattern examples',
+      })}
       closePopover={() => setIsOpen(false)}
     >
       <EuiPopoverTitle paddingSize="s">

src/platform/plugins/shared/data_view_field_editor/public/components/preview/image_preview_modal.tsx

@@ -10,6 +10,7 @@
 import React from 'react';
 import { css } from '@emotion/react';
 import { EuiModal, EuiModalBody, type UseEuiTheme } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
 
 /**
@@ -35,7 +36,12 @@ export const ImagePreviewModal = ({ imgHTML, closeModal }: Props) => {
   const styles = useMemoCss(componentStyles);
 
   return (
-    <EuiModal onClose={closeModal}>
+    <EuiModal
+      aria-label={i18n.translate('indexPatternFieldEditor.imagePreviewModal.ariaLabel', {
+        defaultMessage: 'Image preview',
+      })}
+      onClose={closeModal}
+    >
       <EuiModalBody>
         <div
           css={styles.previewImageModal}

src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/index_header/index_header.tsx

@@ -94,6 +94,12 @@ export const IndexHeader: FC<PropsWithChildren<IndexHeaderProps>> = ({
         isOpen={isOpen}
         closePopover={() => setIsOpen(false)}
         panelPaddingSize="none"
+        aria-label={i18n.translate(
+          'indexPatternManagement.editDataView.moreActionsPopoverAriaLabel',
+          {
+            defaultMessage: 'More actions',
+          }
+        )}
         button={
           <EuiButtonIcon
             iconType="boxesVertical"

src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/tabs/tabs.tsx

@@ -315,6 +315,7 @@ export const Tabs: React.FC<TabsProps> = ({
                   <EuiPopover
                     anchorPosition="downCenter"
                     data-test-subj="indexedFieldTypeFilterDropdown-popover"
+                    aria-label={filterAriaLabel}
                     button={
                       <EuiFilterButton
                         aria-label={filterAriaLabel}
@@ -349,6 +350,7 @@ export const Tabs: React.FC<TabsProps> = ({
                   <EuiPopover
                     anchorPosition="downCenter"
                     data-test-subj="schemaFieldTypeFilterDropdown-popover"
+                    aria-label={schemaAriaLabel}
                     button={
                       <EuiFilterButton
                         aria-label={schemaAriaLabel}
@@ -429,6 +431,7 @@ export const Tabs: React.FC<TabsProps> = ({
                 <EuiPopover
                   anchorPosition="downCenter"
                   data-test-subj="scriptedFieldLanguageFilterDropdown-popover"
+                  aria-label={scriptedFieldAriaLabel}
                   button={
                     <EuiFilterButton
                       aria-label={scriptedFieldAriaLabel}

src/platform/plugins/shared/data_view_management/public/components/field_editor/components/scripting_help/help_flyout.tsx

@@ -9,6 +9,7 @@
 
 import React from 'react';
 import { EuiFlyout, EuiFlyoutBody, EuiTabbedContent } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { ScriptingSyntax } from './scripting_syntax';
@@ -59,7 +60,14 @@ export const ScriptingHelpFlyout: React.FC<ScriptingHelpFlyoutProps> = ({
   ];
 
   return isVisible ? (
-    <EuiFlyout onClose={onClose} data-test-subj="scriptedFieldsHelpFlyout">
+    <EuiFlyout
+      onClose={onClose}
+      data-test-subj="scriptedFieldsHelpFlyout"
+      aria-label={i18n.translate(
+        'indexPatternManagement.fieldEditor.scriptingHelpFlyout.ariaLabel',
+        { defaultMessage: 'Help' }
+      )}
+    >
       <EuiFlyoutBody>
         <EuiTabbedContent tabs={tabs} initialSelectedTab={tabs[0]} />
       </EuiFlyoutBody>

src/platform/plugins/shared/discover/public/application/main/components/no_results/no_results_suggestions/syntax_suggestions_popover.tsx

@@ -71,6 +71,7 @@ export const SyntaxSuggestionsPopover: React.FC<SyntaxSuggestionsPopoverProps> =
       isOpen={isOpen}
       display="inlineBlock"
       panelPaddingSize="none"
+      aria-label={title}
       closePopover={() => setIsOpen(false)}
       initialFocus="#querySyntaxBasicTableId"
     >

src/platform/plugins/shared/discover/public/application/main/components/top_nav/solutions_view_badge.tsx

@@ -55,6 +55,7 @@ export const SolutionsViewBadge: FunctionComponent<{ badgeText: string }> = ({ b
   return (
     <EuiThemeProvider colorMode={theme.darkMode ? 'dark' : 'light'}>
       <EuiPopover
+        aria-label={badgeText}
         button={
           <EuiBadge
             color="hollow"

src/platform/plugins/shared/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx

@@ -199,6 +199,9 @@ function FlyoutActionsPopover({
   return (
     <EuiPopover
       id="docViewerMoreFlyoutActions"
+      aria-label={i18n.translate('discover.grid.tableRow.moreFlyoutActionsPopoverAriaLabel', {
+        defaultMessage: 'More actions',
+      })}
       button={button}
       isOpen={isOpen}
       closePopover={closePopover}

src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_logs_overview/sub_components/hover_popover_action.tsx

@@ -107,6 +107,10 @@ export const HoverActionPopover = ({
         panelPaddingSize="s"
         panelStyle={{ minWidth: '24px' }}
         display={display}
+        aria-label={i18n.translate(
+          'unifiedDocViewer.observability.traces.details.hoverPopover.ariaLabel',
+          { defaultMessage: 'Field value details' }
+        )}
       >
         {(title as string) && (
           <EuiPopoverTitle