Skip to content

Carousel arrow buttons position oddly when slides have buttons present and user tabs using keyboard. #482

@classicmike

Description

@classicmike

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
Screenshot 2023-12-19 at 2 59 13 pm

As soon as I start tabbing through subsequent slides
Screenshot 2023-12-19 at 2 58 31 pm

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.

  1. 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.

** Stackblitz **
Demo of arrow carousel arrow bug

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions