quasar icon indicating copy to clipboard operation
quasar copied to clipboard
verified publisher icon quasarframework

QTabPanels isn't accessible

Open t1gu1 opened this issue 5 years ago • 7 comments

Is your feature request related to a problem? Please describe. The QTabPanels isn't accessible. Just test it the tabulation. Arrow key should only be a short cut to skip a tabs but should not be necessary to see second tabs.

Describe the solution you'd like I'll simply paste that link and let you read and test it on this page: https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html

t1gu1 avatar Mar 05 '20 23:03 t1gu1

Hello.

Please describe the behavior that you desire and what is not good now. Also please attach a codepen to show what you have tried and what is your use case.

Thank you

pdanpdan avatar Mar 06 '20 07:03 pdanpdan

What is not good now:

  • The tab key dont skip to the content
  • The tab key switch to an other tabs
  • Content isn't focusable, so it will not be read by the voice over
  • We can't navigate with arrow key in the tabs header
  • Space key doesn't act like the enter key

How it should be: It's a bit the inverse of the points I mentioned.

As I share, you can test it and check the code on that link: https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html

On that link, you'll see an example with some explanation, followed by the HTML Source Code. You'll also see link for Javascript and CSS Source Code

It also explains how to manage props like tabindex and aria on the tab active and the one that's not.

Thanks! :)

t1gu1 avatar Mar 06 '20 16:03 t1gu1

Also is it normal that the tabindex on tabs is only set when the tab is the current one? Feels like it should be the opposite

Eg: I have a tab index on all QTab but they all have tabindex="-1" unless it's the current tab image

Tofandel avatar Jan 09 '23 12:01 Tofandel

That is for roaming navigation The current tab gets the focus when coming from outside

pdanpdan avatar Jan 09 '23 12:01 pdanpdan

@pdanpdan I think, that it is not WCAG conform, thtat the tabs are not acessible via tab. And what is more weird, when I set tabindex="0" at q-route-tab, it is ignored.

mountash avatar Mar 22 '23 12:03 mountash

From here https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/examples/toolbar/ it looks like it's the right way to work

https://quasar.dev/vue-components/tabs#basic

If you have a codepen to show what you mean please post it

pdanpdan avatar Mar 22 '23 13:03 pdanpdan

@pdanpdan I think you mean https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/ But yes @mountash the tabindex is normal, the navigation is supposed to be with Arrow keys but the tab panel might be missing a tabindex="0"

Tofandel avatar Mar 22 '23 15:03 Tofandel