Joomla! Issue Tracker | Joomla! CMS #43101 - Menu javascript accessibility error

No Code Attached Yet a11y

Closed
22 Mar 2024
Medium
Build: 4.4-dev
# 43101

brianteeman
20 Mar 2024

Steps to reproduce the issue

Create a menu with at least one menu item of type URL that has an icon class as shown in the screenshot below

Display that menu in a module with the default layout

Visually this will be displayed correctly

However if you look at the generated code you will see that the icon has been given focus by the addition of a tabindex.

This causes several accessibility and usability problems.

ARIA hidden element must not be focusable or contain focusable elements
Using the aria-hidden="true" attribute on an element removes the element and ALL of its child nodes from the accessibility API making it completely inaccessible to screen readers and other assistive technologies, That is what we want for the icon BUT the addition of the tabindex now gives it focus.

So now the menu item has two focussable elements but only one of them does anything. For example if you are tabbing through the page you will need to tab twice. Once to focus on the icon (which does nothing as it is hidden) and a second time to focus on the link.

I believe that the problem is locaated in the javascript here

joomla-cms/build/media_source/mod_menu/js/menu.es6.js

Lines 40 to 45 in 3db2bf3

    
           const spanEl = topLevelEl.querySelector('span'); 
        
           if (spanEl) { 
        
             spanEl.tabIndex = '0'; 
        
             spanEl.addEventListener('mouseover', topLevelMouseOver(topLevelEl, settings)); 
        
             spanEl.addEventListener('mouseout', topLevelMouseOut(topLevelEl, settings)); 
        
           }

brianteeman - open - 20 Mar 2024

joomla-cms-bot - change - 20 Mar 2024

Labels

Added: No Code Attached Yet

joomla-cms-bot - labeled - 20 Mar 2024

C-Lodder - comment - 21 Mar 2024

I have a feeling this was done for icons that trigger a dropdown menu, or maybe menu items with a separator type.
The core template has changed drastically since J4 was first worked on, so dropdowns now use the correct semantics.

Maybe the logic can be changed so that tabindex is only added to the <span> when the parent element is not <a>?

Like so:

if (spanEl) { 
  if (spanEl.parentNode.nodeName !== 'A') {
     spanEl.tabIndex = '0';
  }
  spanEl.addEventListener('mouseover', topLevelMouseOver(topLevelEl, settings)); 
  spanEl.addEventListener('mouseout', topLevelMouseOut(topLevelEl, settings)); 
}

chmst - change - 22 Mar 2024

Labels

Added: a11y

chmst - labeled - 22 Mar 2024

brianteeman - change - 22 Mar 2024

Status	New	⇒	Closed
Closed_Date	0000-00-00 00:00:00	⇒	2024-03-22 09:22:50
Closed_By		⇒	brianteeman

brianteeman - close - 22 Mar 2024

brianteeman - comment - 22 Mar 2024

Thanks @C-Lodder

Add a Comment

Older
Newer

Joomla! Issue Tracker - CMS

[#43101] - Menu javascript accessibility error

Steps to reproduce the issue

Add a Comment

	const spanEl = topLevelEl.querySelector('span');
	if (spanEl) {
	spanEl.tabIndex = '0';
	spanEl.addEventListener('mouseover', topLevelMouseOver(topLevelEl, settings));
	spanEl.addEventListener('mouseout', topLevelMouseOut(topLevelEl, settings));
	}