Skip to content

Augment file picker modal accessibility #32616

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.

Sign up for GitHub

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

Jump to bottom
Merged
PVince81 merged 13 commits into from
Jun 9, 2022
Merged

Augment file picker modal accessibility #32616

PVince81 merged 13 commits into from
Jun 9, 2022

Conversation

@Pytal
Copy link
Member

@Pytal Pytal commented May 27, 2022 •
edited
Loading

To Do

  • Keyboard navigation and control
    • Close button
    • Breadcrumbs
    • Column sorting
    • Select file/folder entries
    • Grid view toggle
    • New folder creation
    • Action buttons
  • Set modal as first focus target
  • Sequential control focus order
  • Restore grid view toggle
  • Use button for grid view toggle instead of hidden checkbox
  • Prevent pressing enter key without control focus from activating the primary button
  • Activate the primary button on enter if there is a single input

Example

image

@Pytal Pytal added this to the Nextcloud 25 milestone May 27, 2022
@Pytal Pytal self-assigned this May 27, 2022
@Pytal Pytal force-pushed the enh/a11y-keyboard-filepicker branch from 49451ec to ef2233b Compare May 27, 2022 00:56
@Pytal Pytal changed the title Add keyboard navigation to the file picker Augment file picker accessibility May 27, 2022
@Pytal Pytal force-pushed the enh/a11y-keyboard-filepicker branch from ef2233b to 7a3880f Compare May 27, 2022 22:11
@Pytal Pytal changed the title Augment file picker accessibility Augment file picker modal accessibility May 27, 2022
@Pytal Pytal force-pushed the enh/a11y-keyboard-filepicker branch from 7a3880f to b84e50d Compare May 27, 2022 22:32
@Pytal Pytal added 3. to review Waiting for reviews enhancement and removed 2. developing Work in progress labels May 27, 2022
@Pytal Pytal requested review from a team, PVince81, artonge and szaimen and removed request for a team May 27, 2022 22:38
@Pytal Pytal marked this pull request as ready for review May 27, 2022 22:42
@PVince81 PVince81 requested review from CarlSchwan and skjnldsv May 30, 2022 09:14
artonge
artonge approved these changes May 31, 2022
View reviewed changes
@Pytal
Copy link
Member Author

Pytal commented Jun 8, 2022

@nextcloud/accessibility available to review?

PVince81
PVince81 reviewed Jun 8, 2022
View reviewed changes
PVince81
PVince81 reviewed Jun 8, 2022
View reviewed changes
Pytal added 4 commits June 8, 2022 23:58
@Pytal
Handle keyboard navigation in the file picker
229c65b 
Signed-off-by: Christopher Ng <chrng8@gmail.com>
@Pytal
Prepend file picker to be initial keyboard focus target
a9f6cd1 
Signed-off-by: Christopher Ng <chrng8@gmail.com>
@Pytal
Restore grid view toggle
ba75c61 
Removed in #29966 and partially restored in #30452

Signed-off-by: Christopher Ng <chrng8@gmail.com>
@Pytal
Fix focus styling
fc56c0e 
Signed-off-by: Christopher Ng <chrng8@gmail.com>
Pytal added 9 commits June 9, 2022 00:08
@Pytal
Prevent pressing enter key without control focus from activating the …
83e16b8 
…primary button

Signed-off-by: Christopher Ng <chrng8@gmail.com>
@Pytal
Use button for grid view toggle instead of hidden checkbox
0b0ef10 
Signed-off-by: Christopher Ng <chrng8@gmail.com>
@Pytal
Use keyboard controls for new folder creation
16d2238 
Signed-off-by: Christopher Ng <chrng8@gmail.com>
@Pytal
Use keyboard controls with the action buttons
edba92d 
Signed-off-by: Christopher Ng <chrng8@gmail.com>
@Pytal
Activate the primary dialog button on enter if there is a single input
9f09caa 
Signed-off-by: Christopher Ng <chrng8@gmail.com>
@Pytal
Add a11y utility function
189926b 
Signed-off-by: Christopher Ng <chrng8@gmail.com>
@Pytal
Set circular radius on close button
f876dc6 
Signed-off-by: Christopher Ng <chrng8@gmail.com>
@Pytal
Update variable name
343eab4 
Signed-off-by: Christopher Ng <chrng8@gmail.com>
@Pytal
Rename a11y helper function
0ea95c3 
Signed-off-by: Christopher Ng <chrng8@gmail.com>
@Pytal Pytal force-pushed the enh/a11y-keyboard-filepicker branch from a63198e to 0ea95c3 Compare June 9, 2022 00:27
@Pytal Pytal requested a review from PVince81 June 9, 2022 00:35
@Pytal Pytal mentioned this pull request Jun 9, 2022
Merged
1 task
PVince81
PVince81 reviewed Jun 9, 2022
View reviewed changes
core/src/OC/dialogs.js

import OC from './index'
import OCA from '../OCA/index'
import { isA11yActivation } from '../Util/a11y'
Copy link
Member

@PVince81 PVince81 Jun 9, 2022

Choose a reason for hiding this comment

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

ok for now, I guess we might want this also in nextcloud-vue

Copy link
Member Author

@Pytal Pytal Jun 10, 2022

Choose a reason for hiding this comment

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

Tracked in nextcloud-libraries/nextcloud-vue#2750

PVince81
PVince81 approved these changes Jun 9, 2022
View reviewed changes
Copy link
Member

@PVince81 PVince81 left a comment

Choose a reason for hiding this comment

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

👍

@PVince81 PVince81 merged commit dac93fe into master Jun 9, 2022
@PVince81 PVince81 deleted the enh/a11y-keyboard-filepicker branch June 9, 2022 11:20
@Pytal Pytal mentioned this pull request Jun 10, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@PVince81 PVince81 PVince81 approved these changes

@artonge artonge artonge approved these changes

@szaimen szaimen Awaiting requested review from szaimen

@CarlSchwan CarlSchwan Awaiting requested review from CarlSchwan

@skjnldsv skjnldsv Awaiting requested review from skjnldsv

Assignees

@Pytal Pytal

Labels

3. to review Waiting for reviews enhancement feature: accessibility feature: filepicker

Projects

None yet

Milestone

Nextcloud 25

Development

Successfully merging this pull request may close these issues.

4 participants

@Pytal @PVince81 @artonge