QSelect options not announced by screen reader

[sgoess]

What happened?

When using a screen reader (e.g. VoiceOver on Mac), the options of a select menu should be announced when receiving focus by keyboard. This worked fine in Quasar V1, but doesn't work any longer with Quasar V2. When navigating through the options, the screen reader doesn't announce anything.

Tested on Mac (VoiceOver) and Windows (NVDA)

What did you expect to happen?

In V1 (https://v1.quasar.dev/vue-components/select#overview) it works as expected:

When navigating through the options list (by keyboard), options are announced

Same behavior is demonstrated on https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html

Reproduction URL

https://codepen.io/codepenuser5678/pen/WNMzYde?editors=101

How to reproduce?

1. Open the provided URL
2. Start screen reader (VoiceOver / NVDA)
3. Using only the keyboard, tab to the select component and press enter to open the options list
4. Using the arrow keys, navigate through the options
5. Observe scren reader output
6. Compare this behavior for Quasar V1 and V2

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Components (quasar)

Platforms/Browsers

Firefox, Chrome, Safari, Electron

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[rstoenescu]

Fix will be available in Quasar 2.7.2

[pdanpdan]

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.

[TotallyMehis]

Hey, it looks like this wasn't fixed or was reintroduced somewhere. Tested with Quasar 2.10.0 .

Example (using NVDA):

Reproduction: https://codepen.io/TotallyMehis/pen/LYrGyBK

Works in Quasar v1. Tested here: https://v1.quasar.dev/vue-components/select#overview

[pdanpdan]

Can you please also test it here? https://pdanpdan.github.io/quasar-docs/vue-components/select#example--design-overview

I'll also make a VM with windows and check, but it takes time

[TotallyMehis]

Can you please also test it here? https://pdanpdan.github.io/quasar-docs/vue-components/select#example--design-overview

Works there.

[pdanpdan]

I found what's changed between Qv1 and Qv2 when using QSelect with options as menu. Can you please also check if QSelect with options as dialog is read as expected on Qv1 and not read on Qv2?

[TotallyMehis]

Can you please also check if QSelect with options as dialog is read as expected on Qv1 and not read on Qv2?

Quasar v1 works, tested with: https://pdanpdan.github.io/quasar-docs/vue-components/select#example--show-options-in-dialog

Quasar v2 doesn't work. tested with: https://codepen.io/TotallyMehis/pen/LYrNPzM

[TotallyMehis]

Seems to be fixed in 2.10.2 . Thanks for the quick fix! We really appreciate it!

[pdanpdan]

Thank you for the hint with using NVDA with speech displayed as text I could never understand what the screen reader was mumbling

[yusufkandemir]

@pdanpdan can this be closed?

[pdanpdan]

I'll close this - if the problem shows again please comment here and I'll reopen