q-dialog/q-menu screen reader accessibility

[dominik-korsa]

Problem 1: Focus trapping

q-dialog and q-menu currently implement focus trapping (that is ensuring that pressing the tab key will only cycle through elements in the open dialog). Unfortunately, some (all?) screen readers like Google Talkback on Android still allow to navigate away from the menu content using gestures (swiping left/right in Talkback). According to MDN - developers should ensure that content other than the menu content is inaccessible. Maybe this could be addressed by applying aria-hidden to the #q-app element while the dialog is visible?

Problem 2: Closing the dialog

Another problem with the q-dialog and q-menu elements on screen readers is the inability to close the dialog. As the dialog cannot be closed using the back gesture (or pressing the back/previous page button), there is sometimes no way to close a dialog using screen reader controls. Quasar allows to close a dialog by clicking outside or by pressing the esc key, but none of these options is available in Google Talkback. This could be fixed by, for example, adding an invisible close button, which can only be selected using screen readers.

Discussion: Accessibility by default/lack of documentation

The second problem could potentially be solved by individual developers. The problem is, most developers don't even take accessibility into account, either ignoring it completely or assuming the Quasar framework will take care of it. The fact that there is no documentation at all regarding accessibility certainly doesn't help. Even if a developer wants to make their website accessible, the process is cumbersome without any help. It is crazy that a component framework seems to not take accessibility seriously.