Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip a11y - dialog role needs name #9229

Closed
finken2 opened this issue Jul 20, 2021 · 2 comments · Fixed by #9420
Closed

Tooltip a11y - dialog role needs name #9229

finken2 opened this issue Jul 20, 2021 · 2 comments · Fixed by #9420

Comments

@finken2
Copy link
Contributor

finken2 commented Jul 20, 2021

Tooltip throws accessibility error:
Interactive component with WAI-ARIA role 'dialog' does not have a programmatically associated name

https://github.ibm.com/alchemy-containers/satellite-ui/issues/1384

It's also recreatable in the carbon react storybook:
https://react.carbondesignsystem.com/?path=/story/components-tooltip--default-bottom

===== ENVIRONMENT =====
IBM CI 162 Checkpoint Violation: 4.1.2 Name, Role, Value
IBM Guidance: https://www.ibm.com/able/requirements/requirements/#4_1_2
Test Tool Type: IBM Equal Access Accessibility Checker
Browser: Chrome

=====DEFECT DESCRIPTION=====
===== ENVIRONMENT =====
IBM CI 162 Checkpoint Violation: 4.1.2 Name, Role, Value
IBM Guidance: https://www.ibm.com/able/requirements/requirements/#4_1_2
Test Tool Type: IBM Equal Access Accessibility Checker
Browser: Chrome

=====DEFECT DESCRIPTION=====
Interactive component with WAI-ARIA role 'dialog' does not have a programmatically associated name.

@tw15egan
Copy link
Member

I'm able to resolve the issue by removing the tooltipBodyId from the storybook example, as well as the <p id="tooltip-body", which gets rid of the error

<Tooltip {...props.withIcon()} tooltipId="tooltip-body">
      <p>.....

Voiceover still seems to work fine, but may be affecting JAWS / other screenreaders. cc @dakahn

@andreancardona
Copy link
Contributor

andreancardona commented Aug 4, 2021

@joshblack just consulted with @dakahn on this ( I think he mentioned it to you). But we are adding this issue to next week's (8/12) Accessibility Guild meeting - agenda found here

a current fix that we will present is adding a dynamic aria-label to the tooltip__content element as seen below. A draft PR of this fix is here: #9420

Screen Shot 2021-08-04 at 1 15 14 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants