Combination of FocusJumps and Shortcuts

[Hydhen]

Hello,

I'm developing an autocomplete system for an input, in basic shape I have something like this:

<div>
  <input type="text" />
  <i class="clear-history"></i>
  <button (click)="search()"></button>
</div>

<div popover>
  <ul role="listbox">
    <li role="option" tabindex="0"><a role="button" aria-keyshortcuts="enter">Suggestion 1</a></li>
    <li role="option" tabindex="0"><a role="button" aria-keyshortcuts="enter">Suggestion 2</a></li>
    <li role="option" tabindex="0"><a role="button" aria-keyshortcuts="enter">Suggestion 3</a></li>
  </ul>
</div>

The list part works like a charm, and I can correctly tab through input > clear > search > listbox, then navigate with arrows.

My problem is when I try to set the focus through code, my goal here is the allow the user to navigate from the input to the list of suggestion by pressing the down arrow key.

I tried getting ElementRef of the list or the first element in the list and .focus() but it doesn't work, am I missing something?

I though about a "scoped" shortcut like:

<div scope-shortcut="downarrow" scope-target="suggestions">
  <input type="text" />
  <i class="clear-history"></i>
  <button (click)="search()"></button>
</div>

<div id="suggestions" popover>
  <ul role="listbox">
    <li role="option" tabindex="0"><a role="button" aria-keyshortcuts="enter">Suggestion 1</a></li>
    ...
  </ul>
</div>

Thanks in advance!

[ai]

<li role="option" tabindex="0"><a role="button" aria-keyshortcuts="enter">Suggestion 1</a></li>

This code looks like too complex. Why not just:

<div id="suggestions" popover role="listbox">
  <button role="option">Suggestion 1</button>
    ...
</div>

1. If you need button role, just use <button> instead of <a>.
2. aria-keyshortcuts="enter" is already default browsers behavior. When you press ↵ and <button> is in the focus, browser will click on it automatically.
3. It is always better to use real intractable elements for focus (<button>, <a>, etc). tabindex is a hack.
4. You don’t need <ul> if you anyway change it role to listbox.

Making code simpler will help you with debugging this issue.

[ai]

I tried getting ElementRef of the list or the first element in the list and .focus() but it doesn't work, am I missing something?

Yes, having custom keyup listener on <input> and call .focus() is a right way.

But without a real app I can’t tell you why it is not working.

Seems like you just need to do an investigation.

Maybe it is because you have a complex mix of <li tabindex="0">, <button>, etc. Try to make HTML structure simpler first.