Skip to content

Commit 1df4e3f

Browse files
committed
fix(material/slide-toggle): increase slide toggle touch target
Updates Angular Components Slide Toggle component and increases the touch target to meet strict accessibility guidelines of buttons having a minimum touch target of 48x48 pixels. Fixes b/265033905
1 parent aa268f6 commit 1df4e3f

File tree

1 file changed

+22
-0
lines changed

1 file changed

+22
-0
lines changed

src/material/slide-toggle/slide-toggle.scss

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,27 @@ $fallbacks: m3-slide-toggle.get-tokens();
2121
padding: 0;
2222
position: relative;
2323

24+
&::after {
25+
$_touch-target-size: 48px;
26+
$_ripple-size: 24px;
27+
$offset: 5px;
28+
29+
content: '';
30+
opacity: 0;
31+
display: block;
32+
position: absolute;
33+
top: 0 - $offset;
34+
bottom: 0 - $offset;
35+
left: $offset;
36+
right: $offset;
37+
border-radius: 50%;
38+
box-sizing: border-box;
39+
padding: calc(($_touch-target-size - $_ripple-size)/2);
40+
margin: calc((($_touch-target-size - $_ripple-size)/2) * -1);
41+
// stylelint-disable material/no-prefixes
42+
background-clip: content-box;
43+
}
44+
2445
width: token-utils.slot(slide-toggle-track-width, $fallbacks);
2546

2647
&.mdc-switch--disabled {
@@ -367,6 +388,7 @@ $fallbacks: m3-slide-toggle.get-tokens();
367388
&::after {
368389
content: '';
369390
opacity: 0;
391+
370392

371393
.mdc-switch--disabled & {
372394
display: none;

0 commit comments

Comments
 (0)