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 keyboard navigation of modal slides #3690

Merged
merged 1 commit into from
Feb 1, 2023
Merged

Conversation

Pytal
Copy link
Contributor

@Pytal Pytal commented Jan 27, 2023

We handle keydown events on the global window object
https://github.com/nextcloud/nextcloud-vue/blob/58b5c435979784c5143c1b539e52c9ada826981f/src/components/NcModal/NcModal.vue#L536
and click events on the previous and next arrow buttons
https://github.com/nextcloud/nextcloud-vue/blob/58b5c435979784c5143c1b539e52c9ada826981f/src/components/NcModal/NcModal.vue#L264
https://github.com/nextcloud/nextcloud-vue/blob/58b5c435979784c5143c1b539e52c9ada826981f/src/components/NcModal/NcModal.vue#L296

So when keyboard focus is on the previous or next button and we hit Enter, the click handler of either previous or next will fire and the global handler will always call this.next()

Focused element Result
Previous button Back then forward to the same slide
Next button Forward two slides

@Pytal Pytal added bug Something isn't working 3. to review Waiting for reviews accessibility Making sure we design for the widest range of people possible, including those who have disabilities labels Jan 27, 2023
@Pytal Pytal added this to the 7.6.0 milestone Jan 27, 2023
@Pytal Pytal self-assigned this Jan 27, 2023
Copy link
Contributor

@szaimen szaimen left a comment

Choose a reason for hiding this comment

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

LGTM but didnt test

@Pytal Pytal added 4. to release Ready to be released and/or waiting for tests to finish and removed 3. to review Waiting for reviews labels Feb 1, 2023
@Pytal Pytal merged commit 093ce19 into master Feb 1, 2023
@Pytal Pytal deleted the fix/modal-keyboard-nav branch February 1, 2023 02:08
@Pytal Pytal mentioned this pull request Feb 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
4. to release Ready to be released and/or waiting for tests to finish accessibility Making sure we design for the widest range of people possible, including those who have disabilities bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants