Improve aria attributes of README example - Githubissues

afcapel / stimulus-autocomplete

Stimulus autocomplete component

MIT License

478 stars 61 forks source link

Improve aria attributes of README example #142

Open tmaier opened 1 year ago

tmaier commented 1 year ago

I quickly checked https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Combobox_Role and I think the following aria attributes can be easily added:

<div data-controller="autocomplete" data-autocomplete-url-value="/birds/search" role="combobox">
  <input type="text" data-autocomplete-target="input" aria-autocomplete="list" aria-controls="bird-id-results" />
  <input type="hidden" name="bird_id" data-autocomplete-target="hidden"/>
  <ul class="list-group" data-autocomplete-target="results" id="bird-id-results"></ul>
</div>

Add aria-autocomplete="list" to the input field
Add aria-controls="bird-id-results" (id of the <ul>) to the input field
Add id="bird-id-results" to the <ul>.