Selecting media - Revealing content focus order

[umbrabot]

When images are selected (in the Media section) and additional options appear, they should be after the images in the tab navigation

Steps to replicate:

1. Go to Media section
2. Select some existing images on the main dashboard
3. Additional menu options appear
4. Navigate with a keyboard (tab)
5. Focus does not go to those options

Issue: Revealing content: Activating a component that reveals hidden content must move input focus into the revealed content

Why it matters: When a keyboard user activates a control (such as a button) that reveals previously hidden content (such as a menu or dialog), they must be able to navigate quickly and easily into the revealed content.

How to fix: When the user reveals hidden content, move input focus into the revealed content. In most cases, focus should move to the first focusable element in the dialog.

However, if the revealed content is a dialog, certain circumstances might warrant moving focus to a different element:

• If focusing the first interactive element in a dialog causes the beginning of the dialog to scroll out of view, add tabindex="-1" to a static element at the top of the dialog (such as the dialog's title) and use scripting to move focus to that element.
• If a dialog allows the user to complete a process that is not easily reversible, consider setting focus on a button that simply dismisses the dialog (such as 'Cancel').
• If a dialog is intended to allow users to review their own input before committing to an action, consider setting focus on the dialog's commit button (such as 'Save' or 'Delete').

W3 reference: https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html

[MMasey]

PR available at https://github.com/umbraco/Umbraco-CMS/pull/13279

[mikecp]

Merged 😁