Keyboard navigation in custom drop down without using javascript

Question

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

Welcome to Stackoverflow. It seems that your question lacks some js code that you have tried. Please see minimal reproducible example — MD Zand
– MD Zand, Commented Nov 30, 2022 at 8:16
ARIA attributes do not provide any kind of behavior. They only give a semantic clue to assistive technology. — slugolicious
– slugolicious, Commented Nov 30, 2022 at 17:28
@slugolicious : Is Angular (keyup.enter) good practice to handle enter key for both mac and windows machine on div element with role ="link" from accessibility point of view — goku
– goku, Commented Dec 1, 2022 at 13:35

Andy · Accepted Answer · 2022-11-30 08:49:57Z

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.

Collectives™ on Stack Overflow

Keyboard navigation in custom drop down without using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related