Skip to content

fix(a11y): restore icon visibility in Windows High Contrast Mode #10846

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

Open
bmatar wants to merge 2 commits into
base: master
Choose a base branch
from
Open

fix(a11y): restore icon visibility in Windows High Contrast Mode #10846

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1ec99ca
fix(a11y): icon SVGs use currentColor for HCM visibility
bmatar Apr 18, 2026
ac4f3ec
fix(a11y): data-URL icon chevrons render in HCM via mask-image
bmatar Apr 18, 2026
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
5 changes: 4 additions & 1 deletion src/core/plugins/icons/components/arrow-down.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@ const ArrowDown = ({ className = null, width = 20, height = 20, ...rest }) => (
focusable="false"
{...rest}
>
<path d="M17.418 6.109c.272-.268.709-.268.979 0s.271.701 0 .969l-7.908 7.83c-.27.268-.707.268-.979 0l-7.908-7.83c-.27-.268-.27-.701 0-.969.271-.268.709-.268.979 0L10 13.25l7.418-7.141z" />
<path
fill="currentColor"
d="M17.418 6.109c.272-.268.709-.268.979 0s.271.701 0 .969l-7.908 7.83c-.27.268-.707.268-.979 0l-7.908-7.83c-.27-.268-.27-.701 0-.969.271-.268.709-.268.979 0L10 13.25l7.418-7.141z"
/>
</svg>
)

Expand Down
5 changes: 4 additions & 1 deletion src/core/plugins/icons/components/arrow-up.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@ const ArrowUp = ({ className = null, width = 20, height = 20, ...rest }) => (
focusable="false"
{...rest}
>
<path d="M 17.418 14.908 C 17.69 15.176 18.127 15.176 18.397 14.908 C 18.667 14.64 18.668 14.207 18.397 13.939 L 10.489 6.109 C 10.219 5.841 9.782 5.841 9.51 6.109 L 1.602 13.939 C 1.332 14.207 1.332 14.64 1.602 14.908 C 1.873 15.176 2.311 15.176 2.581 14.908 L 10 7.767 L 17.418 14.908 Z" />
<path
fill="currentColor"
d="M 17.418 14.908 C 17.69 15.176 18.127 15.176 18.397 14.908 C 18.667 14.64 18.668 14.207 18.397 13.939 L 10.489 6.109 C 10.219 5.841 9.782 5.841 9.51 6.109 L 1.602 13.939 C 1.332 14.207 1.332 14.64 1.602 14.908 C 1.873 15.176 2.311 15.176 2.581 14.908 L 10 7.767 L 17.418 14.908 Z"
/>
</svg>
)

Expand Down
5 changes: 4 additions & 1 deletion src/core/plugins/icons/components/arrow.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@ const Arrow = ({ className = null, width = 20, height = 20, ...rest }) => (
focusable="false"
{...rest}
>
<path d="M13.25 10L6.109 2.58c-.268-.27-.268-.707 0-.979.268-.27.701-.27.969 0l7.83 7.908c.268.271.268.709 0 .979l-7.83 7.908c-.268.271-.701.27-.969 0-.268-.269-.268-.707 0-.979L13.25 10z" />
<path
fill="currentColor"
d="M13.25 10L6.109 2.58c-.268-.27-.268-.707 0-.979.268-.27.701-.27.969 0l7.83 7.908c.268.271.268.709 0 .979l-7.83 7.908c-.268.271-.701.27-.969 0-.268-.269-.268-.707 0-.979L13.25 10z"
/>
</svg>
)

Expand Down
5 changes: 4 additions & 1 deletion src/core/plugins/icons/components/close.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@ const Close = ({ className = null, width = 20, height = 20, ...rest }) => (
focusable="false"
{...rest}
>
<path d="M14.348 14.849c-.469.469-1.229.469-1.697 0L10 11.819l-2.651 3.029c-.469.469-1.229.469-1.697 0-.469-.469-.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-.469-.469-.469-1.228 0-1.697.469-.469 1.228-.469 1.697 0L10 8.183l2.651-3.031c.469-.469 1.228-.469 1.697 0 .469.469.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c.469.469.469 1.229 0 1.698z" />
<path
fill="currentColor"
d="M14.348 14.849c-.469.469-1.229.469-1.697 0L10 11.819l-2.651 3.029c-.469.469-1.229.469-1.697 0-.469-.469-.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-.469-.469-.469-1.228 0-1.697.469-.469 1.228-.469 1.697 0L10 8.183l2.651-3.031c.469-.469 1.228-.469 1.697 0 .469.469.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c.469.469.469 1.229 0 1.698z"
/>
</svg>
)

Expand Down
5 changes: 4 additions & 1 deletion src/core/plugins/icons/components/lock.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@ const Lock = ({ className = null, width = 20, height = 20, ...rest }) => (
focusable="false"
{...rest}
>
<path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8zM12 8H8V5.199C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8z" />
<path
fill="currentColor"
d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8zM12 8H8V5.199C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8z"
/>
</svg>
)

Expand Down
5 changes: 4 additions & 1 deletion src/core/plugins/icons/components/unlock.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@ const Unlock = ({ className = null, width = 20, height = 20, ...rest }) => (
focusable="false"
{...rest}
>
<path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V6h2v-.801C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8z"></path>
<path
fill="currentColor"
d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V6h2v-.801C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8z"
></path>
</svg>
)

Expand Down
5 changes: 4 additions & 1 deletion src/core/plugins/json-schema-2020-12/components/icons/ChevronRight.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,10 @@ const ChevronRight = () => (
height="24"
viewBox="0 0 24 24"
>
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
<path
fill="currentColor"
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
/>
</svg>
)

Expand Down
37 changes: 34 additions & 3 deletions src/style/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
}

svg {
fill: $btn-authorize-svg-fill-color;
color: $btn-authorize-svg-fill-color;
}
}

Expand Down Expand Up @@ -88,6 +88,7 @@

border: none;
background: none;
color: $black;

.locked {
opacity: 1;
Expand Down Expand Up @@ -116,6 +117,7 @@
.expand-operation {
border: none;
background: none;
color: $black;

svg {
width: 20px;
Expand All @@ -128,14 +130,14 @@

&:hover {
svg {
fill: $expand-methods-svg-fill-color-hover;
color: $expand-methods-svg-fill-color-hover;
}
}

svg {
transition: all 0.3s;

fill: $expand-methods-svg-fill-color;
color: $expand-methods-svg-fill-color;
}
}

Expand Down Expand Up @@ -167,6 +169,15 @@ button {
height: 25px;
background: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='15' aria-hidden='true'><g transform='translate(2, -1)'><path fill='#ffffff' fill-rule='evenodd' d='M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z'></path></g></svg>")
center center no-repeat;

@media (forced-colors: active) {
forced-color-adjust: none;
background-color: ButtonText;
background-image: none;
mask-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='15' aria-hidden='true'><g transform='translate(2, -1)'><path fill-rule='evenodd' d='M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z'/></g></svg>");
mask-position: center center;
mask-repeat: no-repeat;
}
}
}

Expand All @@ -178,6 +189,7 @@ button {
border: none;
text-align: center;
background: none;
color: $black;
}

// overrides for smaller copy button for curl command
Expand All @@ -197,3 +209,22 @@ button {
height: 26px;
position: unset;
}

// Render icon buttons in HCM system colors regardless of author fill cascade.
@media (forced-colors: active) {
.authorization__btn svg path,
.expand-operation svg path,
.opblock-control-arrow svg path,
.models-control svg path,
.close-modal svg path,
.btn.authorize svg path,
.json-schema-2020-12-accordion svg path {
forced-color-adjust: none;
fill: ButtonText;
}

// Reset opacity dimming so HCM system-color contrast isn't composited away.
.authorization__btn .unlocked {
opacity: 1;
}
}
38 changes: 33 additions & 5 deletions src/style/_dark-mode.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ html.dark-mode {
.authorization__btn svg,
.expand-operation svg,
.opblock-control-arrow svg {
fill: $neutral-40;
color: $neutral-40;
opacity: 1;
}

Expand Down Expand Up @@ -217,7 +217,7 @@ html.dark-mode {
border-color: $neutral-80;

.close-modal svg {
fill: $neutral-20;
color: $neutral-20;
}
}

Expand Down Expand Up @@ -260,6 +260,15 @@ html.dark-mode {
background: $neutral-80
url('data:image/svg+xml, <svg width="10px" height="8px" viewBox="3 7 10 8" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon id="Rectangle-34" stroke="none" fill="#E4E6E6" fill-rule="evenodd" points="6.33333333 15 3 11.6666667 4.33333333 10.3333333 6.33333333 12.3333333 11.6666667 7 13 8.33333333"></polygon></svg>')
center center no-repeat;

@media (forced-colors: active) {
forced-color-adjust: none;
background-color: ButtonText;
background-image: none;
mask-image: url('data:image/svg+xml, <svg width="10px" height="8px" viewBox="3 7 10 8" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon stroke="none" fill-rule="evenodd" points="6.33333333 15 3 11.6666667 4.33333333 10.3333333 6.33333333 12.3333333 11.6666667 7 13 8.33333333"/></svg>');
mask-position: center center;
mask-repeat: no-repeat;
}
}
}
}
Expand Down Expand Up @@ -294,7 +303,7 @@ html.dark-mode {
color: $authorize-button;

svg {
fill: $authorize-button;
color: $authorize-button;
}
}
}
Expand Down Expand Up @@ -356,6 +365,15 @@ html.dark-mode {
button {
background: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='15' aria-hidden='true'><g transform='translate(2, -1)'><path fill='#E4E6E6' fill-rule='evenodd' d='M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z'></path></g></svg>")
center center no-repeat;

@media (forced-colors: active) {
forced-color-adjust: none;
background-color: ButtonText;
background-image: none;
mask-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='15' aria-hidden='true'><g transform='translate(2, -1)'><path fill-rule='evenodd' d='M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z'/></g></svg>");
mask-position: center center;
mask-repeat: no-repeat;
}
}
}

Expand Down Expand Up @@ -569,6 +587,16 @@ html.dark-mode {
background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#e4e6e6" d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>')
center no-repeat;
background-size: 100%;

@media (forced-colors: active) {
forced-color-adjust: none;
background-color: CanvasText;
background-image: none;
mask-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>');
mask-position: center;
mask-repeat: no-repeat;
mask-size: 100%;
}
}
}

Expand Down Expand Up @@ -618,7 +646,7 @@ html.dark-mode {
background: $neutral-95;

svg {
fill: $neutral-20;
color: $neutral-20;
}
}

Expand Down Expand Up @@ -735,7 +763,7 @@ html.dark-mode {
}

svg {
fill: $neutral-40;
color: $neutral-40;
}
}
}
Expand Down
9 changes: 9 additions & 0 deletions src/style/_form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,15 @@ textarea {
background: $form-checkbox-background-color
url('data:image/svg+xml, <svg width="10px" height="8px" viewBox="3 7 10 8" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon id="Rectangle-34" stroke="none" fill="#41474E" fill-rule="evenodd" points="6.33333333 15 3 11.6666667 4.33333333 10.3333333 6.33333333 12.3333333 11.6666667 7 13 8.33333333"></polygon></svg>')
center center no-repeat;

@media (forced-colors: active) {
forced-color-adjust: none;
background-color: ButtonText;
background-image: none;
mask-image: url('data:image/svg+xml, <svg width="10px" height="8px" viewBox="3 7 10 8" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon stroke="none" fill-rule="evenodd" points="6.33333333 15 3 11.6666667 4.33333333 10.3333333 6.33333333 12.3333333 11.6666667 7 13 8.33333333"/></svg>');
mask-position: center center;
mask-repeat: no-repeat;
}
}
}
}
11 changes: 11 additions & 0 deletions src/style/_models.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,17 @@
background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>')
center no-repeat;
background-size: 100%;

// HCM: substitute data-URL chevron with a mask + system color.
@media (forced-colors: active) {
forced-color-adjust: none;
background-color: CanvasText;
background-image: none;
mask-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>');
mask-position: center;
mask-repeat: no-repeat;
mask-size: 100%;
}
}
}

Expand Down