Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix a11y issue with dev tool tabs (#149349)
Fixes #148538 ## Summary This PR fixes the a11y issue with the Beta badge used in the Dev Tools tabs. The proposed solution in the GH issue (moving `EuiBetaBadge` outside of the `EuiTab` component) didn't work well as it introduced another a11y issue - `EuiTabs` would contain an `EuiBetaBadge` component which is not its direct child (it needs to wrap `EuiTab` components only). Also, this solution caused some styling issues. Removing the `tooltipContent` prop from `EuiBetaBadge` resolves the a11y issue without introducing other a11y issues. Also, the `Beta` text is still announced by screen readers as part of the `Painless Lab` tab (tested on Mac's VoiceOver and the Screen Reader Chrome extension) and the design is not changed. <img width="1828" alt="Screenshot 2023-01-23 at 16 17 55" src="https://user-images.githubusercontent.com/59341489/214102739-bf0783e3-755a-474d-8978-17fb4b7d0fbd.png"> ### Checklist - [X] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [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)) - [X] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- Loading branch information