Skip to content

Commit 7c2de02

Browse files
joshblackjoshblack
authored
fix(Spinner): update visually hidden container to span (#4689)
* fix(Spinner): update visually hidden container to span * chore: update snpashots --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
1 parent 0cf08f3 commit 7c2de02

File tree

4 files changed

+87
-83
lines changed

4 files changed

+87
-83
lines changed

‎packages/react/src/Spinner/Spinner.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,11 @@ function Spinner({size: sizeKey = 'medium', srText = 'Loading', 'aria-label': ar
5757
vectorEffect="non-scaling-stroke"
5858
/>
5959
</svg>
60-
{hasHiddenLabel ? <VisuallyHidden id={labelId}>{srText}</VisuallyHidden> : null}
60+
{hasHiddenLabel ? (
61+
<VisuallyHidden as="span" id={labelId}>
62+
{srText}
63+
</VisuallyHidden>
64+
) : null}
6165
</Box>
6266
)
6367
}

‎packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -402,12 +402,12 @@ exports[`snapshots renders a loading state 1`] = `
402402
vectorEffect="non-scaling-stroke"
403403
/>
404404
</svg>
405-
<div
405+
<span
406406
className="c4"
407407
id=":r1v:"
408408
>
409409
Loading
410-
</div>
410+
</span>
411411
</div>
412412
</div>
413413
</span>,

‎packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -4128,12 +4128,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
41284128
vectorEffect="non-scaling-stroke"
41294129
/>
41304130
</svg>
4131-
<div
4131+
<span
41324132
className="c6"
41334133
id=":rn:"
41344134
>
41354135
Loading
4136-
</div>
4136+
</span>
41374137
</div>
41384138
</div>
41394139
</span>
@@ -4342,12 +4342,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
43424342
vectorEffect="non-scaling-stroke"
43434343
/>
43444344
</svg>
4345-
<div
4345+
<span
43464346
className="c5"
43474347
id=":ro:"
43484348
>
43494349
Loading
4350-
</div>
4350+
</span>
43514351
</div>
43524352
</div>
43534353
</span>
@@ -4399,12 +4399,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
43994399
vectorEffect="non-scaling-stroke"
44004400
/>
44014401
</svg>
4402-
<div
4402+
<span
44034403
className="c5"
44044404
id=":rp:"
44054405
>
44064406
Loading
4407-
</div>
4407+
</span>
44084408
</div>
44094409
</div>
44104410
</span>
@@ -4614,12 +4614,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
46144614
vectorEffect="non-scaling-stroke"
46154615
/>
46164616
</svg>
4617-
<div
4617+
<span
46184618
className="c6"
46194619
id=":rq:"
46204620
>
46214621
Loading
4622-
</div>
4622+
</span>
46234623
</div>
46244624
</div>
46254625
</span>
@@ -4867,12 +4867,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
48674867
vectorEffect="non-scaling-stroke"
48684868
/>
48694869
</svg>
4870-
<div
4870+
<span
48714871
className="c6"
48724872
id=":rr:"
48734873
>
48744874
Loading
4875-
</div>
4875+
</span>
48764876
</div>
48774877
</div>
48784878
</span>
@@ -4924,12 +4924,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
49244924
vectorEffect="non-scaling-stroke"
49254925
/>
49264926
</svg>
4927-
<div
4927+
<span
49284928
className="c6"
49294929
id=":rs:"
49304930
>
49314931
Loading
4932-
</div>
4932+
</span>
49334933
</div>
49344934
</div>
49354935
</span>
@@ -5177,12 +5177,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
51775177
vectorEffect="non-scaling-stroke"
51785178
/>
51795179
</svg>
5180-
<div
5180+
<span
51815181
className="c6"
51825182
id=":rt:"
51835183
>
51845184
Loading
5185-
</div>
5185+
</span>
51865186
</div>
51875187
</div>
51885188
</span>
@@ -5234,12 +5234,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
52345234
vectorEffect="non-scaling-stroke"
52355235
/>
52365236
</svg>
5237-
<div
5237+
<span
52385238
className="c6"
52395239
id=":ru:"
52405240
>
52415241
Loading
5242-
</div>
5242+
</span>
52435243
</div>
52445244
</div>
52455245
</span>
@@ -5487,12 +5487,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
54875487
vectorEffect="non-scaling-stroke"
54885488
/>
54895489
</svg>
5490-
<div
5490+
<span
54915491
className="c6"
54925492
id=":rv:"
54935493
>
54945494
Loading
5495-
</div>
5495+
</span>
54965496
</div>
54975497
</div>
54985498
</span>
@@ -5544,12 +5544,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
55445544
vectorEffect="non-scaling-stroke"
55455545
/>
55465546
</svg>
5547-
<div
5547+
<span
55485548
className="c6"
55495549
id=":r10:"
55505550
>
55515551
Loading
5552-
</div>
5552+
</span>
55535553
</div>
55545554
</div>
55555555
</span>
@@ -5798,12 +5798,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
57985798
vectorEffect="non-scaling-stroke"
57995799
/>
58005800
</svg>
5801-
<div
5801+
<span
58025802
className="c7"
58035803
id=":r11:"
58045804
>
58055805
Loading
5806-
</div>
5806+
</span>
58075807
</div>
58085808
</div>
58095809
</span>
@@ -6021,12 +6021,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
60216021
vectorEffect="non-scaling-stroke"
60226022
/>
60236023
</svg>
6024-
<div
6024+
<span
60256025
className="c5"
60266026
id=":r12:"
60276027
>
60286028
Loading
6029-
</div>
6029+
</span>
60306030
</div>
60316031
</div>
60326032
</span>
@@ -6108,12 +6108,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
61086108
vectorEffect="non-scaling-stroke"
61096109
/>
61106110
</svg>
6111-
<div
6111+
<span
61126112
className="c5"
61136113
id=":r13:"
61146114
>
61156115
Loading
6116-
</div>
6116+
</span>
61176117
</div>
61186118
</div>
61196119
</span>
@@ -6362,12 +6362,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
63626362
vectorEffect="non-scaling-stroke"
63636363
/>
63646364
</svg>
6365-
<div
6365+
<span
63666366
className="c7"
63676367
id=":r14:"
63686368
>
63696369
Loading
6370-
</div>
6370+
</span>
63716371
</div>
63726372
</div>
63736373
</span>
@@ -6633,12 +6633,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
66336633
vectorEffect="non-scaling-stroke"
66346634
/>
66356635
</svg>
6636-
<div
6636+
<span
66376637
className="c6"
66386638
id=":r15:"
66396639
>
66406640
Loading
6641-
</div>
6641+
</span>
66426642
</div>
66436643
</div>
66446644
</span>
@@ -6720,12 +6720,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
67206720
vectorEffect="non-scaling-stroke"
67216721
/>
67226722
</svg>
6723-
<div
6723+
<span
67246724
className="c6"
67256725
id=":r16:"
67266726
>
67276727
Loading
6728-
</div>
6728+
</span>
67296729
</div>
67306730
</div>
67316731
</span>
@@ -6982,12 +6982,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
69826982
vectorEffect="non-scaling-stroke"
69836983
/>
69846984
</svg>
6985-
<div
6985+
<span
69866986
className="c6"
69876987
id=":r17:"
69886988
>
69896989
Loading
6990-
</div>
6990+
</span>
69916991
</div>
69926992
</div>
69936993
</span>
@@ -7069,12 +7069,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
70697069
vectorEffect="non-scaling-stroke"
70707070
/>
70717071
</svg>
7072-
<div
7072+
<span
70737073
className="c6"
70747074
id=":r18:"
70757075
>
70767076
Loading
7077-
</div>
7077+
</span>
70787078
</div>
70797079
</div>
70807080
</span>
@@ -7338,12 +7338,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
73387338
vectorEffect="non-scaling-stroke"
73397339
/>
73407340
</svg>
7341-
<div
7341+
<span
73427342
className="c6"
73437343
id=":r19:"
73447344
>
73457345
Loading
7346-
</div>
7346+
</span>
73477347
</div>
73487348
</div>
73497349
</span>
@@ -7425,12 +7425,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
74257425
vectorEffect="non-scaling-stroke"
74267426
/>
74277427
</svg>
7428-
<div
7428+
<span
74297429
className="c6"
74307430
id=":r1a:"
74317431
>
74327432
Loading
7433-
</div>
7433+
</span>
74347434
</div>
74357435
</div>
74367436
</span>

0 commit comments

Comments
 (0)