[4.0] [a11y] [NO CACHE] Make media manager browse view work with keyboard navigation #23950

wilsonge · 2019-02-19T23:34:33Z

This fixes the browse view aspect of what's discussed in #23932 (please do not close that issue as the list view is still to be worked on)

Fixes various a11y issue keyboard navigation issues in the media manager browse view

zwiastunsw · 2019-02-20T15:14:52Z

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>

zwiastunsw · 2019-02-20T15:24:01Z

The part of the toolbar is the breadcrumbs. It should be included in the nav tag with aria-label="You are here" (e.g)

    <ol class="media-breadcrumb">
      <li class="media-breadcrumb-item">
        <a href="#">images</a>
      </li>
      <li class="media-breadcrumb-item">
        <a href="#">banners</a>
      </li>
    </ol>

zwiastunsw · 2019-02-20T15:29:06Z

The toolbar should have the attribute role="toolbar" and the attribute aria-label="Media manager" (e.g).

  <div class="media-toolbar" role="toolbar" aria-label="COM_MEDIA_TOOLBAR">
    <!----> 
  </div>

zwiastunsw · 2019-02-20T15:37:12Z

In the toolbar we have a set of buttons. All of them are incorrectly tagged as links.
They should indicate to the user the status - a tag a cannot be used to indicate a state.

In addition: Grid switches (increase, decrease) should be hidden from screen readers.

wilsonge · 2019-02-20T20:25:32Z

Ok the toolbar role/label change is easy to do. What’s the recommended markup for the breadcrumbs? Should be easy enough

I’m leaving the checkboxes for another PR. Implementing a form element is going to be complicated and is not something I want to try doing as part of this PR

brianteeman · 2019-02-20T20:28:50Z

Look at the breadcrumbs module o think that's correct

zwiastunsw · 2019-02-20T20:47:08Z

<nav role="navigation" aria-label="COM_MEDIA_BREADCRUMBS">
       <ol class="media-breadcrumb">
         <li class="media-breadcrumb-item">
           <a href="#">images</a>
         </li>
       </ol>
   </nav>

wilsonge · 2019-02-21T17:59:01Z

OK Fixes to toolbar - it now has a role=toolbar, aria-label, and all the buttons are now <button> elements instead of <a> tags. Breadcrumbs fixes also pushed up. I deliberately didn't add the role=nav in the example @zwiastunsw gave because https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html was missing it and added in the aria-current mentioned there. But happy to flip back if needed.

wilsonge · 2019-02-21T18:11:10Z

I think that's everything covered aside from the checkboxes you guys have asked for

administrator/components/com_media/resources/scripts/components/browser/items/file.vue

administrator/components/com_media/resources/scripts/components/browser/items/image.vue

administrator/components/com_media/resources/scripts/components/toolbar/toolbar.vue

administrator/components/com_media/tmpl/media/default_texts.php

administrator/language/en-GB/en-GB.com_media.ini

language/en-GB/en-GB.com_media.ini

wilsonge · 2019-02-21T19:40:56Z

@brianteeman Would you be ok to the changes of an action list to type button - it is just as simple as changing the markup where you commented - but the styling is more complicated and I don't really have a huge amount of time to invest into trying to make it all work nicely

wilsonge · 2019-02-21T22:48:58Z

The button change makes the system tests fail - I think joomla/test-system#52 should fix that. Once you guys are happy with this PR i'll merge that up front

Back to the stage of I think it's only the checkboxes left

brianteeman · 2019-02-21T23:11:38Z

For the checkboxes see #23970

zwiastunsw · 2019-02-21T23:15:26Z

@wilsonge : read about links vs. button: Links vs. Buttons in Modern Web Applications

wilsonge · 2019-02-21T23:53:00Z

So can we run a last test on this and ensure that only the checkbox issue is left to solve in a separate place?

zwiastunsw · 2019-02-22T00:01:15Z

@wilsonge : Which files have you changed?

brianteeman · 2019-02-22T00:19:55Z

I will try to find some time tomorrow to take a look. because of the npm it takes a long time to build on windows (as you saw)

zwiastunsw · 2019-02-22T02:51:31Z

When the screen reader is on, the Enter and Space keys do not activate the action buttons (Download, Rename item...)
"Open item actions" button should be a menu button
The action buttons should be grouped by using a list elements (ul, li).
Use the arrow keys to move the focus between action items.

wilsonge · 2019-02-23T12:35:16Z

Done 1 and 3. I've done 2 and 4 on the image thing only. Unfortunately I need to head out but will try and find some time to do them on directory, file and video areas later today

wilsonge · 2019-02-23T14:09:02Z

Pushed - @zwiastunsw this should cover all the things you mentioned

wilsonge · 2019-02-25T11:35:31Z

@zwiastunsw @brianteeman Can you guys give this a final test - I understand there's more to do - but I'm being dragged back onto management responsibilities - handover to Harold and merging in j3 etc. So would like to get this in asap as a step in the right direction and then we can build up a list of next steps/you guys can try this yourselves (i promise it's not that bad!)

brianteeman · 2019-02-25T11:58:50Z

@wilsonge I will try to find some time tonight - I am working on some stuff for the marketing team thats taking my available time

zwiastunsw · 2019-02-25T12:10:37Z

@wilsonge: We've made an appointment today for a Skype session

brianteeman · 2019-02-26T13:10:23Z

Is it perfect - no
Is it better than it was yesterday - yes

If the non graphical view was also fixed then I believe that would be a reasonable accommodation

joomla/joomla-cms#23950

wilsonge · 2019-02-27T11:01:11Z

I'm going to do something separate for the list view - I was having issues with the icons showing - I can push what I had tonight - because I don't think it was a JS issue - it seemed something CSS - that I'm sure i was just being stupid with

@zwiastunsw

The increase/decrease grid size buttons in the media manager have aria-hidden=true This change was made in joomla#23950 at the request of @zwiastunsw joomla#23950 (comment) I dont understand why that request was made but at a minimum its implementation is wrong A focusable element with aria-hidden="true" is ignored as part of the reading order, but still part of the focus order, making it’s state of visible or hidden unclear.

@zwiastunsw

The increase/decrease grid size buttons in the media manager have aria-hidden=true This change was made in #23950 at the request of @zwiastunsw #23950 (comment) I dont understand why that request was made but at a minimum its implementation is wrong A focusable element with aria-hidden="true" is ignored as part of the reading order, but still part of the focus order, making it’s state of visible or hidden unclear.

joomla-cms-bot added Language Change This is for Translators NPM Resource Changed This Pull Request can't be tested by Patchtester PR-4.0-dev labels Feb 19, 2019

wilsonge changed the title ~~WIP at making media manager work with keyboard navigation~~ WIP at making media manager browse view work with keyboard navigation Feb 19, 2019

wilsonge changed the title ~~WIP at making media manager browse view work with keyboard navigation~~ [4.0] [a11y] Make media manager browse view work with keyboard navigation Feb 19, 2019

infograf768 mentioned this pull request Feb 21, 2019

[4.0] Text overlapping in image info #23902

Merged

wilsonge force-pushed the media-manager-ally branch 3 times, most recently from 9980e29 to d5e62bc Compare February 21, 2019 17:57

wilsonge force-pushed the media-manager-ally branch from d5e62bc to ed2aa29 Compare February 21, 2019 18:05

wilsonge force-pushed the media-manager-ally branch from ed2aa29 to 1084bdf Compare February 21, 2019 18:18