[ML] Adding missing aria labels to eui button icons (elastic#199447)

Fix to stop browser console errors in ML overview page. Also adds some missing translations. ![image](https://github.com/user-attachments/assets/38f3b5b1-8d44-4589-b82f-336150f2395f)
CAWilson94 · Nov 8, 2024 · cbebdae · cbebdae
1 parent aad3a44
commit cbebdae
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 3 deletions.
diff --git a/x-pack/plugins/ml/public/application/components/collapsible_panel/collapsible_panel.tsx b/x-pack/plugins/ml/public/application/components/collapsible_panel/collapsible_panel.tsx
@@ -16,6 +16,7 @@ import {
 } from '@elastic/eui';
 import type { PropsWithChildren } from 'react';
 import React, { type FC } from 'react';
+import { i18n } from '@kbn/i18n';
 import { PanelHeaderItems } from './panel_header_items';
 import { useCurrentThemeVars } from '../../contexts/kibana';
 
@@ -24,6 +25,7 @@ export interface CollapsiblePanelProps {
   onToggle: (isOpen: boolean) => void;
   header: React.ReactElement;
   headerItems?: React.ReactElement[];
+  ariaLabel: string;
 }
 
 export const CollapsiblePanel: FC<PropsWithChildren<CollapsiblePanelProps>> = ({
@@ -32,6 +34,7 @@ export const CollapsiblePanel: FC<PropsWithChildren<CollapsiblePanelProps>> = ({
   children,
   header,
   headerItems,
+  ariaLabel,
 }) => {
   const { euiTheme } = useCurrentThemeVars();
 
@@ -51,6 +54,17 @@ export const CollapsiblePanel: FC<PropsWithChildren<CollapsiblePanelProps>> = ({
             <EuiFlexGroup gutterSize={'s'}>
               <EuiFlexItem grow={false}>
                 <EuiButtonIcon
+                  aria-label={
+                    isOpen
+                      ? i18n.translate('xpack.ml.collapsiblePanel.toggleClose', {
+                          defaultMessage: 'Close {ariaLabel}',
+                          values: { ariaLabel },
+                        })
+                      : i18n.translate('xpack.ml.collapsiblePanel.toggleOpen', {
+                          defaultMessage: 'Open {ariaLabel}',
+                          values: { ariaLabel },
+                        })
+                  }
                   color={'text'}
                   iconType={isOpen ? 'arrowDown' : 'arrowRight'}
                   onClick={() => {

diff --git a/.../pages/analytics_exploration/components/expandable_section/expandable_section_results.tsx b/.../pages/analytics_exploration/components/expandable_section/expandable_section_results.tsx
@@ -337,7 +337,12 @@ export const ExpandableSectionResults: FC<ExpandableSectionResultsProps> = ({
             anchorPosition="upCenter"
             button={
               <EuiButtonIcon
-                aria-label="Show actions"
+                aria-label={i18n.translate(
+                  'xpack.ml.dataframe.analytics.exploration.dataGridActions.showActionsAriaLabel',
+                  {
+                    defaultMessage: 'Show actions',
+                  }
+                )}
                 iconType="gear"
                 color="text"
                 onClick={() => setIsPopoverVisible(!isPopoverVisible)}

diff --git a/x-pack/plugins/ml/public/application/explorer/alerts/alerts_panel.tsx b/x-pack/plugins/ml/public/application/explorer/alerts/alerts_panel.tsx
@@ -101,6 +101,9 @@ export const AlertsPanel: FC = () => {
             </>
           );
         })}
+        ariaLabel={i18n.translate('xpack.ml.explorer.alertsPanel.ariaLabel', {
+          defaultMessage: 'alerts panel',
+        })}
       >
         <AnomalyDetectionAlertsOverviewChart />
 

diff --git a/...ob/pages/components/pick_fields_step/components/advanced_detector_modal/function_help.tsx b/...ob/pages/components/pick_fields_step/components/advanced_detector_modal/function_help.tsx
@@ -28,7 +28,18 @@ export const FunctionHelpPopover = memo(() => {
   const onHelpClick = () => setIsHelpOpen((prevIsHelpOpen) => !prevIsHelpOpen);
   const closeHelp = () => setIsHelpOpen(false);
 
-  const helpButton = <EuiButtonIcon onClick={onHelpClick} iconType="help" />;
+  const helpButton = (
+    <EuiButtonIcon
+      onClick={onHelpClick}
+      iconType="help"
+      aria-label={i18n.translate(
+        'xpack.ml.newJob.wizard.pickFieldsStep.advancedDetectorModal.functionHelpAriaLabel',
+        {
+          defaultMessage: 'Show help',
+        }
+      )}
+    />
+  );
 
   const columns = [
     {

diff --git a/...bs/new_job/pages/components/pick_fields_step/components/detector_title/detector_title.tsx b/...bs/new_job/pages/components/pick_fields_step/components/detector_title/detector_title.tsx
@@ -51,7 +51,12 @@ export const DetectorTitle: FC<PropsWithChildren<DetectorTitleProps>> = ({
             onClick={() => deleteDetector(index)}
             iconType="cross"
             size="s"
-            aria-label="Next"
+            aria-label={i18n.translate(
+              'xpack.ml.newJob.wizard.pickFieldsStep.nextButtonAriaLabel',
+              {
+                defaultMessage: 'Next',
+              }
+            )}
           />
         )}
       </EuiFlexItem>

diff --git a/x-pack/plugins/ml/public/application/overview/components/analytics_panel/analytics_panel.tsx b/x-pack/plugins/ml/public/application/overview/components/analytics_panel/analytics_panel.tsx
@@ -119,6 +119,9 @@ export const AnalyticsPanel: FC<Props> = ({ setLazyJobCount }) => {
           })}
         </EuiLink>,
       ]}
+      ariaLabel={i18n.translate('xpack.ml.overview.analyticsListPanel.ariaLabel', {
+        defaultMessage: 'data frame analytics panel',
+      })}
     >
       {noDFAJobs ? <AnalyticsEmptyPrompt /> : null}
 

diff --git a/...ublic/application/overview/components/anomaly_detection_panel/anomaly_detection_panel.tsx b/...ublic/application/overview/components/anomaly_detection_panel/anomaly_detection_panel.tsx
@@ -209,6 +209,9 @@ export const AnomalyDetectionPanel: FC<Props> = ({ anomalyTimelineService, setLa
           })}
         </EuiLink>,
       ]}
+      ariaLabel={i18n.translate('xpack.ml.overview.adJobsPanel.ariaLabel', {
+        defaultMessage: 'anomaly detection panel',
+      })}
     >
       {noAdJobs ? <AnomalyDetectionEmptyState /> : null}
 

diff --git a/x-pack/plugins/ml/public/application/overview/overview_page.tsx b/x-pack/plugins/ml/public/application/overview/overview_page.tsx
@@ -112,6 +112,9 @@ export const OverviewPage: FC = () => {
                 })}
               </EuiLink>,
             ]}
+            ariaLabel={i18n.translate('xpack.ml.overview.nodesPanel.ariaLabel', {
+              defaultMessage: 'overview panel',
+            })}
           >
             <NodesList compactView />
           </CollapsiblePanel>
-Original file line number
+Diff line change
@@ Expand Up / @@ -101,6 +101,9 @@ export const AlertsPanel: FC = () => { @@
                 </>
               );
             })}
+            ariaLabel={i18n.translate('xpack.ml.explorer.alertsPanel.ariaLabel', {
+              defaultMessage: 'alerts panel',
+            })}
           >
             <AnomalyDetectionAlertsOverviewChart />
@@ Expand Down @@