Carbon: AVT2 - The content of tooltip can't be focused and operable

Created on 22 Oct 2019  ·  11Comments  ·  Source: carbon-design-system/carbon

Environment
macOS Mojave version 10.14.6
Chrome Version Version 77.0.3865.90
Carbon v9 - React

Description
Use keyboard to open a tooltip
The content of the tooltip can't be focused and opeable

image

tooltip low 1 🚨 a11y ♿ 9

Most helpful comment

@icemanlily it looks like this fix was included in v10.13.0

All 11 comments

Please provide a reduced test case we can debug against. 🙏

Testing against our Tooltip example here I was unable to reproduce your issue. Can you confirm that this is the case?

@dakahn OK, seems it is not carbon issue. Close this issue.

@dakahn I believe this is a Carbon react tooltip issue.

Steps:

  1. open the Carbon react tooltip
  2. using only the keyboard, tab to the tooltip button to open the tooltip
  3. try to focus the interactive content inside the tooltip

It is not possible to activate the Learn more link or Create button using only the keyboard.

So please reopen. Thanks!

Also, please note:

  1. The original issue for focusing interactive content in the Vanilla tooltip is https://github.com/carbon-design-system/carbon/issues/1264 and PR is https://github.com/carbon-design-system/carbon/pull/3476.

  2. The tooltip needs to close when the user types ESC.

  3. Please ensure that any PR for this fixes both the Vanilla and React tooltip so that they behave the same. Right now, they are very different. The user needs to be able to tab into a tooltip if there is interactive content. They need to be able to dismiss the tooltip with ESC so that they can tab past the tooltip (right now, the Vanilla tooltip traps the keyboard user, and they can't get out). The ESC key event handler needs to call stopPropagation, please, so that the tooltip closes without also closing anything else, like a dialog or side menu.

@carmacleod @dakahn This issue also affected our AVT test, will it be fixed recently?

@cmqchen Just so you know, I'm not on the Carbon team - I am "just a user". :)

@cmqchen This issue is in our backlog with a priority of low. Legacy versions of Carbon are fixed as our bandwidth allows, but do not take priority over our v10 backlog. That said we're always accepting PRs if you need a fix sooner rather than later.

@dakahn It is blocking accessibility compliance for GA. Hope this problem can be fixed as soon as possible.

@emyarod This issue is also existed in Carbon 10. If it fixed, please push the fix into Carbon 10. Thank you!
image

@emyarod which carbon versions have the fix?

@icemanlily it looks like this fix was included in v10.13.0

This issue can be closed. I just tried react and vanilla, and I can navigate to focusable content using keyboard in the "tooltip" (dialog). Esc closes.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jhpedemonte picture jhpedemonte  ·  3Comments

ConradSchmidt picture ConradSchmidt  ·  3Comments

laurenmrice picture laurenmrice  ·  3Comments

snidersd picture snidersd  ·  3Comments

joshblack picture joshblack  ·  3Comments