media views: improve keyboard accessibility avoiding confusing tab stops

[afercia]

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.

[florianziegler]

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.

[afercia]

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

[joedolson]

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.

[afercia]

Updated patch removes left: -200px;

[SergeyBiryukov]

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

[afercia]

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.

[DrewAPicture]

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.

[DrewAPicture]

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.

[hugobaeta]

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.

[afercia]

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:

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:

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

[afercia]

Refreshed patch.

[afercia]

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.