Improve accessibility of edit-selection mode

[adamsilverstein]

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

[adamsilverstein]

always show edit selection checkboxes

[adamsilverstein]

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

[bramd]

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]

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

[adamsilverstein]

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

[adamsilverstein]

further refine edit selection a11y

[adamsilverstein]

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?

[johnbillion]

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").

[johnbillion]

In 30374:

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

See #29326
Props adamsilverstein

[wonderboymusic]

Pretty sure view.controller is just this.

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

[adamsilverstein]

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 :)

[johnbillion]

Replying to johnbillion:

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

#24352

[adamsilverstein]

simplify selectorts

[adamsilverstein]

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.$( ... )

[ocean90]

In 30460:

grunt autoprefixer for [30374].

see #29326.

[ocean90]

In 30461:

Simplify selectors in [30374].

props wonderboymusic, adamsilverstein.
see #29326.