Skip to content

Commit 946ea04

Browse files
khmakotokhmakoto
committed
Updating snapshots.
1 parent ae7e1e8 commit 946ea04

23 files changed

Lines changed: 782 additions & 74 deletions

File tree

‎packages/react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,13 @@ exports[`Checkbox renders checked correctly 1`] = `
6464
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus + label::before {
6565
outline: 1px solid WindowText;
6666
}
67+
:host(.ms-Fabric--isFocusVisible) &:focus + label::before {
68+
outline-offset: 2px;
69+
outline: 1px solid #605e5c;
70+
}
71+
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus + label::before {
72+
outline: 1px solid WindowText;
73+
}
6774
data-ktp-execute-target="true"
6875
id="checkbox-0"
6976
type="checkbox"
@@ -232,6 +239,13 @@ exports[`Checkbox renders indeterminate correctly 1`] = `
232239
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus + label::before {
233240
outline: 1px solid WindowText;
234241
}
242+
:host(.ms-Fabric--isFocusVisible) &:focus + label::before {
243+
outline-offset: 2px;
244+
outline: 1px solid #605e5c;
245+
}
246+
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus + label::before {
247+
outline: 1px solid WindowText;
248+
}
235249
data-ktp-execute-target="true"
236250
id="checkbox-0"
237251
type="checkbox"
@@ -410,6 +424,13 @@ exports[`Checkbox renders unchecked correctly 1`] = `
410424
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus + label::before {
411425
outline: 1px solid WindowText;
412426
}
427+
:host(.ms-Fabric--isFocusVisible) &:focus + label::before {
428+
outline-offset: 2px;
429+
outline: 1px solid #605e5c;
430+
}
431+
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus + label::before {
432+
outline: 1px solid WindowText;
433+
}
413434
data-ktp-execute-target="true"
414435
id="checkbox-0"
415436
type="checkbox"

‎packages/react/src/components/ChoiceGroup/ChoiceGroupOption/__snapshots__/ChoiceGroupOption.test.tsx.snap‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -573,6 +573,27 @@ exports[`ChoiceGroupOption renders ChoiceGroup correctly 1`] = `
573573
border-color: WindowText;
574574
border-width: 2px;
575575
}
576+
:host(.ms-Fabric--isFocusVisible) & {
577+
outline: transparent;
578+
position: relative;
579+
}
580+
:host(.ms-Fabric--isFocusVisible) &::-moz-focus-inner {
581+
border: 0px;
582+
}
583+
:host(.ms-Fabric--isFocusVisible) &:after {
584+
border: 1px solid #605e5c;
585+
bottom: -2px;
586+
content: "";
587+
left: -2px;
588+
pointer-events: none;
589+
position: absolute;
590+
right: -2px;
591+
top: -2px;
592+
}
593+
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:after {
594+
border-color: WindowText;
595+
border-width: 2px;
596+
}
576597
>
577598
<input
578599
className=
@@ -725,6 +746,27 @@ exports[`ChoiceGroupOption renders ChoiceGroup correctly 1`] = `
725746
border-color: WindowText;
726747
border-width: 2px;
727748
}
749+
:host(.ms-Fabric--isFocusVisible) & {
750+
outline: transparent;
751+
position: relative;
752+
}
753+
:host(.ms-Fabric--isFocusVisible) &::-moz-focus-inner {
754+
border: 0px;
755+
}
756+
:host(.ms-Fabric--isFocusVisible) &:after {
757+
border: 1px solid #605e5c;
758+
bottom: -2px;
759+
content: "";
760+
left: -2px;
761+
pointer-events: none;
762+
position: absolute;
763+
right: -2px;
764+
top: -2px;
765+
}
766+
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:after {
767+
border-color: WindowText;
768+
border-width: 2px;
769+
}
728770
>
729771
<input
730772
checked={true}
@@ -1334,6 +1376,27 @@ exports[`ChoiceGroupOption renders ChoiceGroup correctly 1`] = `
13341376
border-color: WindowText;
13351377
border-width: 1px;
13361378
}
1379+
:host(.ms-Fabric--isFocusVisible) & {
1380+
outline: transparent;
1381+
position: relative;
1382+
}
1383+
:host(.ms-Fabric--isFocusVisible) &::-moz-focus-inner {
1384+
border: 0px;
1385+
}
1386+
:host(.ms-Fabric--isFocusVisible) &:after {
1387+
border: 1px solid #605e5c;
1388+
bottom: -2px;
1389+
content: "";
1390+
left: -2px;
1391+
pointer-events: none;
1392+
position: absolute;
1393+
right: -2px;
1394+
top: -2px;
1395+
}
1396+
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:after {
1397+
border-color: WindowText;
1398+
border-width: 1px;
1399+
}
13371400
>
13381401
<input
13391402
className=

‎packages/react/src/components/ChoiceGroup/__snapshots__/ChoiceGroup.test.tsx.snap‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,27 @@ exports[`ChoiceGroup renders ChoiceGroup correctly 1`] = `
6969
border-color: WindowText;
7070
border-width: 2px;
7171
}
72+
:host(.ms-Fabric--isFocusVisible) & {
73+
outline: transparent;
74+
position: relative;
75+
}
76+
:host(.ms-Fabric--isFocusVisible) &::-moz-focus-inner {
77+
border: 0px;
78+
}
79+
:host(.ms-Fabric--isFocusVisible) &:after {
80+
border: 1px solid #605e5c;
81+
bottom: -2px;
82+
content: "";
83+
left: -2px;
84+
pointer-events: none;
85+
position: absolute;
86+
right: -2px;
87+
top: -2px;
88+
}
89+
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:after {
90+
border-color: WindowText;
91+
border-width: 2px;
92+
}
7293
>
7394
<input
7495
class=
@@ -547,6 +568,27 @@ exports[`ChoiceGroup renders ChoiceGroup with label correctly 1`] = `
547568
border-color: WindowText;
548569
border-width: 2px;
549570
}
571+
:host(.ms-Fabric--isFocusVisible) & {
572+
outline: transparent;
573+
position: relative;
574+
}
575+
:host(.ms-Fabric--isFocusVisible) &::-moz-focus-inner {
576+
border: 0px;
577+
}
578+
:host(.ms-Fabric--isFocusVisible) &:after {
579+
border: 1px solid #605e5c;
580+
bottom: -2px;
581+
content: "";
582+
left: -2px;
583+
pointer-events: none;
584+
position: absolute;
585+
right: -2px;
586+
top: -2px;
587+
}
588+
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:after {
589+
border-color: WindowText;
590+
border-width: 2px;
591+
}
550592
>
551593
<input
552594
class=

‎packages/react/src/components/ColorPicker/ColorRectangle/__snapshots__/ColorRectangle.test.tsx.snap‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,12 @@ exports[`ColorRectangle renders correctly 1`] = `
2929
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus {
3030
outline: 2px solid CanvasText;
3131
}
32+
:host(.ms-Fabric--isFocusVisible) &:focus {
33+
outline: 1px solid #605e5c;
34+
}
35+
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus {
36+
outline: 2px solid CanvasText;
37+
}
3238
data-is-focusable={true}
3339
onKeyDown={[Function]}
3440
onMouseDown={[Function]}

‎packages/react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,12 @@ exports[`ColorPicker renders correctly 1`] = `
5555
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus {
5656
outline: 2px solid CanvasText;
5757
}
58+
:host(.ms-Fabric--isFocusVisible) &:focus {
59+
outline: 1px solid #605e5c;
60+
}
61+
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus {
62+
outline: 2px solid CanvasText;
63+
}
5864
data-is-focusable="true"
5965
role="slider"
6066
style="background-color: rgb(0, 128, 255);"
@@ -1210,6 +1216,12 @@ exports[`ColorPicker renders correctly with preview 1`] = `
12101216
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus {
12111217
outline: 2px solid CanvasText;
12121218
}
1219+
:host(.ms-Fabric--isFocusVisible) &:focus {
1220+
outline: 1px solid #605e5c;
1221+
}
1222+
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus {
1223+
outline: 2px solid CanvasText;
1224+
}
12131225
data-is-focusable="true"
12141226
role="slider"
12151227
style="background-color: rgb(0, 128, 255);"
@@ -2389,6 +2401,12 @@ exports[`ColorPicker renders correctly with transparency 1`] = `
23892401
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus {
23902402
outline: 2px solid CanvasText;
23912403
}
2404+
:host(.ms-Fabric--isFocusVisible) &:focus {
2405+
outline: 1px solid #605e5c;
2406+
}
2407+
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus {
2408+
outline: 2px solid CanvasText;
2409+
}
23922410
data-is-focusable="true"
23932411
role="slider"
23942412
style="background-color: rgb(0, 128, 255);"

‎packages/react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1755,6 +1755,13 @@ exports[`ComboBox Renders correctly when opened in multi-select mode 1`] = `
17551755
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus + label::before {
17561756
outline: 1px solid WindowText;
17571757
}
1758+
:host(.ms-Fabric--isFocusVisible) &:focus + label::before {
1759+
outline-offset: 2px;
1760+
outline: 1px solid #605e5c;
1761+
}
1762+
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus + label::before {
1763+
outline: 1px solid WindowText;
1764+
}
17581765
data-index="1"
17591766
data-is-focusable="true"
17601767
data-ktp-execute-target="true"
@@ -1972,6 +1979,13 @@ exports[`ComboBox Renders correctly when opened in multi-select mode 1`] = `
19721979
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus + label::before {
19731980
outline: 1px solid WindowText;
19741981
}
1982+
:host(.ms-Fabric--isFocusVisible) &:focus + label::before {
1983+
outline-offset: 2px;
1984+
outline: 1px solid #605e5c;
1985+
}
1986+
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus + label::before {
1987+
outline: 1px solid WindowText;
1988+
}
19751989
data-index="3"
19761990
data-is-focusable="true"
19771991
data-ktp-execute-target="true"

‎packages/react/src/components/ContextualMenu/__snapshots__/ContextualMenu.test.tsx.snap‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -424,9 +424,18 @@ exports[`ContextualMenu ContextualMenu snapshot ContextualMenu should be present
424424
.ms-Fabric--isFocusVisible &:focus:hover {
425425
background-color: #ffffff;
426426
}
427+
:host(.ms-Fabric--isFocusVisible) &:focus {
428+
background-color: #ffffff;
429+
}
430+
:host(.ms-Fabric--isFocusVisible) &:focus:hover {
431+
background-color: #ffffff;
432+
}
427433
.ms-Fabric--isFocusVisible &:hover {
428434
background: inherit;
429435
}
436+
:host(.ms-Fabric--isFocusVisible) &:hover {
437+
background: inherit;
438+
}
430439
onClick={[Function]}
431440
onKeyDown={[Function]}
432441
onMouseDown={[Function]}

‎packages/react/src/components/DetailsList/__snapshots__/DetailsColumn.test.tsx.snap‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,9 @@ exports[`DetailsColumn renders a sortable icon on an unsorted column when showSo
157157
.ms-Fabric--isFocusVisible &:focus {
158158
opacity: 1;
159159
}
160+
:host(.ms-Fabric--isFocusVisible) &:focus {
161+
opacity: 1;
162+
}
160163
{
161164
-moz-osx-font-smoothing: grayscale;
162165
-webkit-font-smoothing: antialiased;

‎packages/react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,9 @@ exports[`DetailsHeader can render 1`] = `
115115
.ms-Fabric--isFocusVisible &:focus {
116116
opacity: 1;
117117
}
118+
:host(.ms-Fabric--isFocusVisible) &:focus {
119+
opacity: 1;
120+
}
118121
{
119122
-moz-osx-font-smoothing: grayscale;
120123
-webkit-font-smoothing: antialiased;
@@ -1127,6 +1130,9 @@ exports[`DetailsHeader can render a hidden select all checkbox in single selecti
11271130
.ms-Fabric--isFocusVisible &:focus {
11281131
opacity: 1;
11291132
}
1133+
:host(.ms-Fabric--isFocusVisible) &:focus {
1134+
opacity: 1;
1135+
}
11301136
{
11311137
-moz-osx-font-smoothing: grayscale;
11321138
-webkit-font-smoothing: antialiased;
@@ -2005,6 +2011,9 @@ exports[`DetailsHeader renders accessible labels 1`] = `
20052011
.ms-Fabric--isFocusVisible &:focus {
20062012
opacity: 1;
20072013
}
2014+
:host(.ms-Fabric--isFocusVisible) &:focus {
2015+
opacity: 1;
2016+
}
20082017
{
20092018
-moz-osx-font-smoothing: grayscale;
20102019
-webkit-font-smoothing: antialiased;

0 commit comments

Comments
 (0)