Add accessibility information to tabbar in dash starter

Authored by chempfling on Oct 23 2018, 12:51 PM.



Adds a11y Labels to the Tabbar "Apps & Docs" and "Widgets" in top of the screen.

Diff Detail

Lint Skipped
Unit Tests Skipped
chempfling requested review of this revision.Oct 23 2018, 12:51 PM
chempfling created this revision.
broulik added inline comments.

As far as I understood PageTab is the tab button itself (e.g. a DashboardTabButton), and this item would be a PageTabList?

@chempfling what do you think? Would it be possible to label the buttons inside the tab bar instead?


Is the label for the buttons or the bar? I'm actually more in favor of labeling the buttons, in case this labels the parent tab bar.

chempfling updated this revision to Diff 44474.Oct 30 2018, 2:01 AM

I figured how to simulate the correct focus behaviour..

I updated the patch to:

  • set the focus to active tab button (instead of the tabbar)
  • set the proper a11y role to the tabbar
  • set the name and role of the button

Nice, this looks good to me. I don't know the code though, so it would be great to hear what people more familiar with it say.


Could this maybe be written as

focus: parent.focus & active
chempfling planned changes to this revision.Oct 30 2018, 7:08 PM
chempfling updated this revision to Diff 44507.
chempfling marked 3 inline comments as done.
This comment was removed by chempfling.

PageTabList is used if the Page Tab List has an caption like "View mode" with focusable child's "Apps & Docs" and "Widgets".

So the Screenreader can announce:
"View Mode Page Tab List" (because you enter the container)- "2 Elements"- "Apps & Docs Page Tab" (the focused element)

But the PageTabList doesnt have an Caption here. Its just nameless.

the its not implemented very clean. The current Implementation does just "simulate" the TabBar/ TabButton behaviour in an uncomplete way (in my understanding of an Tab) using "Row" and "Widget".
things like the TabBar is focused instead of the TabButtons, the TabBar is respond able for changing the Tab. I also wonder why the element doesnt just use "TabBar" and "TabButton" elements for doing this (Since QML offer those classes, (this also would make the patch not needed i think). The current implementation is a "mixture" of the behave of both (TabBar and TabButton).

First of all. this creates the wanted behaviour to present it correctly to AT technologies.
This works around the AT issues. Next i would think about after having basic accessibility (for the main menu) working, i would reimplement that part using the default "TabBar" and "TabButton" widgets.


Yea me too,
let me take a look again if i will be able to give the focus to the buttons instead of only to the bar.

chempfling requested review of this revision.Oct 30 2018, 7:09 PM
gladhorn accepted this revision.Nov 4 2018, 8:09 AM

I think this looks good :) Feel free to push.

This revision is now accepted and ready to land.Nov 4 2018, 8:09 AM
hein added a comment.Nov 16 2018, 8:05 AM

@chempfling Do you need help pushing this?

In D16383#360191, @hein wrote:

@chempfling Do you need help pushing this?

@gladhorn just told me that I m allowed to try this by my self :).
so i give a try and let you know if i was able to handle this. thanks for helping

chempfling closed this revision.Nov 16 2018, 6:14 PM