Media modal: improve the tab order for better accessibility

[afercia]

See #30386 and #30512.

The accessibility work on the Media views has been on hold for a while, discussed a bit this topic during a recent accessibility chat on Slack and decided to try small steps and propose small improvements in small, clearly understandable, tickets.

In #30512 we learned a lot, and also done some mistakes :) but that ticket has probably a too broad scope, hence the decision for smaller tickets.

One of the main issues for keyboard and screen reader users in the Media Modal is about the tab order. In the screenshot below, the initial state of the media modal makes sense and the order is:

• menu sidebar
• top toolbar
• attachments grid

By the way, when one or more attachments get selected, the "Details" sidebar appears on the right and focus is automatically moved to the right sidebar. We'll discuss moving focus as a separate issue, for now please consider the tab order when the Details sidebar appears, see in the screenshot below where the main elements that compose the media modal are highlighted with a colored background:

In the source, the Details sidebar comes before the attachments grid. To experiment how much this can be annoying and confusing for keyboard and screen reader users, please test using only your keyboard to navigate through the modal. The tab order will be:

• 1) menu sidebar
• 2) 3) 4) top toolbar
• 5) is initially hidden
• 6) attachments grid
• now navigate through attachments and press Spacebar to select one of them
• once an attachment gets selected, focus is moved to 5) the Details sidebar
• keep tabbing through the details and at the end of the sidebar...
• ...you will be again in 6) the attachments grid and you will have to navigate through all the attachments again to finally land on 7) and have a chance to insert the image

The proposed change is to simply move the Details sidebar after the attachments grid. This would greatly improve the tab order. From a logical point of view, it also makes more sense to get the "details" of the selection after the selected item.

Since the modal layout is built with main containers that are absolutely positioned, the change would be very simple and doesn't require any CSS.

Worth considering that the media grid may have hundreds of attachments... it would be great to have also some sort of mechanism to allow keyboard users to "skip" the list of attachments, but this should be probably handled in #30386.

[ocean90]

36909.diff​ looks good to me.

Noticed some unrelated behavior: As soon as you're in the sidebar with the details you can't escape it with Shift+Tab anymore. It stucks at the Edit Image link. Is there already a ticket for that?

[afercia]

Replying to ocean90:

Is there already a ticket for that?

Yes, see #36900

[boonebgorges]

In 37608:

Add tests demonstrating query cache invalidation on comment CRUD actions.

See #36909.

[boonebgorges]

Groan, [37608] should have pointed to #36906.

[afercia]

Replying to boonebgorges:

Groan, [37608] should have pointed to #36906.

@boonebgorges you're always welcome to the accessible side of WP :)

[afercia]

In 37610:

Accessibility: match the visual and tab order in the Media Modal grid.

By moving the Details sidebar after the attachments grid, the tab order is
greatly improved for keyboard users and matches the logical and visual order.

Fixes #36909.