Problem/Motivation

Unable to tab through mega menu links.

Steps to reproduce

1. https://dev-lehigh-alumni.pantheonsite.io/
2. tab to "connect" main menu item (mega menu opens correctly)
3. hit tab again and mega menu opens and is focused (due to my own js, otherwise would just jump to next main nav item)
4. hit tab again and focus jumps to next main nav item, instead of jumping to the first link inside the mega menu

Proposed resolution

Should be able to tab through the mega menu links, and not just the top level main nav items.

CommentFileSizeAuthor
#5 3238342.diff2.58 KBknaffles

Comments

HeatherC7474 created an issue. See original summary.

HeatherC7474’s picture

HeatherC7474 commented

Just FYI I just commented out the js I had written to try to force the tabbing, so you should now be seeing from that link the default behavior from the module.

themodularlab’s picture

themodularlab
He/Him
Primary language English
commented

@HeatherC7474,

Hi. Thanks for reporting this. We'll take a look at this and get back to you.

smortimore’s picture

smortimore commented

I'll second this request. This issue is a blocker on a project requiring accessibility compliance. Thanks for looking into a resolution.

knaffles’s picture

knaffles commented
StatusFileSize
new 3238342.diff2.58 KB

@HeatherC7474 and @smortimore, please try the attached patch and let me know if this fixes the issue for you. But please note that once you have tabbed to a top-level menu item, you then need to use the down arrow key to cycle through the links within the dropdown. Thanks!

knaffles’s picture

knaffles commented
Status: Active » Needs review
HeatherC747’s picture

HeatherC747 commented

@knaffles Thanks. I installed this plugin without composer so I'm trying to add the patch via the instructions on this page https://www.drupal.org/project/tb_megamenu/git-instructions . However, each time I run the apply command I get "Skipped patch 'js/tb-megamenu-frontend.js'. I've never applied a patch before - is there some step I'm missing? The .diff file is in the tb_megamenu directory. Do I need to convert the .diff file to a .patch file?

knaffles’s picture

knaffles commented

@HeatherC747 - sorry for the late reply. You should be able to just save the .diff file to the root of your tb_megamenu directory and then open up a terminal window, go to the root of your tb_megamenu directory and run:

git apply -v ./3238342.diff

...or substitute the name of your patch file. It doesn't need to have any particular extension. You should then see a message that says:

Checking patch js/tb-megamenu-frontend.js...
Applied patch js/tb-megamenu-frontend.js cleanly.

I just tried it on the 8.x-1.x branch and it worked as expected for me.

henry.odiete’s picture

henry.odiete commented

I tried the patch in #5 and it worked in conjunction with adding 'tabindex=0' to non-focusable blocks in my menu.

knaffles’s picture

knaffles commented
Status: Needs review » Reviewed & tested by the community
knaffles’s picture

knaffles commented
knaffles’s picture

knaffles commented
Status: Reviewed & tested by the community » Fixed

This is fixed in release 8.x-1.6.

andrewozone’s picture

andrewozone
he/him
commented

I was also able to apply the patch and verify the fix. Thanks!

However, I did have the same issue as @HeatherC747 when applying the patch. I was able to work around it by using the following to apply the patch. Hope this helps @HeatherC747 moving forward if you need to apply another patch!

patch -p1 3238342.diff

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.