WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#40515 closed defect (bug) (fixed)

Settings: date and time custom format keyboard trap

Reported by: afercia Owned by: afercia
Milestone: 4.8 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots has-patch
Focuses: accessibility Cc:
PR Number:

Description

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.

https://cldup.com/Mc-wfz7mRy.png

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

Attachments (1)

40515.diff (1.2 KB) - added by afercia 3 years ago.

Download all attachments as: .zip

Change History (7)

@afercia
3 years ago

#1 @afercia
3 years ago

  • Keywords has-patch added
  • Owner set to afercia
  • Status changed from new to assigned

#2 @afercia
3 years ago

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

#3 follow-up: @swissspidy
3 years ago

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?

#4 in reply to: ↑ 3 @afercia
3 years ago

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?

#5 @afercia
3 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

#6 @swissspidy
3 years ago

  • Milestone changed from 4.7.5 to 4.8
Note: See TracTickets for help on using tickets.