[EuiIcon] Remove logic that applies aria-hidden to empty/loading icons; [EuiIconTip] Fix non-i18n'd default aria-label
#7606
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- primarily affects loading icons - they may still have perfectly valid `aria-label`s that should be accessible to screen readers
cee-chen
changed the title
aria-hidden to empty iconsaria-hidden to empty/loading icons
cee-chen
changed the title
aria-hidden to empty/loading iconsaria-hidden to empty/loading icons; [EuiIconTip] Fix non-i18n'd default aria-label
cee-chen
changed the title
aria-hidden to empty/loading icons; [EuiIconTip] Fix non-i18n'd default aria-labelaria-hidden to empty/loading icons; [EuiIconTip] Fix non-i18n'd default aria-label
cee-chen
force-pushed
the
icon/aria-hidden
branch
from
6cbd299
to
a2816f7
Compare
💚 Build Succeeded
History |
|
Preview staging links for this PR:
|
1Copenut
approved these changes
Mar 20, 2024
|
Thanks Trevor! |
cee-chen
added a commit
to elastic/kibana
that referenced
this pull request
Mar 26, 2024
`v93.4.0` ⏩ `v93.5.1` --- ## [`v93.5.1`](https://github.com/elastic/eui/releases/v93.5.1) **Bug fixes** - Fixed unvirtualized `EuiSelectable`s to not cause Jest/jsdom errors on active option change ([#7618](elastic/eui#7618)) ## [`v93.5.0`](https://github.com/elastic/eui/releases/v93.5.0) - `EuiHeaderLinks` now accepts a `children` render function that will be passed a `closeMobilePopover` callback, allowing consumers to close the mobile popover by its content ([#7603](elastic/eui#7603)) - Updated `EuiSelectable` to support scrolling list containers when `listProps.isVirtualization` is set to `false` ([#7609](elastic/eui#7609)) **Bug fixes** - Fixed `EuiIconTip`'s default `aria-label` text to be i18n tokenizable ([#7606](elastic/eui#7606)) - Fixed `EuiTextArea`'s CSS box model to no longer render a few extra pixels of strut height ([#7607](elastic/eui#7607)) **Dependency updates** - Updated `@types/refractor` to v3.4.0 ([#7590](elastic/eui#7590)) - Updated `@types/lodash` to v4.14.202 ([#7591](elastic/eui#7591)) - Removed `@types/resize-observer-browser` dependency. `ResizeObserver` types should already be baked in to Typescript as of 4.2+ ([#7592](elastic/eui#7592)) - Updated `classnames` to v2.5.1 ([#7593](elastic/eui#7593)) - Updated `@types/numeral` to v2.0.5 ([#7594](elastic/eui#7594)) - Updated `@types/react-window` to 1.8.8 ([#7597](elastic/eui#7597)) - Updated `prop-types` to v15.18.1 ([#7602](elastic/eui#7602)) - Removed `prop-types` as a peer dependency, per package recommendation ([#7602](elastic/eui#7602)) **Accessibility** - `EuiIcons` no longer apply `aria-hidden` to empty icons, as long as a valid title or label is provided to the icon. In particular, this is intended to improve the accessibility of loading `EuiIconTip`s. ([#7606](elastic/eui#7606))
3 tasks
peteharverson
added a commit
to elastic/kibana
that referenced
this pull request
Apr 2, 2024
## Summary Unskips the ML accessibility tests skipped in #17259 following the change made to `EuiIcon` in elastic/eui#7606 in EUI v93.5.1. Also fixes a missing aria-label on the tech preview badge on the data visualizer selector page which would otherwise cause an accessibility test failure. 🟢 50x flaky test runner: https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/5600 ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
closes #7400
Empty and loading icons can still have perfectly valid
aria-labelattributes that should be made available to screen reader users and not hidden - we should not applyaria-hiddenunless there is no meaningful text to read out.I also noticed while here that
EuiIconTip's default aria-label isn't correctlyi18ned, and can be bypassed by consumers passing an empty string, so I tweaked both of those things while here.QA
To QA
EuiIconTipspecifically:gh pr checkout 7606src/components/icon/icon.tsxenqueueStateChangeinvocation)Regression testing:
aria-hidden="true"General checklist
and cypress tests