Solve Package Page Tooltip Accessibility Bugs and Framework Filter Ch… #9933
Conversation
…eckbox List Accessibility Bug
| }); | ||
|
|
||
| // for using arrow keys in Framwork filter mode checkbox tree | ||
| $('.tfmTab li input').each(function () { |
There was a problem hiding this comment.
Does this interfere with tab ordering on the page?
if I tab out of this dialog after tabbing in and arrow key navigating, does it reset position back to the top?
There was a problem hiding this comment.
@ryuyu Adding the arrow key function won't effect the tab order, because html layout isn't changed.
| $(".framework-badge-computed").each(window.nuget.setPopovers); | ||
| $(".frameworkfilters-info").each(window.nuget.setPopovers); | ||
| //for tooltip hover and focus | ||
| $('.tooltip-target').each(function () { |
There was a problem hiding this comment.
This mechanism appears to be a little bit different than the popovers above. Is this because the required behaviour of these popovers is different from the ones above?
I think it would be best to use a shared popover wire up if possible, but if the behaviour deviates, then it makes sense to do it differently.
There was a problem hiding this comment.
@ryuyu This is a bug from the popover. Because the popover js shows the tooltip content after tooltip activated, Narrator can't find the tooltip content to read. I tested the bootstrap popover sample page and record the result below, Narrator couldn't read the tooltip content. My solution is placing the tooltip content in html so Narrator can find it to read,
screen-capture (1).webm
Accessibility issues on production:
1.Narrator is unable to read the tooltip content when hover or use tab key to activate "Framework" tooltip.
2.When press tab key on package badges, screen reader reads the aria label content but without tooltip display.
3.When any of the "Framework filter mode" checkbox selected and dropdown open, user unable to use up and down arrow key to move the selection.
Solution:
1.Disable Bootstrap popover JavaScript on framework filter and support framework badges, keep the popover classes and layout, add JavaScript function to make the tooltip popup, narrator can read the tooltip.
2. Add up and down arrow key JavaScript function to make users are able to use arrow keys to move between framework filter mode checkboxes.
Bug links:
1.https://devdiv.visualstudio.com/DevDiv/_queries/edit/?tempQueryId=91c293b3-665c-4cb3-876f-e7e4c119b7d1&id=1970893
2.https://devdiv.visualstudio.com/DevDiv/_queries/edit/?tempQueryId=91c293b3-665c-4cb3-876f-e7e4c119b7d1&id=1970906
3.https://devdiv.visualstudio.com/DevDiv/_queries/edit/?tempQueryId=91c293b3-665c-4cb3-876f-e7e4c119b7d1&id=1987964
Screenshots and video
Framwork tooltip Before
Package badge tooltip before:
Package badge tooltip after:
Before:
before.webm
After:
after.webm