CODEWITHSUNDEEP
javascripthtmlaccessibilitywai-ariajaws-screen-reader
goku
goku

Reputation: 11

Keyboard navigation in custom drop down without using javascript

I have an angular app in which there is a component that has div style as button and clicking it open or close another list of div.

I need to make this app accessible. I can handle enter with angular (keyup.enter) event , when list of divs is opened , I want to move focus to first item in that list. Currently I need to press tab to move focus when list is opened.

Is there any way to move focus automatically with using ARIA-roles . I don not want to write javascript to handle key down/up and focus shifting code.

Also is it ok to use angular (keyup.enter) for both windows and mac machines event instead of writing keydown handler in angualar typescript and matching key code.

This is dummy code for reference

<div>
<div role="button" tabindex="0">
</div>

<div *ngIf="showList" role="list">
<div role="listitem" tabindex="0">
</div>
<div role="listitem" tabindex="0">
</div>
</div>
</div>

Tried using aria roles menu, menuitem but could not move focus and could not navigate using arrow keys in list

Upvotes: 1

Views: 933

Answers (1)

Andy
Andy

Reputation: 6115

Sorry, but if you want to go custom, you need to go all the way and implement the keyboard interface yourself.

ARIA roles do not implement interaction, they only communicate the nature of interaction to manage users’ expectations, or to provide shortcuts to get to the element.

There might be some libraries that help you apply the default patterns, as described on the ARIA Authoring Practices Guide (APG)

If you check the Select-Only Combobox Example on APG, you will notice that you also will need some more ARIA attributes to comply with the standard in your dropdown:

  • aria-expanded to expose on the button whether the list is currently expanded or not
  • aria-haspopup=listbox to expose that the button opens a list
  • an accessible name, of course (aria-label or real text contents)
  • role=combobox and not button, actually
  • role=option instead of listitem
  • aria-selected on the active option

It is generally good advice to use native components whenever you can. They are optimised for the platform, fast, highly accessible and need less resources.

You can apply some styling and tricks like hiding the initial, unfocused input. The CSS property accent-color also allows some basic styling in modern browsers.

Upvotes: 3

Related Questions