Skip to content

Commit edec467

Browse files
bmatarbmatar
authored
fix(a11y): restore icon visibility in Windows High Contrast Mode (#10846)
1 parent 311b0d2 commit edec467

11 files changed

Lines changed: 115 additions & 15 deletions

File tree

‎src/core/plugins/icons/components/arrow-down.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@ const ArrowDown = ({ className = null, width = 20, height = 20, ...rest }) => (
1515
focusable="false"
1616
{...rest}
1717
>
18-
<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" />
18+
<path
19+
fill="currentColor"
20+
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"
21+
/>
1922
</svg>
2023
)
2124

‎src/core/plugins/icons/components/arrow-up.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@ const ArrowUp = ({ className = null, width = 20, height = 20, ...rest }) => (
1515
focusable="false"
1616
{...rest}
1717
>
18-
<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" />
18+
<path
19+
fill="currentColor"
20+
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"
21+
/>
1922
</svg>
2023
)
2124

‎src/core/plugins/icons/components/arrow.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@ const Arrow = ({ className = null, width = 20, height = 20, ...rest }) => (
1515
focusable="false"
1616
{...rest}
1717
>
18-
<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" />
18+
<path
19+
fill="currentColor"
20+
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"
21+
/>
1922
</svg>
2023
)
2124

‎src/core/plugins/icons/components/close.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@ const Close = ({ className = null, width = 20, height = 20, ...rest }) => (
1515
focusable="false"
1616
{...rest}
1717
>
18-
<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" />
18+
<path
19+
fill="currentColor"
20+
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"
21+
/>
1922
</svg>
2023
)
2124

‎src/core/plugins/icons/components/lock.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@ const Lock = ({ className = null, width = 20, height = 20, ...rest }) => (
1515
focusable="false"
1616
{...rest}
1717
>
18-
<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" />
18+
<path
19+
fill="currentColor"
20+
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"
21+
/>
1922
</svg>
2023
)
2124

‎src/core/plugins/icons/components/unlock.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@ const Unlock = ({ className = null, width = 20, height = 20, ...rest }) => (
1515
focusable="false"
1616
{...rest}
1717
>
18-
<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>
18+
<path
19+
fill="currentColor"
20+
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"
21+
></path>
1922
</svg>
2023
)
2124

‎src/core/plugins/json-schema-2020-12/components/icons/ChevronRight.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ const ChevronRight = () => (
1010
height="24"
1111
viewBox="0 0 24 24"
1212
>
13-
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
13+
<path
14+
fill="currentColor"
15+
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
16+
/>
1417
</svg>
1518
)
1619

‎src/style/_buttons.scss‎

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
}
5555

5656
svg {
57-
fill: $btn-authorize-svg-fill-color;
57+
color: $btn-authorize-svg-fill-color;
5858
}
5959
}
6060

@@ -88,6 +88,7 @@
8888

8989
border: none;
9090
background: none;
91+
color: $black;
9192

9293
.locked {
9394
opacity: 1;
@@ -116,6 +117,7 @@
116117
.expand-operation {
117118
border: none;
118119
background: none;
120+
color: $black;
119121

120122
svg {
121123
width: 20px;
@@ -128,14 +130,14 @@
128130

129131
&:hover {
130132
svg {
131-
fill: $expand-methods-svg-fill-color-hover;
133+
color: $expand-methods-svg-fill-color-hover;
132134
}
133135
}
134136

135137
svg {
136138
transition: all 0.3s;
137139

138-
fill: $expand-methods-svg-fill-color;
140+
color: $expand-methods-svg-fill-color;
139141
}
140142
}
141143

@@ -167,6 +169,15 @@ button {
167169
height: 25px;
168170
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>")
169171
center center no-repeat;
172+
173+
@media (forced-colors: active) {
174+
forced-color-adjust: none;
175+
background-color: ButtonText;
176+
background-image: none;
177+
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>");
178+
mask-position: center center;
179+
mask-repeat: no-repeat;
180+
}
170181
}
171182
}
172183

@@ -178,6 +189,7 @@ button {
178189
border: none;
179190
text-align: center;
180191
background: none;
192+
color: $black;
181193
}
182194

183195
// overrides for smaller copy button for curl command
@@ -197,3 +209,22 @@ button {
197209
height: 26px;
198210
position: unset;
199211
}
212+
213+
// Render icon buttons in HCM system colors regardless of author fill cascade.
214+
@media (forced-colors: active) {
215+
.authorization__btn svg path,
216+
.expand-operation svg path,
217+
.opblock-control-arrow svg path,
218+
.models-control svg path,
219+
.close-modal svg path,
220+
.btn.authorize svg path,
221+
.json-schema-2020-12-accordion svg path {
222+
forced-color-adjust: none;
223+
fill: ButtonText;
224+
}
225+
226+
// Reset opacity dimming so HCM system-color contrast isn't composited away.
227+
.authorization__btn .unlocked {
228+
opacity: 1;
229+
}
230+
}

‎src/style/_dark-mode.scss‎

Lines changed: 33 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ html.dark-mode {
9494
.authorization__btn svg,
9595
.expand-operation svg,
9696
.opblock-control-arrow svg {
97-
fill: $neutral-40;
97+
color: $neutral-40;
9898
opacity: 1;
9999
}
100100

@@ -217,7 +217,7 @@ html.dark-mode {
217217
border-color: $neutral-80;
218218

219219
.close-modal svg {
220-
fill: $neutral-20;
220+
color: $neutral-20;
221221
}
222222
}
223223

@@ -260,6 +260,15 @@ html.dark-mode {
260260
background: $neutral-80
261261
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>')
262262
center center no-repeat;
263+
264+
@media (forced-colors: active) {
265+
forced-color-adjust: none;
266+
background-color: ButtonText;
267+
background-image: none;
268+
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>');
269+
mask-position: center center;
270+
mask-repeat: no-repeat;
271+
}
263272
}
264273
}
265274
}
@@ -294,7 +303,7 @@ html.dark-mode {
294303
color: $authorize-button;
295304

296305
svg {
297-
fill: $authorize-button;
306+
color: $authorize-button;
298307
}
299308
}
300309
}
@@ -356,6 +365,15 @@ html.dark-mode {
356365
button {
357366
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>")
358367
center center no-repeat;
368+
369+
@media (forced-colors: active) {
370+
forced-color-adjust: none;
371+
background-color: ButtonText;
372+
background-image: none;
373+
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>");
374+
mask-position: center center;
375+
mask-repeat: no-repeat;
376+
}
359377
}
360378
}
361379

@@ -569,6 +587,16 @@ html.dark-mode {
569587
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>')
570588
center no-repeat;
571589
background-size: 100%;
590+
591+
@media (forced-colors: active) {
592+
forced-color-adjust: none;
593+
background-color: CanvasText;
594+
background-image: none;
595+
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>');
596+
mask-position: center;
597+
mask-repeat: no-repeat;
598+
mask-size: 100%;
599+
}
572600
}
573601
}
574602

@@ -618,7 +646,7 @@ html.dark-mode {
618646
background: $neutral-95;
619647

620648
svg {
621-
fill: $neutral-20;
649+
color: $neutral-20;
622650
}
623651
}
624652

@@ -735,7 +763,7 @@ html.dark-mode {
735763
}
736764

737765
svg {
738-
fill: $neutral-40;
766+
color: $neutral-40;
739767
}
740768
}
741769
}

‎src/style/_form.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,15 @@ textarea {
209209
background: $form-checkbox-background-color
210210
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>')
211211
center center no-repeat;
212+
213+
@media (forced-colors: active) {
214+
forced-color-adjust: none;
215+
background-color: ButtonText;
216+
background-image: none;
217+
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>');
218+
mask-position: center center;
219+
mask-repeat: no-repeat;
220+
}
212221
}
213222
}
214223
}

0 commit comments

Comments
 (0)