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

AVT2 - The content of tooltip can't be focused and operable #4414

Closed
icemanlily opened this issue Oct 22, 2019 · 11 comments
Closed

AVT2 - The content of tooltip can't be focused and operable #4414

icemanlily opened this issue Oct 22, 2019 · 11 comments
Labels
component: tooltip severity: 1 https://ibm.biz/carbon-severity type: a11y ♿ version: 9 Issues pertaining to legacy Carbon

Comments

@icemanlily
Copy link
Contributor

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

@icemanlily icemanlily changed the title AVT2 The content of tooltip can't be focused and operable AVT2 - The content of tooltip can't be focused and operable Oct 22, 2019
@dakahn dakahn added version: 9 Issues pertaining to legacy Carbon priority: low severity: 1 https://ibm.biz/carbon-severity labels Nov 6, 2019
@dakahn
Copy link
Contributor

dakahn commented Nov 6, 2019

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?

@icemanlily
Copy link
Contributor Author

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

@carmacleod
Copy link
Contributor

carmacleod commented Nov 7, 2019

@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 Tooltip needs keyboard accessibility improvements #1264 and PR is Tooltip works for Screen reader users #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.

@icemanlily icemanlily reopened this Nov 7, 2019
@cmqchen
Copy link

cmqchen commented Nov 11, 2019

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

@carmacleod
Copy link
Contributor

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

@dakahn
Copy link
Contributor

dakahn commented Nov 14, 2019

@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.

@cmqchen
Copy link

cmqchen commented Nov 15, 2019

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

@icemanlily
Copy link
Contributor Author

icemanlily commented May 25, 2020

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

@alisonjoseph alisonjoseph mentioned this issue Jun 1, 2020
41 tasks
@icemanlily
Copy link
Contributor Author

@emyarod which carbon versions have the fix?

@tw15egan
Copy link
Collaborator

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

@carmacleod
Copy link
Contributor

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.

@emyarod emyarod closed this as completed Nov 5, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: tooltip severity: 1 https://ibm.biz/carbon-severity type: a11y ♿ version: 9 Issues pertaining to legacy Carbon
Projects
None yet
Development

No branches or pull requests

8 participants