feat(Tooltip): Add label behavior for Tooltip #1635
Conversation
sophieH29
requested review from
dvdzkwsk,
kuzhelov,
layershifter,
levithomason,
miroslavstastny and
mnajdova
as code owners
sophieH29
added
accessibility
Codecov Report
@@ Coverage Diff @@
## master #1635 +/- ##
==========================================
+ Coverage 71.23% 71.27% +0.04%
==========================================
Files 851 852 +1
Lines 7032 7042 +10
Branches 2004 2027 +23
==========================================
+ Hits 5009 5019 +10
Misses 2017 2017
Partials 6 6
Continue to review full report at Codecov.
|
| @@ -81,6 +83,8 @@ export interface TooltipProps | |||
| /** | |||
| * A tooltip that displays information related to an element when the element receives keyboard focus | |||
| * or the mouse hovers over it. | |||
| * @accessibility | |||
There was a problem hiding this comment.
Should we add example for this one on the docs?
There was a problem hiding this comment.
I was thinking about it. From one side this behavior changes one attribute and it is listed in the accessibility section on cases when to use it. And at other side, it is a variance of a tooltip.
If you think better to add it, I'll do that
There was a problem hiding this comment.
@mnajdova I added a tooltip best practices section and mentioned it there. I think should be enough for now. Let's observe, if discoverability is bad, will add a separate example in future
Co-Authored-By: Marija Najdova <[email protected]>
Codecov Report
@@ Coverage Diff @@
## master #1635 +/- ##
==========================================
+ Coverage 71.24% 71.28% +0.04%
==========================================
Files 851 852 +1
Lines 7035 7045 +10
Branches 2006 2029 +23
==========================================
+ Hits 5012 5022 +10
Misses 2017 2017
Partials 6 6
Continue to review full report at Codecov.
|
| import ComponentBestPractices from 'docs/src/components/ComponentBestPractices' | ||
|
|
||
| const doList = [ | ||
| 'Use `tooltipAsLabelBehavior` if adding tooltip to icon-only button or to another visual-only element without any text, title or label.', |
packages/react/src/lib/accessibility/Behaviors/Tooltip/tooltipAsLabelBehavior.ts
Show resolved
Hide resolved
This PR creates
tooltipAsLabelBehavioraccessibility behavior, so when used, it will applyaria-labelledbyattribute to trigger button in case it is needed to label visual-only elements.aria-describedbydoesn't work well for JAWS