Android Accessibility - Unable to focus on any element in the Appbar

Question

I have this issue in 2 of my activities. When I navigate using keyboard Tab keys or arrow keys - I am unable to reach any element in the App bar.

1) Activity 1 -> My appbar has a hamburger menu icon to access the NavigationView. I am not able to click on this icon. If I touch the menu icon - I can navigate up and down the menu items with my keyboard. But how do I get into the menu?

2) Activity 2 - I have a CoordinatorLayout with a CollapsingToolbarLayout inside it and a NestedScrollView. I am able to navigate to all elements of the NestedScrollView. But am not able to reach any buttons on the toolbar inside the CollapsingToolbarLayout. This has a button for favorites and an options menu - overflow icon and 1 that I always show on the appbar. How do I reach these icons?

Here is the layout of Activity 2

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/detail_app_bar_layout"
            android:layout_width="match_parent"
            android:layout_height="@dimen/place_detail_appbar_height"
            android:elevation="@dimen/place_detail_appbarlayout_elevation">
            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/detail_collapsing_toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/colorPrimary"
                android:transitionGroup="false"
                app:collapsedTitleGravity="start"
                app:collapsedTitleTextAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginStart="72dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                    android:id="@+id/detail_app_bar_photo"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:scaleType="centerCrop"
                    app:layout_collapseMode="parallax"
                    android:background="@color/colorPrimary"
                    android:contentDescription="@string/place_image"
                    android:transitionName="@string/shared_photo"
                    style="@style/ToolbarImage"/>

                <android.support.v7.widget.Toolbar
                    android:id="@+id/detail_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/place_detail_toolbar_height"
                    android:background="@color/colorAccent"
                    app:layout_collapseMode="pin"
                    android:layout_gravity="bottom"
                    android:theme="@style/AppTheme.ToolbarColored">

                    <LinearLayout
                        android:id="@+id/meta_bar"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="start"
                        android:background="@android:color/transparent"
                        android:orientation="horizontal">

                        <TextView
                            android:id="@+id/toolbar_place_name"
                            style="@style/ToolbarName"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="4"
                            android:layout_gravity="center_vertical|start"
                            tools:text="OFJCC Gym and Recreation Center" />
                        <ImageView
                            android:id="@+id/toolbar_fav_icon"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            app:srcCompat="@drawable/ic_favourite_border"
                            android:tag="favorite_border"
                            android:layout_gravity="center"
                            android:focusable="true"
                            android:contentDescription="@string/favorite_desc"/>

                    </LinearLayout>

                </android.support.v7.widget.Toolbar>

            </android.support.design.widget.CollapsingToolbarLayout>

        </android.support.design.widget.AppBarLayout>

        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:nextFocusUp="@+id/toolbar_fav_icon"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <include layout="@layout/place_details_content"/>

        </android.support.v4.widget.NestedScrollView>

    </android.support.design.widget.CoordinatorLayout>

</FrameLayout>

I am unable to reach the toolbar_fav_icon ImageView

The only commonality between these 2 situations is that in both cases - I am having issues reaching elements on the Appbar. I am a newbie and there might be something super obvious I am missing. Please bear with me and help me out!

Thanks!

Apoorva

Friedlander

Answer 1

While i was working on accessibility in our app, i found out that i can't move focus to actionBar/toolbar views via bluetooth keyboard.

My test device is Samsung, so i thought that this is somth with navigation cluster, as described in some answers here...

but

In my case solution is - simply add this line to your appBar and/or toolbar

android:touchscreenBlocksFocus="false"

Collude

if I add this, then there's no way to move the focus out of toolbar once it's there – Snaggletooth

Answer 2

Did you try hitting the key combinations Cmd+Tab (on Mac) or Ctrl+Tab (on Windows)?

Android introduced new concept of keyboard navigation clustering and marked Toolbar as a navigation cluster for API 26+. Due to this, Toolbar elements are inaccessible via just the tab key, and you need to 'meta-tab' (Ctrl/Cmd + Tab) to reach the toolbar for devices on API 26 and above.

Precise

Thanks, on the Pixel C it's Search+Tag, on Windows 10 Ctrl+Tab doesn't work. Do you know if this is documented somewhere? I couldn't find anything, so don't know how clusters are defined. If you for example open the Google Play App you can navigate the whole UI, AppBar+NavigationBar+Content through the Tab-Key, in my app this is not possible, I get 3 clusters and must use Search+Tab to you jump between them and then in each one I can step through with TAB, but only inside this cluster. – Ddt

@Ddt i'm wondering the same thing. Did you figured out anything on how to replicate something like we see in Google Play App with the Cluster thing that was introduced in Android O? – Nickinickie

Ah! No problem! Thanks for responding back. :) – Nickinickie

Some documentation at least :D developer.android.com/about/versions/oreo/android-8.0#kbnc – Karlotte

Answer 3

I solved this by adding

android:touchscreenBlocksFocus="false"

to Appbarlayout, CollapsingToolBarLayout and Toolbar.

 <android.support.design.widget.AppBarLayout
            android:id="@+id/detail_app_bar_layout"
            android:layout_width="match_parent"
            android:touchscreenBlocksFocus="false"
...


 <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/detail_collapsing_toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/colorPrimary"
                android:touchscreenBlocksFocus="false"
...

<android.support.v7.widget.Toolbar
                    android:id="@+id/detail_toolbar"
                    android:layout_width="match_parent"
 ...

With this you get also focus to other elements in toolbar (if any) with th external keyboard.

Alfieri

Answer 4

While implementing accessibility there will almost always be some back and forth games with the focus of the elements till you get it.

Now for your issue, if still relevant and if not for future seekers-

While working with accessibility make sure every element that you want to gain focus have the importantforaccessibility attribute

android:importantForAccessibility="yes"

Also in your case if I understood correctly you don't need the accessibility focus for TalkBack but for navigating with the keyboard. So basically just make sure every element you want to be able to gain focus is set as focusable true.

android:focusable="true" 

These are the basics for playing with focuses.

Extra point -

If you want to programmatically make something gain focus if its on load or when someone gets clicked you can use the following code -

myCustomView.post(new Runnable() {
        @Override
        public void run() {
            myCustomView.requestFocus();
            myCustomView.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_ACCESSIBILITY_FOCUSED);
        }
    });

This does not have to be in a post function but if its not in one in some cases it falls between the lines and does not gain the focus.

Address

Answer 5

Hi for anyone else facing this issue, if you testing on a samsung device, them please be aware that samsung has hard-coded meta+tab to the same action as alt+tab.

Basically for samsung devices, you need to disable Navigation Clusters (introduced in Android 8)

This approach works for most controls, but i myself are still having trouble with Android App bars :(

Will update once i have. suitable work around :)

Refinement

In addition to setting View.setKeyboardNavigationCluster(false), as the toolbar is a ViewGroup.setTouchscreenBlocksFocus(false) also needed to be set. so: toolbar.setKeyboardNavigationCluster(false); toolbar.setTouchscreenBlocksFocus(false); This will allow the toolbar, and other views to be keyboard navigable on samsung devices. – Refinement

Answer 6

Input and navigation

With the advent of Android apps on Chrome OS and other large form factors, such as tablets, we're seeing a resurgence of keyboard navigation use within Android apps. Within Android 8.0 (API level 26), we've re-addressed using the keyboard as a navigation input device, resulting in a more reliable, predictable model for arrow- and tab-based navigation.

Keyboard Navigation clusters

If an activity in your app uses a complex view hierarchy, such as the one in Figure 2, consider organizing groups of UI elements into clusters for easier keyboard navigation among them. Users can press Meta+Tab, or Search+Tab on Chromebook devices, to navigate from one cluster to another. Good examples of clusters include: side panels, navigation bars, main content areas, and elements that could contain many child elements.

Toolbars by default are keyboard navigation clusters. Use Meta+Tab to jump between clusters.

Meta = Windows/Search/Cmd key on Windows/Chromebook/MAC keyboard

You can do the following to ensure to allow navigating between clusters with touch navigation

<cluster view>.setTouchscreenBlocksFocus(false);

and the following to avoid requiring the special key combination (Meta+Tab) for keyboard navigation in API level 26 and above.

<cluster view>.setKeyboardNavigationCluster(false);

Inglis

Answer 7

Add

android:focusable="true"       
android:focusableInTouchMode="true"    
android:touchscreenBlocksFocus="false"   

      

To ensure that the focus moves down from the toolbar when needed, you can add the requestFocus() method to the Toolbar

Sandbox