Find hotkeys by `aria-keyshortcuts` closer to current focus

[ai]

Sometimes, websites have a list of items and shortcut for each item:

<li tabindex="0">
  Item 1
  <button aria-keyshortcuts="v">Validate</button>
</li>
<li tabindex="1">
  Item 1
  <button aria-keyshortcuts="v">Validate</button>
</li>

We need to add support for that cases in hotkeyKeyUX():

1. If some element has data-keyux-ignore-hotkeys we do not look inside it for hotkeys except it mentioned by data-keyux-hotkeys or it is a current focus element.
2. When hotkey is pressed, we look inside the current element first.
3. If current focus element has data-keyux-hotkeys attribute, we find a child by this ID and look for hotkeys only there.

<li id="item1" tabindex="0" data-keyux-ignore-hotkeys data-keyux-hotkeys="item1">
  Item 1
  <button aria-keyshortcuts="v">Validate</button>
</li>
<li id="item2" tabindex="1" data-keyux-ignore-hotkeys data-keyux-hotkeys="item2">
  Item 1
  <button aria-keyshortcuts="v">Validate</button>
</li>

[ignatiqq]

Should we find a valid element or only first element should be valid to call hotkey button?

I mean if we have structure like this with focus on body:

<li id="item1" tabindex="0" data-keyux-ignore-hotkey>
  Item 1
  <button aria-keyshortcuts="v">Validate</button>
</li>
<li id="item2" tabindex="1" data-keyux-ignore-hotkeys data-keyux-hotkeys="item2">
  Item 1
  <button aria-keyshortcuts="v">Validate</button>
</li>

Should we call "id=item2"? Should we initially be focused in list to do that?

[ai]

@ignatiqq sorry, I don’t understand the question.

Can you explain the context? What user do in that example?

[ignatiqq]

Ok, sorry if it was not clear.

Use case is:

When user not focused at all for example just entered on the page. Should we check only first li to call a button or any valid (enabled) button in the list can be called.

In this case:

First li element is disabled but the other second is enabled. Is it valid case to call the second one instead (skip the first disabled by the "data-keyux-ignore-hotkeys" attribute). And does the user have to navigate to any "ul" list to invoke it in this case?

<li id="item1" tabindex="0" data-keyux-ignore-hotkey>
  Item 1
  <button aria-keyshortcuts="v">Validate</button>
</li>
<li id="item2" tabindex="1" data-keyux-ignore-hotkeys data-keyux-hotkeys="item2">
  Item 1
  <button aria-keyshortcuts="v">Validate</button>
</li>

[ai]

If focus is on the body (initial state) or on any other tag outside of <li>, we should ignore both li-s because they have data-keyux-ignore-hotkeys attribute

[ai]

First li element is disabled but the other second is enabled.

What do you mean by  “enabled”?

[ai]

And does the user have to navigate to any "ul" list to invoke it in this case?

User must have focus on item2 to make second <button aria-keyshortcuts="v"> visible by KeyUX.

User must have focus on item1 to make first <button aria-keyshortcuts="v"> visible by KeyUX.

[slavamukhin]

https://github.com/ai/keyux/pull/14/files