0

I'm working with Angular 9, ngx-bootstrap 10.2.0 and ARIA to make a page more keyboard accessible. Trying some of the examples from the ngx-bootstrap documentation I encountered some lack of accessibility even with the most basic dropdown:

<div class="btn-group" dropdown>
  <button id="button-basic" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
          aria-controls="dropdown-basic">
    Button dropdown <span class="caret"></span>
  </button>
  <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-basic">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>
  1. The dropdowns items from the examples lack handling losing focus.

Imagine I have 20 items in the menu, I'm navigating them with TAB key and while on the 10th item I realise the one I'm looking for isn't in this menu. At this point I want to close the dropdown by pressing ESC and get back to the previous form control with SHIFT+TAB

Well, if we try that with the ~4 items dropdowns from the examples you'll see it isn't possible. The only ways to close it are pressing ESC having the dropdownToggle focused or clicking outside the dropdown. You'll have to press TAB as many times as elements are there to get to the dropdownToggle.

  1. If I copy and paste the most basic dropdown into an angular component template, it loses the up and down key navigation. I'm using the same browser (Edge) to run the app and to try the examples from the docs. Can't figure out why one works and not the other.

For both features, should I handle key press events manually in the component, by adding a document listener for keys ESC, UP and DOWN ? Or there is some config I'm missing to make ngx-bootstrap dropdowns more keyboard accessible (besides the TAB key) ?

tec
  • 999
  • 3
  • 18
  • 40
  • Have you searched? https://stackoverflow.com/questions/36695922/angular-2-keyboard-events – paddotk Mar 20 '23 at 09:30
  • Yes, thx. I included the (keydown)="keyPressed($event) in my component
  • and works well. It would be nice to have the keys UP and DOWN working as well; can't figure out why in my component doesn't work but in the docs does.
    • – tec Mar 20 '23 at 12:21
  • I meant using @Hostlistener, I think the arrow keys take the focus off the dropdown. With the `keyPressed` function though, you might want to try to put `event.preventDefault()` as the first line in that function. – paddotk Mar 20 '23 at 14:07