search

hperrin / svelte-material-ui

Svelte Material UI Components
https://sveltematerialui.com/
Apache License 2.0
3.28k stars 288 forks source link

Accessibility on Select #606

Open dmlayton opened 1 year ago

dmlayton commented 1 year ago

Using the Select component gives a few accessibility warnings. Vanilla it saya the aria-* atributes don't match the role on the select anchor. Since the select anchor is a div and not role is set, but aria-required is for a required field, it give this warning

To Reproduce Steps to reproduce the behavior:

  1. Run lighthouse on https://sveltematerialui.com/demo/select/
  2. Scroll down to 'Requires'
  3. See error

You can get rid of the error by setting the role on the anchor to combobox with <Select anchor$role="combobox" required>, but then you have an issue that aria-expanded is not set initially (it's required). Additionally, it's not labelled so I added

    aria-expanded="false"
    aria-labelledby={inputId + '-smui-label'}    // <-- maybe this should be a variable for DRY

to the div that is the anchor and patched.

Now lighthouse is happy, and I'm fairly certain combo box it the correct semantics