[a11y] [EuiBasicTable] actions - overrides `aria-label` for multi-action button

[alexwizp]

Description

We have a couple of reported issues within #3637 related to the EuiBasicTable actions API.

The problem is with the default aria-label that we set for euiCollapsedItemActionsButton. For each row, it has the value All actions, which causes accessibility issues for users who use screen readers.

Unfortunately, the current API doesn't allow us to override the aria-label attribute. I see we can fix that issue by using CustomItemAction, but not sure that we should do that. Ideally, will be to find a way to address it for DefaultItemAction.

Could you please give us recommendations on how to resolve these issues?

Screen

[mgadewoll]

@alexwizp Am I correct to understand that we'd want each row to have a unique aria-label? What kind of label would you expect?

From what I can tell from the code, the "All actions" button is rendered per column. Even if we'd provide a custom render function as for other columns where a custom aria-label could be passed, it would still render the same for all per column. Instead we'd need to specify the labels per row specifically if they should be row specific. And while the internally used CollapsedItemActions button has access to the row data, that data is generic meaning we don't know what the data is. We can only pass along the item data back to the consumer via render function where the data is typed.

💭 My thought here for a possible solution in context of the current available code:

• we define row data for each column which can be anything, e.g. we could define an actions key that can hold additional data (consumer side)
• we allow to use custom render for the EuiTableActionsColumnType which returns all required data for a custom "all actions" button (currently using CollapsedItemActions) (EUI side)
• we allow passing aria-label to CollapsedItemActions and use either the custom label or default i18n one conditionally (EUI side)
• we need to surface CollapsedItemActions as export of EUI as it's currently an internal component of EuiBasicTable only (EUI side)

Example code:

type User = {
  firstName: string;
  actions?: {
    'aria-label'?: string;
  }
}

const columns = [
  {
    field: 'firstName',
    name: 'First Name'
  },
  {
    name: 'All Actions',
    actions: [
       // define actions as usual here
    ],
    render: (props) => {
      return (
        <CollapsedItemActions
          {...props}
          aria-label={props.item.actions?.['aria-label']}
        />
      );
    },
  }
]

@cee-chen @tkajtoch What do you think?

[alexwizp]

Right,aria-labelshould be unique for each row. For example please see the reported issue elastic/observability-accessibility#39

I also want to add @1Copenut into that discussion.

[mgadewoll]

@alexwizp What would be the expected label for those buttons? Should it be fully customizable or something like "All buttons, row N" similar to what was done here?

[alexwizp]

@mgadewoll, it's a really good question. I think this approach is a bit different from what @1Copenut wants to see, but from an a11y perspective, it should also be okay. It is much easier to implement and doesn't require changing the API.

But let's wait input from @1Copenut / @dave-gus before continue.

[alexwizp]

@1Copenut just a reminder if you missed notification. Please have a look

[JasonStoltz]

@1Copenut Do you have any advice on how to proceed?

[1Copenut]

Apologies for the slow response. I must have confused this issue with another one. grimacing

Anyway, given the complexity with data grids, if we could have an accessible label like "All actions, row 1" that would meet the letter of the ask. Buttons now have a relationship to their related cells of content and screen reader Form Control menus have unique labels instead of multiple "All actions" buttons listed.