Media Manager Folder Selectory a11y

[wilsonge]

Pull Request for Issue joomla/accessibility#58 .

Also raised directly by a blind user of Joomla as part of the Joomla User Group in London where he was unable to utilise the media manager without a mouse because of this specific issue.

Summary of Changes

Adds keyboard support for navigating the media manager directory view trying to follow the examples at https://w3c.github.io/aria-practices/examples/treeview/treeview-1/treeview-1b.html

//cc @brianteeman because I suspect you have a much better idea of best practice than me. Also @chmst from the a11y team

For Maintainers

Practically this merges the item and tree view's together because without it you have to start doing weird event emissions as events in vue only bubble to the parent component and not higher. This is fine for us - but it practically only works if you have the entire tree in a single view. I've done the merge (without changes) in one commit. Then applied the a11y fixes in the second commit for easier review.

Testing Instructions

Check that the media manager folder tree still renders in the browser

Actual result BEFORE applying this Pull Request

Tree renders. Before patch there is no way beyond selecting the area to navigate between items.

Expected result AFTER applying this Pull Request

Tree renders. You can move through items in tree once selected with the up/down arrows (for items in the same level of nesting) and use the left/right arrow keys to move between layers. Enter to select one.

Documentation Changes Required

None

[brianteeman]

keyboard navigation works as expected for a tree

[wilsonge]

keyboard navigation works as expected for a tree

Amazing. Thankyou!

In that case code style issues fixed, branch rebased and this is ready for testing

[chmst]

I have tested this item ✅ successfully on d5bcb96

I am pleased to press the successful here for Julian with his comment: "Regarding the modification by George on the media manager, it’s wonderful! Previously it was very difficult to choose an image folder but now, it works very well with a screen reader. Very impressed and thank you George."

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38126.}

[Quy]

Select a directory.
Press the right arrow key.

[wilsonge]

@Quy presumably this is specifically for directories that don't have a child?

[Quy]

Yes, that appears to be the case.

[wilsonge]

OK Should be fixed. Just added a extra if statement

[richard67]

@chmst Do you think you can contact Julian and motivate him to do again a test? There has been made a fix for trying to navigate to a subfolder with the right arrow key when there is no subfolder. And could you ask him to test the other PR #38141 , too? That would be really cool. Thanks in advance.

[richard67]

I have tested this item ✅ successfully on d4d3fdc

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38126.}

[Quy]

I have tested this item ✅ successfully on d4d3fdc

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38126.}

[Quy]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38126.}

[HLeithner]

thanks