Skip to content

Make Home Page (BrowsingPage) keyboard-accessible

Christoph Wolk requested to merge cwo/discover:grid-keyboard into master

The home page in Discover shows Cards for a series of categories, including Most Popular, Editor's Choice, etc. These can only interacted with using the mouse; there's no way to access them using the keyboard, and users relying on screen readers for discovery will not be aware that they exist at all.

This change makes the Cards part of the tab chain, and sets the a11y attached properties so that the application name and a suitable type (Link, as activating the cards opens the corresponding application page in Discover) are read out.


The Home page of Discover shows a series of categories containing links to applications, and for some of them a button that will open the category browser. If tab navigation is used to reach these from the keyboard and the window is small enough that scrolling is necessary to display all of them, the CardsLayout will not automatically position the Flickable to keep the newly focused item visible. This makes keyboard navigation inconvenient (at least without relying on a screen reader). CardsLayout is not a view, and does not have convenience functions for this purpose.

This change updates the Flickable of the ScrollingPage, such that if the card or button would not be completely visible, the scrolling position is set to center the newly focused item as well as possible given the bounds of the Flickable.


It would be nicer to have arrow-navigation here rather than polluting the tab chain with all the elements. But this seems rather cumbersome with CardsLayout, and GlobalDrawer leads to a rather full tab chain anyway. In any case, having it keyboard-accessible at all seems better than not.

Another issue is that the category labels are not read out by screen readers as the user tabs through them. I'm not sure how to best fix this.

Merge request reports

Loading