Page MenuHomePhabricator

Keyboard navigation: Indicate focused fields
Closed, ResolvedPublic5 Estimated Story Points

Description

Keyboard navigation, using the tab key, in the donation and membership application form is hard:

  • due to overloading the native UI elements with jcf the currently active element (radio in particular) is not indicated
  • users cannot navigate to the checkboxes in the address section using the tab key
  • the application interferes with the focus after scrolling to specific sections (e. g. when choosing a payment interval using the cursor down key, the notice right of it receives to focus)

Acceptance Criteria:

  • No elements other than form fields can receive the input focus
  • Amount options reflect having the input focus visually
  • Radio buttons and check boxes reflect having the input focus visually
  • Users are able to navigate the form using the tab/space keys without any visual artifacts.

Notes:

  • Check, if this can be resolved by using ARIA attributes.
  • Since the checkboxes and radio buttons are actually hidden and "nice looking" replacements are displayed, the focus of those fields should be reflected visually by something that looks like an input focus.

Related Objects

StatusSubtypeAssignedTask
ResolvedNone
ResolvedNone

Event Timeline

kai.nissen set the point value for this task to 5.

Thanks for this! Looks good to me, apart from:

  • When the checkbox labels in the address form section are focused, the label text is "hopping". Setting an outline instead of a border seems to help.
  • The focus frame in the membership application form is also blue, while all other (colored) elements are green.