[9.3] Fix @elastic/eui/icon-accessibility-rules lint violations across @elastic/ml-ui files (#267698)

x-pack/platform/packages/private/ml/aiops_components/src/progress_controls/progress_controls.tsx

@@ -139,7 +139,11 @@ export const ProgressControls: FC<PropsWithChildren<ProgressControlProps>> = (pr
         {progress === 1 ? (
           <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
             <EuiFlexItem grow={false}>
-              <EuiIcon type="checkInCircleFilled" color={euiTheme.colors.success} />
+              <EuiIcon
+                aria-hidden={true}
+                type="checkInCircleFilled"
+                color={euiTheme.colors.success}
+              />
             </EuiFlexItem>
             <EuiFlexItem grow={false} data-test-subj="aiopsAnalysisComplete">
               <small>

x-pack/platform/packages/shared/file-upload/src/file_upload_component/new/file_status/analysis_explanation.tsx

@@ -60,7 +60,7 @@ export const AnalysisExplanation: FC<Props> = ({ fileStatus, index }) => {
         >
           <EuiModalHeader>
             <EuiModalHeaderTitle id={modalTitleId}>
-              <EuiIcon type="inspect" size={'l'} />{' '}
+              <EuiIcon aria-hidden={true} type="inspect" size={'l'} />{' '}
               <FormattedMessage
                 id="xpack.fileUpload.explanationFlyout.title"
                 defaultMessage="Analysis explanation"

x-pack/platform/packages/shared/file-upload/src/file_upload_component/new/file_status/file_clash.tsx

@@ -131,15 +131,15 @@ export const FileClashIcon: FC<Props> = ({ fileClash }) => {
       return (
         <EuiToolTip content={getClashText(fileClash)}>
           <EuiBadge color={euiTheme.colors.backgroundBaseDanger}>
-            <EuiIcon type="alert" color="danger" size="s" />
+            <EuiIcon aria-hidden={true} type="alert" color="danger" size="s" />
           </EuiBadge>
         </EuiToolTip>
       );
     case CLASH_ERROR_TYPE.WARNING:
       return (
         <EuiToolTip content={getClashText(fileClash)}>
           <EuiBadge color={euiTheme.colors.backgroundBaseWarning}>
-            <EuiIcon type="warning" color="warning" size="s" />
+            <EuiIcon aria-hidden={true} type="warning" color="warning" size="s" />
           </EuiBadge>
         </EuiToolTip>
       );

x-pack/platform/packages/shared/file-upload/src/file_upload_component/new/results_links/results_links.tsx

@@ -181,7 +181,7 @@ export const ResultsLinks: FC<Props> = ({
         <EuiFlexItem>
           <EuiCard
             hasBorder
-            icon={<EuiIcon size="xxl" type={`discoverApp`} />}
+            icon={<EuiIcon aria-hidden={true} size="xxl" type={`discoverApp`} />}
             title={
               <FormattedMessage
                 id="xpack.fileUpload.resultsLinks.viewIndexInDiscoverTitle"
@@ -197,7 +197,7 @@ export const ResultsLinks: FC<Props> = ({
         <EuiFlexItem>
           <EuiCard
             hasBorder
-            icon={<EuiIcon size="xxl" type={`managementApp`} />}
+            icon={<EuiIcon aria-hidden={true} size="xxl" type={`managementApp`} />}
             title={
               <FormattedMessage
                 id="xpack.fileUpload.resultsLinks.indexManagementTitle"
@@ -213,7 +213,7 @@ export const ResultsLinks: FC<Props> = ({
         <EuiFlexItem>
           <EuiCard
             hasBorder
-            icon={<EuiIcon size="xxl" type={`managementApp`} />}
+            icon={<EuiIcon aria-hidden={true} size="xxl" type={`managementApp`} />}
             title={
               <FormattedMessage
                 id="xpack.fileUpload.resultsLinks.dataViewManagementTitle"
@@ -229,7 +229,7 @@ export const ResultsLinks: FC<Props> = ({
         <EuiFlexItem>
           <EuiCard
             hasBorder
-            icon={<EuiIcon size="xxl" type={`filebeatApp`} />}
+            icon={<EuiIcon aria-hidden={true} size="xxl" type={`filebeatApp`} />}
             data-test-subj="fileDataVisFilebeatConfigLink"
             title={
               <FormattedMessage
@@ -247,8 +247,7 @@ export const ResultsLinks: FC<Props> = ({
         <EuiFlexItem>
           <EuiCard
             hasBorder
-            icon={<EuiIcon size="xxl" type={`logoElasticsearch`} />}
-            data-test-subj="fileDataVisFilebeatConfigLink"
+            icon={<EuiIcon aria-hidden={true} size="xxl" type="logoElasticsearch" />}
             title={
               <FormattedMessage
                 id="xpack.fileUpload.resultsLinks.playground"
@@ -266,7 +265,7 @@ export const ResultsLinks: FC<Props> = ({
           <EuiFlexItem key={link.title}>
             <EuiCard
               hasBorder
-              icon={<EuiIcon size="xxl" type={link.icon} />}
+              icon={<EuiIcon aria-hidden={true} size="xxl" type={link.icon} />}
               data-test-subj="fileDataVisLink"
               title={link.title}
               description={link.description}

x-pack/platform/plugins/private/data_visualizer/public/application/common/components/multi_select_picker/multi_select_picker.tsx

@@ -35,7 +35,7 @@ const SELECT_PICKER_HEIGHT = '250px';
 const NoFilterItems = () => {
   return (
     <EuiSelectableMessage>
-      <EuiIcon type="minusInCircle" />
+      <EuiIcon aria-hidden={true} type="minusInCircle" />
       <EuiSpacer size="xs" />
       <p>
         <FormattedMessage

x-pack/platform/plugins/private/data_visualizer/public/application/common/components/not_in_docs_content/not_in_docs_context.tsx

@@ -14,7 +14,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
 export const NotInDocsContent: FC = () => (
   <Fragment>
     <EuiText textAlign="center">
-      <EuiIcon type="warning" />
+      <EuiIcon aria-hidden={true} type="warning" />
     </EuiText>
     <EuiText textAlign="center" size={'xs'}>
       <FormattedMessage

x-pack/platform/plugins/private/data_visualizer/public/application/common/components/not_in_docs_content/not_supported_content.tsx

@@ -12,7 +12,7 @@ import type { FC } from 'react';
 export const NotSupportedContent: FC = () => (
   <Fragment>
     <EuiText textAlign="center">
-      <EuiIcon type="warning" />
+      <EuiIcon aria-hidden={true} type="warning" />
     </EuiText>
     <EuiText textAlign="center" size={'xs'}>
       <FormattedMessage

x-pack/platform/plugins/private/data_visualizer/public/application/common/components/results_links/results_links.tsx

@@ -203,7 +203,7 @@ export const ResultsLinks: FC<Props> = ({
         <EuiFlexItem>
           <EuiCard
             hasBorder
-            icon={<EuiIcon size="xxl" type={`discoverApp`} />}
+            icon={<EuiIcon aria-hidden={true} size="xxl" type={`discoverApp`} />}
             title={
               <FormattedMessage
                 id="xpack.dataVisualizer.file.resultsLinks.viewIndexInDiscoverTitle"
@@ -219,7 +219,7 @@ export const ResultsLinks: FC<Props> = ({
         <EuiFlexItem>
           <EuiCard
             hasBorder
-            icon={<EuiIcon size="xxl" type={`managementApp`} />}
+            icon={<EuiIcon aria-hidden={true} size="xxl" type={`managementApp`} />}
             title={
               <FormattedMessage
                 id="xpack.dataVisualizer.file.resultsLinks.indexManagementTitle"
@@ -235,7 +235,7 @@ export const ResultsLinks: FC<Props> = ({
         <EuiFlexItem>
           <EuiCard
             hasBorder
-            icon={<EuiIcon size="xxl" type={`managementApp`} />}
+            icon={<EuiIcon aria-hidden={true} size="xxl" type={`managementApp`} />}
             title={
               <FormattedMessage
                 id="xpack.dataVisualizer.file.resultsLinks.dataViewManagementTitle"
@@ -251,7 +251,7 @@ export const ResultsLinks: FC<Props> = ({
         <EuiFlexItem>
           <EuiCard
             hasBorder
-            icon={<EuiIcon size="xxl" type={`filebeatApp`} />}
+            icon={<EuiIcon aria-hidden={true} size="xxl" type={`filebeatApp`} />}
             data-test-subj="fileDataVisFilebeatConfigLink"
             title={
               <FormattedMessage
@@ -269,7 +269,7 @@ export const ResultsLinks: FC<Props> = ({
         <EuiFlexItem>
           <EuiCard
             hasBorder
-            icon={<EuiIcon size="xxl" type={`logoElasticsearch`} />}
+            icon={<EuiIcon aria-hidden={true} size="xxl" type={`logoElasticsearch`} />}
             data-test-subj="fileDataVisFilebeatConfigLink"
             title={
               <FormattedMessage
@@ -288,7 +288,7 @@ export const ResultsLinks: FC<Props> = ({
           <EuiFlexItem key={link.title}>
             <EuiCard
               hasBorder
-              icon={<EuiIcon size="xxl" type={link.icon} />}
+              icon={<EuiIcon aria-hidden={true} size="xxl" type={link.icon} />}
               data-test-subj="fileDataVisLink"
               title={link.title}
               description={link.description}

x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_row/distinct_values.tsx

@@ -59,7 +59,7 @@ export const DistinctValues = ({ showIcon, config }: Props) => {
         className={'columnHeader__icon'}
       />
     ) : (
-      <EuiIcon type="database" size={'m'} className={'columnHeader__icon'} />
+      <EuiIcon aria-hidden={true} type="database" size={'m'} className={'columnHeader__icon'} />
     )
   ) : null;
 

x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_row/document_stats.tsx

@@ -79,7 +79,7 @@ export const DocumentStat = ({ config, showIcon, totalCount }: Props) => {
         size="m"
       />
     ) : (
-      <EuiIcon type="document" size={'m'} className={'columnHeader__icon'} />
+      <EuiIcon aria-hidden={true} type="document" size={'m'} className={'columnHeader__icon'} />
     )
   ) : null;
 

x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/data_visualizer_stats_table.tsx

@@ -287,7 +287,11 @@ const UnmemoizedDataVisualizerTable = <T extends DataVisualizerTableItem>({
         name: (
           <div className={'columnHeader__title'}>
             {dimensions.showIcon ? (
-              <EuiIcon type={'visBarVertical'} className={'columnHeader__icon'} />
+              <EuiIcon
+                aria-hidden={true}
+                type={'visBarVertical'}
+                className={'columnHeader__icon'}
+              />
             ) : null}
             {i18n.translate('xpack.dataVisualizer.dataGrid.distributionsColumnName', {
               defaultMessage: 'Distributions',

x-pack/platform/plugins/private/data_visualizer/public/application/index_data_visualizer/embeddables/grid_embeddable/embeddable_field_stats_no_results.tsx

@@ -20,7 +20,7 @@ export const EmbeddableNoResultsEmptyPrompt = () => (
     })}
   >
     <EuiText size="xs" color="subdued">
-      <EuiIcon type="visualizeApp" size="m" color="subdued" />
+      <EuiIcon aria-hidden={true} type="visualizeApp" size="m" color="subdued" />
       <EuiSpacer size="m" />
       <FormattedMessage
         id="xpack.dataVisualizer.index.embeddableNoResultsMessage"

x-pack/platform/plugins/shared/aiops/public/components/change_point_detection/change_point_type_filter.tsx

@@ -111,7 +111,7 @@ export const ChangePointTypeFilter: FC<ChangePointTypeFilterProps> = ({ value, o
       <EuiToolTip position="left" content={description}>
         <EuiFlexGroup gutterSize={'s'} alignItems={'center'}>
           <EuiFlexItem grow={false}>
-            <EuiIcon type="info" color={'primary'} />
+            <EuiIcon aria-hidden={true} type="info" color={'primary'} />
           </EuiFlexItem>
           <EuiFlexItem>{label}</EuiFlexItem>
         </EuiFlexGroup>

x-pack/platform/plugins/shared/aiops/public/components/log_categorization/category_table/category_table.tsx

@@ -152,7 +152,13 @@ export const CategoryTable: FC<Props> = ({
             {i18n.translate('xpack.aiops.logCategorization.column.tokens', {
               defaultMessage: 'Tokens',
             })}
-            <EuiIcon size="s" color="subdued" type="question" className="eui-alignTop" />
+            <EuiIcon
+              aria-hidden={true}
+              size="s"
+              color="subdued"
+              type="question"
+              className="eui-alignTop"
+            />
           </>
         </EuiToolTip>
       ),

x-pack/platform/plugins/shared/aiops/public/components/log_rate_analysis_results_table/table_action_button.tsx

@@ -28,7 +28,7 @@ export const TableActionButton: FC<TableActionButtonProps> = ({
 }) => {
   const buttonContent = (
     <>
-      <EuiIcon type={iconType} css={{ marginRight: '8px' }} />
+      <EuiIcon aria-hidden={true} type={iconType} css={{ marginRight: '8px' }} />
       {label}
     </>
   );

x-pack/platform/plugins/shared/aiops/public/components/log_rate_analysis_results_table/use_columns.tsx

@@ -462,6 +462,7 @@ export const useColumns = (
           return (
             <>
               <EuiIcon
+                aria-hidden={true}
                 size="s"
                 color="subdued"
                 type={currentAnalysisType === LOG_RATE_ANALYSIS_TYPE.SPIKE ? 'sortUp' : 'sortDown'}

x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/anomaly_details.tsx

@@ -226,7 +226,7 @@ const Details: FC<{
       <EuiText size="xs">
         {isInterimResult === true && (
           <>
-            <EuiIcon type="warning" />
+            <EuiIcon type="warning" aria-hidden={true} />
             <span
               css={{
                 fontStyle: 'italic',

x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/description_cell.js

@@ -23,7 +23,7 @@ export function DescriptionCell({ actual, typical }) {
     <EuiFlexGroup gutterSize="s" alignItems="center">
       {iconType !== undefined && (
         <EuiFlexItem grow={false}>
-          <EuiIcon type={iconType} size="s" />
+          <EuiIcon type={iconType} size="s" aria-hidden={true} />
         </EuiFlexItem>
       )}
       <EuiFlexItem grow={false}>

x-pack/platform/plugins/shared/ml/public/application/components/data_recognizer/recognized_result.js

@@ -31,7 +31,7 @@ export const RecognizedResult = ({ config, indexPattern, savedSearch }) => {
   // if a logo is available, use that, otherwise display the id
   // the logo should be a base64 encoded image or an eui icon
   if (config.logo && config.logo.icon) {
-    logo = <EuiIcon type={config.logo.icon} size="xl" />;
+    logo = <EuiIcon type={config.logo.icon} size="xl" aria-hidden={true} />;
   } else if (config.logo && config.logo.src) {
     logo = <img alt="" src={config.logo.src} />;
   } else {

x-pack/platform/plugins/shared/ml/public/application/components/job_message_icon/job_message_icon.tsx

@@ -9,6 +9,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { EuiIcon, EuiIconTip } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import type { AuditMessageBase } from '../../../../common/types/audit_message';
 
 interface Props {
@@ -37,6 +38,15 @@ export const JobIcon: FC<Props> = ({ message, showTooltip = false }) => {
   if (showTooltip) {
     return <EuiIconTip content={message.text} position="bottom" type={icon} color={color} />;
   } else {
-    return <EuiIcon type={icon} color={color} />;
+    return (
+      <EuiIcon
+        type={icon}
+        color={color}
+        aria-label={i18n.translate('xpack.ml.jobMessageIcon.ariaLabel', {
+          defaultMessage: '{level} message',
+          values: { level: message.level },
+        })}
+      />
+    );
   }
 };

x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_creation/components/back_to_list_panel/back_to_list_panel.tsx

@@ -22,7 +22,7 @@ export const BackToListPanel: FC = () => {
     <Fragment>
       <EuiCard
         css={{ width: '300px' }}
-        icon={<EuiIcon size="xxl" type="list" />}
+        icon={<EuiIcon size="xxl" type="list" aria-hidden={true} />}
         title={i18n.translate('xpack.ml.dataframe.analytics.create.analyticsListCardTitle', {
           defaultMessage: 'Data Frame Analytics',
         })}

x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_creation/components/configuration_step/job_type.tsx

@@ -69,7 +69,7 @@ export const JobType: FC<Props> = ({ type, setFormState }) => {
         {(Object.keys(jobDetails) as Array<keyof typeof jobDetails>).map((jobType) => (
           <EuiFlexItem key={jobType} grow={1}>
             <EuiCard
-              icon={<EuiIcon size="xl" type={jobDetails[jobType].icon} />}
+              icon={<EuiIcon size="xl" type={jobDetails[jobType].icon} aria-hidden={true} />}
               title={jobDetails[jobType].title}
               description={jobDetails[jobType].helpText}
               data-test-subj={`mlAnalyticsCreation-${jobType}-option${

x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_creation/components/validation_step/validation_step_details.tsx

@@ -42,7 +42,7 @@ export const ValidationStepDetails: FC<{
               <EuiText size="s">{validationSummary.success}</EuiText>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiIcon type="check" />
+              <EuiIcon type="check" aria-hidden={true} />
             </EuiFlexItem>
           </EuiFlexGroup>
         </>
@@ -61,7 +61,7 @@ export const ValidationStepDetails: FC<{
               <EuiText size="s">{validationSummary.warning}</EuiText>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiIcon type="warning" />
+              <EuiIcon type="warning" aria-hidden={true} />
             </EuiFlexItem>
           </EuiFlexGroup>
         </>

x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_creation/components/view_results_panel/view_results_panel.tsx

@@ -34,7 +34,7 @@ export const ViewResultsPanel: FC<Props> = ({ jobId, analysisType }) => {
     <Fragment>
       <EuiCard
         css={{ width: `calc(${size.xxl} * 7.5)` }}
-        icon={<EuiIcon size="xxl" type="visTable" />}
+        icon={<EuiIcon size="xxl" type="visTable" aria-hidden={true} />}
         title={i18n.translate('xpack.ml.dataframe.analytics.create.viewResultsCardTitle', {
           defaultMessage: 'View Results',
         })}

x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/feature_importance/decision_path_chart.tsx

@@ -44,7 +44,7 @@ interface DecisionPathChartProps {
 
 const DECISION_PATH_MARGIN = 125;
 const DECISION_PATH_ROW_HEIGHT = 10;
-const AnnotationBaselineMarker = <EuiIcon type="dot" size="m" />;
+const AnnotationBaselineMarker = <EuiIcon type="dot" size="m" aria-hidden={true} />;
 
 export const DecisionPathChart = ({
   decisionPathData,

x-pack/platform/plugins/shared/ml/public/application/explorer/components/severity_legend_control/severity_legend_control.tsx

@@ -86,6 +86,7 @@ export const SeverityLegendControl: FC<SeverityControlProps> = ({
               <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
                 <EuiFlexItem grow={false}>
                   <EuiIcon
+                    aria-hidden={true}
                     type={isSelected ? 'dot' : 'eyeClosed'}
                     color={isSelected ? severity.color : euiTheme.colors.textDisabled}
                     size={isSelected ? 'm' : 's'}

x-pack/platform/plugins/shared/ml/public/application/jobs/jobs_list/components/datafeed_chart_flyout/datafeed_chart_flyout.tsx

@@ -496,7 +496,7 @@ export const DatafeedChartFlyout: FC<DatafeedChartFlyoutProps> = ({
                             key="annotation-results-line"
                             domainType={AnnotationDomainType.XDomain}
                             dataValues={annotationData.line}
-                            marker={<EuiIcon type="annotation" />}
+                            marker={<EuiIcon type="annotation" aria-hidden={true} />}
                             markerPosition={Position.Top}
                             style={{
                               line: {
@@ -531,7 +531,7 @@ export const DatafeedChartFlyout: FC<DatafeedChartFlyoutProps> = ({
                           key="model-snapshots-results-line"
                           domainType={AnnotationDomainType.XDomain}
                           dataValues={modelSnapshotDataForTimeRange}
-                          marker={<EuiIcon type="asterisk" />}
+                          marker={<EuiIcon type="asterisk" aria-hidden={true} />}
                           markerPosition={Position.Top}
                           style={{
                             line: {
@@ -554,7 +554,7 @@ export const DatafeedChartFlyout: FC<DatafeedChartFlyoutProps> = ({
                             key="messages-results-line"
                             domainType={AnnotationDomainType.XDomain}
                             dataValues={messageData}
-                            marker={<EuiIcon type="tableDensityNormal" />}
+                            marker={<EuiIcon type="tableDensityNormal" aria-hidden={true} />}
                             markerPosition={Position.Top}
                             style={{
                               line: {