No Code Attached Yet a11y bug
avatar carcam
carcam
27 Jul 2023

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.

avatar carcam carcam - open - 27 Jul 2023
avatar joomla-cms-bot joomla-cms-bot - change - 27 Jul 2023
Labels Added: No Code Attached Yet
avatar joomla-cms-bot joomla-cms-bot - labeled - 27 Jul 2023
avatar brianteeman
brianteeman - comment - 27 Jul 2023

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>
  1. 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.
avatar iamrobert
iamrobert - comment - 27 Jul 2023

@brianteeman

Thanks for looking into this.

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

ISSUE

avatar brianteeman
brianteeman - comment - 27 Jul 2023

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

avatar carcam
carcam - comment - 28 Jul 2023

@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?

avatar brianteeman
brianteeman - comment - 28 Jul 2023

Create override + NAME"

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

avatar carcam
carcam - comment - 31 Jul 2023

@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?

avatar brianteeman
brianteeman - comment - 1 Aug 2023

@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

avatar brianteeman brianteeman - change - 12 Aug 2023
Labels Added: a11y
avatar brianteeman brianteeman - labeled - 12 Aug 2023
avatar Hackwar Hackwar - labeled - 28 Mar 2024
avatar Hackwar Hackwar - change - 28 Mar 2024
Labels Added: bug

Add a Comment

Login with GitHub to post a comment