Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add focus ring/border in Windows High Contrast mode #1729

Merged
merged 20 commits into from
Jul 4, 2022
Merged

Add focus ring/border in Windows High Contrast mode #1729

Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
1fc0f10
Update base.css
pizzaz93 May 23, 2022
8b40627
Update base.css
pizzaz93 May 23, 2022
bcbaee8
Update component-facets.css
pizzaz93 May 23, 2022
bae7c6c
Update section-main-product.css
pizzaz93 May 23, 2022
0b3eee4
Update section-main-product.css
pizzaz93 May 23, 2022
ed8f660
Update component-deferred-media.css
pizzaz93 May 23, 2022
e641088
Update base.css
pizzaz93 Jun 13, 2022
6b1743a
Update component-deferred-media.css
pizzaz93 Jun 13, 2022
e929fed
Update component-facets.css
pizzaz93 Jun 13, 2022
d895469
Update section-main-product.css
pizzaz93 Jun 13, 2022
269a94b
Update base.css
pizzaz93 Jun 13, 2022
8295471
Update component-deferred-media.css
pizzaz93 Jun 13, 2022
a972b00
Update component-deferred-media.css
pizzaz93 Jun 13, 2022
83da5f6
Update component-facets.css
pizzaz93 Jun 13, 2022
9236597
Update section-main-product.css
pizzaz93 Jun 13, 2022
9d7a5c4
Apply suggestions from code review
pizzaz93 Jun 14, 2022
4319360
Update base.css
pizzaz93 Jun 14, 2022
d17a0c0
Update section-main-product.css
pizzaz93 Jun 15, 2022
4154013
Update base.css
pizzaz93 Jun 15, 2022
1640493
Apply suggestions from code review
pizzaz93 Jun 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions assets/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2883,3 +2883,34 @@ details-disclosure > details {
.font-body-bold {
font-weight: var(--font-body-weight-bold);
}

/* outline and border styling for Windows High Contrast Mode */
@media (forced-colors: active) {
.button,
.shopify-challenge__button,
.customer button {
border: transparent solid 1px;
}

.button:focus-visible,
.button:focus,
.button.focused,
.shopify-payment-button__button--unbranded:focus-visible,
.shopify-payment-button [role="button"]:focus-visible,
.shopify-payment-button__button--unbranded:focus,
.shopify-payment-button [role="button"]:focus {
outline: solid transparent 1px;
}

.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus,
.localization-form__select:focus.localization-form__select:after {
outline: transparent solid 1px;
}

.localization-form__select:focus {
outline: transparent solid 1px;
}
}
pizzaz93 marked this conversation as resolved.
Show resolved Hide resolved
7 changes: 7 additions & 0 deletions assets/component-deferred-media.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,13 @@
border-radius: calc(var(--media-radius) - var(--media-border-width));
}

/* outline styling for Windows High Contrast Mode */
@media (forced-colors: active) {
.deferred-media__poster:focus {
outline: transparent solid 1px;
}
}

pizzaz93 marked this conversation as resolved.
Show resolved Hide resolved
.deferred-media__poster:focus:not(:focus-visible) {
outline: 0;
box-shadow: none;
Expand Down
7 changes: 7 additions & 0 deletions assets/component-facets.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -473,6 +473,13 @@ a.active-facets__button:focus-visible {
box-shadow: none;
}

/* outline styling for Windows High Contrast Mode */
@media (forced-colors: active) {
a.active-facets__button:focus-visible {
outline: transparent solid 1px;
}
}

pizzaz93 marked this conversation as resolved.
Show resolved Hide resolved
a.active-facets__button.focused,
.no-js a.active-facets__button:focus {
outline: none;
Expand Down
18 changes: 18 additions & 0 deletions assets/section-main-product.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -646,6 +646,16 @@ a.product__text {
box-shadow: none;
}

/* outline styling for Windows High Contrast Mode */
@media (forced-colors: active) {
.product__media-toggle:focus-visible,
.product__media-toggle:focus-visible:after,
.product-form__input input[type='radio']:focus-visible + label {
outline: transparent solid 1px;
outline-offset: 2px;
}
}

pizzaz93 marked this conversation as resolved.
Show resolved Hide resolved
.product__media-toggle.focused {
outline: 0;
box-shadow: none;
Expand Down Expand Up @@ -1102,6 +1112,14 @@ a.product__text {
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5);
}

/* outline styling for Windows High Contrast Mode */
@media (forced-colors: active) {
.thumbnail[aria-current]:focus,
.thumbnail.focused {
outline: transparent solid 1px;
}
}

pizzaz93 marked this conversation as resolved.
Show resolved Hide resolved
.thumbnail[aria-current]:focus:not(:focus-visible) {
outline: 0;
box-shadow: 0 0 0 0.1rem rgb(var(--color-foreground));
Expand Down