[Tablayout] Accessibility issues

[ahetawal-p]

Description: I am using a Material Tablayout connected with a viewpager2 for an onboarding experience. My Tablayout setup looks like this:

<com.google.android.material.tabs.TabLayout
        android:id="@+id/onboardingSelector"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/onboardingPages"
        app:tabBackground="@drawable/tab_selector"
        app:tabGravity="center"
        app:tabIndicatorHeight="0dp" />

While running this screen through Accessibility Scanner and Google play console Pre launch reports, I am getting below warnings for the dot tabBackground

This item may not have a label readable by screen readers.

This item's width is 24dp. Consider making the width of this touch target 48dp or larger.

How can I fix these ? Should the material ui library come with the support for this setup?

Android API version: Android 9

Material Library version: 1.3.0-alpha02

[hunterstich]

Hey @ahetawal-p ,

Can you post a sample that reproduces this? Are you using TabLayout to create a dot indicator?

[wcshi]

Could you please also share your Accessibility Scanner results?

[ahetawal-p]

My current code is very similar to this article, https://medium.com/@adrian.kuta93/android-viewpager-with-dots-indicator-a34c91e59e3a (Unfortunately not able to share the actual code), but running the accessibility checker on the above project you will see both the above warnings. The main thing to keep in mind is I am using the material ui provided dots app:tabBackground="@drawable/tab_selector" so was expecting them to be accessibility proof.

[mbaraka]

@ahetawal-p you can try the following to fix the Accessibility text

TabLayoutMediator(into_tab_layout, viewpager2)
        { tab, position ->
           // configure the tab information here as you wish
            tab.contentDescription = "Page ${position + 1}"
        }.attach()

I am not sure about the tab dot size though

[drchen]

I'll close the issue as WAI.

The content description of tabs is supposed to be set by clients via providing with TabItem or Tab, or as what @mbaraka suggested, providing a custom TabConfigurationStrategy to set up a default content desc.