[Feat]: Custom accessibility behaviour and SlideFocus focus listener

[darix989]

Hello,
as first thing: thanks a lot for your library, it is very handy and cool!
After using it for some time I also happen to try to implement accessibility and tabindex navigation but I got some issues while trying to achieve a custom behavior.
I read from this thread that it is part of the repo owner's plan to create an embla-carousel-accessibility plugin, but I suppose that is not out yet, so, for the time being, I am trying to implement it manually.

Desired accessibility behavior

For my scenario, I have a swimlane with previous and next buttons, and I show 5 slides at the time.
I tried to implement a custom behavior which consists of focusing the elements in the following order 1) previous button (in case available) -> 2) in view only slides -> 3) next button (in case available).
So, the previous and following set of (hidden) slides must not be focused automatically by pressing tab, but it is required to focus the prev / next button as first thing, and then press enter, after that, the first/last slide of the new set will be focused.

Problem (caused by SlideFocus)

To achieve this behavior I tried to set tabindex 0 to in view slides only, but at the moment this behavior is difficult to reach because of SlideFocus logic, which registers to the focus event of each slide and when a slide is focused a shift happens in order to align the swimlane to it.
This would work pretty nicely to navigate each slide (both in view and hidden), but it's giving some problem to reach the custom behavior I shared above since it keeps shifting the swimlane, so it will make visible hidden slides, so the user will never reach the prev / next buttons.
I tried to prevent the SlideFocus listener to run its logic, but it's hard since it registers with capture: true which makes the listener running its logic asap and no one can stop the propagation or do similar things.

Proposal

Unless there is some solution that I am missing, I have a proposal:
I wonder if it would be reasonable to add a new parameter to OptionsType, something like scrollOnSlideFocus: boolean, which by default is true, and we can use this to prevent SlideFocus to run its logic when it is falsy.

I modifed the source code by following this approach, and it worked pretty cool for my purpose.
This change seems simple and not intrusive to me, and it should also be compatible with a potential embla-carousel-accessibility plugin.

What do you think?
Thanks in advance!

Regards
Darix989

[davidjerleke]

Hi @darix989,

Thank you for your question. Do you want to disable the slide focus behaviour that is triggered by tabbing when slides have focusable elements?

Best,
David

[darix989]

Hello @davidjerleke ,
yes, I want to disable that.

[davidjerleke]

@darix989 thanks for explaining. Unfortunately, I have tons to do/fix before the stable v8 release so this won't be prioritised for now.

[darix989]

I understand your situation, and I thank you the same for your answer.

I wonder: even if this will be handled for the future releases, would it help if I create a PR for this?

The fix that I tested involves very few lines, just the bare minimum to declare a new (optional) parameter, pass it down to the SlideFocus and prevent the focus event handling in case the parameter is passed.

In general, I would be glad to contribute to your library.

[davidjerleke]

@darix989 this feature has been included in the v8.2.0 release.

[darix989]

Thanks!

[davidjerleke]

• This has been added to the [Feat]: ⭐ Roadmap #841.

[darix989]

That's great news! Thanks for the headsup!

[davidjerleke]

@darix989 I think you might have read the wrong message. This was my latest comment:

@darix989 this feature has been included in the v8.2.0 release.