Create overrides feature needs to improve accessibility

[carcam]

Steps to reproduce the issue

Go to template manager -> Cassiopeia details and files -> create override

Expected result

The code for the tree view of components should display aria- properties as per the WAI reccommendations: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/ (thanks @brianteeman!!!)

Actual result

Tree view does not show these properties

System information (as much as possible)

Joomla 4

Additional comments

I also feel the UX of that screen should be improved as I find it confussing that one click expand the folder content and the same click on an end element directly creates the override. There is no indications and the only thing that differentiates the end of the tree is the icon on the right.

[brianteeman]

I see two specific issues

1. Everything is a link. A link should tell me what to expect when I follow the link. Currently it just has the name of the module etc. Maybe this can be improved by adding some sr-only text.

Changing

<li>
<a href="/administrator/index.php?option=com_templates&amp;view=template&amp;task=template.overrides&amp;folder=QzpcbGFyYWdvblx3d3dcajVcbW9kdWxlc1xtb2RfYXJ0aWNsZXNfYXJjaGl2ZQ==&amp;id=227&amp;file=aG9tZQ&amp;isMedia=0&amp;73ad755ad588508ed1c15e0b4f5e80c3=1">
<span class="icon-copy" aria-hidden="true"></span>
&nbsp;mod_articles_archive</a>
</li>

To

<li>
<a href="/administrator/index.php?option=com_templates&amp;view=template&amp;task=template.overrides&amp;folder=QzpcbGFyYWdvblx3d3dcajVcbW9kdWxlc1xtb2RfYXJ0aWNsZXNfYXJjaGl2ZQ==&amp;id=227&amp;file=aG9tZQ&amp;isMedia=0&amp;73ad755ad588508ed1c15e0b4f5e80c3=1">
<span class="icon-copy" aria-hidden="true"></span>
<span class="sr-only">Create override</span> 
&nbsp;mod_articles_archive</a>
</li>

2. When the link is to simply open the tree then it should not be a link as its doing something and not going somewhere. The treeview pattern should gelp there.

[iamrobert]

@brianteeman

Thanks for looking into this.

One more small item I noticed was the home menu disappears from the main menu:

[brianteeman]

whatever that is will be unrelated - so please could you open a new issue with that explaining exactly when the home menu icon disappears from a site menu

[carcam]

@brianteeman thanks for your reply. Your proposal looks good to me. I still feel it has some UX issues, but that's for another issue.

The only thing I think we should give a spin is to the translation of the sr-only text. In the few languages I know, the grammatical structure "Create override + NAME" works fine, but maybe it would be interesting to offer a way for languages with different grammar rules?

[brianteeman]

Create override + NAME"

I would make it a sprintf "Create overide %1" so that resolves that issue

[carcam]

@brianteeman but then we need to include the span and the sr-only class in the translation, don't we? Or we duplicate the name of the element to override?

[brianteeman]

@brianteeman but then we need to include the span and the sr-only class in the translation, don't we? Or we duplicate the name of the element to override?

yes it would appear so. even if we only fix that part now and leave the tree accessibility to another day this will be an improvement