carbon
carbon copied to clipboard
Sage
Icon - Have focus in Tabs when we have a Tooltip Message
Current behaviour
When using an Icon with a Tooltip Message in a Tabs, if we use the keyboard, we can't select the content of the first Tab for exemple because the Icon have a tabindex=0.
Expected behaviour
To have the possibility to focus the content of our tab, like when there is no Icon with Tooltip Message.
CodeSandbox or Storybook URL
https://codesandbox.io/s/cool-euler-et77y?file=/src/index.js
JIRA Ticket (Sage Only)
SBS-24217
Suggested Solution
No response
Carbon Version
101.4.2
What browsers are you seeing the problem on?
Chrome
What Operating System are you seeing the problem on?
Windows
Anything else we should know?
No response
Confidentiality
- [X] I confirm there is no confidential or commercially sensitive information included.
@harpalsingh Could you please take a look at this issue and let us know how exactly the tooltip should behave when rendered inside of the Tab? Should the tooltip be displayed when the whole Tab is focused?
Let's retest this when https://github.com/Sage/carbon/pull/4750 is merged, it could potentially solve the issue.
If this is still an issue.
I would say we are looking at using less toolitps where possible, but in scenarios we are inside a Tab, then we really only have 2 options:
- You can tab onto the tooltip and then next tab takes you to the content
- Show the tooltip on selected state of the tab itself, so you can not tab onto the tooltip itself and so you just tab to content as normal
I would suggest option 2 is better if that tooltip is needed and keyboard tabbing is used.
:tada: This issue has been resolved in version 110.5.1 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
