Skip to content

Accordion, Input Counter and Modal causing keyboard-based interaction issues #786

@juliasser

Description

@juliasser

Related Attributes
Accordion, Input Counter and Modal

Describe the bug
When adding the three components mentioned above in JS version onto the same page, depending on the constellation, there are different bugs with keyboard-based interaction:

Accordion + Modal: Accordion can't be extended/collapsed through keyboard
Accordion + Input Counter: Accordion can't be extended/collapsed through keyboard. The Input counter counts multiple steps instead of just +1
Accordion + Modal + Input Counter: Accordion works again, although when collapsing, it doesn't animate and doesn't get the css display: none attribute, causing it to still have the content active in the tab hierarchy
Modal + Input Counter: Input Counter counts multiple steps instead of just +1

These issues only happen when interacting with the components through the keyboard, mouse interaction is all good (as far as I know)

To Reproduce
Steps to reproduce the behavior:

  1. Create an empty webflow page
  2. Add the forementioned components through webflow libraries
  3. Publish the site and test. Depending on which scripts are active, the issues differ (see above)

Expected behavior
The interaction to be the same for the keyboard and the mouse.
The accordion should extend/expand independent of other components present.
The counter should only count +1 and not multiple steps when using keyboard

Affected devices
Tested on

  • Device: Macbook Pro
  • OS: Sequoia 15.7.4
  • Browser Chrome
  • Version 145.0.7632.76

Links
Here I have all three activated

Additional context
Important to note that sometimes it randomly works, seems to also depend somehow on script execution order

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions