Settings: date and time custom format keyboard trap

[afercia]

Noticed while working on the ​Settings API enhanced.

When using a keyboard and trying to set the Date and Time format, users get "trapped": when focusing the custom format field.

The related radio button gets automatically selected and there's basically no way to select a radio button other than the custom format one. The only options would be:

• select a radio button and then tab backwards through the whole interface until tabbing reaches the top of hte page and starts again from the bottom of the page: at that point users can finally reach the Save Changes button and save
• select a radio button and press Enter to submit the form while the radio button is selected

To reproduce:

• use your keyboard Tab key to navigate to the Date format setting
• once the active radio button has focus, use the arrow keys to change format
• at that point you need to press the Tab key to move away from the radio buttons
• as soon as you do that, the custom format field gets focused
• the related custom format radio button gets automatically selected

While this may make sense when using a pointing device (mouse or similar), it's a huge barrier for keyboard and screen reader users. Since the fix is simple enough, I'd propose this ticket for 4.7.5 consideration.

Simply changing the focus event to click input would solve the issue:

• for mouse users: the automatic selection would still work when clicking on the input field
• for keyboard users: the automatic selection would happen just when they actually change the value in the input field, thus they would be allowed to keep navigating trough the form using the Tab key

[afercia]

Forgot to mention this was also tested at WordCamp Torino 2017 Contributor Day, props to:
@danuccia, @vallisca, @giux2, @viroproject

[swissspidy]

Patch works like a charm. +1 from me.

Would it make sense to disallow tabbing into the input fields unless the 'Custom' radio button is selected?

[afercia]

Replying to swissspidy:

Thanks for testing!

Would it make sense to disallow tabbing into the input fields unless the 'Custom' radio button is selected?

From an a11y perspective, yes. But for mouse users that would require an additional click?

[afercia]

In 40568:

Accessibility: Avoid a keyboard trap on the date and time custom format settings.

Using the focus event on the date and time custom format fields made impossible
to navigate through all the form fields using only the keyboard without actually
selecting the custom format setting. Instead, using click and input preserves
the original functionality when using any kind of pointing or input device.

Fixes #40515.