1887667 - PDFjs Highlights panel has an incosiderate keyboard focus order

Status: NEW

(Firefox :: PDF Viewer, defect)

Description

[Anna Yeddi [:ayeddi]]

Attachment: Accessibility Inspector results for the highlights panel - tabbing order as tooltips vs reading order in the Accessibility Tree

Preconditions:

• Enable pdfjs.enableHighlightEditor - true
• pdfjs.enableHighlightFloatingButton - true

STR:

1. Open any PDF in Firefox.
2. Navigate to the Highlight toggle using keyboard alone (Tab keys)
3. Press Enter to open the Highlight doorhanger
4. Press Tab few times to navigate to the Highlight panel and observe the focus order of the panel

Expected:

1. Focus follows the visual reading order: left to right and top to bottom (for an LTR language like English):
   1. The Highlight Color is the first element receiving focus with the keyboard
   2. (if enabled) Thickness
   3. Show all toggle
2. Listbox focus:
   1. When the Highlight Color listbox gets the focus (i.e. when the panel just opens and Tab is pressed once), either the pre-selected element is receiving the keyboard focus or, if none is selected, the first option in the listbox. When navigating backwards from the bottom of the panel using Tab, either the pre-selected color is focused or, if there is no selection, the last option in the listbox.
   2. From the focused option, arrow keys (Left/Right arrows, in the case of the main panel's appearance) move the focus and selection between colors.
   3. Pressing Tab would move the focus to the next focusable element on the panel: to the Thickness (if it is enabled) or to the Show all toggle.

Actual:

1. The Show all toggle that is visually last element that is the last in the reading order, as expected, is actually receiving the focus first on the panel. Then the focus jumps back up to the colors listbox
2. Each color option in the listbox is receiving focus individually with Tab (while arrow navigation is expected per the ARIA pattern for listboxes)

Comment 1

[Anna Yeddi [:ayeddi]]

It seems that the pressed toggle is using a positive "tabindex" - it is not recommended to overwrite the logical focus order by assigning a tabindex attribute to any number larger than "0".