Contrib.social

Dropdown menus need to disable child links from tabbing

Open on Drupal.org →
Created on 10 November 2023, about 1 year ago
Updated 15 November 2023, about 1 year ago

Problem/Motivation

Currently when a dropdown menu is closed, it has to be done with display: none; or visibility: hidden; to prevent tabbing into the menu. This presents a number of constraints in FED as those two properties can not be transitioned or animated. Rather than put the burden on CSS to preserve a11y for JS interactions, the scripts should ensure this is correct by disabling child links from interaction using aria-hidden and tabindex. Adding a snippet like this to all open/closures solves this and then frees up FED to do more with animations:

this.menuNode.querySelectorAll('.menu__link').forEach(link => {
link.setAttribute('aria-hidden', 'true');
link.setAttribute('tabindex', '-1');
});

🐛 Bug report
Status

Fixed

Version

5.0

Component

Code

Created by

🇺🇸United States jnettik Denver, CO

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024