Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] - Intra fw-button-group navigation should happen through Arrow keys. Tabbing should move highlight away from button group #664

Open
he4helium opened this issue Aug 23, 2022 · 0 comments
Labels
bug Something isn't working

Comments

@he4helium
Copy link

he4helium commented Aug 23, 2022

Component
fw-button-group
fw-button

Describe the bug
https://crayons.freshworks.com/components/core/button-group/#demo

  1. Tabbing should enable extra button-group element navigation
    If we were to place the highlight on the Replace button and press tab, the highlight would then goto the next button in the button-group - Modify, rather than jumping onto the next button group below that and placing the highlight onto the Undo icon button. This impedes the quick tabbing through of page components. It also lends less credibility to the button-group as a cohesive unit.

  2. Arrow keys should enable intra button-group button navigation
    Instead of tabbing, ideally I feel the buttons within a button-group should be navigated using the arrow keys - left and right. This does not happen today at all. Tabbing is necessarily required to move between the intra group buttons.

To Reproduce
Steps to reproduce the current behavior:

  1. Go to https://crayons.freshworks.com/components/core/button-group/#demo
  2. Keep tabbing until you reach Replace button in the first button group
  3. Press Tab again - notice that it doesn't move away from the button-group. Instead it performs intra tab group navigation
  4. Press left or right arrow keys. Notice that no change happens to highlighted element.

Expected behavior

  1. Tabbing should enable extra button-group element navigation
    If we were to place the highlight on the Replace button and press tab, the highlight would then goto the next button in the button-group - Modify, rather than jumping onto the next button group below that and placing the highlight onto the Undo icon button. This impedes the quick tabbing through of page components. It also lends less credibility to the button-group as a cohesive unit.

  2. Arrow keys should enable intra button-group button navigation
    Instead of tabbing, ideally I feel the buttons within a button-group should be navigated using the arrow keys - left and right. This does not happen today at all. Tabbing is necessarily required to move between the intra group buttons.

Screenshots
image

Additional context
https://user-images.githubusercontent.com/80086284/186077338-e13ebcc3-8e40-448c-b736-f72817788d8b.mov

@he4helium he4helium added the bug Something isn't working label Aug 23, 2022
@he4helium he4helium changed the title [Bug] - Keyboard navigation between buttons inside button group should occur through cursor keys rather than tabbing [Bug] - Intra fw-button-group navigation should happen through Arrow keys. Tabbing should move highlight away from button group Aug 23, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant