WordPress.org

Making WordPress.org

Opened 3 years ago

Closed 2 years ago

Last modified 2 years ago

#2296 closed defect (fixed)

FAQ question toggles accessibility

Reported by: joedolson Owned by: obenland
Milestone: Priority: high
Component: Plugin Directory Keywords: ui-feedback
Cc:

Description

The FAQ is toggled directly from a dt element, which is not keyboard focusable. The toggle should be attached to a button element nested inside the dt element, so that it can be operated from the keyboard.

Attachments (1)

2296.diff (4.6 KB) - added by obenland 3 years ago.

Download all attachments as: .zip

Change History (11)

@obenland
3 years ago

#1 @obenland
3 years ago

  • Keywords ui-feedback added; needs-patch removed

We need to find a solution for focus styles that don't impede mouse interactions

#2 @joedolson
3 years ago

What about using a transition on :hover and :focus so that there's a visible change that occurs on focus?

E.g., default state is as currently exists; :hover and :focus rotates 90 degrees then returns to position.

The movement would provide a visual indicator but the state would still return to a constant state.

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


3 years ago

#4 @joedolson
3 years ago

Also, a change in background color that indicates focus and current would probably work fine. Either way, the change in HTML to add the buttons is a *critical* feature for accessibility.

Last edited 3 years ago by joedolson (previous) (diff)

#5 @joedolson
3 years ago

  • Priority changed from normal to high

This ticket was mentioned in Slack in #meta by tellyworth. View the logs.


2 years ago

#7 @obenland
2 years ago

For future reference: https://wordpress.slack.com/archives/C02QB8GMM/p1490220718836135

That could be resolved by moving .focus() to the FAQ answer, which can be made focusable using tabindex=-1, I'd think.

#8 @obenland
2 years ago

  • Owner set to obenland
  • Resolution set to fixed
  • Status changed from new to closed

In 5166:

Plugin Directory: Make FAQ toggles accessible

Restores focus styles for keyboard navigation and adds a focusable element to
toggle from.

Fixes #2296.

#9 @obenland
2 years ago

In 5167:

Plugin Directory: Add back compat with existing FAQ markup

Fixes a bug where existing FAQs were not toggle-able due to the missing button.

See #2296.

#10 @obenland
2 years ago

In 5195:

Plugin Directory: Insert toggle button through JS

KSES doesn't like buttons apparently and this should be a front-end change
anyway.

See #2296, [5166], [5167].

Note: See TracTickets for help on using tickets.