WCAG keyboard support - Githubissues

mett-development commented 4 years ago

Is your feature request related to a problem? Please describe. As I was going through our application with the Firefox accessibility tab I noticed a few things that are not conform the WCAG guidelines, or atleast Firefox is flagging them.

Here is an explanation about the guidelines that Firefox expects regarding keyboard access: Link

I will list the issues I have come accross, so we can discuss what the best solution in each case might be. Of course this is not a full list of every issue in Quasar, because we only use a subset of components.

QDialog

[x] The backdrop used for closing has a click listener but cannot be focused or operated by a keyboard. Solution: Add aria-hidden="true" to this element to exclude it from screen readers etc. as users can close it by using 'Esc'

QDrawer

[x] The backdrop used for closing has a click listener but cannot be focused or operated by a keyboard. Solution: Add aria-hidden="true" to this element to exclude it from screen readers etc.
[x] There is a div with class q-drawer__opener which I guess is used to capture swipes to open? This component also has click listener but no focus or keyboard operation Solution: Use aria-hidden.
[ ] Every drawer also has an aside element which also has a click listener but no focus/keyboard operation. Solution: Use aria-hidden.

QScrollArea

[x] The bar of the scroll area has a click listener but cannot be focused or operated by a keyboard Solution: Use aria-hidden.
[x] The thumb of the scroll area has a click listener but cannot be focused or operated by a keyboard Solution: Use aria-hidden.

QFab

[x] When used with only an icon there is no label for the button. If that is the case WCAG requires an aria-label to be present to indicate what the button does. However it is currently not possible to pass an aria-label to the underlying component. Solution: Transfer the aria-label attribute set on the QFab to the actual button it creates under the hood.

QFabAction

[x] Same thing as described for the QFab applies here.

QItem

[ ] If a QItem does not have the clickable prop, there is still a click listener present. Solution: Remove the click listener or add aria-hidden tag when it is not clickable.

QCarousel

[ ] If you add controls with props like arrows and navigation buttons get added which have no aria-labels. Solution: This one can be worked around by using template slot but I would be prettier if Quasar provided a solution. However you would need control over what is used as an aria-label for each of the dynamically added buttons. So you can also use different translations etc. Not sure what the best approach here is.
[ ] The same things probably hold for fullscreen but we do not use that.

QButton

[x] If a button is disabled it should have aria-diabled="true". Now it only has aria-disabled="".

QCheckbox

[x] The checkbox uses an svg which counts as an image. It therefore should have an alt tag or should have aria-hidden="true"

webnoob commented 4 years ago

Will be available in quasar v1.12.12

pdanpdan commented 4 years ago

QFab and QFabAction should be fixed by 31f3d7d52226e93b211d47c6cfce2a2b781bad1d