Add some aria attribute to dropdown for accessibility purposes#469
Add some aria attribute to dropdown for accessibility purposes#469Leusev wants to merge 2 commits intozurb:masterfrom
Conversation
|
Hello @mrsweaters |
src/Tribute.js
Outdated
| ul = this.range.getDocument().createElement("ul"); | ||
| wrapper.className = containerClass; | ||
| wrapper.setAttribute('aria-expanded','true'); | ||
| ul.setAttribute('id','results'); |
There was a problem hiding this comment.
Maybe this should be more specific to tribute? Maybe tributeResults.
|
Good morning @mrsweaters |
| ul = this.range.getDocument().createElement("ul"); | ||
| wrapper.className = containerClass; | ||
| wrapper.setAttribute('aria-expanded','true'); | ||
| ul.setAttribute('id','tributeResults'); |
There was a problem hiding this comment.
this will cause issues when multiple instance of tribute are used in the page, because it will create duplicate ids. The uniqueness of ids must be preserved.
A solution could be to use el.id + '-tributeResults' (and maybe skip the id entirely if el does not have an id, as generating a random part for the id won't be useful to reference it from the outside). This way, the id stays unique (assuming that the page was not using duplicate ids and that it was not already using a -tributeResults suffix in its set of ids of course) while being deterministic and user-controlled (making it possible to reference the id in aria attributes maintained outside tribute).
Purpose
While working on a side projecte that uses Tribute.js to implement an user's dropdown list to add into a list, I was asked to add some aria's accessibility functionality to input and its dropdown list.
I realised I was unable to link the dropdown <ul element to the input with an "aria-owns" attribute because <ul element lacks of ii, as well as the <li element neither had 'role="option"'
Accessibility functions
As an example, I was following some aria best practices like these:
📷 Screenshots
Now:
With aria attributes: