WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 5 months ago

#30599 closed defect (bug) (fixed)

media views: improve keyboard accessibility avoiding confusing tab stops

Reported by: afercia Owned by: afercia
Milestone: 4.8 Priority: normal
Severity: normal Version: 4.0
Component: Media Keywords: has-patch has-screenshots
Focuses: ui, accessibility Cc:

Description

When hiding parts of the UI it's very important to take into consideration side-effects on keyboard accessibility. For example, when media-menu is hidden, e.g. when editing images, it's just positioned out of view but links in the menu are still there and they are focusable. See screenshot.

When tabbing, keyboard users get a variable number of confusing tab stops that shouldn't be there.

Actually, it's also possible to activate one of the links in the menu (just tab into one of them and press Enter) and break the editing workflow.
Unless I'm missing something, the media menu should be hidden with display: none I'm guessing the out of view positioning is there just for historical reasons.

https://cldup.com/tfDzl1O6r0.png

Attachments (4)

30599.patch (382 bytes) - added by afercia 2 years ago.
30599.2.patch (385 bytes) - added by afercia 2 years ago.
30599.3.patch (748 bytes) - added by SergeyBiryukov 2 years ago.
30599.diff (743 bytes) - added by afercia 5 months ago.

Download all attachments as: .zip

Change History (25)

@afercia
2 years ago

#1 @afercia
2 years ago

  • Keywords has-patch added

#2 @wonderboymusic
2 years ago

  • Milestone changed from Awaiting Review to 4.2

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


2 years ago

#4 follow-up: @florianziegler
2 years ago

Tested. Works.

Can anyone comment if "left: -200px;" is still necessary after "display: none;" is added?

Also as mentioned here and here there is still an issue, that should probably fixed separately.

#5 in reply to: ↑ 4 @afercia
2 years ago

  • Keywords dev-feedback added

Replying to florianziegler:

Also as mentioned here and here there is still an issue, that should probably fixed separately.

Update: that issue has been fixed in r31117 see also #30392 (closed, fixed). Still needs devs feedback and, hopefully, commit :)

#6 @joedolson
2 years ago

I can't think of any reason that the left positioning is still relevant in combination with display: none - with the menu removed from flow entirely, I don't see how it could be necessary. Seems like that might as well be removed.

#7 @joedolson
2 years ago

  • Keywords dev-feedback removed

@afercia
2 years ago

#8 @afercia
2 years ago

Updated patch removes left: -200px;

#9 follow-up: @SergeyBiryukov
2 years ago

Should we do the same for .media-frame-toolbar? See 30599.3.patch.

#10 in reply to: ↑ 9 @afercia
2 years ago

Replying to SergeyBiryukov:

Should we do the same for .media-frame-toolbar? See 30599.3.patch.

Not sure all the .hide-something rules are meant to really hide things, sometimes they're out of view and then they slide in with some kind of animation.

This ticket was mentioned in Slack in #core by drew. View the logs.


2 years ago

#12 @DrewAPicture
2 years ago

  • Keywords ui-feedback added

Would be nice to know if we still need the left: -200px; values for the media frame toolbar. Maybe we can get some feedback from the UI folks.

This ticket was mentioned in Slack in #core by drew. View the logs.


2 years ago

#14 @DrewAPicture
2 years ago

  • Milestone changed from 4.2 to Future Release

I think we need more information from some UI folks re: comment:12 and the proposed changes in general before we should move forward with this. Punting.

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


9 months ago

#16 @hugobaeta
9 months ago

  • Keywords ui-feedback removed

Removing the ui-feedback tag, since this change doesn't affect the UI.

I'm also giving my +1 to this change to improve accessibility.

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


5 months ago

#18 @afercia
5 months ago

  • Keywords has-screenshots needs-refresh added
  • Milestone changed from Future Release to 4.8

Looking back at this, can still reproduce it. Edit a post, click "Add Media", select an image and click on "Edit Image" in the right sidebar: the media-frame-menu is there on the left with all its links, just hidden out of view. Using the keyboard, each link is a hidden tab stop. Screen readers can still access the links and activate them:

https://cldup.com/5ObQ3Khn4N.jpg

Researched a bit for the .media-frame-toolbar case, and seems to me it's only used for back compatibility with plugins that still use Thickbox and the old upload method. Not 100% sure this back compatibility hack still works. By the way, it's intended to display thickbox inside an iframe inside the modal and the bottom toolbar gets hidden out of view with bottom: -61px:

https://cldup.com/Ow7tN39Zwa.png

I think it can be safely hidden with display: none so 30599.3.patch looks good to me, just needs a refresh.

@afercia
5 months ago

#19 @afercia
5 months ago

  • Keywords needs-refresh removed

Refreshed patch.

#20 @afercia
5 months ago

  • Owner set to afercia
  • Status changed from new to assigned

#21 @afercia
5 months ago

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

In 39529:

Accessibility: Improve keyboard accessibility avoiding confusing tab stops in the Media views.

When sections of the media modal are hidden out of view, their controls may be
still focusable and actionable. This completely hides these sections to avoid
unnecessary tab stops and potential confusion for assistive technology users.

Props SergeyBiryukov, afercia.

Fixes #30599.

Note: See TracTickets for help on using tickets.