Reader Document Viewer: Page loses visual indication of focus after tabbing through Search cases

[alisan16]

When a document is selected to be displayed in the reader, there is no visual indication of focus after the Search Text element. (New: 08/27/2019) I used my tool to show the focus in yellow below however you cannot visually see this focus without the tool on. This loss of focus happens for seven tab stops.

[ajspotts]

what is this chart?

1 | 
2 | |||
3 | |||||||||
5 | 
8 | 

Why 1?

Why 2?

• Optimism?
• This sounds straightforward once we get our bearings
• Looks like there are a few unseen elements that are being selected.

Why 3?

• General lack of knowledge around how active elements are determined and displayed

[yoomlam]

The initially hidden search bar cf-search-bar constitutes 4 tab stops:

The cf-pdf-scroll-view requires 2 to 3 tab stops (one for each ReactVirtualized__Grid, which shows the previous, current, and next document):

Parent elements have tabindex="-1" but that doesn't affect child elements -- see https://stackoverflow.com/questions/42761987/tabindex-1-not-working-for-child-elements.

• So display: none on cf-search-bar works!
• Adding display: none on ReactVirtualized__Grids will hide the pdf, so let's use tabindex="-1" instead.

FYI:

The currently focused element can be found with document.activeElement.

https://hacks.mozilla.org/2019/06/indicating-focus-to-improve-accessibility/