feat(tooltip): html updates for a11y #3148

elizabethsjudd · 2019-06-21T20:14:12Z

Simple HTML updates to pass AVT 1. The tooltip still has some bugs for keyboard and screen reader users (AVT 2 and AVT 3) that I can take a look at next but it's going to require some updates to the JavaScript as well as getting an answer to my open question

Changelog

New

Add role="dialog" to define a tooltip with interactive elements (remove AVT 1 landmark violation)
Add aria-controls, aria-haspopup to create the relationship between the trigger and tooltip elements
Add demos for various ways users can associate the label for the tooltip element

Changed

Update trigger role="tooltip" to role="button"

Testing / Reviewing

Regression test that styling/functionality remained the same

netlify · 2019-06-21T20:22:42Z

Deploy preview for the-carbon-components ready!

Built with commit 7da9731

https://deploy-preview-3148--the-carbon-components.netlify.com

netlify · 2019-06-21T20:24:58Z

Deploy preview for carbon-components-react ready!

Built with commit 7da9731

https://deploy-preview-3148--carbon-components-react.netlify.com

netlify · 2019-06-21T20:25:57Z

Deploy preview for carbon-elements ready!

Built with commit 7da9731

https://deploy-preview-3148--carbon-elements.netlify.com

asudoh · 2019-06-24T04:29:54Z

packages/components/src/components/tooltip/tooltip.hbs

 <span class="{{@root.prefix}}--tooltip__caret"></span>
- <p>This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is
+ <p id="unique-tooltip-body" >This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is


Could you generate unique ID in .config.js and refer to that here? Thanks!

Hi @asudoh @elizabethsjudd could these be UUID? node-uuid could be used for this, generating unique keys for each demo (so they don't override each other.) Would require a new dependency, but node-uuid is the most popular/supported tool for this.

@scottnath Any solutions generating unique ID is fine. e.g. This is our dev-time only I wouldn't foresee a collision with Math.random(), etc.

@asudoh confused by the message. Does that mean it's ok to add the package node-uuid and to use it to create ID's with uuid? This package would then be available to any component that needs to create unique ID's

Using node-uuid is OK, but I wouldn't given there is an easier way. Also if you are strong for node-uuid please use it with devDependencies.

jnm2377

Working as expected for me. Thanks for this! 👍

…feature/a11y-tooltip

joshblack

Could you share the AVT1 violations and how to re-create them for the interactive tooltips?

Definitely agreed that interactive tooltips should be replaced by dialog since they have interactive content, however it seems like this PR relies on some updates yet to be made to the JS to make things fully accessible/functional?

elizabethsjudd · 2019-06-25T17:06:46Z

@joshblack The AVT 1 violation is that the tooltip didn't have a role so the content wasn't in a landmark.

In order to recreate the violation:

Open a tooltip
force the tooltip open by adding bx--tooltip--shown
run DAP. (DAP doesn't run on hidden content and turning on that setting I've been told is buggy)

You'll still get a color contrast violation with the link but that is design specific so I wasn't focused on it for this PR until @carbon-design-system/design has a chance to look at it.

You are correct that it will require some JS updates to make it fully accessible which is what I plan on working next. I do need this question answered by @carbon-design-system/design before I work on it though. This PR resolves the HTML AVT 1 violation but also doesn't make the component less a11y than the current version as the current one is also inaccessible for screen reader users.

joshblack · 2019-06-25T17:10:00Z

@elizabethsjudd this is what I see when running it with the tooltip shown:

And unfortunately none of the violations relate to the tooltip node, is there a step I'm missing here?

To help with debugging, here are the rulesets I have enabled:

elizabethsjudd · 2019-06-25T17:24:40Z

@joshblack those are the correct violations you should be receiving when you run it on my updates. If you run DAP on the current version (not my branch) you will bet an additional violation for the tooltip node.

joshblack · 2019-06-25T17:27:55Z

Oh duh 😂 You're totally right, thanks @elizabethsjudd! Sorry for being dumb here haha

dakahn

Excellent! It's all clear here on my end. Thanks for contributing. 🌟

jnm2377 · 2019-06-28T19:00:46Z

cc: @snidersd any comments before merging?

snidersd · 2019-07-01T14:03:07Z

@jnm2377 I'm not seeing any change when testing React https://deploy-preview-3148--carbon-components-react.netlify.com. The contrast in the pop-up still fails and there is one DAP issue.

Should I be looking at a different link?

elizabethsjudd · 2019-07-01T14:46:02Z

@snidersd This issue ONLY applies to Carbon Vanilla. WH doesn't use the React versions of Carbon. There is still the color contrast on the link element but we need design input for that violation. My goal was to resolve the other violations/HTML structure issues with the tooltip. There will be additional JS updates needed to fully be accessible.

snidersd · 2019-07-01T18:56:07Z

@elizabethsjudd I understand that. I was sent a request to review this issue and just wanted to make sure that both Vanilla and React stay in sync since @dakahn is working on the React version.

asudoh · 2019-07-01T21:28:04Z

🎉 Thanks @elizabethsjudd for your contribution!

This change adds several ARIA attributes along with `tooltipBodyId` prop, so element relationships are better described. This better aligns to the change made to vanilla earlier (carbon-design-system#3148 and Fixes carbon-design-system#3812.

This change adds several ARIA attributes along with `tooltipBodyId` prop, so element relationships are better described. This better aligns to the change made to vanilla earlier (#3148 and #3476). Fixes #3812.

feat(tooltip): html updates for a11y

bc6a3e0

Merge branch 'master' into feature/a11y-tooltip

0b127f5

asudoh reviewed Jun 24, 2019

View reviewed changes

elizabethsjudd mentioned this pull request Jun 24, 2019

feat(text-input): add read-only variant #3054

Closed

jnm2377 approved these changes Jun 24, 2019

View reviewed changes

jnm2377 added the status: one more review 👀 label Jun 24, 2019

tw15egan and others added 3 commits June 24, 2019 12:35

Merge branch 'master' into feature/a11y-tooltip

84da082

Merge branch 'master' of github.com:carbon-design-system/carbon into …

01824e6

…feature/a11y-tooltip

feat(tooltip): move id to config file

1a61068

joshblack requested a review from a team June 25, 2019 16:39

ghost requested review from snidersd and removed request for a team June 25, 2019 16:39

joshblack requested a review from dakahn June 25, 2019 16:40

joshblack reviewed Jun 25, 2019

View reviewed changes

dakahn approved these changes Jun 25, 2019

View reviewed changes

Merge branch 'master' into feature/a11y-tooltip

9bbedf4

jnm2377 added the status: ready to merge 🎉 label Jun 28, 2019

Merge branch 'master' into feature/a11y-tooltip

7da9731

asudoh merged commit 4111cb8 into carbon-design-system:master Jul 1, 2019

emyarod mentioned this pull request Jul 15, 2019

June/July 2019 Endgame #3262

Closed

41 tasks

elizabethsjudd mentioned this pull request Aug 23, 2019

[React Tooltip] carry over a11y fixes from Vanilla #3812

Closed

emyarod mentioned this pull request Sep 11, 2019

feat(TooltipIcon): auto generate default IDs #3954

Merged

elizabethsjudd mentioned this pull request Oct 4, 2019

Regression bug: Vanilla Tooltip focus management #4232

Closed

2 tasks

asudoh mentioned this pull request Feb 6, 2020

feat(Tooltip): add several ARIA attributes #5282

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(tooltip): html updates for a11y #3148

feat(tooltip): html updates for a11y #3148

elizabethsjudd commented Jun 21, 2019

netlify bot commented Jun 21, 2019 •

edited

Loading

netlify bot commented Jun 21, 2019 •

edited

Loading

netlify bot commented Jun 21, 2019 •

edited

Loading

asudoh Jun 24, 2019

scottnath Jun 24, 2019

asudoh Jun 25, 2019

scottnath Jun 25, 2019

asudoh Jun 25, 2019

jnm2377 left a comment

joshblack left a comment

elizabethsjudd commented Jun 25, 2019

joshblack commented Jun 25, 2019

elizabethsjudd commented Jun 25, 2019

joshblack commented Jun 25, 2019 •

edited

Loading

dakahn left a comment

jnm2377 commented Jun 28, 2019

snidersd commented Jul 1, 2019

elizabethsjudd commented Jul 1, 2019

snidersd commented Jul 1, 2019

asudoh commented Jul 1, 2019 •

edited

Loading

feat(tooltip): html updates for a11y #3148

feat(tooltip): html updates for a11y #3148

Conversation

elizabethsjudd commented Jun 21, 2019

Changelog

Testing / Reviewing

netlify bot commented Jun 21, 2019 • edited Loading

netlify bot commented Jun 21, 2019 • edited Loading

netlify bot commented Jun 21, 2019 • edited Loading

asudoh Jun 24, 2019

Choose a reason for hiding this comment

scottnath Jun 24, 2019

Choose a reason for hiding this comment

asudoh Jun 25, 2019

Choose a reason for hiding this comment

scottnath Jun 25, 2019

Choose a reason for hiding this comment

asudoh Jun 25, 2019

Choose a reason for hiding this comment

jnm2377 left a comment

Choose a reason for hiding this comment

joshblack left a comment

Choose a reason for hiding this comment

elizabethsjudd commented Jun 25, 2019

joshblack commented Jun 25, 2019

elizabethsjudd commented Jun 25, 2019

joshblack commented Jun 25, 2019 • edited Loading

dakahn left a comment

Choose a reason for hiding this comment

jnm2377 commented Jun 28, 2019

snidersd commented Jul 1, 2019

elizabethsjudd commented Jul 1, 2019

snidersd commented Jul 1, 2019

asudoh commented Jul 1, 2019 • edited Loading

netlify bot commented Jun 21, 2019 •

edited

Loading

netlify bot commented Jun 21, 2019 •

edited

Loading

netlify bot commented Jun 21, 2019 •

edited

Loading

joshblack commented Jun 25, 2019 •

edited

Loading

asudoh commented Jul 1, 2019 •

edited

Loading