-
Notifications
You must be signed in to change notification settings - Fork 3
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
Conversation
We had Michelle test this page. Some new issues popped up. The things fixed here seem to work, though. The new issues are:
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. |
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. |
…r multiselect dropdown issues
…opdowns on the advanced search page
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lgtm
There was a problem hiding this 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?
@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. |
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