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

SelectWoo accessibility - Known issues #16003

Closed
mikejolley opened this Issue Jul 6, 2017 · 14 comments

Comments

Projects
None yet
7 participants
@mikejolley
Member

mikejolley commented Jul 6, 2017

SelectWoo has been merged into master, and already has some fixes for screen readers to address issues raised by users.

Known issues

VoiceOver

  • Control +option + space bar command is not working to open the list of choices. VoiceOver users normally use this combination to open select inputs. On the other hand, using the Enter key does open the select input.
  • In a search, VoiceOver does not announce the results found or the total items available on the list. It does announce when no matches are found.
  • When the list of options is open or closed, VoiceOver does not announce it.
  • Nesting: VoiceOver ignores the options that are nested inside an option. I could not even give them focus.
  • Multiselect: In a search, VoiceOver does not announce the option found. When an option is selected (it looks like a tag), VoiceOver announce it as a group. Even if the option is selected it, I was not able to delete it. I tried using space bar and the Enter key.
@claudiulodro

This comment has been minimized.

Show comment
Hide comment
@claudiulodro

claudiulodro Jul 6, 2017

Contributor

Looks like the ajax product/user search in the admin needs a little help, too. That one looks like it just needs to mirror some of the changes I did to the regular dropdown, so it shouldn't be too bad.

Contributor

claudiulodro commented Jul 6, 2017

Looks like the ajax product/user search in the admin needs a little help, too. That one looks like it just needs to mirror some of the changes I did to the regular dropdown, so it shouldn't be too bad.

@mikejolley

This comment has been minimized.

Show comment
Hide comment
@mikejolley

mikejolley Jul 17, 2017

Member

@ryelle If you can look this week that would be great :) @claudiulodro is back next week to correct anything you find.

Member

mikejolley commented Jul 17, 2017

@ryelle If you can look this week that would be great :) @claudiulodro is back next week to correct anything you find.

@ryelle

This comment has been minimized.

Show comment
Hide comment
@ryelle

ryelle Jul 21, 2017

Member

So, to be honest I'm not a savvy screen reader user, but I did notice some confusing things while testing. That said, are you planning on testing with everyday screen reader users? I know that I'm not a good VoiceOver user, so what works for me might actually be worse for blind users. Maybe ask on that select2 ticket, or in the wp.org slack accessibility room? I'm sure wp core would be interested in using this for settings/etc if it's accessible, and I know they have connections with testers.

Also, there aren't really clear instructions for testing here, so I've just loaded up a few settings screens.

After running aXe, which does some automated testing:

  • The single selects are highlighted with Certain ARIA roles must contain particular children: Required ARIA child role not present: listbox more info
  • When a select with search box is open, it flags as not having a label
    screen shot 2017-07-21 at 10 53 12 am
  • When open, the input is expected to have an aria-expanded attribute

Single select without search

  • VoiceOver still announces it as a combobox I can type in, even with no text input
  • VO doesn't read the items as I arrow-key down, so I don't know what item is currently selected

Single select with search

  • I had some trouble navigating into this one
  • VoiceOver announces when no matches are found, but doesn't announce matches, even after I've paused typing (even just "X matches found" would be helpful)
  • Going down the results of a search for "New" in "Country / State" doesn't announce the highlighted items, except for New Caledonia or Papua New Guinea. After more testing, it looks like it only reads countries.

Multi-select

  • The input I land in has no label, so I'm not sure what I'm typing
  • I can't backspace to delete items- or, I can, but not immediately after adding an item, i need to leave the input and come back
  • Using just the keyboard, I can't delete the first item in the list without removing all others.
  • Select All and Select None should be <button>s, given they're styled as & act like buttons

As an aside, I also noticed the text in the (?) icon is not available to screen readers at all. Core has the screen-reader-text class, you could use for this.

Member

ryelle commented Jul 21, 2017

So, to be honest I'm not a savvy screen reader user, but I did notice some confusing things while testing. That said, are you planning on testing with everyday screen reader users? I know that I'm not a good VoiceOver user, so what works for me might actually be worse for blind users. Maybe ask on that select2 ticket, or in the wp.org slack accessibility room? I'm sure wp core would be interested in using this for settings/etc if it's accessible, and I know they have connections with testers.

Also, there aren't really clear instructions for testing here, so I've just loaded up a few settings screens.

After running aXe, which does some automated testing:

  • The single selects are highlighted with Certain ARIA roles must contain particular children: Required ARIA child role not present: listbox more info
  • When a select with search box is open, it flags as not having a label
    screen shot 2017-07-21 at 10 53 12 am
  • When open, the input is expected to have an aria-expanded attribute

Single select without search

  • VoiceOver still announces it as a combobox I can type in, even with no text input
  • VO doesn't read the items as I arrow-key down, so I don't know what item is currently selected

Single select with search

  • I had some trouble navigating into this one
  • VoiceOver announces when no matches are found, but doesn't announce matches, even after I've paused typing (even just "X matches found" would be helpful)
  • Going down the results of a search for "New" in "Country / State" doesn't announce the highlighted items, except for New Caledonia or Papua New Guinea. After more testing, it looks like it only reads countries.

Multi-select

  • The input I land in has no label, so I'm not sure what I'm typing
  • I can't backspace to delete items- or, I can, but not immediately after adding an item, i need to leave the input and come back
  • Using just the keyboard, I can't delete the first item in the list without removing all others.
  • Select All and Select None should be <button>s, given they're styled as & act like buttons

As an aside, I also noticed the text in the (?) icon is not available to screen readers at all. Core has the screen-reader-text class, you could use for this.

@mikejolley

This comment has been minimized.

Show comment
Hide comment
@mikejolley

mikejolley Jul 23, 2017

Member

@ryelle We have a user in support who requested this; they will be able to confirm it's working before release.

Member

mikejolley commented Jul 23, 2017

@ryelle We have a user in support who requested this; they will be able to confirm it's working before release.

@claudiulodro

This comment has been minimized.

Show comment
Hide comment
@Umimarina

This comment has been minimized.

Show comment
Hide comment
@Umimarina

Umimarina Aug 14, 2017

Hello,

Rian asked me to test the selectwoo examples with Voice Over. Here are my findings:

Common bugs for all the examples:

  • Control +option + space bar command is not working to open the list of choices. VoiceOver users normally use this combination to open select inputs. On the other hand, using the Enter key does open the select input.
  • In a search, VoiceOver does not announce the results found or the total items available on the list. It does announce when no matches are found.
  • When the list of options is open or closed, VoiceOver does not announce it.

Nesting: VoiceOver ignores the options that are nested inside an option. I could not even give them focus.
Multiselect: In a search, VoiceOver does not announce the option found. When an option is selected (it looks like a tag), VoiceOver announce it as a group. Even if the option is selected it, I was not able to delete it. I tried using space bar and the Enter key.

Hello,

Rian asked me to test the selectwoo examples with Voice Over. Here are my findings:

Common bugs for all the examples:

  • Control +option + space bar command is not working to open the list of choices. VoiceOver users normally use this combination to open select inputs. On the other hand, using the Enter key does open the select input.
  • In a search, VoiceOver does not announce the results found or the total items available on the list. It does announce when no matches are found.
  • When the list of options is open or closed, VoiceOver does not announce it.

Nesting: VoiceOver ignores the options that are nested inside an option. I could not even give them focus.
Multiselect: In a search, VoiceOver does not announce the option found. When an option is selected (it looks like a tag), VoiceOver announce it as a group. Even if the option is selected it, I was not able to delete it. I tried using space bar and the Enter key.

@mikejolley

This comment has been minimized.

Show comment
Hide comment
@mikejolley

mikejolley Aug 15, 2017

Member

@claudiulodro ^ Should we log those as new issues here or selectwoo repo?

Member

mikejolley commented Aug 15, 2017

@claudiulodro ^ Should we log those as new issues here or selectwoo repo?

@claudiulodro

This comment has been minimized.

Show comment
Hide comment
@claudiulodro

claudiulodro Aug 15, 2017

Contributor

@mikejolley here is good. I'll edit your original post and add checkboxes as issues come in.

Thanks for testing @Umimarina!

Contributor

claudiulodro commented Aug 15, 2017

@mikejolley here is good. I'll edit your original post and add checkboxes as issues come in.

Thanks for testing @Umimarina!

@KayLeung

This comment has been minimized.

Show comment
Hide comment
@KayLeung

KayLeung Aug 15, 2017

Contributor

It's inconsistent if the site also has the native select tag.

Contributor

KayLeung commented Aug 15, 2017

It's inconsistent if the site also has the native select tag.

@irbian

This comment has been minimized.

Show comment
Hide comment
@irbian

irbian Aug 30, 2017

Axe is giving me an error, I would like to share:

Issue description
Ensures elements with an ARIA role that require child roles contain them
Fix the following:
Required ARIA child role not present: listbox

You can get the error in your example https://woocommerce.github.io/selectWoo/accessibility-testing/samples/single-search.html

Edit: Could be related with dequelabs/axe-core#214

irbian commented Aug 30, 2017

Axe is giving me an error, I would like to share:

Issue description
Ensures elements with an ARIA role that require child roles contain them
Fix the following:
Required ARIA child role not present: listbox

You can get the error in your example https://woocommerce.github.io/selectWoo/accessibility-testing/samples/single-search.html

Edit: Could be related with dequelabs/axe-core#214

@Umimarina

This comment has been minimized.

Show comment
Hide comment
@Umimarina

Umimarina Aug 30, 2017

Here are my results after testing:

  • Control +option + space bar command is still not working to open/close the list of choices.
  • In a search, VoiceOver does announce now the results found.
  • When the list of options is open or closed, VoiceOver still does not announce it.
  • Nesting: VoiceOver announce the options that are nested inside an option. I was able to give them focus.
  • Multiselect: In a search, VoiceOver does not announce the option found. When an option is selected, VoiceOver announce it as a group but also announce the name of the country. Even if the option is selected it, still I was not able to delete it.

Umimarina commented Aug 30, 2017

Here are my results after testing:

  • Control +option + space bar command is still not working to open/close the list of choices.
  • In a search, VoiceOver does announce now the results found.
  • When the list of options is open or closed, VoiceOver still does not announce it.
  • Nesting: VoiceOver announce the options that are nested inside an option. I was able to give them focus.
  • Multiselect: In a search, VoiceOver does not announce the option found. When an option is selected, VoiceOver announce it as a group but also announce the name of the country. Even if the option is selected it, still I was not able to delete it.

@mikejolley mikejolley added the bug label Aug 31, 2017

@ivaynberg

This comment has been minimized.

Show comment
Hide comment
@ivaynberg

ivaynberg Sep 15, 2017

@mikejolley not to hijack this thread, but why not ask to become a maintainer on the original select2 repo and move this work into it to remove the need for a fork and allow the wider user group to benefit? While I dont have time to work on Select2 I dont mind adding others who do to the project. Email me if you are interested.

@mikejolley not to hijack this thread, but why not ask to become a maintainer on the original select2 repo and move this work into it to remove the need for a fork and allow the wider user group to benefit? While I dont have time to work on Select2 I dont mind adding others who do to the project. Email me if you are interested.

@claudiulodro

This comment has been minimized.

Show comment
Hide comment
@claudiulodro

claudiulodro Sep 16, 2017

Contributor

@ivaynberg I am a maintainer on the original select2 repo. Until the last week it was abandoned, so contributing back to it did not make sense unless we took over select2 releases and general maintenance also. Now that it is back in business we will try and merge the improvements back into it when they are completed.

Contributor

claudiulodro commented Sep 16, 2017

@ivaynberg I am a maintainer on the original select2 repo. Until the last week it was abandoned, so contributing back to it did not make sense unless we took over select2 releases and general maintenance also. Now that it is back in business we will try and merge the improvements back into it when they are completed.

@claudiulodro claudiulodro changed the title from Review SelectWoo accessibility to SelectWoo accessibility - Remaining issues Sep 22, 2017

@claudiulodro claudiulodro changed the title from SelectWoo accessibility - Remaining issues to SelectWoo accessibility - Known issues Sep 22, 2017

@claudiulodro claudiulodro modified the milestones: 3.2.0, 3.3.0 Sep 22, 2017

@claudiulodro

This comment has been minimized.

Show comment
Hide comment
@claudiulodro

claudiulodro Sep 28, 2017

Contributor

Closing in favor of issues.

Contributor

claudiulodro commented Sep 28, 2017

Closing in favor of issues.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment