WordPress.org

Make WordPress Core

Opened 2 months ago

Closed 3 weeks ago

#48355 closed defect (bug) (fixed)

Media: add semantic indication for the buttons group active state

Reported by: afercia Owned by: afercia
Milestone: 5.3.1 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-screenshots has-patch fixed-major
Focuses: ui, accessibility, javascript Cc:
PR Number:

Description

In the media views, there are a few places where "buttons groups" are used. For example: the alignment setting, the video preload setting, the "Insert from URL' media settings:

http://cldup.com/7-ntuHXNvn.png

The active button gets an .active CSS class, which changes the visual and makes the button look active.

However, there's no semantic indication at all of the button state. Assistive technologies and any other software won't have a clue what the active setting value is.

The aria-pressed state would help in this case. Although, according to the ARIA recommendation, it should be used on buttons that "require a full press-and-release cycle to change their value", it's the only ARIA attribute that can be used on buttons to communicate their active state.

Attachments (1)

48355.diff (770 bytes) - added by afercia 2 months ago.

Download all attachments as: .zip

Change History (7)

@afercia
2 months ago

#1 @afercia
2 months ago

  • Keywords has-patch added

48355.diff adds the aria-pressed attribute to the media buttons group. This way, buttons in a group are announced as "toggle button" (the announcement may vary depending on the screen reader):

http://cldup.com/VX_ci-Vie0.png

And the active button is announced as "selected":

http://cldup.com/jCSfblLfef.png

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


7 weeks ago

#3 @afercia
7 weeks ago

  • Milestone changed from Awaiting Review to 5.3.1
  • Owner set to afercia
  • Status changed from new to assigned

#4 @afercia
4 weeks ago

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

In 46748:

Accessibility: Media: Add an aria-pressed attribute to active button within a button group.

The aria-pressed attribute communicates semantically the "active" state of buttons that otherwise only look "active".

Fixes #48355.

#5 @afercia
4 weeks ago

  • Keywords fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for 5.3.1 consideration.

#6 @SergeyBiryukov
3 weeks ago

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

In 46778:

Accessibility: Media: Add an aria-pressed attribute to active button within a button group.

The aria-pressed attribute communicates semantically the "active" state of buttons that otherwise only look "active".

Props afercia.
Merges [46748] to the 5.3 branch.
Fixes #48355.

Note: See TracTickets for help on using tickets.