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