[EuiBasicTable] Ensure action button aria-label is unique (#7994)

elastic · Sep 6, 2024 · e36e441 · e36e441
1 parent ba42930
commit e36e441
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 41 deletions.
diff --git a/packages/eui/changelogs/upcoming/7994.md b/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
+
diff --git a/packages/eui/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/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"

diff --git a/packages/eui/src/components/basic_table/basic_table.tsx b/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}
  />
  ),
  });

diff --git a/packages/eui/src/components/basic_table/collapsed_item_actions.test.tsx b/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(

diff --git a/packages/eui/src/components/basic_table/collapsed_item_actions.tsx b/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 (