Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 953ad8c

Browse files
bedrich-schindlerbedrich-schindler
committedMay 29, 2020
Improve IDs of UI elements (#89)
1 parent 69f02e2 commit 953ad8c

File tree

20 files changed

+118
-56
lines changed

20 files changed

+118
-56
lines changed
 

‎src/lib/components/screens/Login/__tests__/__snapshots__/ForgotPassword.test.jsx.snap

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,10 +68,11 @@ exports[`rendering renders correctly 1`] = `
6868
6969
rootVariantOutline"
7070
htmlFor="resetEmailInput"
71+
id="resetEmailInput__label"
7172
>
7273
<div
7374
className="label"
74-
id="resetEmailInput__label"
75+
id="resetEmailInput__labelText"
7576
>
7677
E-mail
7778
</div>
@@ -216,10 +217,11 @@ exports[`rendering renders correctly 2`] = `
216217
217218
rootVariantOutline"
218219
htmlFor="resetEmailInput"
220+
id="resetEmailInput__label"
219221
>
220222
<div
221223
className="label"
222-
id="resetEmailInput__label"
224+
id="resetEmailInput__labelText"
223225
>
224226
E-mail
225227
</div>
@@ -392,10 +394,11 @@ exports[`rendering renders correctly with all props except translations 1`] = `
392394
393395
rootVariantOutline"
394396
htmlFor="custom-id__resetEmailInput"
397+
id="custom-id__resetEmailInput__label"
395398
>
396399
<div
397400
className="label"
398-
id="custom-id__resetEmailInput__label"
401+
id="custom-id__resetEmailInput__labelText"
399402
>
400403
E-mail
401404
</div>
@@ -457,7 +460,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
457460
>
458461
<span
459462
className="label"
460-
id="custom-id__resetPasswordButton__label"
463+
id="custom-id__resetPasswordButton__labelText"
461464
>
462465
Reset password
463466
</span>

‎src/lib/components/screens/Login/__tests__/__snapshots__/Login.test.jsx.snap

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -70,10 +70,11 @@ exports[`rendering renders correctly 1`] = `
7070
7171
rootVariantOutline"
7272
htmlFor="usernameInput"
73+
id="usernameInput__label"
7374
>
7475
<div
7576
className="label"
76-
id="usernameInput__label"
77+
id="usernameInput__labelText"
7778
>
7879
E-mail
7980
</div>
@@ -132,10 +133,11 @@ exports[`rendering renders correctly 1`] = `
132133
133134
rootVariantOutline"
134135
htmlFor="passwordInput"
136+
id="passwordInput__label"
135137
>
136138
<div
137139
className="label"
138-
id="passwordInput__label"
140+
id="passwordInput__labelText"
139141
>
140142
Password
141143
</div>
@@ -309,10 +311,11 @@ exports[`rendering renders correctly with all props except translations 1`] = `
309311
310312
rootVariantOutline"
311313
htmlFor="custom-id__usernameInput"
314+
id="custom-id__usernameInput__label"
312315
>
313316
<div
314317
className="label"
315-
id="custom-id__usernameInput__label"
318+
id="custom-id__usernameInput__labelText"
316319
>
317320
E-mail
318321
</div>
@@ -371,10 +374,11 @@ exports[`rendering renders correctly with all props except translations 1`] = `
371374
372375
rootVariantOutline"
373376
htmlFor="custom-id__passwordInput"
377+
id="custom-id__passwordInput__label"
374378
>
375379
<div
376380
className="label"
377-
id="custom-id__passwordInput__label"
381+
id="custom-id__passwordInput__labelText"
378382
>
379383
Password
380384
</div>
@@ -436,7 +440,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
436440
>
437441
<span
438442
className="label"
439-
id="custom-id__signInButton__label"
443+
id="custom-id__signInButton__labelText"
440444
>
441445
Sign in
442446
</span>
@@ -537,10 +541,11 @@ exports[`rendering renders correctly with translations 1`] = `
537541
538542
rootVariantOutline"
539543
htmlFor="usernameInput"
544+
id="usernameInput__label"
540545
>
541546
<div
542547
className="label"
543-
id="usernameInput__label"
548+
id="usernameInput__labelText"
544549
>
545550
E-mail
546551
</div>
@@ -599,10 +604,11 @@ exports[`rendering renders correctly with translations 1`] = `
599604
600605
rootVariantOutline"
601606
htmlFor="passwordInput"
607+
id="passwordInput__label"
602608
>
603609
<div
604610
className="label"
605-
id="passwordInput__label"
611+
id="passwordInput__labelText"
606612
>
607613
Heslo
608614
</div>
@@ -745,10 +751,11 @@ exports[`rendering renders correctly with username 1`] = `
745751
746752
rootVariantOutline"
747753
htmlFor="usernameInput"
754+
id="usernameInput__label"
748755
>
749756
<div
750757
className="label"
751-
id="usernameInput__label"
758+
id="usernameInput__labelText"
752759
>
753760
Username
754761
</div>
@@ -807,10 +814,11 @@ exports[`rendering renders correctly with username 1`] = `
807814
808815
rootVariantOutline"
809816
htmlFor="passwordInput"
817+
id="passwordInput__label"
810818
>
811819
<div
812820
className="label"
813-
id="passwordInput__label"
821+
id="passwordInput__labelText"
814822
>
815823
Password
816824
</div>

‎src/lib/components/screens/Login/__tests__/__snapshots__/NewPassword.test.jsx.snap

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -68,10 +68,11 @@ exports[`rendering renders correctly 1`] = `
6868
6969
rootVariantOutline"
7070
htmlFor="newPasswordInput"
71+
id="newPasswordInput__label"
7172
>
7273
<div
7374
className="label"
74-
id="newPasswordInput__label"
75+
id="newPasswordInput__labelText"
7576
>
7677
New password
7778
</div>
@@ -130,10 +131,11 @@ exports[`rendering renders correctly 1`] = `
130131
131132
rootVariantOutline"
132133
htmlFor="newPasswordRepeatInput"
134+
id="newPasswordRepeatInput__label"
133135
>
134136
<div
135137
className="label"
136-
id="newPasswordRepeatInput__label"
138+
id="newPasswordRepeatInput__labelText"
137139
>
138140
Repeat new password
139141
</div>
@@ -305,10 +307,11 @@ exports[`rendering renders correctly with all props except translations 1`] = `
305307
306308
rootVariantOutline"
307309
htmlFor="custom-id__newPasswordInput"
310+
id="custom-id__newPasswordInput__label"
308311
>
309312
<div
310313
className="label"
311-
id="custom-id__newPasswordInput__label"
314+
id="custom-id__newPasswordInput__labelText"
312315
>
313316
New password
314317
</div>
@@ -367,10 +370,11 @@ exports[`rendering renders correctly with all props except translations 1`] = `
367370
368371
rootVariantOutline"
369372
htmlFor="custom-id__newPasswordRepeatInput"
373+
id="custom-id__newPasswordRepeatInput__label"
370374
>
371375
<div
372376
className="label"
373-
id="custom-id__newPasswordRepeatInput__label"
377+
id="custom-id__newPasswordRepeatInput__labelText"
374378
>
375379
Repeat new password
376380
</div>
@@ -432,7 +436,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
432436
>
433437
<span
434438
className="label"
435-
id="custom-id__changePasswordButton__label"
439+
id="custom-id__changePasswordButton__labelText"
436440
>
437441
Change password
438442
</span>
@@ -530,10 +534,11 @@ exports[`rendering renders correctly with translations 1`] = `
530534
531535
rootVariantOutline"
532536
htmlFor="newPasswordInput"
537+
id="newPasswordInput__label"
533538
>
534539
<div
535540
className="label"
536-
id="newPasswordInput__label"
541+
id="newPasswordInput__labelText"
537542
>
538543
Nové heslo
539544
</div>
@@ -592,10 +597,11 @@ exports[`rendering renders correctly with translations 1`] = `
592597
593598
rootVariantOutline"
594599
htmlFor="newPasswordRepeatInput"
600+
id="newPasswordRepeatInput__label"
595601
>
596602
<div
597603
className="label"
598-
id="newPasswordRepeatInput__label"
604+
id="newPasswordRepeatInput__labelText"
599605
>
600606
Nové heslo znovu
601607
</div>

‎src/lib/components/ui/Button/Button.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export const Button = (props) => {
8686
)}
8787
<span
8888
className={styles.label}
89-
{...(props.id && { id: `${props.id}__label` })}
89+
{...(props.id && { id: `${props.id}__labelText` })}
9090
>
9191
{props.label}
9292
</span>

‎src/lib/components/ui/Button/tests/__snapshots__/Button.test.jsx.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ exports[`rendering renders correctly with all props 1`] = `
150150
</span>
151151
<span
152152
className="label"
153-
id="custom-id__label"
153+
id="custom-id__labelText"
154154
>
155155
button
156156
</span>

‎src/lib/components/ui/CheckboxField/CheckboxField.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export const CheckboxField = (props) => {
4646
${labelPositionClass}
4747
`).trim()}
4848
htmlFor={props.id}
49+
id={`${props.id}__label`}
4950
>
5051
<input
5152
{...propsToTransfer}
@@ -65,7 +66,7 @@ export const CheckboxField = (props) => {
6566
${styles.labelInner}
6667
${labelVisibilityClass}
6768
`).trim()}
68-
id={`${props.id}__label`}
69+
id={`${props.id}__labelText`}
6970
>
7071
{props.label}
7172
</span>

‎src/lib/components/ui/CheckboxField/tests/__snapshots__/CheckboxField.test.jsx.snap

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ exports[`rendering renders correctly mandatory props only 1`] = `
88
className="inputWrap
99
labelPositionAfter"
1010
htmlFor="test"
11+
id="test__label"
1112
>
1213
<input
1314
checked={false}
@@ -23,7 +24,7 @@ exports[`rendering renders correctly mandatory props only 1`] = `
2324
>
2425
<span
2526
className="labelInner"
26-
id="test__label"
27+
id="test__labelText"
2728
>
2829
label
2930
</span>
@@ -41,6 +42,7 @@ exports[`rendering renders correctly with all props 1`] = `
4142
className="inputWrap
4243
labelPositionAfter"
4344
htmlFor="test"
45+
id="test__label"
4446
>
4547
<input
4648
checked={true}
@@ -57,7 +59,7 @@ exports[`rendering renders correctly with all props 1`] = `
5759
>
5860
<span
5961
className="labelInner"
60-
id="test__label"
62+
id="test__labelText"
6163
>
6264
label
6365
</span>

‎src/lib/components/ui/Modal/__tests__/__snapshots__/Modal.test.jsx.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
155155
>
156156
<span
157157
className="label"
158-
id="custom-id__closeModalFooterButton__label"
158+
id="custom-id__closeModalFooterButton__labelText"
159159
>
160160
Close
161161
</span>
@@ -346,7 +346,7 @@ exports[`rendering renders correctly with all props except translations and with
346346
>
347347
<span
348348
className="label"
349-
id="custom-id__closeModalFooterButton__label"
349+
id="custom-id__closeModalFooterButton__labelText"
350350
>
351351
Close
352352
</span>

‎src/lib/components/ui/MultipleSelectField/MultipleSelectField.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,13 +71,14 @@ export const MultipleSelectField = (props) => {
7171
${rootVariantClass}
7272
`).trim()}
7373
htmlFor={props.id}
74+
id={`${props.id}__label`}
7475
>
7576
<div
7677
className={(`
7778
${styles.label}
7879
${labelVisibilityClass}
7980
`).trim()}
80-
id={`${props.id}__label`}
81+
id={`${props.id}__labelText`}
8182
>
8283
{props.label}
8384
</div>

‎src/lib/components/ui/MultipleSelectField/tests/__snapshots__/MultipleSelectField.test.jsx.snap

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@ exports[`rendering renders correctly mandatory props only 1`] = `
1010
1111
rootVariantOutline"
1212
htmlFor="test"
13+
id="test__label"
1314
>
1415
<div
1516
className="label"
16-
id="test__label"
17+
id="test__labelText"
1718
>
1819
label
1920
</div>
@@ -58,10 +59,11 @@ exports[`rendering renders correctly only one option 1`] = `
5859
5960
rootVariantOutline"
6061
htmlFor="test"
62+
id="test__label"
6163
>
6264
<div
6365
className="label"
64-
id="test__label"
66+
id="test__labelText"
6567
>
6668
label
6769
</div>
@@ -99,11 +101,12 @@ exports[`rendering renders correctly with all props 1`] = `
99101
isRootStateInvalid
100102
rootVariantFilled"
101103
htmlFor="test"
104+
id="test__label"
102105
>
103106
<div
104107
className="label
105108
isLabelHidden"
106-
id="test__label"
109+
id="test__labelText"
107110
>
108111
label
109112
</div>
@@ -162,10 +165,11 @@ exports[`rendering renders correctly with one selected option 1`] = `
162165
163166
rootVariantOutline"
164167
htmlFor="test"
168+
id="test__label"
165169
>
166170
<div
167171
className="label"
168-
id="test__label"
172+
id="test__labelText"
169173
>
170174
label
171175
</div>
@@ -214,10 +218,11 @@ exports[`rendering renders correctly with two selected options 1`] = `
214218
215219
rootVariantOutline"
216220
htmlFor="test"
221+
id="test__label"
217222
>
218223
<div
219224
className="label"
220-
id="test__label"
225+
id="test__labelText"
221226
>
222227
label
223228
</div>

‎src/lib/components/ui/Radio/Radio.jsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const Radio = (props) => {
3838
>
3939
<div
4040
className={labelClass}
41-
id={`${props.id}__label`}
41+
id={`${props.id}__labelText`}
4242
>
4343
{props.label}
4444
</div>
@@ -48,7 +48,10 @@ const Radio = (props) => {
4848
<li key={option.value}>
4949
{ /* Rule is deprecated: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-for.md */ }
5050
{ /* eslint-disable-next-line jsx-a11y/label-has-associated-control */ }
51-
<label className={styles.inputWrap}>
51+
<label
52+
className={styles.inputWrap}
53+
id={`${props.id}__item__${option.value}__label`}
54+
>
5255
<input
5356
{...propsToTransfer}
5457
id={`${props.id}__item__${option.value}`}
@@ -60,7 +63,10 @@ const Radio = (props) => {
6063
disabled={props.disabled || option.disabled}
6164
checked={(props.value === option.value) || false}
6265
/>
63-
<span className={styles.radioLabel}>
66+
<span
67+
className={styles.radioLabel}
68+
id={`${props.id}__item__${option.value}__labelText`}
69+
>
6470
{ option.label }
6571
</span>
6672
</label>

‎src/lib/components/ui/Radio/tests/__snapshots__/Radio.test.jsx.snap

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ exports[`rendering renders correctly mandatory props only 1`] = `
66
>
77
<div
88
className="label"
9-
id="test__label"
9+
id="test__labelText"
1010
>
1111
label
1212
</div>
@@ -18,6 +18,7 @@ exports[`rendering renders correctly mandatory props only 1`] = `
1818
>
1919
<label
2020
className="inputWrap"
21+
id="test__item__ch1__label"
2122
>
2223
<input
2324
checked={false}
@@ -30,6 +31,7 @@ exports[`rendering renders correctly mandatory props only 1`] = `
3031
/>
3132
<span
3233
className="radioLabel"
34+
id="test__item__ch1__labelText"
3335
>
3436
choice 1
3537
</span>
@@ -40,6 +42,7 @@ exports[`rendering renders correctly mandatory props only 1`] = `
4042
>
4143
<label
4244
className="inputWrap"
45+
id="test__item__ch2__label"
4346
>
4447
<input
4548
checked={false}
@@ -52,6 +55,7 @@ exports[`rendering renders correctly mandatory props only 1`] = `
5255
/>
5356
<span
5457
className="radioLabel"
58+
id="test__item__ch2__labelText"
5559
>
5660
choice 2
5761
</span>
@@ -67,7 +71,7 @@ exports[`rendering renders correctly only one option 1`] = `
6771
>
6872
<div
6973
className="label"
70-
id="test__label"
74+
id="test__labelText"
7175
>
7276
label
7377
</div>
@@ -79,6 +83,7 @@ exports[`rendering renders correctly only one option 1`] = `
7983
>
8084
<label
8185
className="inputWrap"
86+
id="test__item__ch1__label"
8287
>
8388
<input
8489
checked={false}
@@ -91,6 +96,7 @@ exports[`rendering renders correctly only one option 1`] = `
9196
/>
9297
<span
9398
className="radioLabel"
99+
id="test__item__ch1__labelText"
94100
>
95101
choice 1
96102
</span>
@@ -106,7 +112,7 @@ exports[`rendering renders correctly only one option and hidden label 1`] = `
106112
>
107113
<div
108114
className="isLabelHidden"
109-
id="test__label"
115+
id="test__labelText"
110116
>
111117
label
112118
</div>
@@ -118,6 +124,7 @@ exports[`rendering renders correctly only one option and hidden label 1`] = `
118124
>
119125
<label
120126
className="inputWrap"
127+
id="test__item__ch1__label"
121128
>
122129
<input
123130
checked={false}
@@ -130,6 +137,7 @@ exports[`rendering renders correctly only one option and hidden label 1`] = `
130137
/>
131138
<span
132139
className="radioLabel"
140+
id="test__item__ch1__labelText"
133141
>
134142
choice 1
135143
</span>
@@ -146,7 +154,7 @@ exports[`rendering renders correctly with all props 1`] = `
146154
>
147155
<div
148156
className="isLabelRequired"
149-
id="test__label"
157+
id="test__labelText"
150158
>
151159
label
152160
</div>
@@ -158,6 +166,7 @@ exports[`rendering renders correctly with all props 1`] = `
158166
>
159167
<label
160168
className="inputWrap"
169+
id="test__item__ch1__label"
161170
>
162171
<input
163172
checked={true}
@@ -171,6 +180,7 @@ exports[`rendering renders correctly with all props 1`] = `
171180
/>
172181
<span
173182
className="radioLabel"
183+
id="test__item__ch1__labelText"
174184
>
175185
choice 1
176186
</span>
@@ -181,6 +191,7 @@ exports[`rendering renders correctly with all props 1`] = `
181191
>
182192
<label
183193
className="inputWrap"
194+
id="test__item__ch2__label"
184195
>
185196
<input
186197
checked={false}
@@ -194,6 +205,7 @@ exports[`rendering renders correctly with all props 1`] = `
194205
/>
195206
<span
196207
className="radioLabel"
208+
id="test__item__ch2__labelText"
197209
>
198210
choice 2
199211
</span>

‎src/lib/components/ui/SelectField/SelectField.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,13 +71,14 @@ export const SelectField = (props) => {
7171
${rootVariantClass}
7272
`).trim()}
7373
htmlFor={props.id}
74+
id={`${props.id}__label`}
7475
>
7576
<div
7677
className={(`
7778
${styles.label}
7879
${labelVisibilityClass}
7980
`).trim()}
80-
id={`${props.id}__label`}
81+
id={`${props.id}__labelText`}
8182
>
8283
{props.label}
8384
</div>

‎src/lib/components/ui/SelectField/tests/__snapshots__/SelectField.test.jsx.snap

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@ exports[`rendering renders correctly mandatory props only 1`] = `
1010
1111
rootVariantOutline"
1212
htmlFor="test"
13+
id="test__label"
1314
>
1415
<div
1516
className="label"
16-
id="test__label"
17+
id="test__labelText"
1718
>
1819
label
1920
</div>
@@ -63,10 +64,11 @@ exports[`rendering renders correctly only one option 1`] = `
6364
6465
rootVariantOutline"
6566
htmlFor="test"
67+
id="test__label"
6668
>
6769
<div
6870
className="label"
69-
id="test__label"
71+
id="test__labelText"
7072
>
7173
label
7274
</div>
@@ -109,11 +111,12 @@ exports[`rendering renders correctly with all props 1`] = `
109111
isRootStateInvalid
110112
rootVariantFilled"
111113
htmlFor="test"
114+
id="test__label"
112115
>
113116
<div
114117
className="label
115118
isLabelHidden"
116-
id="test__label"
119+
id="test__labelText"
117120
>
118121
label
119122
</div>

‎src/lib/components/ui/TextArea/TextArea.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,13 +71,14 @@ export const TextArea = (props) => {
7171
${rootVariantClass}
7272
`).trim()}
7373
htmlFor={props.id}
74+
id={`${props.id}__label`}
7475
>
7576
<div
7677
className={(`
7778
${styles.label}
7879
${labelVisibilityClass}
7980
`).trim()}
80-
id={`${props.id}__label`}
81+
id={`${props.id}__labelText`}
8182
>
8283
{props.label}
8384
</div>

‎src/lib/components/ui/TextArea/tests/__snapshots__/TextArea.test.jsx.snap

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@ exports[`rendering renders correctly mandatory props only 1`] = `
1010
1111
rootVariantOutline"
1212
htmlFor="test"
13+
id="test__label"
1314
>
1415
<div
1516
className="label"
16-
id="test__label"
17+
id="test__labelText"
1718
>
1819
label
1920
</div>
@@ -44,11 +45,12 @@ exports[`rendering renders correctly with all props 1`] = `
4445
isRootStateInvalid
4546
rootVariantFilled"
4647
htmlFor="test"
48+
id="test__label"
4749
>
4850
<div
4951
className="label
5052
isLabelHidden"
51-
id="test__label"
53+
id="test__labelText"
5254
>
5355
label
5456
</div>
@@ -89,11 +91,12 @@ exports[`rendering renders correctly with hidden label 1`] = `
8991
9092
rootVariantOutline"
9193
htmlFor="test"
94+
id="test__label"
9295
>
9396
<div
9497
className="label
9598
isLabelHidden"
96-
id="test__label"
99+
id="test__labelText"
97100
>
98101
label
99102
</div>

‎src/lib/components/ui/TextField/TextField.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,13 +71,14 @@ export const TextField = (props) => {
7171
${rootVariantClass}
7272
`).trim()}
7373
htmlFor={props.id}
74+
id={`${props.id}__label`}
7475
>
7576
<div
7677
className={(`
7778
${styles.label}
7879
${labelVisibilityClass}
7980
`).trim()}
80-
id={`${props.id}__label`}
81+
id={`${props.id}__labelText`}
8182
>
8283
{props.label}
8384
</div>

‎src/lib/components/ui/TextField/__tests__/__snapshots__/TextField.test.jsx.snap

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@ exports[`rendering renders correctly mandatory props only 1`] = `
1010
1111
rootVariantOutline"
1212
htmlFor="test"
13+
id="test__label"
1314
>
1415
<div
1516
className="label"
16-
id="test__label"
17+
id="test__labelText"
1718
>
1819
label
1920
</div>
@@ -44,11 +45,12 @@ exports[`rendering renders correctly with all props 1`] = `
4445
isRootStateInvalid
4546
rootVariantFilled"
4647
htmlFor="test"
48+
id="test__label"
4749
>
4850
<div
4951
className="label
5052
isLabelHidden"
51-
id="test__label"
53+
id="test__labelText"
5254
>
5355
label
5456
</div>
@@ -89,11 +91,12 @@ exports[`rendering renders correctly with hidden label 1`] = `
8991
9092
rootVariantOutline"
9193
htmlFor="test"
94+
id="test__label"
9295
>
9396
<div
9497
className="label
9598
isLabelHidden"
96-
id="test__label"
99+
id="test__labelText"
97100
>
98101
label
99102
</div>

‎src/lib/components/ui/Toggle/Toggle.jsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,11 @@ export const Toggle = (props) => {
4141
${rootValidationStateClass}
4242
`).trim()}
4343
>
44-
<label htmlFor={props.id} className={styles.inputWrap}>
44+
<label
45+
className={styles.inputWrap}
46+
htmlFor={props.id}
47+
id={`${props.id}__label`}
48+
>
4549
<input
4650
{...propsToTransfer}
4751
id={props.id}
@@ -61,7 +65,7 @@ export const Toggle = (props) => {
6165
${styles.labelInner}
6266
${labelVisibilityClass}
6367
`).trim()}
64-
id={`${props.id}__label`}
68+
id={`${props.id}__labelText`}
6569
>
6670
{props.label}
6771
</span>

‎src/lib/components/ui/Toggle/tests/__snapshots__/Toggle.test.jsx.snap

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ exports[`rendering renders correctly mandatory props only 1`] = `
88
<label
99
className="inputWrap"
1010
htmlFor="test"
11+
id="test__label"
1112
>
1213
<input
1314
checked={false}
@@ -24,7 +25,7 @@ exports[`rendering renders correctly mandatory props only 1`] = `
2425
>
2526
<span
2627
className="labelInner"
27-
id="test__label"
28+
id="test__labelText"
2829
>
2930
label
3031
</span>
@@ -45,6 +46,7 @@ exports[`rendering renders correctly with all props 1`] = `
4546
<label
4647
className="inputWrap"
4748
htmlFor="test"
49+
id="test__label"
4850
>
4951
<input
5052
checked={true}
@@ -62,7 +64,7 @@ exports[`rendering renders correctly with all props 1`] = `
6264
>
6365
<span
6466
className="labelInner"
65-
id="test__label"
67+
id="test__labelText"
6668
>
6769
label
6870
</span>

0 commit comments

Comments
 (0)
Please sign in to comment.