Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Tracked by #7112
1Copenut opened this issue Feb 16, 2023 · 10 comments · Fixed by #166868
Closed
Tracked by #7112
Assignees
Labels
blocked EUI impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. loe:small Small Level of Effort Project:Accessibility Team:DataDiscovery Discover, search (e.g. data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL. WCAG A

Comments

@1Copenut
Copy link
Contributor

1Copenut commented Feb 16, 2023

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

rows-sr

Related Issues

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:

@elasticmachine
Copy link
Contributor

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

@botelastic botelastic bot added the needs-team Issues missing a team label label Feb 16, 2023
@jughosta jughosta added the Team:DataDiscovery Discover, search (e.g. data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL. label Feb 20, 2023
@elasticmachine
Copy link
Contributor

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

@botelastic botelastic bot removed the needs-team Issues missing a team label label Feb 20, 2023
@jughosta
Copy link
Contributor

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

@davismcphee davismcphee added blocked loe:small Small Level of Effort impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. labels Feb 21, 2023
@kertal kertal added EUI and removed loe:small Small Level of Effort impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. labels Feb 21, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/eui-design (EUI)

@kertal kertal added impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. loe:small Small Level of Effort labels Feb 21, 2023
@1Copenut
Copy link
Contributor Author

1Copenut commented Mar 20, 2023

@JasonStoltz
Copy link
Member

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

@1Copenut
Copy link
Contributor Author

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

@1Copenut 1Copenut self-assigned this Sep 18, 2023
@JasonStoltz
Copy link
Member

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

@1Copenut
Copy link
Contributor Author

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

@cee-chen
Copy link
Member

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

jbudz pushed a commit that referenced this issue Sep 27, 2023
`v88.3.0`⏩`v88.5.0`

closes #151514

---

## [`88.5.0`](https://github.com/elastic/eui/tree/v88.5.0)

- Updated `EuiCallOut` with a new `onDismiss` prop
([#7156](elastic/eui#7156))
- Added a new `renderCustomToolbar` prop to `EuiDataGrid`, which allows
custom rendering of the toolbar.
([#7190](elastic/eui#7190))
- Added a new `allowResetButton` prop to
`toolbarVisibility.showDisplaySelector` of `EuiDataGrid`, which allows
hiding the "Reset to default" button from the display settings popover.
([#7190](elastic/eui#7190))
- Added a new `additionalDisplaySettings` prop to
`toolbarVisibility.showDisplaySelector` of `EuiDataGrid`, which allows
rendering extra settings inside the display settings popover.
([#7190](elastic/eui#7190))
- Updated `EuiDataGrid`'s toolbar display settings button icon
([#7190](elastic/eui#7190))
- Updated `EuiTextTruncate` with significantly improved iteration
performance. Removed `measurementRenderAPI` prop, as `EuiTextTruncation`
now only uses more performant canvas render API
([#7210](elastic/eui#7210))
- Updated `EuiPopover` with a new configurable `repositionToCrossAxis`
prop ([#7211](elastic/eui#7211))
- Updated `EuiDatePicker` to support `compressed` input styling
([#7218](elastic/eui#7218))
- Added `gradient` and `palette` icon glyphs.
([#7220](elastic/eui#7220))

**Bug fixes**

- Fixed `EuiPopover`'s missing animations on popover close
([#7211](elastic/eui#7211))
- Fixed `EuiInputPopover` anchoring to the wrong side and missing
shadows on smaller screens
([#7211](elastic/eui#7211))
- Fixed `EuiSuperDatePicker` icon spacing on the quick select button
([#7217](elastic/eui#7217))
- Fixed a missing type in `EuiMarkdownEditor`'s default processing
plugins ([#7221](elastic/eui#7221))


## [`88.4.1`](https://github.com/elastic/eui/tree/v88.4.1)

**Bug fixes**

- Fixed missing `className`s on `EuiTextTruncate`
([#7212](elastic/eui#7212))
- Fixed `title`s on `EuiComboBox` dropdown options to always be present
([#7212](elastic/eui#7212))
- Fixed `EuiComboBox` truncation issues when search is an empty space
([#7212](elastic/eui#7212))

## [`88.4.0`](https://github.com/elastic/eui/tree/v88.4.0)

- Updated `EuiComboBox` to allow configuring text truncation behavior
via `truncationProps`. These props can be set on the entire combobox as
well as on on individual dropdown options.
([#7028](elastic/eui#7028))
- Updated `EuiInMemoryTable` with a new `searchFormat` prop (defaults to
`eql`). When setting this prop to `text`, the built-in search bar will
ignore EQL syntax and allow searching for plain strings with special
characters and symbols.
([#7175](elastic/eui#7175))

**Bug fixes**

- `EuiComboBox` now always shows the highlighted search text, even on
truncated text ([#7028](elastic/eui#7028))
- Fixed missing i18n in `EuiSearchBar`'s default placeholder and
aria-label text ([#7175](elastic/eui#7175))
- Fixed the inline compressed styles of `EuiDescriptionListTitle` to use
a taller line-height for readability
([#7185](elastic/eui#7185))
- Fixed `EuiComboBox` to correctly truncate selected items when
displayed as pills and plain text
([#7193](elastic/eui#7193))

**Accessibility**

- Added `aria-current` attribute to `EuiTablePagination`
([#7186](elastic/eui#7186))

**CSS-in-JS conversions**

- Converted `EuiDroppable` and `EuiDraggable` to Emotion; Removed
`$euiDragAndDropSpacing` Sass variables
([#7187](elastic/eui#7187))

---------

Co-authored-by: Patryk Kopycinski <[email protected]>
Co-authored-by: Jan Monschke <[email protected]>
Co-authored-by: Thomas Watson <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
blocked EUI impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. loe:small Small Level of Effort Project:Accessibility Team:DataDiscovery Discover, search (e.g. data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL. WCAG A
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants