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

Sharing UI accessibility #11661

Closed
tyrylu opened this issue Oct 7, 2018 · 12 comments · Fixed by #15961
Closed

Sharing UI accessibility #11661

tyrylu opened this issue Oct 7, 2018 · 12 comments · Fixed by #15961
Labels
1. to develop Accepted and waiting to be taken care of design Design, UI, UX, etc. feature: accessibility
Milestone

Comments

@tyrylu
Copy link
Contributor

tyrylu commented Oct 7, 2018

Steps to reproduce

  1. Open the sharing UI for any file with, lets say NVDA
  2. Observe missing buttons, and maybe more

Expected behaviour

Everything should be read correctly

Actual behaviour

There at least two instances of, i assume buttons, which have only an icon - namely the confirmation button for the share with action and the more button for public link sharing.
I did not notice it sooner, i should probably have tested the betas, but i naively assumed that if it worked in 13, it would not be broken with 14.

Client configuration

Browser: Firefox 62.0.3

Operating system: Windows 10

Screen reader tested: NVDA, latest development snapshot

Notes

I suspect that we can not avoid those regressions entirely, because it would require some sort of integration test or something like that, but i have honestly no idea how testing those kinds of interactions would even work, anyone any ideas?

@tyrylu tyrylu added design Design, UI, UX, etc. feature: accessibility labels Oct 7, 2018
@nextcloud-bot
Copy link
Member

GitMate.io thinks possibly related issues are #10361 (Public share note needs a better ui), #5916 (UI problem in sharing options), #434 (New sharing UI), #11364 ([npm] Bump accessibility), and #3401 (Suggestion: Share Center).

@MorrisJobke
Copy link
Member

It should work - @jancborchardt recently looked into improving it. Maybe somebody from @nextcloud/accessibility can verify this as well.

@tyrylu
Copy link
Contributor Author

tyrylu commented Oct 10, 2018

Yeah, i should probably test the latest master, then. :-)

@jancborchardt
Copy link
Member

@tyrylu sorry about that, we are working a lot on the sharing at the moment. :\ If you do have time, it would be great if you could test the pull request where we work on multiple share links: #11844 – as that will change stuff around a bit again.

(@skjnldsv and me will also test, but it’s always good to have feedback from others in @nextcloud/accessibility! :)

@javido
Copy link

javido commented Dec 3, 2018

I confirm this issue in 14.04 With Orca screen reader / Firefox 63.
Another related issue is with the popover menus, there is no keyboard alternative shortcut to show share options menu when you mark a public share.
I have to edit the dom tree and remove popover-menu class to get access to these options. Copy link, send by email, set password etc.
I would like to contribute testing a11y, I will look to install a fresh master version.

Thanks, regards

@skjnldsv
Copy link
Member

skjnldsv commented Dec 3, 2018

I would like to contribute testing a11y, I will look to install a fresh master version.

@javido awesome! We're really looking forward to that!
If you need help setting things up, reach over the docs: https://docs.nextcloud.com/server/stable/developer_manual/general/devenv.html
If you need another help, come and join us on the irc channel #nextcloud-dev on freenode or just ask in these Github issues :) 👋

@jancborchardt
Copy link
Member

@javido very cool, welcome to Nextcloud! Also added you to the accessibility team!

@tyrylu did you manage to test with latest master already? Nextcloud 15 will be released on Thursday but fixes we do afterwards could still be backported to be in a 15.0.1 release etc. :)

@skjnldsv skjnldsv added the 1. to develop Accepted and waiting to be taken care of label Jun 12, 2019
@javido
Copy link

javido commented Jun 14, 2019

Things has improved a lot on accessibility for the new Sharing UI.
Screen reader can present share options and form.
Tested on Nextcloud 16.0.1 with Orca screen reader on GNOME and JAWS / NVDA screen readers on Windows.
Great work!

A related issue may be with the share icon in Files application?
Screen reader doesn't present any accessible text for the "Share" link.
Do We need to open another issue on this? or it's related to the new Sharing UI?

@tyrylu
Copy link
Contributor Author

tyrylu commented Jun 14, 2019

Confirmed, but it only occurs when the file is not shared.

@javido
Copy link

javido commented Jun 14, 2019

In Sharing UI the h3 heading for file to be shared should be level 2 (h2) to don't break the heading hierarchy.
Also I don't see reason to use aria-described or title attribute since this is not a interactive or focusable element.
Would be nice to have more details for the input
E.G. which file it's to be shared
So when sscreen reader focus the input field, users could have feedback on which file it's to be shared.
You can use an id attribute to file name heading, id attribute to the "Share" label and then
use aria-labelledby="file_name lbl_share" in the input element as follow:

jsaccesible.zip

Compartir

@javido
Copy link

javido commented Jun 14, 2019

jsaccesible.zip

Compartir

@jancborchardt
Copy link
Member

jancborchardt commented Jun 14, 2019

@tyrylu @javido thanks a lot for the feedback, sorry about that issue with the Share action not being readable. Pull request to fix it is at #15961

Could you open other issues as separate issues? That makes it easier to track what is still an issue and to separate discussion. :) You can feel free to remove the issue template, or just use the direct link: https://github.com/nextcloud/server/issues/new

Thanks a lot!

skjnldsv added a commit that referenced this issue Jun 17, 2019
Sharing in list: Use .hidden-visually instead of display:none for accessibility, fix #11661
backportbot-nextcloud bot pushed a commit that referenced this issue Jun 17, 2019
…essibility, fix #11661

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
skjnldsv added a commit that referenced this issue Jun 18, 2019
…one for accessibility, fix #11661 (#15981)

[stable16] Sharing in list: Use .hidden-visually instead of display:none for accessibility, fix #11661
@MorrisJobke MorrisJobke added this to the Nextcloud 17 milestone Jul 2, 2019
compagnon pushed a commit to compagnon/nextcloud-server that referenced this issue Jul 10, 2019
…essibility, fix nextcloud#11661

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
compagnon pushed a commit to compagnon/nextcloud-server that referenced this issue Aug 22, 2019
…essibility, fix nextcloud#11661

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
1. to develop Accepted and waiting to be taken care of design Design, UI, UX, etc. feature: accessibility
Projects
None yet
6 participants