(Accessibility) Rows per page flyout on data grid should announce the selected option to screen readers

[1Copenut]

Steps to reproduce

1. Enable the Flights sample data set in Kibana and navigate to the dashboard view
   2.Turn on a screen reader like VoiceOver or NVDA
2. Click or press to open the "Rows per page" flyout on the [Flights] Flight Log data grid
3. Press Down_Arrow to cycle through the options
4. Note the selected option (the one with the checkmark) does not announce itself as selected

Related Issues

• (Accessibility) Filter language popover needs to identify KQL or Lucene as selected to screen readers #151506

Actual Result

• Screen reader announces "50 rows, button"

Expected Result

• Screen reader announces a more descriptive label like "50 rows selected, button"

Possible code snippet

/* This is just an example function to illustrate the EuiScreenReaderOnly text states */
const setSelected = (size) => {
    return size === rowSize ? " selected" : "";
  };

const items = [
  <EuiContextMenuItem
    key="10 rows"
    icon={getIconType(10)}
    onClick={() => {
    closePopover();
    setRowSize(10);
  }}
  >
    10 rows
    <EuiScreenReaderOnly>
      // Screen readers will ignore the empty string
      <span>{setSelected(10)}</span>
    </EuiScreenReaderOnly>
  </EuiContextMenuItem>,
  ...
];

Kibana Version:
v8.8.0

OS:
MacOS Monterey

Browser:
Safari

Screen reader: [if relevant]
VoiceOver

Relevant WCAG Criteria:

• Understanding SC 2.4.4: Link Purpose (In Context) (Level A)
• Understanding SC 1.3.1: Info and Relationships (Level A)

[elasticmachine]

Pinging @elastic/kibana-accessibility (Project:Accessibility)

[elasticmachine]

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

[jughosta]

It would great to fix it on Eui side for any data grids.

[elasticmachine]

Pinging @elastic/eui-design (EUI)

[1Copenut]

I added issue tickets to EUI for fixing this downstream:

• [EuiContextMenu][SCREEN READER]: Add prop to announce selected item on single choice panels like pagination eui#6648
• [EuiTablePagination] Update pagination with context menu that announces selected row count eui#6649

[JasonStoltz]

@1Copenut Is this resolved by the issues that you mentioned above?

[1Copenut]

@JasonStoltz It will be when the next version of EUI is added to Kibana. EuiDataGrid uses the same underlying structure as EuiTable.

[JasonStoltz]

@1Copenut Can you close this once #151514 lands?

[1Copenut]

@JasonStoltz Yes I'll recheck and close this issue when #166868 lands.

[cee-chen]

I'll edit the PR description to auto-close this issue on merge