Off Canvas Accessibility Question - Focus issue

[mattmintun]

Hey there,

I’m attempting to fix some accessibility issues with Pro theme - unfortunately there’s a ton that I’m having to edit with javascript. But that’s the nature of the beast! So, I have a mobile menu button that when clicked opens content area off canvas. My goal is to put focus on the first menu item (I’m using a shortcode to populate this flyout with a widget area).

Here’s what I’m using to add focus:

var inputs = $('#flyout-menu-off-canvas').find('select, input, textarea, button, a').filter(':visible');
var firstInput = inputs.first();
var lastInput = inputs.last();
var firstMenu = inputs.eq(3);

// When flyout is open with enter key, place focus on first item
$('#flyout-menu-anchor-toggle').on('keypress', function(e){
  var key = e.which || e.keyCode;
  if ( key === 32 || key === 13 ) {
    firstMenu.focus().addClass("focusedIn");
  }
});

2 Issues:

• “enter” (key === 13) doesn’t trigger my keypress function (maybe it’s overwritten by Pro Theme?)
• I did the “addClass” to firstMenu because I wanted to see what was actually getting focus. The correct menu actually IS getting the class added to it, but focus is not applied to this element. When I hit “tab” at this point (after opening the menu), the close button is then selected. If after clicking the button to open it, I hit shift+tab, it goes to the very bottom of my site.

I already have javascript to “trap” screen readers in the flyout until they close it (surprised this isn’t built in) but I can’t apply focus to anything. I’m thinking Pro is taking over focus.

Any help would be greatly appreciated!
Matt

[ruenel]

Hello Matt,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[rad]

Hi Matt,

Would you mind providing your admin login credentials in the secure note as well? Have you customized the features related to the off canvas? I have Pro 3.1.2 just like yours, the difference is, the toggle uses <button> element like from here

instead of <a></a> element like from my setup

But we go further, the theme doesn’t block any keypress event especially the toggle are mostly click and touch activated, and it utilizes jQuery event bindings. There are key event related implementation but that’s within the builder and not on the front or live page.

But yes, I can confirm that it has issue working and this could be related to jQuery related binding that I’m too currently investigating. There where times this code works, and mostly not.

jQuery('button#bar-method-flyout-menu-anchor-toggle').keypress ( function(e){
console.log('A key is pressed');
});

I’ll let you know once I find something. Another thing about your code is this

var inputs = $('#flyout-menu-off-canvas').find('select, input, textarea, button, a').filter(':visible');

It’s trying to find visible elements that are still hidden, they will only start appearing once the off-canvas is opened. It should be called within click or keypress event and not outside, else, the browser can’t focus that is hidden.

Thanks!

[rad]

Hi Matt,

Update, this code works

jQuery('button#bar-method-flyout-menu-anchor-toggle').keydown( function(e) {
    var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
    if(key == 13) {
        e.preventDefault();
        console.log("The enter key is pressed, with code " + key);
    }
});

The keydown is the fix, your code will work as well, just use keydown event instead of keypress. It looks like in jQuery, keypress are for characters or for inputs. While keydown is for standard element like link, buttons, and so on. And I’m referring to Wordpress’ jQuery and not the latest jQuery. I also tried it with twenty nineteen theme to confirm it, and keypress is not working for key 13.

Keydown is the only one that holds 13 key. In that screenshot, key 65 and 97 is the same letter A key (I pressed once). Hence, jQuery or Chrome use different set of keys for keypress and keydown.

Thanks!

[mattmintun]

@rad - YOU ROCK!!! Thank you so much for digging into this and figuring out what I couldn’t figure out Got this fixed up and working!

BTW to answer your vs question - our ADA compliance company said that the toggle had to be a button element, so I’m using jQuery to change that to button. A silly option, but we’re being forced to do it for compliance. I do hope that X will add the ability to change the markup of buttons

[christian]

We’re glad that your code is working now, Matt. I’ll post your concern regarding the button as feature request so it might be taken into consideration in the future.