Open fliebau opened 1 month ago
When using the QSelect component inside QDialog components the QSelect options aren't read out by a screen reader. Outside of QDialog components the QSelect options are read out just fine and displayed as expected.
This issue was brought up in the past but I think it was solved for only select options in dialogs but not the entire QSelect component: https://github.com/quasarframework/quasar/issues/13743
The QSelect options should be read out by screen readers, be it inside a modal or normal context.
https://codepen.io/F1reseed/pen/GRBJpmR
go to the provided reproduction link: https://codepen.io/F1reseed/pen/GRBJpmR
activate your screen reader
use the tab button to navigate to the QSelect. Open it with either Space or Enter.
use the arrow keys to navigate up and down the options. the screen reader reader reads out all the options.
press enter or space to select an option. it's read out as selected by the screen reader.
now navigate per tab to the "Open" button and press Enter or Space to open it.
navigate per tab to the QSelect and open it with either Space or Enter.
using the arrow keys here doesn't result in the same effect as in step 4. the screen reader doesn't read out any of the options.
when selecting an option with Space or Enter the screenreader doesn't announce that either.
Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)
Components (quasar)
Chrome, Electron
No response
Same issue here, we need some solution
What happened?
When using the QSelect component inside QDialog components the QSelect options aren't read out by a screen reader. Outside of QDialog components the QSelect options are read out just fine and displayed as expected.
This issue was brought up in the past but I think it was solved for only select options in dialogs but not the entire QSelect component: https://github.com/quasarframework/quasar/issues/13743
What did you expect to happen?
The QSelect options should be read out by screen readers, be it inside a modal or normal context.
Reproduction URL
https://codepen.io/F1reseed/pen/GRBJpmR
How to reproduce?
go to the provided reproduction link: https://codepen.io/F1reseed/pen/GRBJpmR
activate your screen reader
use the tab button to navigate to the QSelect. Open it with either Space or Enter.
use the arrow keys to navigate up and down the options. the screen reader reader reads out all the options.
press enter or space to select an option. it's read out as selected by the screen reader.
now navigate per tab to the "Open" button and press Enter or Space to open it.
navigate per tab to the QSelect and open it with either Space or Enter.
using the arrow keys here doesn't result in the same effect as in step 4. the screen reader doesn't read out any of the options.
when selecting an option with Space or Enter the screenreader doesn't announce that either.
Flavour
Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)
Areas
Components (quasar)
Platforms/Browsers
Chrome, Electron
Quasar info output
No response
Relevant log output
No response
Additional context
No response