[Dropdown] - Cannot press enter to go to links in dropdown list

[qmtran1]

I'm working on a keyboard-accessible top navigation bar using Semantic UI, but I can't use the Enter/Return key to access the links in the drop-down menus, even when the focus is on the link. I created a blank JS Fiddle here to demonstrate. I'm also using Chrome Vox as a screen reader, so that I know where the current focus is.

<div class="ui menu">
    <a class="item" href="https://www.google.com">Google 1</a>
    <div class="ui dropdown link item">
        <a href="#">
            <span>Google 2</span>
            <i class="dropdown icon"></i>
        </a>
        <div class="menu">
            <a class="item" href="https://www.google.com">Google 2.1</a>
            <a class="item" href="https://www.google.com">Google 2.2</a>
        </div>
    </div>
</div>

JavaScript initialization:

$(document).ready(function() {
    $('.ui.dropdown').dropdown();
});

[awgv]

Hi @quantran13, sorry for the delay, after examining the source, I think you’ll have to initialize the dropdown with custom action:

$('.ui.dropdown')
  .dropdown({
    action: function (text, value, element) {
      element.click()
    }
  })

Please let me know if that fixes it.

[qmtran1]

@Banandrew Nope, it doesn't work. The function wasn't triggered when I pressed Enter. The only thing I can do right now is add a .keyup() event handler and detect the Enter/Return key by keyCode being 13, but I hope there's a better way.

[awgv]

@quantran13 It works for me when I select dropdown’s options starting with 2.1. Maybe you pressed Enter when .ui.dropdown.link.item was focused?

[qmtran1]

This is when I'm using ChromeVox to navigate. The Tasks option is focused, the link to it is shown on the bottom left corner of Chrome. If I click on the option, Chrome will navigate to the link, but nothing happens when I press Enter.

[awgv]

@quantran13 I can’t seem to reproduce, and Enter key does click. Say, I’ll be using the markup from the original post, could you please tell the exact steps that I should follow to reproduce it?

[qmtran1]

@Banandrew With ChromeVox enabled, I just navigate using the tab key until I arrive at the above position. Pressing Enter won't do anything. This is the JS Fiddle that I'm using.

[awgv]

@quantran13 What version of Chrome are you using? I can’t tab to select anything in the dropdown, it stops at <a href="#"> and starts over, never going deeper into the menu. That’s why I asked about it before, I thought that maybe you used tabindex somehow.

[qmtran1]

@Banandrew That's weird. I should have included allowTab: false, but even then I can still go deeper into the menu. I updated the JS fiddle here. Now that I included allowTab: false, when you're on Google 2, pressing Enter should expand the menu, and pressing Tab will take you inside the menu. That's what I got.

I'm using Chrome version 59.0.3071.115 (Official Build) (64-bit), and Chrome says it's up to date.