Accessibility fixes for header and global elements #10310

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

Fix #9994 and fix #10008 🎉

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

apps/files/js/newfilemenu.js

+
+			// 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

apps/files/js/newfilemenu.js

-			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

core/js/js.js

 			// prevent the link event (append anchor to URL)
 			event.preventDefault();

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


We should key instead

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

core/js/js.js

 	$(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 elements Jul 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 21c9054 Compare July 20, 2018 18:53

jancborchardt mentioned this pull request Jul 20, 2018

Unable to open file or folder with keyboard #10008

Closed

jancborchardt and 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 b7bf2f7 Compare 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 elements Jul 20, 2018

jancborchardt requested review from skjnldsv, juliusknorr, tyrylu, MarcoZehe and kevgathuku 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 d2e9e22 Compare 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

jancborchardt and 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 fe25092 Compare July 24, 2018 17:03

MorrisJobke approved these changes Jul 24, 2018

View reviewed changes

MorrisJobke merged commit a96137e into master Jul 24, 2018

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Accessibility fixes for header and global elements #10310

Accessibility fixes for header and global elements #10310

jancborchardt commented Jul 20, 2018 •

edited

Loading

jancborchardt commented Jul 20, 2018

jancborchardt commented Jul 20, 2018

tyrylu left a comment

kevgathuku Jul 21, 2018 •

edited

Loading

skjnldsv Jul 21, 2018

jancborchardt Jul 21, 2018

kevgathuku Jul 21, 2018

skjnldsv commented Jul 21, 2018 •

edited

Loading

skjnldsv Jul 21, 2018

kevgathuku Jul 21, 2018

skjnldsv Jul 22, 2018

kevgathuku Jul 23, 2018

skjnldsv Jul 22, 2018

skjnldsv Jul 22, 2018

MorrisJobke commented Jul 23, 2018

MorrisJobke commented Jul 23, 2018

danxuliu commented Jul 24, 2018

jancborchardt commented Jul 25, 2018

Accessibility fixes for header and global elements #10310

Accessibility fixes for header and global elements #10310

Conversation

jancborchardt commented Jul 20, 2018 • edited Loading

jancborchardt commented Jul 20, 2018

jancborchardt commented Jul 20, 2018

tyrylu left a comment

Choose a reason for hiding this comment

kevgathuku Jul 21, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

skjnldsv commented Jul 21, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MorrisJobke commented Jul 23, 2018

MorrisJobke commented Jul 23, 2018

danxuliu commented Jul 24, 2018

jancborchardt commented Jul 25, 2018

jancborchardt commented Jul 20, 2018 •

edited

Loading

kevgathuku Jul 21, 2018 •

edited

Loading

skjnldsv commented Jul 21, 2018 •

edited

Loading