QInput uses not-allowed aria-readonly attribute

[hennzen]

What happened?

Our app needs to comply with WCAG guidelines, which is why we plan to integrate automated checks into our build pipeline as a first stop, prior to manual checks. We strive to reduce the amount of (sometimes non-critical or even purely technical as per specs) errors reported by Lighthouse et al., so that the important errors stay visible.

Currently, a q-input field set up as readonly causes an error "[aria-*] attributes do not match their roles" in Lighthouse (same as "Elements must only use supported ARIA attributes" in AxeDevTools).

What did you expect to happen?

The <label> element should not be using aria-readonly="true". Screenreaders will use the the HTML-native readonly attribute on the <input> field to properly announce read-only state to the user.

Reproduction URL

https://codepen.io/hennzen/pen/abXgpwy

How to reproduce?

1. Go to the provided CodePen
2. Open DevTools to either use Lighthouse or AxeDevTools Tab
3. Generate report

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar), Composables (quasar), Accessibility [a11y] (quasar)

Platforms/Browsers

Firefox, Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[pdanpdan]

Good point. It looks like aria-readonly should go away.

[hennzen]

Thanks, that fix went fast 😍