quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.28k stars 3.43k forks source link

QSelect options aren't being read inside QDialog #17078

Open fliebau opened 1 month ago

fliebau commented 1 month ago

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?

  1. go to the provided reproduction link: https://codepen.io/F1reseed/pen/GRBJpmR

  2. activate your screen reader

  3. use the tab button to navigate to the QSelect. Open it with either Space or Enter.

  4. use the arrow keys to navigate up and down the options. the screen reader reader reads out all the options.

    Screenshot 2024-04-03 at 16 52 45
  5. press enter or space to select an option. it's read out as selected by the screen reader.

  6. now navigate per tab to the "Open" button and press Enter or Space to open it.

  7. navigate per tab to the QSelect and open it with either Space or Enter.

  8. 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.

    Screenshot 2024-04-03 at 16 53 24
  9. 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

darinkolev commented 5 days ago

Same issue here, we need some solution