Tuesday, 16 October 2018

How to create accessible focus groups in ConstraintLayout?

Imagine you have a LinearLayout inside a RelativeLayout that contains 3 TextViews with artist, song and album:

<RelativeLayout
    ...
    <LinearLayout
        android:id="@id/text_view_container"
        android:layout_width="warp_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@id/artist"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Artist"/>

        <TextView
            android:id="@id/song"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Song"/>

        <TextView
            android:id="@id/album"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="album"/>
    </LinearLayout>

    <TextView
        android:id="@id/unrelated_textview1/>
    <TextView
        android:id="@id/unrelated_textview2/>
    ...
</RelativeLayout>        

When you activate the TalkbackReader and click on a TextView in the LinearLayout, the TalkbackReader will read "Artist", "Song" OR "Album" for example.

But you could put those TextViews into a focus group, by using:

<LinearLayout
    android:focusable="true
    ...

Now the TalkbackReader would read "Artist Song Album".

(See Google codelabs example for reference)

I am now trying to re-create this behaviour with the ConstrainLayout but dont see how.

<ConstraintLayout>
    <TextView artist/>
    <TextView song/>
    <TextView album/>
    <TextView unrelated_textview1/>
    <TextView unrelated_textview2/>
</ConstraintLayout>

Putting widgets into a "group" does not seem to work:

<android.support.constraint.Group
    android:id="@+id/group"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:focusable="true"
    android:importantForAccessibility="yes"
    app:constraint_referenced_ids="artist,song,album"
    />

Especially when I am working with legacy-code (ConstrainLayout containing LinearLayout, ImageViews between the TextViews with visibility="gone", ...) I dont see a solution for my problem.

So how can I re-create focus-groups for accessibility in the ConstrainLayout?



from How to create accessible focus groups in ConstraintLayout?

No comments:

Post a Comment