Skip to content

Commit 59f0fc5

Browse files
Material Design Teamhunterstich
Material Design Team
authored and
hunterstich
committed
[SideSheet][A11y] Improve keyboard navigation in SideSheet catalog demos
The NestedScrollView in the side sheet demos would incorrectly receive keyboard focus. While this allowed for keyboard scrolling, the scroll container itself is not an interactive element and shouldn't be a focus stop. This change fixes the issue by making the content within the scroll view focusable. The text content has been split into multiple TextViews, each with an OnClickListener that shows a Toast. This makes the TextViews interactive elements, allowing them to correctly receive keyboard focus and improving the accessibility of the demos. PiperOrigin-RevId: 801744921
1 parent c2051db commit 59f0fc5

11 files changed

+97
-35
lines changed

‎catalog/java/io/material/catalog/feature/res/layout/cat_demo_content_text.xml‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
Copyright 2025 The Android Open Source Project
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
http://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License.
16+
-->
17+
<merge xmlns:android="http://schemas.android.com/apk/res/android"
18+
xmlns:tools="http://schemas.android.com/tools"
19+
tools:orientation="vertical"
20+
tools:parentTag="android.widget.LinearLayout">
21+
<TextView
22+
android:id="@+id/cat_demo_content_text_1"
23+
android:layout_width="wrap_content"
24+
android:layout_height="wrap_content"
25+
android:layout_marginTop="24dp"
26+
android:text="@string/cat_demo_content_text_part_1" />
27+
<TextView
28+
android:id="@+id/cat_demo_content_text_2"
29+
android:layout_width="wrap_content"
30+
android:layout_height="wrap_content"
31+
android:layout_marginTop="8dp"
32+
android:text="@string/cat_demo_content_text_part_2" />
33+
<TextView
34+
android:id="@+id/cat_demo_content_text_3"
35+
android:layout_width="wrap_content"
36+
android:layout_height="wrap_content"
37+
android:layout_marginTop="8dp"
38+
android:text="@string/cat_demo_content_text_part_3" />
39+
<TextView
40+
android:id="@+id/cat_demo_content_text_4"
41+
android:layout_width="wrap_content"
42+
android:layout_height="wrap_content"
43+
android:layout_marginTop="8dp"
44+
android:text="@string/cat_demo_content_text_part_4" />
45+
</merge>

‎catalog/java/io/material/catalog/feature/res/values/strings.xml‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,17 @@
2222
<string name="cat_demo_landing_row_demo_header">Demo</string>
2323
<string name="cat_demo_landing_favorite">Favorite</string>
2424
<string name="cat_demo_memory_usage" translatable="false">used: <xliff:g example="1MB" id="numerator">%1$s</xliff:g> / <xliff:g example="10MB" id="denominator">%2$s</xliff:g> (<xliff:g example="10" id="percentage">%3$d</xliff:g>%%)</string>
25+
<string name="cat_demo_content_text_part_1" translatable="false">
26+
\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in scelerisque sem. Mauris volutpat, dolor id interdum ullamcorper, risus dolor egestas lectus, sit amet mattis purus dui nec risus. Maecenas non sodales nisi, vel dictum dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse blandit eleifend diam, vel rutrum tellus vulputate quis. Aliquam eget libero aliquet, imperdiet nisl a, ornare ex. Sed rhoncus est ut libero porta lobortis. Fusce in dictum tellus.
27+
</string>
28+
<string name="cat_demo_content_text_part_2" translatable="false">
29+
\tSuspendisse interdum ornare ante. Aliquam nec cursus lorem. Morbi id magna felis. Vivamus egestas, est a condimentum egestas, turpis nisl iaculis ipsum, in dictum tellus dolor sed neque. Morbi tellus erat, dapibus ut sem a, iaculis tincidunt dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur et eros porttitor, ultricies urna vitae, molestie nibh. Phasellus at commodo eros, non aliquet metus. Sed maximus nisl nec dolor bibendum, vel congue leo egestas.
30+
</string>
31+
<string name="cat_demo_content_text_part_3" translatable="false">
32+
\tAenean nunc velit, lacinia sed dolor sed, ultrices viverra nulla. Etiam a venenatis nibh. Morbi laoreet, tortor sed facilisis varius, nibh orci rhoncus nulla, id elementum leo dui non lorem. Nam mollis ipsum quis auctor varius. Quisque elementum eu libero sed commodo. In eros nisl, imperdiet vel imperdiet et, scelerisque a mauris. Pellentesque varius ex nunc, quis imperdiet eros placerat ac. Duis finibus orci et est auctor tincidunt. Sed non viverra ipsum. Nunc quis augue egestas, cursus lorem at, molestie sem. Morbi a consectetur ipsum, a placerat diam. Etiam vulputate dignissim convallis. Integer faucibus mauris sit amet finibus convallis.
33+
</string>
34+
<string name="cat_demo_content_text_part_4" translatable="false">
35+
\tPhasellus in aliquet mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In volutpat arcu ut felis sagittis, in finibus massa gravida. Pellentesque id tellus orci. Integer dictum, lorem sed efficitur ullamcorper, libero justo consectetur ipsum, in mollis nisl ex sed nisl. Donec maximus ullamcorper sodales. Praesent bibendum rhoncus tellus nec feugiat. In a ornare nulla. Donec rhoncus libero vel nunc consequat, quis tincidunt nisl eleifend. Cras bibendum enim a justo luctus vestibulum. Fusce dictum libero quis erat maximus, vitae volutpat diam dignissim.
36+
</string>
37+
<string name="cat_demo_content_text_was_clicked" translatable="false">Content text was clicked</string>
2538
</resources>

‎catalog/java/io/material/catalog/sidesheet/SideSheetMainDemoFragment.java‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
import android.view.Window;
3535
import android.widget.Button;
3636
import android.widget.TextView;
37+
import android.widget.Toast;
3738
import androidx.activity.BackEventCompat;
3839
import androidx.activity.OnBackPressedCallback;
3940
import androidx.annotation.GravityInt;
@@ -244,6 +245,13 @@ private View setUpSideSheet(
244245

245246
setupBackHandling(sideSheet, sideSheetBehavior);
246247

248+
setupClickableContentText(
249+
sideSheet,
250+
R.id.cat_demo_content_text_1,
251+
R.id.cat_demo_content_text_2,
252+
R.id.cat_demo_content_text_3,
253+
R.id.cat_demo_content_text_4);
254+
247255
sideSheetViews.add(sideSheet);
248256

249257
return sideSheet;
@@ -458,4 +466,19 @@ public void handleOnBackCancelled() {
458466
}
459467
};
460468
}
469+
470+
private void setupClickableContentText(@NonNull View view, @IdRes int... textIds) {
471+
for (int id : textIds) {
472+
View textView = view.findViewById(id);
473+
if (textView != null) {
474+
textView.setOnClickListener(
475+
v ->
476+
Toast.makeText(
477+
view.getContext(),
478+
R.string.cat_demo_content_text_was_clicked,
479+
Toast.LENGTH_SHORT)
480+
.show());
481+
}
482+
}
483+
}
461484
}

‎catalog/java/io/material/catalog/sidesheet/res/layout/cat_sidesheet_content.xml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,10 @@
2525
android:layout_height="match_parent"
2626
android:padding="16dp"
2727
android:clickable="true"
28-
android:focusable="true"
28+
android:focusable="false"
2929
android:gravity="center_horizontal"
30-
android:orientation="vertical">
30+
android:orientation="vertical"
31+
tools:ignore="KeyboardInaccessibleWidget">
3132

3233
<Button
3334
android:id="@+id/close_icon_button"

‎catalog/java/io/material/catalog/sidesheet/res/layout/cat_sidesheet_content_coplanar.xml‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,7 @@
7979
android:text="@string/cat_sidesheet_slide_offset_text"
8080
android:textAppearance="?attr/textAppearanceBodyLarge" />
8181

82-
<TextView
83-
android:layout_width="wrap_content"
84-
android:layout_height="wrap_content"
85-
android:paddingTop="24dp"
86-
android:text="@string/cat_sidesheet_filler_text" />
82+
<include layout="@layout/cat_demo_content_text" />
8783
</LinearLayout>
8884
</androidx.core.widget.NestedScrollView>
8985
</androidx.constraintlayout.widget.ConstraintLayout>

‎catalog/java/io/material/catalog/sidesheet/res/layout/cat_sidesheet_content_coplanar_detached.xml‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,7 @@
7979
android:text="@string/cat_sidesheet_slide_offset_text"
8080
android:textAppearance="?attr/textAppearanceBodyLarge" />
8181

82-
<TextView
83-
android:layout_width="wrap_content"
84-
android:layout_height="wrap_content"
85-
android:paddingTop="24dp"
86-
android:text="@string/cat_sidesheet_filler_text" />
82+
<include layout="@layout/cat_demo_content_text" />
8783
</LinearLayout>
8884
</androidx.core.widget.NestedScrollView>
8985
</androidx.constraintlayout.widget.ConstraintLayout>

‎catalog/java/io/material/catalog/sidesheet/res/layout/cat_sidesheet_content_vertically_scrolling.xml‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,11 @@
2424
android:layout_width="match_parent"
2525
android:layout_height="match_parent"
2626
android:padding="16dp"
27+
android:clickable="true"
28+
android:focusable="false"
2729
android:gravity="center_horizontal"
28-
android:orientation="vertical">
30+
android:orientation="vertical"
31+
tools:ignore="KeyboardInaccessibleWidget">
2932

3033
<Button
3134
android:id="@+id/vertically_scrolling_side_sheet_close_icon_button"
@@ -79,11 +82,7 @@
7982
android:text="@string/cat_sidesheet_slide_offset_text"
8083
android:textAppearance="?attr/textAppearanceBodyLarge" />
8184

82-
<TextView
83-
android:layout_width="wrap_content"
84-
android:layout_height="wrap_content"
85-
android:paddingTop="24dp"
86-
android:text="@string/cat_sidesheet_filler_text" />
85+
<include layout="@layout/cat_demo_content_text" />
8786
</LinearLayout>
8887
</androidx.core.widget.NestedScrollView>
8988
</androidx.constraintlayout.widget.ConstraintLayout>

‎catalog/java/io/material/catalog/sidesheet/res/layout/cat_sidesheet_detached_content.xml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,11 @@
2424
android:layout_width="match_parent"
2525
android:layout_height="match_parent"
2626
android:padding="16dp"
27+
android:focusable="false"
2728
android:clickable="true"
28-
android:focusable="true"
2929
android:gravity="center_horizontal"
30-
android:orientation="vertical">
30+
android:orientation="vertical"
31+
tools:ignore="KeyboardInaccessibleWidget">
3132

3233
<Button
3334
android:id="@+id/detached_close_icon_button"

‎catalog/java/io/material/catalog/sidesheet/res/layout/cat_sidesheet_fragment.xml‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -120,10 +120,7 @@
120120
android:text="@string/cat_sidesheet_button_text_end" />
121121
</com.google.android.material.button.MaterialButtonToggleGroup>
122122

123-
<TextView
124-
android:layout_width="wrap_content"
125-
android:layout_height="wrap_content"
126-
android:text="@string/cat_sidesheet_filler_text"/>
127-
</LinearLayout>
123+
<include layout="@layout/cat_demo_content_text" />
124+
</LinearLayout>
128125
</androidx.core.widget.NestedScrollView>
129126
</androidx.coordinatorlayout.widget.CoordinatorLayout>

‎catalog/java/io/material/catalog/sidesheet/res/layout/cat_sidesheets.xml‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,7 @@
1414
limitations under the License.
1515
-->
1616
<merge xmlns:android="http://schemas.android.com/apk/res/android"
17-
xmlns:app="http://schemas.android.com/apk/res-auto"
18-
xmlns:tools="http://schemas.android.com/tools">
17+
xmlns:app="http://schemas.android.com/apk/res-auto">
1918
<FrameLayout
2019
android:id="@+id/standard_side_sheet_container"
2120
style="@style/Widget.Material3.SideSheet"

0 commit comments

Comments
 (0)