1566493 - Hiding radio buttons in a group breaks keyboard access

Status: NEW

(Core :: DOM: UI Events & Focus Handling, defect, P3)

Description

[perrytrinier+github]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:68.0) Gecko/20100101 Firefox/68.0

Steps to reproduce:

Please see https://output.jsbin.com/pufuxivozu .
The setup is that there is a list of radio buttons wrapped by label elements. The label elements are hidden using the hidden attribute when the list of radio buttons is filtered to only the matching items.

Actual results:

Once the list of radios is filtered, when you tab to the radio button group the keyboard access is not working as expected. Arrow keys are not moving the selection within the radio group. Additionally, if you tab away from the radio group and attempt to tab back into it, there is nothing focusable in the group.

Expected results:

The expected result is that arrow keys will work properly to change selection within the group even after the list of radio buttons has been filtered. Also, once focus has left the group it should be possible to focus the radio group again. The expected behaviour was observed in the latest stable Chrome and Safari.

Comment 1

[Alice0775 White]

I can reproduce the issue. Chrome works as expected.

Comment 2

[Marco Zehe (:MarcoZ)]

Moving to keyboard navigation for now, although this is keyboard navigation within the rendered HTML, not the browser chrome.

Comment 3

[Dão Gottwald [:dao]]

(In reply to Marco Zehe (:MarcoZ) from comment #2)

Moving to keyboard navigation for now, although this is keyboard navigation within the rendered HTML, not the browser chrome.

Right, this belongs in Core. I'm used to it, the Keyboard Navigation component is a dumping ground for bugs that belong elsewhere. :)