0

I want to be able to interact with a pull down menu only on keyboard. In Chrome it works well, but on Firefox doesn't work. Keyboard input I want to work:

'Tab' (menu is focused, it works)

--> 'Enter' (menu pulled down, it works)

--> 'Tab' to select a menu item fails

--> 'Enter' to check menu item

HTML:

<div id="headerbuttons" class="loggedin">
              
   <div tabindex="0" class="button user css-onclick-menu">
       <span class="username" title="TESTUSER">
           <div class="icon"></div>
           TESTUSER
       </span>
                  
     <ul class="css-onclick-content">
       <li>
         <a href="/bookmark/check">add bookmark</a>
       </li>
       <li>
         <a href="/user">my profile</a>
       </li>
       <li>
         <a href="/ettutorials">tutorials</a>
       </li>
    </ul>
    
  </div>
</div>

JS:

(function ($) {
  "use strict";

  $(document).ready(function () {
    
    $('.css-onclick-menu .username').on('click', function() {
      toggleUserMenu($('.user .css-onclick-content'));
    });
    $('.button.user.css-onclick-menu').keypress(function (e) {
      let key = e.which;
      if(key == 13) {
        toggleUserMenu($('.user .css-onclick-content'));
      }
    });

     var toggleUserMenu = function($content) {
        if($content.css('display') == 'block') {
                        $content.css('display', 'none');
        } else {
            $content.css('display', 'block');
        }
    }

  });
})(jQuery);

Minimal CSS

.css-onclick-content {
    display: none;
    top: 9px;
}

To play around in JsFiddle with fancier CSS:

https://jsfiddle.net/0L64ktw1/1/

I have tried to set tabindex=0on <li> and <a> but it doesn't work like expected. Thank you.

Hermann Schwarz
  • 1,495
  • 1
  • 15
  • 30
  • In what Firefox version it didn't work exactly? I've tried current Fx77 and Nightly 79 on Windows and tabbing and opening in your fiddle worked well. – myf Jun 23 '20 at 12:40
  • I realized just now, that it's maybe MacOS related: https://stackoverflow.com/questions/11704828/how-to-allow-keyboard-focus-of-links-in-firefox – Hermann Schwarz Jun 23 '20 at 13:47
  • @myf Firefox 77.0.1 (64-Bit) on MacOS Catalina – Hermann Schwarz Jun 23 '20 at 13:49
  • @myf it was really because of MacOS's Firefox. The issue is described here: https://stackoverflow.com/questions/11704828/how-to-allow-keyboard-focus-of-links-in-firefox It's frustrating because the problem can fixed only on the client side. – Hermann Schwarz Jun 23 '20 at 14:47
  • Ah, the dreaded MacOs accessibility-wise weird default, I've read about that most probably at https://a11yproject.com/posts/macos-browser-keyboard-navigation/ . So setting the OS pref or creating Firefox config entry fixed your issue after all, right? – myf Jun 24 '20 at 11:41

0 Answers0