Add missing aria-label for discover page (#6898) (#6987)

* add missing aria-label for discover page
* Update snapshot
* add localization and make it human-readable

---------

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

src/plugins/data/public/ui/filter_bar/filter_bar.tsx

@@ -28,6 +28,7 @@
  * under the License.
  */
 
+import { i18n } from '@osd/i18n';
 import {
   EuiButtonEmpty,
   EuiFlexGroup,
@@ -112,6 +113,9 @@ function FilterBarUI(props: Props) {
         size="xs"
         onClick={() => setIsAddFilterPopoverOpen(true)}
         data-test-subj="addFilter"
+        aria-label={i18n.translate('data.filter.filterBar.addFilterButtonLabel', {
+          defaultMessage: 'Add filter',
+        })}
         className="globalFilterBar__addButton"
       >
         +{' '}

src/plugins/data/public/ui/query_string_input/legacy_language_switcher.tsx

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { i18n } from '@osd/i18n';
 import {
   EuiButtonEmpty,
   EuiForm,
@@ -48,6 +49,9 @@ export function LegacyQueryLanguageSwitcher(props: Props) {
       onClick={() => setIsPopoverOpen(!isPopoverOpen)}
       className="euiFormControlLayout__append dqlQueryBar__languageSwitcherButton"
       data-test-subj={'switchQueryLanguageButton'}
+      aria-label={i18n.translate('data.query.queryBar.switchQueryLanguageButtonLabel', {
+        defaultMessage: 'Change query language',
+      })}
     >
       {props.language === 'lucene' ? luceneLabel : dqlLabel}
     </EuiButtonEmpty>

src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx

@@ -28,10 +28,10 @@
  * under the License.
  */
 
+import { i18n } from '@osd/i18n';
 import dateMath from '@elastic/datemath';
 import classNames from 'classnames';
 import React, { useState } from 'react';
-import { i18n } from '@osd/i18n';
 
 import {
   EuiButton,
@@ -314,6 +314,9 @@ export default function QueryBarTopRow(props: QueryBarTopRowProps) {
         isLoading={props.isLoading}
         onClick={onClickSubmitButton}
         data-test-subj="querySubmitButton"
+        aria-label={i18n.translate('data.query.queryBar.querySubmitButtonLabel', {
+          defaultMessage: 'Submit query',
+        })}
       />
     );
 

src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { i18n } from '@osd/i18n';
 import React, { useState } from 'react';
 import { EuiPanel } from '@elastic/eui';
 import { IndexPattern, getServices } from '../../../opensearch_dashboards_services';

src/plugins/discover/public/application/components/default_discover_table/table_header.tsx

@@ -11,6 +11,7 @@
 
 import './_table_header.scss';
 
+import { i18n } from '@osd/i18n';
 import React from 'react';
 import { IndexPattern } from '../../../opensearch_dashboards_services';
 import { TableHeaderColumn } from './table_header_column';

src/plugins/discover/public/application/components/default_discover_table/table_header_column.tsx

@@ -11,8 +11,8 @@
 
 import './_table_header.scss';
 
-import React, { ReactNode } from 'react';
 import { i18n } from '@osd/i18n';
+import React, { ReactNode } from 'react';
 import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 import { SortOrder } from '../../../saved_searches/types';
 
@@ -168,7 +168,14 @@ export function TableHeaderColumn({
   ];
 
   return (
-    <th data-test-subj="docTableHeaderField" className="docTableHeaderField">
+    <th
+      data-test-subj="docTableHeaderField"
+      className="docTableHeaderField"
+      role="columnheader"
+      aria-label={i18n.translate('discover.defaultTable.docTableHeaderLabel', {
+        defaultMessage: `Discover table column: ${name}`,
+      })}
+    >
       <span data-test-subj={`docTableHeader-${name}`}>
         {displayName}
         {buttons

src/plugins/discover/public/application/components/default_discover_table/table_row.tsx

@@ -9,6 +9,7 @@
  * GitHub history for details.
  */
 
+import { i18n } from '@osd/i18n';
 import React, { useState, useCallback } from 'react';
 import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui';
 import dompurify from 'dompurify';
@@ -53,7 +54,9 @@ const TableRowUI = ({
           color="text"
           onClick={handleExpanding}
           iconType={isExpanded ? 'arrowDown' : 'arrowRight'}
-          aria-label="Next"
+          aria-label={i18n.translate('discover.defaultTable.docTableExpandToggleColumnLabel', {
+            defaultMessage: `Toggle row details`,
+          })}
           data-test-subj="docTableExpandToggleColumn"
         />
       </td>
@@ -141,7 +144,6 @@ const TableRowUI = ({
           </EuiFlexItem>
           <EuiFlexItem>
             <h4
-              data-test-subj="docTableRowDetailsTitle"
               className="euiTitle euiTitle--xsmall"
               i18n-id="discover.docTable.tableRow.detailHeading"
               i18n-default-message="Expanded document"

src/plugins/discover/public/application/components/doc_viewer_links/doc_viewer_links.tsx

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { i18n } from '@osd/i18n';
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiListGroupItemProps, EuiLink } from '@elastic/eui';
 import { getDocViewsLinksRegistry } from '../../../opensearch_dashboards_services';

src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx

@@ -305,6 +305,9 @@ const FieldList = ({
         onClick={() => setExpanded(!expanded)}
         size="xs"
         className="dscSideBar_fieldGroup"
+        aria-label={i18n.translate('discover.fieldChooser.fieldGroupLabel', {
+          defaultMessage: title,
+        })}
       >
         {title}
       </EuiButtonEmpty>

src/plugins/discover/public/application/components/table/table_row.tsx

@@ -28,6 +28,7 @@
  * under the License.
  */
 
+import { i18n } from '@osd/i18n';
 import classNames from 'classnames';
 import React, { ReactNode } from 'react';
 import { FieldMapping, DocViewFilterFn } from '../../doc_views/doc_views_types';

src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx

@@ -58,6 +58,9 @@ export const getTopNavLinks = (
       });
     },
     testId: 'discoverNewButton',
+    ariaLabel: i18n.translate('discover.topNav.discoverNewButtonLabel', {
+      defaultMessage: `New Search`,
+    }),
   };
 
   const saveSearch: TopNavMenuData = {
@@ -69,6 +72,9 @@ export const getTopNavLinks = (
       defaultMessage: 'Save Search',
     }),
     testId: 'discoverSaveButton',
+    ariaLabel: i18n.translate('discover.topNav.discoverSaveButtonLabel', {
+      defaultMessage: `Save search`,
+    }),
     run: async () => {
       const onSave = async ({
         newTitle,
@@ -165,6 +171,9 @@ export const getTopNavLinks = (
       defaultMessage: 'Open Saved Search',
     }),
     testId: 'discoverOpenButton',
+    ariaLabel: i18n.translate('discover.topNav.discoverOpenButtonLabel', {
+      defaultMessage: `Open Saved Search`,
+    }),
     run: () => {
       const flyoutSession = services.overlays.openFlyout(
         toMountPoint(
@@ -192,6 +201,9 @@ export const getTopNavLinks = (
       defaultMessage: 'Share Search',
     }),
     testId: 'shareTopNavButton',
+    ariaLabel: i18n.translate('discover.topNav.discoverShareButtonLabel', {
+      defaultMessage: `Share search`,
+    }),
     run: async (anchorElement) => {
       const state: DiscoverState = store!.getState().discover; // store is defined before the view is loaded
       const sharingData = await getSharingData({
@@ -224,6 +236,9 @@ export const getTopNavLinks = (
       defaultMessage: 'Open Inspector for search',
     }),
     testId: 'openInspectorButton',
+    ariaLabel: i18n.translate('discover.topNav.discoverInspectorButtonLabel', {
+      defaultMessage: `Open Inspector for search`,
+    }),
     run() {
       inspector.open(inspectorAdapters, {
         title: savedSearch?.title,

src/plugins/discover/public/application/view_components/canvas/index.tsx

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { i18n } from '@osd/i18n';
 import React, { useEffect, useState, useRef, useCallback } from 'react';
 import { EuiButtonIcon, EuiContextMenu, EuiPanel, EuiPopover, EuiSwitch } from '@elastic/eui';
 import { TopNav } from './top_nav';
@@ -104,6 +105,9 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
       button={
         <EuiButtonIcon
           data-test-subj="discoverOptionsButton"
+          aria-label={i18n.translate('discover.canvas.discoverOptionsButtonLabel', {
+            defaultMessage: 'Options for discover',
+          })}
           size="s"
           iconType="gear"
           onClick={() => setOptionsOpen(!isOptionsOpen)}

src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx

@@ -30,6 +30,7 @@
 
 import { EuiButtonProps } from '@elastic/eui';
 import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { string } from 'mathjs';
 
 export type TopNavMenuAction = (anchorElement: HTMLElement) => void;
 
@@ -42,6 +43,7 @@ export interface TopNavMenuData {
   className?: string;
   disableButton?: boolean | (() => boolean);
   tooltip?: string | (() => string | undefined);
+  ariaLabel?: string;
   emphasize?: boolean;
   iconType?: EuiIconType;
   iconSide?: EuiButtonProps['iconSide'];

src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx

@@ -56,6 +56,7 @@ export function TopNavMenuItem(props: TopNavMenuData) {
     iconSide: props.iconSide,
     'data-test-subj': props.testId,
     className: props.className,
+    'aria-label': props.ariaLabel,
   };
 
   let component;