WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#29326 closed enhancement (fixed)

Improve accessibility of edit-selection mode

Reported by: adamsilverstein Owned by:
Milestone: 4.1 Priority: normal
Severity: normal Version: 4.0
Component: Media Keywords: has-patch dev-feedback
Focuses: accessibility, javascript Cc:
PR Number:

Description

Two issues when using the edit selection mode - this mode is this is accessed from the post 'Add Media' modal- when multiple items are selected, 'Edit' appears in the bottom toolbar next to "clear" - taking you to the the 'edit selection' mode where you edit whats in your selection:

  • Focus is lost going into/out of edit-selection mode. set focus to close or back button
  • Can't remove items from edit-selection mode, which is the main point of edit-selection mode. needs patch, probably make the close icons have a tabindex and focus styling and always be visible

note these items originally raised in #23560

Attachments (4)

29326.diff (857 bytes) - added by adamsilverstein 5 years ago.
always show edit selection checkboxes
29326.2.diff (1.0 KB) - added by adamsilverstein 5 years ago.
focus on 'Back to Library' button when entering edit-selection mode
29326.3.diff (2.5 KB) - added by adamsilverstein 5 years ago.
further refine edit selection a11y
29326.4.diff (653 bytes) - added by adamsilverstein 5 years ago.
simplify selectorts

Download all attachments as: .zip

Change History (19)

@adamsilverstein
5 years ago

always show edit selection checkboxes

#1 @adamsilverstein
5 years ago

29326.diff - always show the edit selection checkboxes; remove action doesn't always work on keyboard still

This ticket was mentioned in IRC in #wordpress-ui by RianRietveld. View the logs.


5 years ago

#3 in reply to: ↑ description @bramd
5 years ago

Replying to adamsilverstein:

  • Focus is lost going into/out of edit-selection mode. set focus to close or back button

I would suggest that focus goes into the list of files/images when entering edit mode, so people can start selecting right away without pressing tab a few times first. This might also make sense when exiting edit mode.

@adamsilverstein
5 years ago

focus on 'Back to Library' button when entering edit-selection mode

#4 @adamsilverstein
5 years ago

Still needs work - currently only the selected image is removed when <enter>ing on a checkbox.

@adamsilverstein
5 years ago

further refine edit selection a11y

#5 @adamsilverstein
5 years ago

  • Keywords has-patch dev-feedback added

In 29326.3.diff:

better accessibility for the edit selection mode,

  • Always show close button over images so tabbable
  • remove image on key enter or space when on close button
  • Focus on back to library button when opening edit selection mode

Before: https://cloudup.com/cdf4VBp0InQ
After: https://cloudup.com/cwK90uD69XH

Question: should I focus on the first image when opening instead?

#6 @johnbillion
5 years ago

  • Milestone changed from Awaiting Review to 4.1

#7 follow-up: @johnbillion
5 years ago

I think initially focusing on the back button makes sense.

In addition, the "Edit" link in the selection toolbar doesn't have any context for screen readers. We should add some more descriptive screen reader text (or indeed, make the visible text say "Edit Selection").

#8 @johnbillion
5 years ago

In 30374:

Improve keyboard control of Edit Selection mode in the media manager.

See #29326
Props adamsilverstein

#9 follow-ups: @wonderboymusic
5 years ago

Pretty sure view.controller is just this.

modal.$el.find( ... ) can just be modal.$( ... )

#10 in reply to: ↑ 9 @adamsilverstein
5 years ago

Replying to wonderboymusic:

Pretty sure view.controller is just this.

modal.$el.find( ... ) can just be modal.$( ... )

Sounds reasonable, I will test/patch unless you beat me to it :)

#11 in reply to: ↑ 7 @johnbillion
5 years ago

Replying to johnbillion:

In addition, the "Edit" link in the selection toolbar doesn't have any context for screen readers.

#24352

@adamsilverstein
5 years ago

simplify selectorts

#12 in reply to: ↑ 9 @adamsilverstein
5 years ago

  • Focuses javascript added

In 29326.4.diff:

Simplify selectors:

  • Use this instead of view.controller
  • Use modal.$ instead of modal.$el.find

@wonderboymusic: Thank you sir!

Replying to wonderboymusic:

Pretty sure view.controller is just this.

modal.$el.find( ... ) can just be modal.$( ... )

#13 @ocean90
5 years ago

In 30460:

grunt autoprefixer for [30374].

see #29326.

#14 @ocean90
5 years ago

In 30461:

Simplify selectors in [30374].

props wonderboymusic, adamsilverstein.
see #29326.

#15 @johnbillion
5 years ago

  • Resolution set to fixed
  • Status changed from new to closed
Note: See TracTickets for help on using tickets.