Skip to content

Commit

Permalink
[Slider] a11y fixes
Browse files Browse the repository at this point in the history 
- demos are scrollable
- fix issue where increment is reversed when Slider is vertical

PiperOrigin-RevId: 703087896
  • Loading branch information
@paulfthomas
paulfthomas committed Dec 10, 2024
1 parent 03d2c69 commit 63e1ec9
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 101 deletions.
125 changes: 65 additions & 60 deletions catalog/java/io/material/catalog/slider/res/layout/cat_slider_demo_icon.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,70 +13,75 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical">
android:layout_height="match_parent">

<com.google.android.material.slider.Slider
android:id="@+id/slider_icon_start"
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:layout_gravity="center"
android:value="8.09"
android:valueFrom="0.0"
android:valueTo="11.0"
app:thumbHeight="48dp"
app:trackCornerSize="12dp"
app:trackHeight="40dp"
app:trackIconActiveColor="@color/m3_slider_active_tick_marks_color"
app:trackIconActiveStart="@drawable/baseline_music_note_24"
app:trackIconInactiveColor="@color/m3_slider_inactive_tick_marks_color"
app:trackIconInactiveStart="@drawable/baseline_music_off_24"
app:trackIconSize="20dp" />
android:paddingTop="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical">

<com.google.android.material.slider.Slider
android:id="@+id/slider_icon_end"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:layout_gravity="center"
android:value="8.09"
android:valueFrom="0.0"
android:valueTo="11.0"
app:thumbHeight="48dp"
app:trackCornerSize="12dp"
app:trackHeight="40dp"
app:trackIconActiveColor="@color/m3_slider_active_tick_marks_color"
app:trackIconActiveEnd="@drawable/baseline_music_note_24"
app:trackIconInactiveColor="@color/m3_slider_inactive_tick_marks_color"
app:trackIconInactiveEnd="@drawable/baseline_music_off_24"
app:trackIconSize="20dp"
app:trackStopIndicatorSize="0dp" />
<com.google.android.material.slider.Slider
android:id="@+id/slider_icon_start"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:layout_gravity="center"
android:value="8.00"
android:valueFrom="0.0"
android:valueTo="11.0"
app:thumbHeight="48dp"
app:trackCornerSize="12dp"
app:trackHeight="40dp"
app:trackIconActiveColor="@color/m3_slider_active_tick_marks_color"
app:trackIconActiveStart="@drawable/baseline_music_note_24"
app:trackIconInactiveColor="@color/m3_slider_inactive_tick_marks_color"
app:trackIconInactiveStart="@drawable/baseline_music_off_24"
app:trackIconSize="20dp" />

<com.google.android.material.slider.Slider
android:id="@+id/slider_icon_start_end"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:layout_gravity="center"
android:value="8.09"
android:valueFrom="0.0"
android:valueTo="11.0"
app:thumbHeight="48dp"
app:trackCornerSize="12dp"
app:trackHeight="40dp"
app:trackIconActiveColor="@color/m3_slider_active_tick_marks_color"
app:trackIconActiveEnd="@drawable/baseline_music_note_24"
app:trackIconActiveStart="@drawable/baseline_music_note_24"
app:trackIconInactiveColor="@color/m3_slider_inactive_tick_marks_color"
app:trackIconInactiveEnd="@drawable/baseline_music_off_24"
app:trackIconInactiveStart="@drawable/baseline_music_off_24"
app:trackIconSize="20dp"
app:trackStopIndicatorSize="0dp" />
</LinearLayout>
<com.google.android.material.slider.Slider
android:id="@+id/slider_icon_end"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:layout_gravity="center"
android:value="8.00"
android:valueFrom="0.0"
android:valueTo="11.0"
app:thumbHeight="48dp"
app:trackCornerSize="12dp"
app:trackHeight="40dp"
app:trackIconActiveColor="@color/m3_slider_active_tick_marks_color"
app:trackIconActiveEnd="@drawable/baseline_music_note_24"
app:trackIconInactiveColor="@color/m3_slider_inactive_tick_marks_color"
app:trackIconInactiveEnd="@drawable/baseline_music_off_24"
app:trackIconSize="20dp"
app:trackStopIndicatorSize="0dp" />

<com.google.android.material.slider.Slider
android:id="@+id/slider_icon_start_end"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:layout_gravity="center"
android:value="8.00"
android:valueFrom="0.0"
android:valueTo="11.0"
app:thumbHeight="48dp"
app:trackCornerSize="12dp"
app:trackHeight="40dp"
app:trackIconActiveColor="@color/m3_slider_active_tick_marks_color"
app:trackIconActiveEnd="@drawable/baseline_music_note_24"
app:trackIconActiveStart="@drawable/baseline_music_note_24"
app:trackIconInactiveColor="@color/m3_slider_inactive_tick_marks_color"
app:trackIconInactiveEnd="@drawable/baseline_music_off_24"
app:trackIconInactiveStart="@drawable/baseline_music_off_24"
app:trackIconSize="20dp"
app:trackStopIndicatorSize="0dp" />
</LinearLayout>
</ScrollView>
69 changes: 35 additions & 34 deletions catalog/java/io/material/catalog/slider/res/layout/cat_slider_demo_vertical.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,41 +13,42 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
android:layout_height="match_parent">

<com.google.android.material.slider.Slider
android:id="@+id/slider_vertical"
android:layout_width="wrap_content"
android:layout_height="350dp"
android:layout_marginTop="64dp"
android:orientation="vertical"
android:value="8.09"
android:valueFrom="0.0"
android:valueTo="11.0"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:thumbHeight="48dp"
app:trackCornerSize="12dp"
app:trackHeight="40dp"
app:trackIconSize="20dp"
app:trackIconActiveStart="@drawable/baseline_music_note_24"
app:trackIconActiveColor="@color/m3_slider_active_tick_marks_color"
app:trackIconInactiveStart="@drawable/baseline_music_off_24"
app:trackIconInactiveColor="@color/m3_slider_inactive_tick_marks_color" />

<com.google.android.material.materialswitch.MaterialSwitch
android:id="@+id/switch_button"
android:layout_width="wrap_content"
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="128dp"
android:checked="true"
android:text="@string/cat_slider_vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
android:padding="16dp"
android:gravity="center_horizontal"
android:orientation="vertical">

<com.google.android.material.slider.Slider
android:id="@+id/slider_vertical"
android:layout_width="wrap_content"
android:layout_height="350dp"
android:layout_marginTop="64dp"
android:orientation="vertical"
android:value="8.00"
android:valueFrom="0.0"
android:valueTo="11.0"
app:thumbHeight="48dp"
app:trackCornerSize="12dp"
app:trackHeight="40dp"
app:trackIconActiveColor="@color/m3_slider_active_tick_marks_color"
app:trackIconActiveStart="@drawable/baseline_music_note_24"
app:trackIconInactiveColor="@color/m3_slider_inactive_tick_marks_color"
app:trackIconInactiveStart="@drawable/baseline_music_off_24"
app:trackIconSize="20dp" />

<com.google.android.material.materialswitch.MaterialSwitch
android:id="@+id/switch_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:checked="true"
android:text="@string/cat_slider_vertical" />
</LinearLayout>
</ScrollView>
21 changes: 14 additions & 7 deletions lib/java/com/google/android/material/slider/BaseSlider.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3304,17 +3304,24 @@ private void positionLabel(TooltipDrawable label, float value) {
}

private void calculateLabelBounds(TooltipDrawable label, float value) {
int left =
trackSidePadding
+ (int) (normalizeValue(value) * trackWidth)
- label.getIntrinsicWidth() / 2;
int right = left + label.getIntrinsicWidth();
int left;
int right;
int bottom;
int top;
if (isVertical() && !isRtl()) {
left =
trackSidePadding
+ (int) (normalizeValue(value) * trackWidth)
- label.getIntrinsicHeight() / 2;
right = left + label.getIntrinsicHeight();
top = calculateTrackCenter() + (labelPadding + thumbHeight / 2);
bottom = top + label.getIntrinsicHeight();
bottom = top + label.getIntrinsicWidth();
} else {
left =
trackSidePadding
+ (int) (normalizeValue(value) * trackWidth)
- label.getIntrinsicWidth() / 2;
right = left + label.getIntrinsicWidth();
bottom = calculateTrackCenter() - (labelPadding + thumbHeight / 2);
top = bottom - label.getIntrinsicHeight();
}
Expand Down Expand Up @@ -3911,7 +3918,7 @@ protected boolean onPerformActionForVirtualView(
}

// Swap the increment if we're in RTL.
if (slider.isRtl() || slider.isVertical()) {
if (slider.isRtl()) {
increment = -increment;
}

Expand Down

0 comments on commit 63e1ec9

Please sign in to comment.