id,summary,reporter,owner,description,type,status,priority,milestone,component,version,severity,resolution,keywords,cc,focuses 36909,Media modal: improve the tab order for better accessibility,afercia,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 [[Image(https://cldup.com/9nr8qidJd8.jpg)]] 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: [[Image(https://cldup.com/QdkzWBFhhc.jpg)]] 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.",defect (bug),closed,normal,4.6,Media,,normal,fixed,has-screenshots has-patch media-a11y commit,,"ui, accessibility, javascript"