[EuiBasicTable] Ensure action button aria-label is unique

packages/eui/changelogs/upcoming/7994.md

@@ -0,0 +1,4 @@
+**Accessibility**
+
+- Updated the `EuiBasicTable` actions button's `aria-label` by adding a reference to the current row
+

packages/eui/i18ntokens.json

@@ -149,14 +149,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 1118,
+        "line": 1119,
         "column": 8,
-        "index": 31036
+        "index": 31058
       },
       "end": {
-        "line": 1122,
+        "line": 1123,
         "column": 9,
-        "index": 31191
+        "index": 31213
       }
     },
     "filepath": "src/components/basic_table/basic_table.tsx"
@@ -167,68 +167,68 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 1347,
+        "line": 1350,
         "column": 8,
-        "index": 37908
+        "index": 37993
       },
       "end": {
-        "line": 1351,
+        "line": 1354,
         "column": 9,
-        "index": 38067
+        "index": 38152
       }
     },
     "filepath": "src/components/basic_table/basic_table.tsx"
   },
   {
-    "token": "euiCollapsedItemActions.allActions",
+    "token": "euiCollapsedItemActions.allActionsTooltip",
     "defString": "All actions",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 110,
-        "column": 4,
-        "index": 3586
+        "line": 45,
+        "column": 28,
+        "index": 1373
       },
       "end": {
-        "line": 119,
-        "column": 5,
-        "index": 3853
+        "line": 48,
+        "column": 3,
+        "index": 1455
       }
     },
     "filepath": "src/components/basic_table/collapsed_item_actions.tsx"
   },
   {
-    "token": "euiCollapsedItemActions.allActionsDisabled",
-    "defString": "Individual item actions are disabled when rows are being selected.",
+    "token": "euiCollapsedItemActions.allActions",
+    "defString": "All actions, row {index}",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 110,
-        "column": 4,
-        "index": 3586
+        "line": 50,
+        "column": 36,
+        "index": 1494
       },
       "end": {
-        "line": 119,
-        "column": 5,
-        "index": 3853
+        "line": 56,
+        "column": 3,
+        "index": 1631
       }
     },
     "filepath": "src/components/basic_table/collapsed_item_actions.tsx"
   },
   {
-    "token": "euiCollapsedItemActions.allActions",
-    "defString": "All actions",
+    "token": "euiCollapsedItemActions.allActionsDisabled",
+    "defString": "Individual item actions are disabled when rows are being selected.",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 136,
-        "column": 4,
-        "index": 4413
+        "line": 58,
+        "column": 44,
+        "index": 1678
       },
       "end": {
-        "line": 136,
-        "column": 78,
-        "index": 4487
+        "line": 61,
+        "column": 3,
+        "index": 1816
       }
     },
     "filepath": "src/components/basic_table/collapsed_item_actions.tsx"

packages/eui/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`CollapsedItemActions custom actions 1`] = `
         class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
-          aria-label="All actions"
+          aria-label="All actions, row 1"
           class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiCollapsedItemActionsButton"
           type="button"
@@ -123,7 +123,7 @@ exports[`CollapsedItemActions default actions 1`] = `
         class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
-          aria-label="All actions"
+          aria-label="All actions, row 1"
           class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiCollapsedItemActionsButton"
           type="button"
@@ -233,7 +233,7 @@ exports[`CollapsedItemActions renders 1`] = `
     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
   >
     <button
-      aria-label="All actions"
+      aria-label="All actions, row 1"
       class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
       data-test-subj="euiCollapsedItemActionsButton"
       type="button"

packages/eui/src/components/basic_table/basic_table.tsx

@@ -1004,6 +1004,7 @@ export class EuiBasicTable<T extends object = any> extends Component<
             item,
             column as EuiTableActionsColumnType<T>,
             columnIndex,
+            rowIndex,
             hasCustomActions
           )
         );
@@ -1142,6 +1143,7 @@ export class EuiBasicTable<T extends object = any> extends Component<
     item: T,
     column: EuiTableActionsColumnType<T>,
     columnIndex: number,
+    rowIndex: number,
     hasCustomActions: boolean
   ) {
     // Disable all actions if any row(s) are selected
@@ -1181,6 +1183,7 @@ export class EuiBasicTable<T extends object = any> extends Component<
             actionsDisabled={allDisabled}
             itemId={itemId}
             item={item}
+            displayedRowIndex={rowIndex}
           />
         ),
       });

packages/eui/src/components/basic_table/collapsed_item_actions.test.tsx

@@ -37,6 +37,7 @@ describe('CollapsedItemActions', () => {
       itemId: 'id',
       item: { id: '1' },
       actionsDisabled: false,
+      displayedRowIndex: 0,
     };
 
     const { container } = render(<CollapsedItemActions {...props} />);
@@ -64,6 +65,7 @@ describe('CollapsedItemActions', () => {
       itemId: 'id',
       item: { id: 'xyz' },
       actionsDisabled: false,
+      displayedRowIndex: 0,
     };
 
     const { getByTestSubject, getByText, baseElement } = render(
@@ -108,6 +110,7 @@ describe('CollapsedItemActions', () => {
       itemId: 'id',
       item: { id: 'xyz' },
       actionsDisabled: false,
+      displayedRowIndex: 0,
     };
 
     const { getByTestSubject } = render(<CollapsedItemActions {...props} />);
@@ -135,6 +138,7 @@ describe('CollapsedItemActions', () => {
       itemId: 'id',
       item: { id: 'xyz' },
       actionsDisabled: false,
+      displayedRowIndex: 0,
     };
 
     const { getByTestSubject, baseElement } = render(

packages/eui/src/components/basic_table/collapsed_item_actions.tsx

@@ -6,19 +6,13 @@
  * Side Public License, v 1.
  */
 
-import React, {
-  useState,
-  useCallback,
-  useMemo,
-  ReactNode,
-  ReactElement,
-} from 'react';
+import React, { useState, useCallback, useMemo, ReactElement } from 'react';
 
 import { EuiContextMenuItem, EuiContextMenuPanel } from '../context_menu';
 import { EuiPopover } from '../popover';
 import { EuiButtonIcon } from '../button';
 import { EuiToolTip } from '../tool_tip';
-import { EuiI18n } from '../i18n';
+import { useEuiI18n } from '../i18n';
 
 import {
   Action,
@@ -33,6 +27,7 @@ export interface CollapsedItemActionsProps<T extends object> {
   item: T;
   itemId: ItemIdResolved;
   actionsDisabled: boolean;
+  displayedRowIndex: number;
   className?: string;
 }
 
@@ -41,11 +36,30 @@ export const CollapsedItemActions = <T extends {}>({
   itemId,
   item,
   actionsDisabled,
+  displayedRowIndex,
   className,
 }: CollapsedItemActionsProps<T>) => {
   const [popoverOpen, setPopoverOpen] = useState(false);
   const closePopover = useCallback(() => setPopoverOpen(false), []);
 
+  const allActionsTooltip = useEuiI18n(
+    'euiCollapsedItemActions.allActionsTooltip',
+    'All actions'
+  );
+
+  const allActionsButtonAriaLabel = useEuiI18n(
+    'euiCollapsedItemActions.allActions',
+    'All actions, row {index}',
+    {
+      index: displayedRowIndex + 1,
+    }
+  );
+
+  const allActionsButtonDisabledAriaLabel = useEuiI18n(
+    'euiCollapsedItemActions.allActionsDisabled',
+    'Individual item actions are disabled when rows are being selected.'
+  );
+
   const controls = useMemo(() => {
     return actions.reduce<ReactElement[]>((controls, action, index) => {
       const available = action.available?.(item) ?? true;
@@ -107,39 +121,26 @@ export const CollapsedItemActions = <T extends {}>({
   }, [actions, actionsDisabled, item, closePopover]);
 
   const popoverButton = (
-    <EuiI18n
-      tokens={[
-        'euiCollapsedItemActions.allActions',
-        'euiCollapsedItemActions.allActionsDisabled',
-      ]}
-      defaults={[
-        'All actions',
-        'Individual item actions are disabled when rows are being selected.',
-      ]}
-    >
-      {([allActions, allActionsDisabled]: string[]) => (
-        <EuiButtonIcon
-          className={className}
-          aria-label={actionsDisabled ? allActionsDisabled : allActions}
-          title={actionsDisabled ? allActionsDisabled : undefined}
-          iconType="boxesHorizontal"
-          color="text"
-          isDisabled={actionsDisabled}
-          onClick={() => setPopoverOpen((isOpen) => !isOpen)}
-          data-test-subj="euiCollapsedItemActionsButton"
-        />
-      )}
-    </EuiI18n>
+    <EuiButtonIcon
+      className={className}
+      aria-label={
+        actionsDisabled
+          ? allActionsButtonDisabledAriaLabel
+          : allActionsButtonAriaLabel
+      }
+      title={actionsDisabled ? allActionsButtonDisabledAriaLabel : undefined}
+      iconType="boxesHorizontal"
+      color="text"
+      isDisabled={actionsDisabled}
+      onClick={() => setPopoverOpen((isOpen) => !isOpen)}
+      data-test-subj="euiCollapsedItemActionsButton"
+    />
   );
 
   const withTooltip = !actionsDisabled && (
-    <EuiI18n token="euiCollapsedItemActions.allActions" default="All actions">
-      {(allActions: ReactNode) => (
-        <EuiToolTip content={allActions} delay="long">
-          {popoverButton}
-        </EuiToolTip>
-      )}
-    </EuiI18n>
+    <EuiToolTip content={allActionsTooltip} delay="long">
+      {popoverButton}
+    </EuiToolTip>
   );
 
   return (