[9.2] fix violations of @elastic/eui/no-unnamed-interactive-element (#237317)

src/core/packages/chrome/browser-internal/src/ui/project/breadcrumbs.tsx

@@ -12,6 +12,7 @@ import classNames from 'classnames';
 import React from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import type { Observable } from 'rxjs';
+import { i18n } from '@kbn/i18n';
 import type { ChromeBreadcrumb } from '@kbn/core-chrome-browser';
 
 interface Props {
@@ -48,6 +49,9 @@ export function Breadcrumbs({ breadcrumbs$ }: Props) {
     <EuiBreadcrumbs
       breadcrumbs={crumbs}
       data-test-subj="breadcrumbs"
+      aria-label={i18n.translate('core.ui.chrome.breadcrumbs.ariaLabel', {
+        defaultMessage: 'Breadcrumbs',
+      })}
       // reduce number of visible breadcrumbs due to increased max-width of the root breadcrumbs
       responsive={{
         xs: 1,

src/platform/packages/private/kbn-esql-editor/src/editor_footer/feedback_component.tsx

@@ -15,21 +15,20 @@ import { FEEDBACK_LINK } from '@kbn/esql-utils';
 
 export function SubmitFeedbackComponent({ isSpaceReduced }: { isSpaceReduced?: boolean }) {
   const { euiTheme } = useEuiTheme();
+  const feedbackLabel = i18n.translate('esqlEditor.query.feedback', {
+    defaultMessage: 'Feedback',
+  });
   return (
     <>
       {isSpaceReduced && (
         <EuiFlexItem grow={false}>
-          <EuiToolTip
-            position="top"
-            content={i18n.translate('esqlEditor.query.feedback', {
-              defaultMessage: 'Feedback',
-            })}
-          >
+          <EuiToolTip position="top" content={feedbackLabel} disableScreenReaderOutput>
             <EuiButtonIcon
               href={FEEDBACK_LINK}
               iconType="editorComment"
               target="_blank"
               data-test-subj="ESQLEditor-feedback-link"
+              aria-label={feedbackLabel}
             />
           </EuiToolTip>
         </EuiFlexItem>

src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx

@@ -54,26 +54,24 @@ export function QueryHistoryAction({
   isHistoryOpen: boolean;
   isSpaceReduced?: boolean;
 }) {
+  const toggleHistoryLabel = isHistoryOpen
+    ? i18n.translate('esqlEditor.query.hideQueriesLabel', {
+        defaultMessage: 'Hide recent queries',
+      })
+    : i18n.translate('esqlEditor.query.showQueriesLabel', {
+        defaultMessage: 'Show recent queries',
+      });
+
   return (
     <>
       {isSpaceReduced && (
         <EuiFlexItem grow={false} data-test-subj="ESQLEditor-toggle-query-history-icon">
-          <EuiToolTip
-            position="top"
-            content={
-              isHistoryOpen
-                ? i18n.translate('esqlEditor.query.hideQueriesLabel', {
-                    defaultMessage: 'Hide recent queries',
-                  })
-                : i18n.translate('esqlEditor.query.showQueriesLabel', {
-                    defaultMessage: 'Show recent queries',
-                  })
-            }
-          >
+          <EuiToolTip position="top" content={toggleHistoryLabel} disableScreenReaderOutput>
             <EuiButtonIcon
               onClick={toggleHistory}
               iconType="clockCounter"
               data-test-subj="ESQLEditor-hide-queries-link"
+              aria-label={toggleHistoryLabel}
             />
           </EuiToolTip>
         </EuiFlexItem>
@@ -91,13 +89,7 @@ export function QueryHistoryAction({
             iconType="clockCounter"
             data-test-subj="ESQLEditor-toggle-query-history-button"
           >
-            {isHistoryOpen
-              ? i18n.translate('esqlEditor.query.hideQueriesLabel', {
-                  defaultMessage: 'Hide recent queries',
-                })
-              : i18n.translate('esqlEditor.query.showQueriesLabel', {
-                  defaultMessage: 'Show recent queries',
-                })}
+            {toggleHistoryLabel}
           </EuiButtonEmpty>
         </EuiFlexItem>
       )}

src/platform/packages/shared/cloud/connection_details/components/fancy_select/fancy_select.tsx

@@ -8,6 +8,7 @@
  */
 
 import * as React from 'react';
+import { i18n } from '@kbn/i18n';
 import { EuiSuperSelect, EuiText, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui';
 import type { FancySelectOption } from './types';
 
@@ -20,6 +21,12 @@ export interface FancySelectProps {
 export const FancySelect: React.FC<FancySelectProps> = ({ value, options, onChange }) => {
   return (
     <EuiSuperSelect
+      aria-label={i18n.translate(
+        'cloud.connectionDetails.components.fancySelect.superSelect.ariaLabel',
+        {
+          defaultMessage: 'Fancy options',
+        }
+      )}
       valueOfSelected={value}
       options={options.map((option) => ({
         value: option.id,

src/platform/packages/shared/cloud/connection_details/tabs/endpoints_tab/rows/cloud_id_row/label.tsx

@@ -45,6 +45,12 @@ export const Label: React.FC<{ learnMoreUrl?: string }> = ({ learnMoreUrl }) =>
               onClick={() => {
                 setIsPopoverOpen((x) => !x);
               }}
+              aria-label={i18n.translate(
+                'cloud.connectionDetails.tab.endpoints.cloudIdField.helpButtonAriaLabel',
+                {
+                  defaultMessage: 'Cloud ID help',
+                }
+              )}
             />
           }
           isOpen={isPopoverOpen}

src/platform/packages/shared/cloud/deployment_details/deployment_details_cloudid_input.tsx

@@ -50,6 +50,9 @@ const Label: FC<{ learnMoreUrl: string }> = ({ learnMoreUrl }) => {
               onClick={() => {
                 setIsPopoverOpen(true);
               }}
+              aria-label={i18n.translate('cloud.deploymentDetails.cloudIdHelpButton.ariaLabel', {
+                defaultMessage: 'Show Cloud ID help',
+              })}
             />
           }
           isOpen={isPopoverOpen}
@@ -89,7 +92,15 @@ export const DeploymentDetailsCloudIdInput: FC<{ cloudId: string; learnMoreUrl:
         <EuiFlexItem grow={false}>
           <EuiCopy textToCopy={cloudId}>
             {(copy) => (
-              <EuiButtonIcon onClick={copy} iconType="copyClipboard" display="base" size="m" />
+              <EuiButtonIcon
+                onClick={copy}
+                iconType="copyClipboard"
+                display="base"
+                size="m"
+                aria-label={i18n.translate('cloud.deploymentDetails.copyCloudIdButton.ariaLabel', {
+                  defaultMessage: 'Copy Cloud ID',
+                })}
+              />
             )}
           </EuiCopy>
         </EuiFlexItem>

src/platform/packages/shared/dashboards/dashboards-selector/components/dashboards_selector.tsx

@@ -6,6 +6,7 @@
  * your election, the "Elastic License 2.0", the "GNU Affero General Public
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
+import { i18n } from '@kbn/i18n';
 import type { ContentManagementPublicStart } from '@kbn/content-management-plugin/public';
 import type { EuiComboBoxOptionOption } from '@elastic/eui';
 import { EuiComboBox } from '@elastic/eui';
@@ -145,6 +146,12 @@ export function DashboardsSelector({
       options={dashboardList}
       selectedOptions={selectedDashboards}
       placeholder={placeholder}
+      aria-label={
+        placeholder ??
+        i18n.translate('dashboardsSelector.comboBox.ariaLabel', {
+          defaultMessage: 'Dashboards',
+        })
+      }
       onChange={internalOnChange}
       onFocus={handleComboBoxFocus}
       onSearchChange={onSearchChange}

src/platform/packages/shared/dashboards/dashboards-selector/tsconfig.json

@@ -19,5 +19,6 @@
     "@kbn/content-management-plugin",
     "@kbn/content-management-utils",
     "@kbn/core",
+    "@kbn/i18n",
   ]
 }

src/platform/packages/shared/kbn-visualization-ui-components/components/icon_select.tsx

@@ -23,6 +23,10 @@ export type IconSet<T> = Array<{
   shouldRotate?: boolean;
 }>;
 
+const iconDecorationLabel = i18n.translate('visualizationUiComponents.iconSelect.label', {
+  defaultMessage: 'Icon decoration',
+});
+
 const IconView = (props: { value?: string; label: string; icon?: IconType }) => {
   if (!props.value) return null;
   return (
@@ -68,6 +72,7 @@ export function IconSelect<Icon extends string>({
       singleSelection={{ asPlainText: true }}
       renderOption={IconView}
       compressed
+      aria-label={iconDecorationLabel}
       prepend={
         hasIcon(selectedIcon.value) ? (
           <EuiIcon type={selectedIcon.icon ?? selectedIcon.value} />
@@ -89,13 +94,7 @@ export function IconSelectSetting<Icon extends string = string>({
   defaultIcon?: string;
 }) {
   return (
-    <EuiFormRow
-      display="columnCompressed"
-      fullWidth
-      label={i18n.translate('visualizationUiComponents.iconSelect.label', {
-        defaultMessage: 'Icon decoration',
-      })}
-    >
+    <EuiFormRow display="columnCompressed" fullWidth label={iconDecorationLabel}>
       <IconSelect
         defaultIcon={defaultIcon}
         customIconSet={customIconSet}

src/platform/packages/shared/response-ops/recurring-schedule-form/components/recurring_schedule_form_fields.tsx

@@ -234,6 +234,7 @@ export const RecurringScheduleFormFields = memo(
                           singleSelection={{ asPlainText: true }}
                           selectedOptions={[{ label: timezone[0] }]}
                           isClearable={false}
+                          aria-label={i18n.RECURRING_SCHEDULE_FORM_TIMEZONE}
                           prepend={
                             <EuiFormLabel htmlFor={'disabled-timezone'}>
                               {i18n.RECURRING_SCHEDULE_FORM_TIMEZONE}

src/platform/packages/shared/response-ops/rule_form/src/rule_actions/rule_actions_alerts_filter_timeframe.tsx

@@ -155,6 +155,10 @@ export const RuleActionsAlertsFilterTimeframe: React.FC<RuleActionsAlertsFilterT
 
   const [startH, startM] = useMemo(() => timeframe.hours.start.split(':').map(Number), [timeframe]);
   const [endH, endM] = useMemo(() => timeframe.hours.end.split(':').map(Number), [timeframe]);
+  const timezoneLabel = i18n.translate(
+    'responseOpsRuleForm.ruleForm.ruleActionsAlertsFilterTimeframeTimezoneLabel',
+    { defaultMessage: 'Timezone' }
+  );
 
   return (
     <>
@@ -219,10 +223,8 @@ export const RuleActionsAlertsFilterTimeframe: React.FC<RuleActionsAlertsFilterT
             </EuiFlexItem>
             <EuiFlexItem grow={1}>
               <EuiComboBox
-                prepend={i18n.translate(
-                  'responseOpsRuleForm.ruleForm.ruleActionsAlertsFilterTimeframeTimezoneLabel',
-                  { defaultMessage: 'Timezone' }
-                )}
+                aria-label={timezoneLabel}
+                prepend={timezoneLabel}
                 singleSelection={{ asPlainText: true }}
                 options={TIMEZONE_OPTIONS}
                 selectedOptions={selectedTimezone}

src/platform/packages/shared/response-ops/rule_form/src/rule_actions/rule_actions_settings.tsx

@@ -213,13 +213,17 @@ export const RuleActionsSettings = (props: RuleActionsSettingsProps) => {
             {showSelectActionGroup && (
               <EuiSuperSelect
                 prepend={
-                  <EuiFormLabel htmlFor={`addNewActionConnectorActionGroup-${action.actionTypeId}`}>
+                  <EuiFormLabel
+                    id={`addNewActionConnectorActionGroupLabel-${action.actionTypeId}`}
+                    htmlFor={`addNewActionConnectorActionGroup-${action.actionTypeId}`}
+                  >
                     {ACTION_GROUP_RUN_WHEN}
                   </EuiFormLabel>
                 }
                 data-test-subj="ruleActionsSettingsSelectActionGroup"
                 fullWidth
                 id={`addNewActionConnectorActionGroup-${action.actionTypeId}`}
+                aria-labelledby={`addNewActionConnectorActionGroupLabel-${action.actionTypeId}`}
                 options={actionGroups.map(({ id: value, name }) => ({
                   value,
                   ['data-test-subj']: `addNewActionConnectorActionGroup-${value}`,

src/platform/packages/shared/shared-ux/file/file_picker/impl/src/components/pagination.tsx

@@ -14,6 +14,8 @@ import useObservable from 'react-use/lib/useObservable';
 import { useBehaviorSubject } from '@kbn/shared-ux-file-util';
 import { useFilePickerContext } from '../context';
 
+import { i18nTexts } from '../i18n_texts';
+
 export const Pagination: FunctionComponent = () => {
   const { state } = useFilePickerContext();
   const page = useBehaviorSubject(state.currentPage$);
@@ -29,6 +31,7 @@ export const Pagination: FunctionComponent = () => {
       onPageClick={isUploading ? () => {} : state.setPage}
       pageCount={pageCount}
       activePage={page}
+      aria-label={i18nTexts.filesPagination}
     />
   );
 };

src/platform/packages/shared/shared-ux/file/file_picker/impl/src/i18n_texts.ts

@@ -60,6 +60,9 @@ export const i18nTexts = {
   cancel: i18n.translate('sharedUXPackages.filePicker.cancel', {
     defaultMessage: 'Cancel',
   }),
+  filesPagination: i18n.translate('sharedUXPackages.filePicker.paginationControls.ariaLabel', {
+    defaultMessage: 'Files pagination',
+  }),
   deleteFileQuestion: (fileName: string) =>
     i18n.translate('sharedUXPackages.filePicker.deleteFileQuestion', {
       defaultMessage: 'Are you sure you want to delete "{fileName}"?',

src/platform/plugins/private/input_control_vis/public/components/vis/list_control.tsx

@@ -137,12 +137,15 @@ class ListControlUi extends PureComponent<ListControlUiProps, ListControlUiState
       };
     });
 
+    const selectPlaceholderLabel = intl.formatMessage({
+      id: 'inputControl.vis.listControl.selectPlaceholder',
+      defaultMessage: 'Select...',
+    });
+
     return (
       <EuiComboBox
-        placeholder={intl.formatMessage({
-          id: 'inputControl.vis.listControl.selectPlaceholder',
-          defaultMessage: 'Select...',
-        })}
+        placeholder={selectPlaceholderLabel}
+        aria-label={selectPlaceholderLabel}
         options={options}
         isLoading={this.state.isLoading}
         async={this.props.dynamicOptions}

src/platform/plugins/private/vis_types/vega/public/components/deprecated_interval_info.tsx

@@ -9,6 +9,7 @@
 
 import React from 'react';
 import { EuiCallOut, EuiButtonIcon } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { BUCKET_TYPES } from '@kbn/data-plugin/public';
 import type { VegaSpec } from '../data_model/types';
@@ -30,6 +31,10 @@ export const DeprecatedHistogramIntervalInfo = () => (
               iconType="popout"
               href={getDocLinks().links.aggs.date_histogram}
               target="_blank"
+              aria-label={i18n.translate(
+                'visTypeVega.deprecatedHistogramIntervalInfo.dateHistogramDocAriaLabel',
+                { defaultMessage: 'Open date histogram documentation' }
+              )}
             />
           ),
         }}

src/platform/plugins/shared/console/public/application/components/settings/settings_editor.tsx

@@ -283,6 +283,9 @@ export const SettingsEditor = (props: Props) => {
             inputDisplay: host,
           }))}
           valueOfSelected={selectedHost || (availableHosts.length > 0 ? availableHosts[0] : '')}
+          aria-label={i18n.translate('console.settingsPage.elasticsearchHostLabel', {
+            defaultMessage: 'Elasticsearch host',
+          })}
           onChange={(value) => setSelectedHost(value)}
         />
       </SettingsFormRow>
@@ -381,6 +384,9 @@ export const SettingsEditor = (props: Props) => {
               compressed
               options={intervalOptions}
               valueOfSelected={pollInterval.toString()}
+              aria-label={i18n.translate('console.settingsPage.refreshingDataLabel', {
+                defaultMessage: 'Refresh frequency',
+              })}
               onChange={onPollingIntervalChange}
             />
           </SettingsFormRow>