Report: Explore of new Media Manager - part I

[zwiastunsw]

Note:

• See the accessibility issues report by @brianteeman : [4.0] Media Manager joomla-cms#23932
• See comments on PR report by @wilsonge : [4.0] [a11y] [NO CACHE] Make media manager browse view work with keyboard navigation joomla-cms#23950

Result and recommended action

Summary of results

At the start of testing, the new Media Manager was completely inaccessible to keyboard and screen reader users. Corrections made by @wilsonge during testing slightly improved some elements.

Failures and recommendations

1. Too much menu objects

The problem occurs on all backend pages. There are 5 different menu objects on the Media Manager page.

• User menu in header
• Admin menu (sidebar)
• Toolbar
• Local menu (folder tree)
• Media manager toolbar

Currently there is no mechanism for quick access to these different menus for keyboard and screen reader users. Only mouse users can easily access these menus. The keyboard user must hit the tab key 26 times to move the cursor to the first object - folder or file.

2. An interactive object inaccessible to keyboard users

Grid views: Folder tree is not accessible. Info block is accessible for screen reader user only on browse mode (navigation through headers). More info: see below : 6. File/folder information accessible only for sighted users

Table views: Folder tree is not accessible. Info block is accessible for screen reader user on browse mode (navigation through headers). Items in the table are not accessible.

3. Unexpected highlighting of objects

Move the mouse pointer over an object (folder or file) to highlight the object:

4. File Directory Treeview not accessible

The widget is not accessible from the keyboard. The user of the screen reader does not obtain any information about the structure of the folders.

To ensure fully accessibility, you need to implement solutions such as File Directory Treeview Example Using Declared Properties.
In addition:

• use the nav tag with aria-label or aria-labelledby, to indicate that it is a navigation landmark
• use the H2 header to name this section, to facilitate navigation for users of screen readers

5. Focus does not returns to the element that invoked the dialog

When a dialog modal window closes, the focus does not return to the element that invoked the dialog.

6. File/folder information accessible only for sighted users

Sighted users can associate folder/file information with the selected folder or file. Unfortunately, blind users do not have this possibility at all.
Recommendation: Add the Info option to the options menu. Show information in the modal window at the user's request.
Other solution: add aria-describedby to the tag that selects the folder / file.

7. Unexplained meaning of icons

Option icons have their names accessible in the Accessibility tree. Unfortunately, neither the keyboard user nor the mouse user knows these names.
Recommendation: Provide a label for sighted users of the mouse and keyboard solution that meets accessibility requirements e.g using accessible tooltips

8. Screen reader announces the list, but does not announce the number of items

A group of options in the context menu is covered by list tags. But the screen reader does not inform the user how many items make up the list. Probably because of the complicated code.

9. Enter and Space keys do not activate the action buttons

When the screen reader is on, the Enter and Space keys do not activate the action buttons (Download, Rename item...) in the context menu.

10. Link used instead of checkbox

Link "Toggle select all" should be a checkbox. Anachor is an incorrect tag at this point. It is not possible to communicate the status of the switch to the users of the screen reader.

<div class="media-view-icons">
   <a href="#" aria-label="Toggle select all" class="media-toolbar-icon media-toolbar-select-all">
     <span aria-hidden="true" class="fa fa-square-o"></span>
   </a>
</div>

Link “Toggle select item” should be a checkbox. Anachor is an incorrect tag at this point. It is not possible to communicate the status of the switch to the users of the screen reader.

Code:

<div class="media-browser-item selected">
  <div class="media-browser-item-directory">
    <div class="media-browser-item-preview">
      <div class="file-background">
        <div class="folder-icon">
          <span class="fa fa-folder-o"></span>
        </div>
      </div>
    </div>
    <div class="media-browser-item-info">banners</div> 
    <a href="#" aria-label="Toggle select item" class="media-browser-select"></a> 
    <div class="media-browser-actions">
      <button type="button" aria-label="Open item actions" class="action-toggle">
        <span aria-hidden="true" class="image-browser-action fa fa-ellipsis-h"></span>
      </button> 
      <!---->
    </div>
  </div>
</div>

11. Screen reader does not announce folder/file names

When a folder or file is focused, the screen reader does not announce the folder/file name. The screen reader user does not get the necessary information, is confused. He only hears a message: "Select item visited link".

12. Keyboard user cannot open a folder

Only a mouse user can open a folder. To do this, you must double-click the cart (folder icon). This is a bad solution, also does not meet accessibility requirements.
The keyboard user has no way to open a folder.

13. Keyboard user cannot open a file to preview

Only a mouse user can open a file to preview. To do this, you must double-click the card (file thumb). This is a bad solution, also does not meet accessibility requirements.
The keyboard user has no way to open a file.

14. Modal not have accessible name

The dialog box does not have an accessible name. Use aria-labelledby and title marker id
Add the ID attribute to the H3 tag.

<div role-”alertdialog” class=”modal-dialog modal-sm” aria-labelledby=”modal-title-ID”>
   <div class=”modal-content”>
      <div class=”modal-header”>
         <h3 id=”modal-title-ID” class=”modal-title”>Rename</h3>
<!---->

15. Inaccessible buttons in the modal window

The Cancel & Save buttons in the modal window is inaccessible to the keyboard user.

In addition, the type attribute of the buttons has not been defined.

16. Modals "Share the file" completely inaccessible for screen reader

1. When you select icons "Get a sharable link", screen reader the screen reader does not annotate its name. Opening a modal window is not announced at all. The screen reader user does not know that he is in a new window. He does not know what operations he can perform.
   
2. Modals not have accessible name.
3. Only mouse users have access to the "Get a sharable link" button
4. Get a sharable link button is a link with the attribute role="button". This should be the button.
5. Only mouse users can copy the link to the clipboard:
   

[wilsonge]

Can we figure our way through this list in terms of what has/hasn't been done. I think the majority is still done (there's a few outstanding items I think). Things I think are left

• Keyboard navigation of the file directory tree viewer (part of 4)
• Checkbox (number 10)
• Focus on closing a modal (number 5)