🏗️ Feat / implement tile slider

[ChristiaanScheermeijer]

Description

This PR replaces the TileDock component with the @videodock/tile-slider dependency.

See more information here: Videodock/tile-slider#42

[royschut]

Big fan of this update, although I noticed the chevrons are positioned differently. Apart from a UX standpoint, they're also harder to see, because the used to be layered on the more transparent cards.

Before/after featured, before/after shelf:

[langemike]

I have tested this on Android and I noticed two things:

1. The slider not accessible when using TalkBack. I experience similar issues as we have experienced before our accessibility optimalizations
   1a. The chevron buttons cannot be accessed using the screen reader
   1b. The layout shifts because the out-of-view card gets accessed on the screen reader
2. The items on shelf "All films" are limited to 5 on appconfig gnnuzabk*

*The last one is unrelated to your change, but has been introduced somewhere in the last 27 commits. Is this done with intention?

These are just something I noted at first glance. I haven't done a throughout UX/a11y deep-dive.

Also, based on experience I think the failed e2e tests take somewhere around 4 hours to fix.

I could help you with fixing these issues, but I'm afraid they won't make our upcoming release.

[ChristiaanScheermeijer]

Thanks for testing! I think I've fixed all feedback :-) Let's wait for the status checks...

[ChristiaanScheermeijer]

Big fan of this update, although I noticed the chevrons are positioned differently. Apart from a UX standpoint, they're also harder to see, because the used to be layered on the more transparent cards.

This was caused by a position: relative in the TileSlider. By overriding this, the Shelf element becomes the next relative element.

The chevron buttons cannot be accessed using the screen reader

The prev button is disabled before sliding. The next button is focusable, but only after going through the list first.

The layout shifts because the out-of-view card gets accessed on the screen reader

I've applied the same fix using aria-hidden (in the tile-slider package) which prevents the out-of-view tiles from being focusable.

The items on shelf "All films" are limited to 5 on appconfig gnnuzabk*

This was caused by a test slice(0, 5) I added to confirm something 😅

Also, based on experience I think the failed e2e tests take somewhere around 4 hours to fix.

These are fixed (luckily it didn't took 4 hours 😄)

[langemike]

Applying adisabled attribute, has the potential of losing focus when the button changes its disabled-state. This was a bug we experienced on Android in a different situation.

Also I noticed you applied styling based on :disabled. So that needs to be changed too.

While testing this I noticed the contents of renderRightControl does not get rendered at all when there isn't a next slide. Causing some weird behaviour (focus is moved to different Tileslider elements)

[langemike]

The next button is focusable, but only after going through the list first.

Aha. In that case the aria-hidden would help here too.

I've applied the same fix using aria-hidden (in the tile-slider package)

For some reason I do not understand, I don't see the aria-hidden attribute even though I confirmed having @videodock/tile-slider@^2.0.0-rc.3. It looks like a weird local cache issue, I cannot override...

[langemike]

Currently the disabled attribute and class is not present anymore. So this is unused CSS.
Should we reintroduce these classes? Previously it was previously only present for the prev-button (and as you said; it caused e2e failures).

[ChristiaanScheermeijer]

For bookkeeping; I've removed the disabled attribute for the slider controls.

The slide left button should be disabled when the user hasn't slid, but some e2e tests slide left immediately to reach a particular media item. In this PR I accidentally fixed this because this wasn't working properly (only disabled styling was applied).

Instead of updating all e2e tests, I chose to remove the disabled attribute and keep it as is for now...

[ChristiaanScheermeijer]

This PR is pending for some upcoming tweaks to the tile-slider package

[langemike]

We need to upgrade again after Videodock/tile-slider#48 is merged

[MelissaDTH]

LGTM!

[royschut]

Updated with rc6

[royschut]

Concluded on our testing day sprint 5: We like where this update is going, but it's not quite there yet (rc6). Therefor we revert back to rc3 (tested in sprint4), take this into our release, and put this PR back in draft in order to make a better tile-slider rc.