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

Adds javascript to add some aria labels to dropdowns in advanced search #1172

Merged
merged 8 commits into from
Apr 28, 2023

Conversation

ajkiessl
Copy link
Contributor

@ajkiessl ajkiessl commented Apr 25, 2023

Mac's VoiceOver was able to read all the options in the dropdowns properly. The top-most and bottom-most dropdowns were being referred to as "buttons". I was not able to totally get the top dropdown to stop being referred to as a "button". It is contained within an h3 tag, so the screen reader treats it like a menu dropdown. I added an aria label to indicate that it's a "listbox", but the screen reader says it's a "listbox, popup, collapsed, button". Setting the role to listbox here seemed to really confuse the screen reader, so I didn't do that. I also didn't change the tag from h3 to something else because having it as a header tag forces the screen reader to read the whole element, which is helpful to indicate that there is a dropdown contained within.

The bottom dropdown I was able to fix by setting it's role to "listbox".

closes #304

@ajkiessl ajkiessl marked this pull request as ready for review April 25, 2023 16:31
@ajkiessl ajkiessl marked this pull request as draft April 26, 2023 15:49
@ajkiessl
Copy link
Contributor Author

ajkiessl commented Apr 26, 2023

We had Michelle test this page. Some new issues popped up. The things fixed here seem to work, though.

The new issues are:

  • With NVDA, in the multi select boxes, selected items are not saying they are selected
  • With JAWS, it is not allowing the user to leave the multi select dropdowns unless the PC cursor is turned off
  • The multi select dropdown labels aren't being read, and they need to indicate that they are multi select

The third one here can likely be fixed with javascript, or some html changes. The other two are going to be a little more tricky. I can try updating the plugin used to create these, and see if that fixes anything.

@ajkiessl
Copy link
Contributor Author

ajkiessl commented Apr 26, 2023

There is no update for blacklight_advanced_search, so that won't help.

Looks like bootstrap-select is being used for those dropdowns, so I updated that.

@ajkiessl
Copy link
Contributor Author

This is ready for review.

I was not able to fix the keyboard trap by updating the plugins. I added an issue for this: #1175

@ajkiessl ajkiessl marked this pull request as ready for review April 27, 2023 19:13
@ajkiessl ajkiessl requested review from banukutlu and Smullz622 April 27, 2023 19:14
Copy link
Contributor

@Smullz622 Smullz622 left a comment

Choose a reason for hiding this comment

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

lgtm

Copy link
Contributor

@banukutlu banukutlu left a comment

Choose a reason for hiding this comment

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

@ajkiessl could be an obvious answer but I did not have a chance to look into this much, so just to clarify, are the aria labels and role that are being set by the js in this PR, cannot be added by overriding a view?

@ajkiessl
Copy link
Contributor Author

@banukutlu I potentially could have, but it seemed like the simplest way, and the way with the least amount of complexity and code changes was to use javascript.

I would have had to add several more overrides to do this. The views being affected in this issue aren't already overriden.

@ajkiessl ajkiessl merged commit a55fd70 into main Apr 28, 2023
@ajkiessl ajkiessl deleted the preview/a11y-adv-srch branch April 28, 2023 19:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Chosen-like drop-downs in Advanced search inaccessible
3 participants