Contrib.social

Mobile Keyboard broken - Includes Patch to Fix it

Open on Drupal.org →
Created on 19 October 2022, about 2 years ago
Updated 29 March 2024, 8 months ago

Problem/Motivation

Keyboard control for ARIA compliance is broken in the current release. Users can use "tab" but that's not ARIA or screen reader compliant. Also users can't use the keyboard to select menus nor sub-menus.

Steps to reproduce

View page in smaller breakpoint where mobile menu displayed.

Proposed resolution

Have filter detect not by the width or height position of an item but the properties and attributes of the list item.

Noted Fix.

tb_megamenu
/js
-- frontend.js

Current code:
line start: 37

      topLevel = [...topLevel];
      topLevel = topLevel.filter((element) => {
        // Check if the element is visible.
        return element.offsetWidth > 0 && element.offsetHeight > 0;
      });

Proposed Fix:
line start: 37

      topLevel = [...topLevel];
      topLevel = topLevel.filter((element) => {
        // CHeck element is actually top level.
        var elementClasses = element.className.split(" ");
        return elementClasses.includes('tbm-link', 'level-1');
      });

fixes the keyboard navigation both on desktop and mobile.

Patch forthcoming.

🐛 Bug report
Status

Needs work

Version

3.0

Component

Code

Created by

🇺🇸United States emptyvoid

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024