[Bug Report] v-select aria-readonly attr is false on input element but should be true

Environment

Vuetify Version: 2.4.2 Vue Version: 2.6.10 Browsers: Chrome 87.0.4280.141 OS: Windows 10

Steps to reproduce

check html result input element

Expected Behavior

<input id="input-3" readonly="readonly" type="text" aria-readonly="true" autocomplete="off">

Actual Behavior

<input id="input-3" readonly="readonly" type="text" aria-readonly="false" autocomplete="off">

Reproduction Link

https://codepen.io/chrmorqmatic/pen/jOMdaLa

Other comments

This should be consistent, both value should be the same, in the v-select sourcecode, readonly is always true on the input element but the aria-readonly comes from this.isReadonly that doesn’t exists and thus is aways false.

[chrmorqmatic]

We’ll check the screen readers and keep you informed

We have tested this issue with NVDA and chrome and it works fine, so let’s close this issue

[chrmorqmatic]

Does this cause problems in screen readers?

Yes, we received the report from a customer auditing our application for WCAG accessibility, here it is:

This has a mismatch between the value of its readonly and aria-readonly attributes When ARIA attributes (state, roles, and properties) are not used correctly assistive technology may not correctly function as expected. Valid markup should always be used. Developers must use valid markup and follow the rules of the ARIA specification.

It’s inherited from v-text-field, set the readonly prop and you’ll see it change.

adding readonly prop makes the v-select readonly and cannot be edited. A value cannot be selected.