Accessibility fixes for header and global elements by jancborchardt · Pull Request #10310 · nextcloud/server

jancborchardt · 2018-07-20T10:24:25Z

Settings icon / avatar: fix opening on enter
Contacts: fix opening on enter
Notification icon: fix keyboard tab feedback and opening on enter: Fix header icon accessibility notifications#146
Fix Upload in +Menu not launching when using keyboard

cc @nextcloud/accessibility :)

jancborchardt · 2018-07-20T15:06:03Z

Could use some help with JS here on how to do the trigger using enter so that it works for all .menutoggle elements and we don’t need to change the markup. @nextcloud/javascript or what do you think?

Similar for the Unable to open file or folder with keyboard#10008 issue where pressing enter on a folder/file opens the sidebar instead of opening the folder/file itself.

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

jancborchardt · 2018-07-20T22:09:34Z

This is now ready to review, together with the related Notifications pull request at nextcloud/notifications#146

Please check @nextcloud/accessibility @nextcloud/designers :)

tyrylu

From the point of view of the markup and script changes, it looks alright and useful, so thank you.

kevgathuku · 2018-07-21T11:13:54Z

+
+ // Trigger upload action also with keyboard navigation on enter
+ this.$el.find('[for="file_upload_start"]').on('keypress', function() {
+ $('#file_upload_start').trigger('click');


@jancborchardt Right now this is triggered for every keypress.
Ideally, only the Enter and Spacebar keys should activate the functionality.
A potential fix would be something like this:
this.$el.find('[for="file_upload_start"]').on("keypress", function(event) { if (event.key === " " || event.key === "Enter") { $("#file_upload_start").trigger("click"); } });

@jancborchardt yup, we forgot this one! :)

@kevgathuku ah right! Do you want to add a commit to the pull request? :)

@jancborchardt sure. I'll add it

skjnldsv · 2018-07-21T14:02:08Z

~~Fix #9994 too?~~
Arf, was already there :)

skjnldsv · 2018-07-21T18:21:31Z

- this.$el.find('[for="file_upload_start"]').on('keypress', function() {
- $('#file_upload_start').trigger('click');
+ this.$el.find('[for="file_upload_start"]').on('keyup', function(event) {
+ if (event.key === " " || event.key === "Enter") {


Thanks for your commit! 🎉
Why not use the codeKey?
Is there a special reason for allowing the " " ? :)

Hi @skjnldsv
Thanks 👍
Why not use the codeKey?
The keyCode is deprecated and event.key is preferred instead.
Is there a special reason for allowing the " " ? :)
For this instance, the behavior is more like a button, which is usually activated using either the Spacebar (" ") or Enter keys. I'm thinking it would be better to stick to this convention.
Let me know whether this makes sense 😄

Nice! Thanks for the tip, I did not know it was deprecated :)
Can you also move the edits we dit Jan and I from keyCode to key?

Sure! I'll make the edits.

skjnldsv · 2018-07-22T09:38:40Z

 event.preventDefault();

+ // allow enter key as a trigger
+ if (event.keyCode && event.keyCode !== 13) {


We should key instead

skjnldsv · 2018-07-22T09:38:45Z

 	$(document).on('mouseup.closemenus', function(event) {
+
+ // allow enter as a trigger
+ // if (event.keyCode && event.keyCode !== 13) {


We should key instead

MorrisJobke · 2018-07-23T13:51:17Z

CI is here: https://drone.nextcloud.com/nextcloud/server/9129

MorrisJobke · 2018-07-23T14:48:14Z

JSUnit tests fail:

https://drone.nextcloud.com/nextcloud/server/9129/247

Before, the file or folder was opened when clicking on the name span, but not when clicking on the link that contains the name; clicking on the link highlighted the file and opened the sidebar, just like clicking on the file size or date. Now clicking on the link opens the file or folder, so the unit tests that tested clicks on the link were changed to test clicking on the file size instead. Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Signed-off-by: Kevin Ndung'u <kevgathuku@gmail.com>

danxuliu · 2018-07-24T17:05:01Z

I have amended the offending commit and fixed the JavaScript unit tests ;-)

jancborchardt · 2018-07-25T13:38:37Z

Thanks @skjnldsv @kevgathuku @danxuliu for the help! :) This is another great fix for better accessibility.

jancborchardt added bug design Design, UI, UX, etc. 2. developing Work in progress feature: accessibility labels Jul 20, 2018

jancborchardt added this to the Nextcloud 14 milestone Jul 20, 2018

jancborchardt changed the title ~~[Wor k Accessibility fixes for header and global elements~~[Work in progress] Accessibility fixes for header and global elementsJul 20, 2018

jancborchardt mentioned this pull request Jul 20, 2018
Fix header icon accessibility nextcloud/notifications#146
Merged
1 task

skjnldsv force-pushed the accessibility-header branch from 64d7c4f to 21c9054Compare July 20, 2018 18:53

jancborchardt mentioned this pull request Jul 20, 2018
Unable to open file or folder with keyboard #10008
Closed

jancborchardtand others added 8 commits July 20, 2018 23:19

Fix tooltip for More apps showing on focus
98adee5
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Fix visual keyboard tab feedback for avatar / settings icon in header
9bf4827
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Fix visual keyboard tab feedback for Contacts menu icon in header
fe38e33
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Enter key on menu registration
7f0d60f
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Make Upload entry in +Menu focusable
e9581f2
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Add visual feedback for keyboard tab in breadcrumbs
3e6ac57
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Show skip navigation links above everything, also on narrow screens
a21be0a
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Make left sidebar toggle also work with keyboard
6d083c4
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

jancborchardt force-pushed the accessibility-header branch from ad7181d to b7bf2f7Compare July 20, 2018 21:22

jancborchardt changed the title ~~[Work in progress] Accessibility fixes for header and global elements~~Accessibility fixes for header and global elementsJul 20, 2018

jancborchardt requested review from MarcoZehe, juliusknorr, kevgathuku, skjnldsv and tyrylu July 20, 2018 22:07

jancborchardt added 3. to review Waiting for reviews and removed 2. developing Work in progress labels Jul 20, 2018

jancborchardt requested a review from MorrisJobke July 20, 2018 22:10

tyrylu approved these changes Jul 21, 2018
View reviewed changes

skjnldsv approved these changes Jul 21, 2018
View reviewed changes

kevgathuku reviewed Jul 21, 2018
View reviewed changes

skjnldsv reviewed Jul 21, 2018
View reviewed changes

skjnldsv reviewed Jul 22, 2018
View reviewed changes

kevgathuku force-pushed the accessibility-header branch from 7df461d to d2e9e22Compare July 23, 2018 08:21

skjnldsv approved these changes Jul 23, 2018
View reviewed changes

skjnldsv added 4. to release Ready to be released and/or waiting for tests to finish and removed 3. to review Waiting for reviews labels Jul 23, 2018

MorrisJobke added 2. developing Work in progress and removed 4. to release Ready to be released and/or waiting for tests to finish labels Jul 23, 2018

MorrisJobke mentioned this pull request Jul 24, 2018
14.0.0 Beta 1 #10370
Merged
21 tasks

jancborchardtand others added 4 commits July 24, 2018 18:58

Trigger upload action also with keyboard navigation on enter
d06e00f
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Trigger upload actions only for Enter & Space keys
1cdf808
Signed-off-by: Kevin Ndung'u <kevgathuku@gmail.com>

Remove deprecated keyboard events & properties
fe25092
Signed-off-by: Kevin Ndung'u <kevgathuku@gmail.com>

danxuliu force-pushed the accessibility-header branch from d2e9e22 to fe25092Compare July 24, 2018 17:03

MorrisJobke approved these changes Jul 24, 2018
View reviewed changes

MorrisJobke merged commit a96137e into masterJul 24, 2018

MorrisJobke deleted the accessibility-header branch July 24, 2018 22:07

Uh oh!

Uh oh!

Conversation

jancborchardt commented Jul 20, 2018• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jancborchardt commented Jul 20, 2018

Uh oh!

jancborchardt commented Jul 20, 2018

Uh oh!

tyrylu left a comment

Choose a reason for hiding this comment

Uh oh!

kevgathukuJul 21, 2018• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

skjnldsv commented Jul 21, 2018• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MorrisJobke commented Jul 23, 2018

Uh oh!

MorrisJobke commented Jul 23, 2018

Uh oh!

danxuliu commented Jul 24, 2018

Uh oh!

jancborchardt commented Jul 25, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

jancborchardt commented Jul 20, 2018•
edited
Loading

kevgathukuJul 21, 2018•
edited
Loading

skjnldsv commented Jul 21, 2018•
edited
Loading