Best way to select sibling element?

[simonferndriger]

https://awesomealpine.com/play?share=zJC1gh7XooJq

Using nextElementSibling or is there a smarter AlpineJS way-to-do-so?

[ekwoka]

Here's you'd likely want the focus plugin: https://alpinejs.dev/plugins/focus

Otherwise how you did is fine. This just improves things like handling hidden siblings and wraping to the start/end

[simonferndriger]

Awesome, this is exactly what I was looking for! 🥳

Ah, just found out. When just using @keydown.right="$focus.next()" this works great. But when I also want to click it, I can't just use $focus.getNext().click() instead, I also need to $focus.focus(el) the clicked element after, otherwise it stops working after one time... strange

[simonferndriger]

@ekwoka
There is one more thing, however, that I can't figure out. The code below works perfectly fine now. However, when the iframe trailer is in fullscreen, $navTo becomes always undefined. Is that because the element can't have focus if it's befind a fullscreen element? Is there a workaround?

  const
    $current = app.$focus.focused()
  ;
  const
    $container = $current.closest('ins'),
    $navTo = app.$focus.within($container)[action[key]]()
  ;
  if(!$navTo?.classList?.contains('flick'))
    return;

  app.$focus.noscroll().focus($navTo);
  $navTo.click();

[ekwoka]

It probably can't have focus.

A workaround for what exactly? Focusing something that is unfocusable?

[ekwoka]

If it's a slideshow, why do you need to manipulate focus?

I'm not sure I understand.

[simonferndriger]

Yeah I guess that's the issue. I just used the focus as a way to be able to click the next element. The focus itself is not important. I ended up doing it manually in a similar way the plugin works.

[simonferndriger]

@ekwoka
If you like, you can see it in action on https://matchflix.ch/?movie=856273 (it even works with a direct link like this, where you do not have to click on an element to start navigating with the keyboard 😊 I'm using the init() of each button to initially set the current active element to navigate from.

[ekwoka]

There's some bigger problems with keyboard navigation than the arrows, tbh...like clicking on a poster, I can't tab to the different buttons on the popup at all...

[simonferndriger]

You are absolutely right, in regards of (general) accessibility - my focus however, was not to make everything accessible to keyboard navigation, but rather to optimize the most frequent use cases for power users. So the arrow navigation to quickly go through your own watchlist, hit space for the trailer, and some other shortcuts (a for providers, ...) 😊 But thanks for checking it out!