QCheckbox/QToggle/QRadio not rendering label element

[Sotiris-Bekiaris]

trafficstars

What happened?

When testing a Quasar project, with the Web Accessibility Evaluation tool (WAVE), that contains QCheckbox/QToggle/QRadio components, fails with Missing form label errors.

What did you expect to happen?

Using the components and their attributes correctly it should pass the test without errors.

Reproduction URL

https://codesandbox.io/s/qradio-demo-for-wave-error-yl324b

How to reproduce?

1. Go to the provided reproduction URL.
2. Open the compiled URL to a new tab.
3. Use this WAVE tool extension to test the project on the opened tab. https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh
4. See the Missing form label error on the radio buttons.

Flavour

Quasar CLI (@quasar/cli | @quasar/app)

Areas

Components (quasar)

Platforms/Browsers

Firefox, Chrome, Safari, Microsoft Edge, Internet Explorer 11

Quasar info output

No response

Relevant log output

No response

Additional context

As discussed in the Discord server https://discordapp.com/channels/415874313728688138/596275881907978240/946794715293024286 these components do not render a label element - they only have aria attrs for label. This needs to be resolved so Quasar projects can pass evaluation tool tests.

This issue also exists on v2 I do not know if I have to open an issue for v2 as well.

[Sotiris-Bekiaris]

@pdanpdan

[pdanpdan]

Ty, I'll take a look at this

[Sotiris-Bekiaris]

@pdanpdan Any updates?

Ty, I'll take a look at this

[pdanpdan]

not yet, it's in queue

[ryentzer]

Is this still in the queue?

[pdanpdan]

To be honest it looks like the WAVE tool is not doing what it should - it throws errors for elements inside 'aria-hidden' - so the fix if to include the whole visual part and the form control in 'aria-hidden' and from there please check with the guys from WAVE

[rstoenescu]

Enhancements will be available in Quasar v2.8.5 and v1.20.3