Skip to content

Commit

Permalink
Fix a11y issue with dev tool tabs (#149349)
Browse files Browse the repository at this point in the history
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
ElenaStoeva authored Jan 24, 2023
1 parent 199f115 commit d68e9c7
Show file tree
Hide file tree
Showing 4 changed files with 0 additions and 6 deletions.
3 changes: 0 additions & 3 deletions src/plugins/dev_tools/public/application.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -108,9 +108,6 @@ function DevToolsWrapper({
label={i18n.translate('devTools.badge.betaLabel', {
defaultMessage: 'Beta',
})}
tooltipContent={i18n.translate('devTools.badge.betaTooltipText', {
defaultMessage: 'This feature might change drastically in future releases',
})}
/>
)}
</span>
Expand Down
1 change: 0 additions & 1 deletion x-pack/plugins/translations/translations/fr-FR.json
Original file line number Diff line number Diff line change
Expand Up @@ -36206,7 +36206,6 @@
"cases.components.status.inProgress": "En cours",
"cases.components.status.open": "Ouvrir",
"devTools.badge.betaLabel": "Bêta",
"devTools.badge.betaTooltipText": "Cette fonctionnalité pourra considérablement changer dans les futures versions",
"devTools.badge.readOnly.text": "Lecture seule",
"devTools.badge.readOnly.tooltip": "Enregistrement impossible",
"devTools.breadcrumb.homeLabel": "Outils de développement",
Expand Down
1 change: 0 additions & 1 deletion x-pack/plugins/translations/translations/ja-JP.json
Original file line number Diff line number Diff line change
Expand Up @@ -36175,7 +36175,6 @@
"cases.components.status.inProgress": "進行中",
"cases.components.status.open": "開く",
"devTools.badge.betaLabel": "ベータ",
"devTools.badge.betaTooltipText": "この機能は将来のリリースで大幅に変更される可能性があります",
"devTools.badge.readOnly.text": "読み取り専用",
"devTools.badge.readOnly.tooltip": "を保存できませんでした",
"devTools.breadcrumb.homeLabel": "開発ツール",
Expand Down
1 change: 0 additions & 1 deletion x-pack/plugins/translations/translations/zh-CN.json
Original file line number Diff line number Diff line change
Expand Up @@ -36211,7 +36211,6 @@
"cases.components.status.inProgress": "进行中",
"cases.components.status.open": "打开",
"devTools.badge.betaLabel": "公测版",
"devTools.badge.betaTooltipText": "此功能在未来的版本中可能会变化很大",
"devTools.badge.readOnly.text": "只读",
"devTools.badge.readOnly.tooltip": "无法保存",
"devTools.breadcrumb.homeLabel": "开发工具",
Expand Down

0 comments on commit d68e9c7

Please sign in to comment.