Skip to content

Commit

Permalink
fix(checkbox): support high contrast mode in Firefox on Windows (#2927)
Browse files Browse the repository at this point in the history 

(cherry picked from commit 2bd52c7)
  • Loading branch information
@aprigogin
aprigogin authored and Kenneth G. Franqueiro committed Jun 18, 2018
1 parent 1a71163 commit 8b7d77e
Show file tree
Hide file tree
Showing 15 changed files with 17 additions and 42 deletions.
2 changes: 1 addition & 1 deletion demos/button.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@
<input type="checkbox" class="mdc-checkbox__native-control" id="toggle-disabled" aria-labelledby="toggle-disabled-label">
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59">
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion demos/card.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ <h3 class="demo-card__subtitle mdc-typography--subtitle2">by Kurt Wagner</h3>
<input type="checkbox" class="mdc-checkbox__native-control" id="toggle-rtl" aria-labelledby="toggle-rtl-label" />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
Expand Down
10 changes: 0 additions & 10 deletions demos/checkbox.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,6 @@
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
Expand All @@ -89,7 +88,6 @@ <h2>CSS Only</h2>
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
Expand Down Expand Up @@ -118,7 +116,6 @@ <h2>CSS Only</h2>
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
Expand All @@ -137,7 +134,6 @@ <h2>CSS Only</h2>
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
Expand All @@ -160,7 +156,6 @@ <h2>CSS Only</h2>
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
Expand All @@ -180,7 +175,6 @@ <h2>CSS Only</h2>
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
Expand All @@ -205,7 +199,6 @@ <h2>With JavaScript</h2>
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
Expand All @@ -230,7 +223,6 @@ <h2>With JavaScript</h2>
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
Expand All @@ -257,7 +249,6 @@ <h2>With JavaScript</h2>
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
Expand All @@ -281,7 +272,6 @@ <h2>With JavaScript</h2>
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
Expand Down
1 change: 0 additions & 1 deletion demos/dialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,6 @@ <h2 id="mdc-dialog-with-list-label" class="mdc-dialog__header__title">
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
Expand Down
2 changes: 1 addition & 1 deletion demos/grid-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@
<input type="checkbox" class="mdc-checkbox__native-control" id="toggle-rtl" aria-labelledby="toggle-rtl-label" />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions demos/image-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@
<input type="checkbox" class="mdc-checkbox__native-control" id="toggle-rtl" aria-labelledby="toggle-rtl-label" />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
Expand All @@ -139,7 +139,7 @@
<input type="checkbox" class="mdc-checkbox__native-control" id="toggle-radius" aria-labelledby="toggle-radius-label" />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion demos/list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@
aria-labelledby="toggle-rtl-label" />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" stroke="white"
<path class="mdc-checkbox__checkmark-path" fill="none"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
Expand Down
6 changes: 3 additions & 3 deletions demos/snackbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ <h2 class="mdc-typography--headline6">Basic Example</h2>
<input type="checkbox" class="mdc-checkbox__native-control" id="multiline" aria-labelledby="multiline-label" />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
Expand All @@ -97,7 +97,7 @@ <h2 class="mdc-typography--headline6">Basic Example</h2>
<input type="checkbox" class="mdc-checkbox__native-control" id="action-on-bottom" aria-labelledby="action-on-bottom-label" />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" stroke="white"
<path class="mdc-checkbox__checkmark-path" fill="none"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
Expand All @@ -112,7 +112,7 @@ <h2 class="mdc-typography--headline6">Basic Example</h2>
<input type="checkbox" checked class="mdc-checkbox__native-control" id="dismiss-on-action" aria-labelledby="dismiss-on-action-label" />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" stroke="white"
<path class="mdc-checkbox__checkmark-path" fill="none"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
Expand Down
8 changes: 4 additions & 4 deletions demos/switch.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,9 +83,9 @@ <h2>Enabled</h2>
</div>
<div class="demo-switch-wrapper">
<div class="mdc-switch demo-switch--custom">
<input type="checkbox"
id="basic-switch-custom"
class="mdc-switch__native-control"
<input type="checkbox"
id="basic-switch-custom"
class="mdc-switch__native-control"
role="switch" checked>
<div class="mdc-switch__background">
<div class="mdc-switch__knob"></div>
Expand Down Expand Up @@ -121,7 +121,7 @@ <h2>Disabled</h2>
aria-labelledby="toggle-rtl-label" />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" stroke="white"
<path class="mdc-checkbox__checkmark-path" fill="none"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
Expand Down
3 changes: 0 additions & 3 deletions demos/theme/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -365,7 +365,6 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
Expand All @@ -384,7 +383,6 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
Expand All @@ -404,7 +402,6 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
Expand Down
4 changes: 1 addition & 3 deletions packages/mdc-checkbox/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@ We recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enh
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
Expand Down Expand Up @@ -102,7 +101,6 @@ Note that `mdc-checkbox--disabled` is necessary on the root element of CSS-only
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
Expand Down Expand Up @@ -149,7 +147,7 @@ Property Name | Type | Description
`checked` | Boolean | Setter/getter for the checkbox's checked state
`indeterminate` | Boolean | Setter/getter for the checkbox's indeterminate state
`disabled` | Boolean | Setter/getter for the checkbox's disabled state
`value` | String | Setter/getter for the checkbox's
`value` | String | Setter/getter for the checkbox's

## Usage within Web Frameworks

Expand Down
7 changes: 3 additions & 4 deletions packages/mdc-checkbox/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,10 +69,8 @@
}

@mixin mdc-checkbox-ink-color($color) {
.mdc-checkbox__checkmark-path {
// !important is needed here because a stroke must be set as an attribute on the SVG in order
// for line animation to work properly.
@include mdc-theme-prop(stroke, $color, $important: true);
.mdc-checkbox__checkmark {
@include mdc-theme-prop(color, $color);
}

.mdc-checkbox__mixedmark {
Expand Down Expand Up @@ -352,6 +350,7 @@
0ms,
$mdc-checkbox-transition-duration * 2
);
stroke: currentColor;
stroke-width: $mdc-checkbox-mark-stroke-size * 1.3;
stroke-dashoffset: $mdc-checkbox-mark-path-length_;
stroke-dasharray: $mdc-checkbox-mark-path-length_;
Expand Down
1 change: 0 additions & 1 deletion packages/mdc-checkbox/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
@import "@material/theme/variables";

$mdc-checkbox-mark-color: mdc-theme-prop-value(on-primary);
$mdc-checkbox-mark-color-high-contrast-black-on-white: black !default;
$mdc-checkbox-border-color: rgba(mdc-theme-prop-value(on-surface), .54);
$mdc-checkbox-disabled-color: rgba(mdc-theme-prop-value(on-surface), .26);
$mdc-checkbox-baseline-theme-color: secondary;
Expand Down
6 changes: 0 additions & 6 deletions packages/mdc-checkbox/mdc-checkbox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,6 @@
}
}

@media screen and (-ms-high-contrast: black-on-white) {
@at-root {
@include mdc-checkbox-ink-color($mdc-checkbox-mark-color-high-contrast-black-on-white);
}
}

// Needed to disable hover effects on CSS-only (non-JS) checkboxes
.mdc-checkbox--disabled {
@include mdc-checkbox--disabled_;
Expand Down
1 change: 0 additions & 1 deletion test/unit/mdc-checkbox/mdc-checkbox.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ function getFixture() {
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
stroke="white"
d="M4.1,12.7 9,17.6 20.3,6.3"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
Expand Down

0 comments on commit 8b7d77e

Please sign in to comment.