Open pwong09 opened 1 year ago
First, the demo as provided provides click content to the Button in the form of the Tooltip:
<overlay-trigger placement="bottom" type="modal">
<sp-action-button slot="trigger" label="Information" quiet size="s">
<sp-icon-info-outline slot="icon"></sp-icon-info-outline>
</sp-action-button>
<sp-tooltip slot="click-content" size="s" open>
Style combinations defined in the font for quick access
</sp-tooltip>
</overlay-trigger>
This means that when the Button is activated the screen reader cursor will be passed into the Tooltip and the content will be read.
When moved to hover content, what I'm seeing right now looks like a weird timing reality:
<overlay-trigger placement="bottom" type="modal">
<sp-action-button slot="trigger" label="Information" quiet size="s">
<sp-icon-info-outline slot="icon"></sp-icon-info-outline>
</sp-action-button>
<sp-tooltip slot="hover-content" size="s" open>
Style combinations defined in the font for quick access
</sp-tooltip>
</overlay-trigger>
In this context, various browsers are giving us different results.
Compare possible solutions here to https://zoebijl.github.io/apg-tooltip/ as opposed to other Adobe solutions, https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/, or https://dequeuniversity.com/library/aria/tooltip, as they each have their own issue.
Current possibilities:
@dineshy87 and @jnurthen would yall be able to share a more specialized look at an option I've got under development here?
I've specifically been looking with only Voice Over so far, but if this seems like a path forward there, I'll be expanding my testing pattern next:
This example seems to work as expected (in relation to https://zoebijl.github.io/apg-tooltip/ as provided by James) in both forward and backwards reading directions:
These examples work 100% forward, however when Chrome using control + option + leftarrow
the tool tip isn't always attached as expected in the initial Voice Over output. However, it is always in the control + option + command + /
menu.
Not sure what would be different about the reverse content direction in Voice Over or in our implementation that could cause this difference, but with the content being there in the control + option + command + /
menu, I'm wondering if it's an acceptable outcome? It at least feels better than the current delivery with consistency outlined in this comment.
Code of conduct
Impacted component(s)
sp-tooltip, sp-action-button, sp-overlay-trigger, sp-popover
Expected behavior
Expect VoiceOver to read the content of a sp-tooltip when user either hovers or keyboard focuses on the sp-action-button
Actual behavior
VoiceOver tells me to use
control-option-space
to interact with the button, but no tooltip content is read outScreenshots
No response
What browsers are you seeing the problem in?
Chrome
How can we reproduce this issue?
See sample code
Sample code that illustrates the problem
https://studio.webcomponents.dev/edit/J3BcJnTW4U45u7DTa9a0/src/index.ts?p=stories
Logs taken while reproducing problem
No response