Update tooltip guidance #4680
Update tooltip guidance #4680
Conversation
🦋 Changeset detectedLatest commit: cedff2c The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
|
||
| ### Tooltips, Kaizen components and avoiding common pitfalls | ||
|
|
||
| While technically any Kaizen component can be wrapped by a `Tooltip`, as called out previously, only those with accessible roles will be readable to assistive technologies. |
There was a problem hiding this comment.
someone who isn't a11y expert may not know what are components with "accessible roles". Would it be worth calling it out as interactive/focusable?
There was a problem hiding this comment.
Sure can certainly link out to the MDN docs since that has a pretty comprehensive list
| decorators: [ | ||
| Story => ( | ||
| <div className="flex mt-[50px] justify-center gap-12"> | ||
| <Story /> | ||
| </div> | ||
| ), | ||
| ], |
There was a problem hiding this comment.
this isn't the right way to center story. Doing it messes up with screenshots, responsiveness, some docs addons and other things. You can use layout: "centered" instead. https://storybook.js.org/docs/configure/story-layout#component-layout
There was a problem hiding this comment.
ah nice, was just updating the original one that used inline styles so will axe the justify :) Cheers for the tip 👍
| decorators: [ | ||
| Story => ( | ||
| <div className="flex mt-[60px] gap-12"> | ||
| <Story /> | ||
| </div> | ||
| ), | ||
| ], |
There was a problem hiding this comment.
you can remove the decorator now when you've set layout
There was a problem hiding this comment.
We still need the decorator to add some whitespace of each story so the Tooltip floats to the top instead of the sides. Could probably have the flex and gap specific to the button story but figured there was no harm since it won't impact any of the other stories that have only one element
Why
The existing pattern for the Kaizen Tooltip's has some known issues when wrapping components or elements that lack a semantic
roleor interactivity (i.e:link,button,onclick).In these instances the
Tooltipcontent is not accessible to screen reader and is only visually available to mouse or keyboard users.What