Problem/Motivation

When narrowing down the browser window so the navigation switches to the mobile version the X button is excluded from the tabindex and not reachable by the keyboard. But on the desktop you not only reach the mobile version by narrowing down the window width but also if you zoom into your browser window. So they close button not accessible to the keyboard is relevant for desktop users as well.

Steps to reproduce

  • Either narrow down the window width or zoom into your browser window until the navigation switches to the mobile version

Proposed resolution

remove the tabindex=-1 and maybe also add the option to collapse the navigation in the mobile version by pressing the ESC button

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#8 Test article _ drupal11-OS.gif1.1 MBahsannazir

Issue fork drupal-3448100

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rkoller created an issue. See original summary.

Gauravvvv made their first commit to this issue’s fork.

gauravvvv’s picture

Status: Active » Needs review
smustgrave’s picture

Status: Needs review » Needs work

MR should be 11.x

Think adding a javascript test for the escape key press should be possible.

ahsannazir made their first commit to this issue’s fork.

quietone’s picture

Version: 11.0.x-dev » 11.x-dev
ahsannazir’s picture

StatusFileSize
new1.1 MB

The close btn is keyboard accessible now and also verified pressing the Esc key closes the menu.

kentr’s picture

Issue tags: +Needs tests

It looks like #8 demonstrates the Olivero menu, not the Navigation module menu. I can reproduce this on 11.x.

Needs tests for #5.

It should also be possible to test that the Close button is tab-able. It would be good to do that to mitigate against a regression.

catch’s picture

The MR still needs to target 11.x

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.