quasar
quasar copied to clipboard
quasarframework
q-select does not pronounce label when focussed (accessibility issue).
What happened?
I'm using Quasar 1.19.4 with a NVDA screenreader and noticed that QSelect does not pronounce the label when it is focussed. This does work on Quasar 2+. I tested this on the quasar.dev site with both versions and both Chrome and Firefox.
What did you expect to happen?
When focussing on QSelect, the screenreader should say the label.
Reproduction URL
https://codepen.io/pieterzeilstraparantion/pen/KKoVjKJ?editors=101
How to reproduce?
- Click on a q-select field and it gets correctly pronounced.
- Now tab to go to the new q-select field and the label does not get pronounced.
Flavour
UMD
Areas
Components (quasar), Style & Identity (quasar)
Platforms/Browsers
Firefox, Chrome
Quasar info output
No response
Relevant log output
No response
Additional context
No response
In 2+ this problem actual? I want to help, but I can't understand the problem in your Sandbox, when I hover over the select items, their names are pronounced
The problem only occures in v1. In my reproduction click on a input and it will say the name correctly. Now press tab to focuss a new input field and now the label is not announced. Hope this helps
And you do not have an understanding of what signs NVDA understands that this is a select and where it is looking for the label of this select.
In ordinary HTML it is clear that it takes the label element whose for matches the id of the select element
But in the case of quasar, there is no HTML select tag - so just when focusing on an element, NVDA cannot yet know that this is a drop-down list - but it understands this by some other signs. If you know how to tell him where the label is in such a situation, it will be very easy)
Hello. I was working on some changes for a11y and I need some help with testing.
The changes are related to:
- feat(QExpansionItem): add a11y for toggle buttons; improve header slot scope quasarframework#14338
- feat(QSelect): improve a11y - aria-readonly on focusable element; remove aria-activedescendant duplicate
- feat(QChip): add aria-label and proper role for remove button/icon
- feat(QDialog): set aria-modal on dialog
- feat(QMenu): set default role of menu
- feat(QFab): add a11y for toggle button; describe aria-controls/own
- feat(QBtnDropdown): add a11y for toggle buttons; describe aria-controls/own
I have published a test documentation site at https://pdanpdan.github.io/quasar-docs/ using the changed code. If you use screen readers and/or a11y checking tools can you please check the pages for the changed components and report if there are problems or if there are improvements? From the docs you can open codepens with the changed code, so if you have special cases you want to test you can.
