No Code Attached Yet a11y bug
avatar lushdomain
lushdomain
29 Nov 2023

I've just tested a new webpage on a dev site I'm working on in Page Speed Insights and one of the failing items is in the Accessibility section. It highlights an issue with the standard Joomla menu module.

Currently I only have 4 level 1 menu items, with a single level 2 menu item from one of the level 1 menu items. This single level 2 menu item is the one that generates the error.

If I test on the parent menu item of the failing level 2 menu item page, I get the same error in PSI.

It would appear that the aria-hidden ="true" attribute is being added by JS at some point as if I check the Source of the page with dev tool this attribute is missing from the HTML

But if checked with 'Inspect' the failing code is present.

It states:

[aria-hidden="true"] elements contain focusable descendents
Focusable descendents within an [aria-hidden="true"] element prevent those interactive elements from being available to users of assistive technologies like screen readers. Learn how aria-hidden affects focusable elements.
Failing Elements

Find Your Distributor
<ul class="mod-menu__sub list-unstyled small" aria-hidden="true">
Find Your Distributor
<a href="/distributor/find-your-distributor" aria-current="page">

Steps to reproduce the issue

None, It happens right away

Expected result

Not sure, but certainly no errors should be recorded in page Speed Insights

Actual result

Device and system info

  • What version of Joomla were you using?
    5.0.1

  • What device were you using? (eg, phone, laptop)
    Laptop

  • What web browser were you using? (eg, Chrome, Safari)
    Chrome

  • If you were using assistive technology, please let us know the device or software you were using (eg VoiceOver, JAWS, sip-and-puff device, etc)
    None

Additional comments

If you know which WCAG or ATAG criteria this violates, please indicate it here:
https://dequeuniversity.com/rules/axe/4.7/aria-hidden-focus

Standard(s)
WCAG 2.1 (A)
WCAG 2.0 (A)
Trusted Tester
WCAG Success Criteria [WCAG 2.1 (A)]
4.1.2: MUST: Name, Role, Value
WCAG Success Criteria [WCAG 2.0 (A)]
4.1.2: MUST: Name, Role, Value
Trusted Tester Guidelines
6.A: MUST: The purpose of each link or button can be determined from any combination of the link/button text, accessible name, accessible description, and/or programmatically determined link/button context.
[aria-hidden="true"] elements contain focusable descendents
Focusable descendents within an [aria-hidden="true"] element prevent those interactive elements from being available to users of assistive technologies like screen readers. Learn how aria-hidden affects focusable elements.
Failing Elements

Find Your Forte Distributor
<ul class="mod-menu__sub list-unstyled small" aria-hidden="true">
Find Your Distributor
<a href="/distributor/find-your-distributor" aria-current="page">
avatar lushdomain lushdomain - open - 29 Nov 2023
avatar joomla-cms-bot joomla-cms-bot - change - 29 Nov 2023
Labels Added: No Code Attached Yet a11y
avatar joomla-cms-bot joomla-cms-bot - labeled - 29 Nov 2023
avatar lushdomain lushdomain - change - 29 Nov 2023
The description was changed
avatar lushdomain lushdomain - edited - 29 Nov 2023
avatar brianteeman
brianteeman - comment - 29 Nov 2023

can you share a link to the site please

avatar lushdomain
lushdomain - comment - 29 Nov 2023

Update:

I've just tested a different page on the website with a second menu module used. This second menu module only has level 1 items. In PSI there are no additional errors recorded. So, it would seem the issue is only present if menu sublevels are used.

avatar brianteeman
brianteeman - comment - 29 Nov 2023

can you try this please.

Copy all the files in templates\cassiopeia\html\mod_menu
to
templates\area65\html\mod_menu

and then in the menu module advanced tab set the layout to collapsible dropdown

avatar lushdomain
lushdomain - comment - 29 Nov 2023

ok, hold on, I'll do it now

avatar lushdomain
lushdomain - comment - 29 Nov 2023

brian

Ok, done. But there's not a collapsible dropdown option for my template. Please see the attached image for my options.

avatar brianteeman
brianteeman - comment - 29 Nov 2023

thats just a missing language string. select the highlighted on in your screenshot

avatar lushdomain
lushdomain - comment - 29 Nov 2023

ok done.

avatar lushdomain
lushdomain - comment - 29 Nov 2023

I also tested the 'collapsible default menu' option from the module. Which works as expected and did not return an error in PSI. So, maybe it's just an issue in the base default menu option.

avatar dgrammatiko
dgrammatiko - comment - 30 Nov 2023

thats just a missing language string. select the highlighted on in your screenshot

Not really, I had a PR for that: #39313 but nobody cared to test it

avatar chmst
chmst - comment - 30 Nov 2023

@dgrammatiko would you re-open your PR? please :)

avatar Hackwar Hackwar - change - 26 Mar 2024
Labels Added: bug
avatar Hackwar Hackwar - labeled - 26 Mar 2024

Add a Comment

Login with GitHub to post a comment