Describe the bug
Whenever a carousel has more items than what the carousel can fit in a view and there are slides that contain anything intractable such as buttons or links, when a user tabs in through the buttons/links inside each slide, the carousel arrow buttons seem to move their position either to the centre or out of view. What should be happening is that the buttons should be fixed to either the left or right of the carousel respectively.
My initial suspicions are that there doesn't seem to be any management of transitioning the carousel viewport when tabbing through any buttons/links inside each of the children slides. When you tab through the buttons and links in each slide, it's the browser native functionality that's 'pulling the slide currently focused into view and since that tabbing doesn't control the internal mechanisms of the carousel, the bug appears.
See Screenshots below:
Initial View
As soon as I start tabbing through subsequent slides
Start using the tab key to traverse through all links and buttons. It should traverse through each button inside of each slide. You will see the bug as soon as you tab through the button inside the 4th or 5th slide, as shown in the screenshot.
Expected behavior
Regardless of which button/link/anything tabbable via keyboard, the arrow buttons should stay in their original positions.
Desktop (please complete the following information):
OS: Any
Browser: Chrome (But I think issue is replicable on other browsers)
Version: 120.0.6099.109 (Issue should replicate irrespective of browser version)
Additional context
Version of
Angular:
carousel: The stackblitz's angular is on version 6.0.0 with @ngu/carousel on version 1.5.2, however, I can replicate this bug on angular version 16.x.x and @ngu/carousel on version 7.2.1. Not sure if it's latest but I'm sure on latest settings it should be able to replicate.
Would you like to open a PR (Support will be provided):
[ ] Yes
[ x ] No
Describe the bug Whenever a carousel has more items than what the carousel can fit in a view and there are slides that contain anything intractable such as buttons or links, when a user tabs in through the buttons/links inside each slide, the carousel arrow buttons seem to move their position either to the centre or out of view. What should be happening is that the buttons should be fixed to either the left or right of the carousel respectively.
My initial suspicions are that there doesn't seem to be any management of transitioning the carousel viewport when tabbing through any buttons/links inside each of the children slides. When you tab through the buttons and links in each slide, it's the browser native functionality that's 'pulling the slide currently focused into view and since that tabbing doesn't control the internal mechanisms of the carousel, the bug appears.
See Screenshots below: Initial View
As soon as I start tabbing through subsequent slides
To Reproduce Steps to reproduce the behaviour:
I've got a stack blitz that replicates the bug here: https://stackblitz.com/edit/ngu-carousel-demo-1my7sf?file=src%2Fapp%2Fapp.routing.ts. Once you are in that link, it should load the page.
Expected behavior Regardless of which button/link/anything tabbable via keyboard, the arrow buttons should stay in their original positions.
Stackblitz Demo of arrow carousel arrow bug
Desktop (please complete the following information):
Additional context Version of Angular: carousel: The stackblitz's angular is on version 6.0.0 with @ngu/carousel on version 1.5.2, however, I can replicate this bug on angular version 16.x.x and @ngu/carousel on version 7.2.1. Not sure if it's latest but I'm sure on latest settings it should be able to replicate.
Would you like to open a PR (Support will be provided): [ ] Yes [ x ] No