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

fix(NcActions): put in order tab and arrow navigation #5305

Merged
merged 1 commit into from Feb 26, 2024

Conversation

ShGKme
Copy link
Contributor

@ShGKme ShGKme commented Feb 26, 2024

☑️ Resolves

  1. Arrow and Tab keyboard navigation should not be used at the same time
    • Either menu is an atomic UI element, and Arrow select menu items, Tab moves to the next UI element
    • Or the menu is an expanded list of UI elements
  2. When actions are used for navigation, it should work as just an expanded list with classic "native-like" Tab navigation without focus trap
    • Tab on the last element closes the list and moves focus to the trigger
    • SHIFT + Tab on the first element - the same

Also, I've put all the config that changes the behavior of the component in one place, so it's clearer what can be different and in which case.

🖼️ Screenshots

Before Navigation worked as a Menu:

  • Arrows - navigate between items
  • Tab - navigate to the next UI element on the page

After Navigation works as an expanded block with native like behavior

  • No arrow navigation
  • Tab and Shift+Tab navigate back and forward
  • No focus trap, before the first and after the last element actions are closed, focus is moved to the trigger button

nc-actions-navigation-tab

🏁 Checklist

  • ⛑️ Tests are included or are not applicable
  • 📘 Component documentation has been extended, updated or is not applicable
  • 3️⃣ Backport to next requested with a Vue 3 upgrade

@ShGKme ShGKme added bug Something isn't working 3. to review Waiting for reviews feature: actions Related to the actions components accessibility Making sure we design for the widest range of people possible, including those who have disabilities labels Feb 26, 2024
@ShGKme ShGKme added this to the 8.7.2 milestone Feb 26, 2024
@ShGKme ShGKme self-assigned this Feb 26, 2024
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
@ShGKme ShGKme force-pushed the fix/nc-actions--keyboard-navigation-2 branch from 90507c4 to 02fc737 Compare February 26, 2024 09:58
Copy link
Contributor

@JuliaKirschenheuter JuliaKirschenheuter left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

great work!

Copy link
Contributor

@susnux susnux left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is awesome 🚀

@susnux susnux merged commit d8ae95e into master Feb 26, 2024
18 checks passed
@susnux susnux deleted the fix/nc-actions--keyboard-navigation-2 branch February 26, 2024 12:18
@ShGKme
Copy link
Contributor Author

ShGKme commented Feb 26, 2024

/backport to next

@Antreesy Antreesy mentioned this pull request Feb 29, 2024
@ShGKme ShGKme mentioned this pull request Feb 29, 2024
@ShGKme ShGKme modified the milestones: 8.7.2, 8.8.0 Feb 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3. to review Waiting for reviews accessibility Making sure we design for the widest range of people possible, including those who have disabilities bug Something isn't working feature: actions Related to the actions components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants