QSelect in QDialog with "aria-modal": options not announced by screen reader

[sgoess]

What happened?

This is a follow-up to the issue reported in https://github.com/quasarframework/quasar/issues/13576, which was fixed with the current release.

However, the screen reader does still not fully work for QSelect in QDialog components, when using aria-modal="true". Having this attibute on the modal restricts the screen reader to content within that element. Since the QSelect options list is rendered to another DIV on the root level, it is simply not available.

What did you expect to happen?

Screen reader should read the options list of QSelect, even in modals.

I came up with a hotfix, but will not use it in production, since it does not work in a reliable way: https://codepen.io/codepenuser5678/pen/wvybwEp -> aria-modal="true" is removed as soon as the QSelect is focussed and restored on blur

A better approach is most likely a new property for QSelect which accepts an ID / DOM Element into which the options list is rendered. This element can then be placed in the aria-modal scope.

Reproduction URL

https://codepen.io/codepenuser5678/pen/dydEGja

How to reproduce?

1. Go to https://codepen.io/codepenuser5678/pen/dydEGja
2. Enable screen reader
3. Use only the keyboard from now on!
4. Tab into the QSelect below the button; open it by pressing Enter
5. Press up/down to navigate through the options -> screen reader announces items
6. Go back to "OPEN" button and open the modal by pressing Enter
7. Tab into the first QSelect; open it by pressing Enter
8. Press up/down to navigate through the options -> screen reader does NOT announce items

Flavour

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

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[pdanpdan]

I tested it in Chrome/Ubuntu with the ubuntu screen reader (I don't know what it is) and all sounds fine.

And in the code the aria-owns and aria-controls attrs are set to the right target (the menu)

Tested on the codepen (so the JS from Quasar 2.7.3 latest)

[sgoess]

Tested https://codepen.io/codepenuser5678/pen/dydEGja as follows:

macOS 12.4 with VoiceOver:

• Firefox: works fine
• Chrome: does NOT work
• Electron: does NOT work
• Safari: does NOT work (here, the regular QSelect, outside the modal, also does not work)

Windows 10 with NVDA:

• Firefox: works fine
• Chrome: does NOT work

[pdanpdan]

Sorry, I don't own a mac But this looks like it: https://bugs.webkit.org/show_bug.cgi?id=174667 Can you try to add aria-role="dialog" where aria-modal="true" is (instead of removing aria-modal) and see if it changes anything?

[sgoess]

I did some more testing; seems like it is Chrome related, as it can be reproduced on Windows as well.

aria-role="dialog" is wrong syntax and will be ignored by the browser; maybe that's why it's working in the example provided. Correct syntax is role="dialog": https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role - which is also used in my Codepen example.

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

[pdanpdan]

Please follow https://github.com/quasarframework/quasar/issues/13576