@khanacademy/perseus 0.4.3 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/.eslintrc.js +6 -1
  2. package/CHANGELOG.md +34 -0
  3. package/dist/es/index.js +1078 -1299
  4. package/dist/es/index.js.map +1 -1
  5. package/dist/index.js +1077 -1304
  6. package/dist/index.js.map +1 -1
  7. package/dist/strings.js +0 -4
  8. package/package.json +9 -8
  9. package/src/multi-items/__tests__/__snapshots__/multi-renderer_test.js.snap +110 -110
  10. package/src/perseus-api.jsx +10 -36
  11. package/src/perseus-types.js +0 -138
  12. package/src/styles/constants.js +0 -2
  13. package/src/styles/variables.less +0 -2
  14. package/src/types.js +18 -35
  15. package/src/util.js +0 -6
  16. package/src/version.js +1 -1
  17. package/src/widgets/__testdata__/base-radio_testdata.js +22 -0
  18. package/src/widgets/__tests__/__snapshots__/group_test.jsx.snap +110 -110
  19. package/src/widgets/__tests__/__snapshots__/radio_test.jsx.snap +1136 -1160
  20. package/src/widgets/__tests__/radio/base-radio_test.jsx +243 -41
  21. package/src/widgets/__tests__/radio/choice-icon_test.jsx +67 -0
  22. package/src/widgets/__tests__/radio/choice_test.jsx +201 -0
  23. package/src/widgets/__tests__/radio/focus-ring_test.jsx +23 -0
  24. package/src/widgets/__tests__/radio/option-status_test.jsx +65 -0
  25. package/src/widgets/passage/__tests__/passage-markdown_test.jsx +0 -9
  26. package/src/widgets/passage/get-line-height-for-node.js +4 -5
  27. package/src/widgets/passage/passage-markdown.jsx +176 -120
  28. package/src/widgets/passage.jsx +48 -46
  29. package/src/widgets/radio/__stories__/base-radio.stories.jsx +164 -17
  30. package/src/widgets/radio/__stories__/choice-icon.stories.jsx +202 -111
  31. package/src/widgets/radio/__stories__/choice-none-above.stories.jsx +21 -6
  32. package/src/widgets/radio/__stories__/choice.stories.jsx +138 -0
  33. package/src/widgets/radio/__stories__/focus-ring.stories.jsx +29 -23
  34. package/src/widgets/radio/__stories__/option-status.stories.jsx +93 -99
  35. package/src/widgets/radio/base-radio.jsx +483 -556
  36. package/src/widgets/radio/choice-icon/choice-icon.jsx +155 -0
  37. package/src/widgets/radio/choice-icon/cross-out-line.jsx +55 -0
  38. package/src/widgets/radio/choice-icon/library-choice-icon.jsx +219 -0
  39. package/src/widgets/radio/choice-icon/sat-choice-icon.jsx +129 -0
  40. package/src/widgets/radio/choice-icon/shared-styles.js +17 -0
  41. package/src/widgets/radio/choice-none-above.jsx +49 -40
  42. package/src/widgets/radio/choice.jsx +282 -353
  43. package/src/widgets/radio/choice.jsx.fixture.js +0 -18
  44. package/src/widgets/radio/focus-ring.jsx +29 -22
  45. package/src/widgets/radio/option-status.jsx +58 -36
  46. package/src/widgets/radio/widget.jsx +181 -136
  47. package/src/widgets/radio.jsx +16 -17
  48. package/src/widgets/radio/__stories__/cross-out-button.stories.jsx +0 -64
  49. package/src/widgets/radio/choice-icon.jsx +0 -469
  50. package/src/widgets/radio/cross-out-button.jsx +0 -134
@@ -83,33 +83,33 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
83
83
  <div
84
84
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
85
85
  >
86
- <span>
87
- <div
88
- class="iconWrapper_17y0hv9"
86
+ <div
87
+ class="iconWrapper_17y0hv9"
88
+ >
89
+ <span
90
+ class="ring_ya75gi"
91
+ data-test-id="focus-ring"
92
+ style="border-color: #1865f2; border-radius: 5px;"
89
93
  >
90
- <span
91
- class="ring_en36io"
92
- style="border-color: transparent;"
94
+ <div
95
+ class="circle_1tys2th"
96
+ data-is-radio-icon="true"
97
+ data-test-id="choice-icon__library-choice-icon"
98
+ style="border-color: #1865f2; color: rgb(255, 255, 255); border-radius: 3px; background-color: rgb(24, 101, 242);"
93
99
  >
94
100
  <div
95
- class="libraryCircle_1ytyy5d"
96
- data-is-radio-icon="true"
97
- style="border-color: #1865f2; color: rgb(255, 255, 255); background-color: rgb(24, 101, 242);"
101
+ class="perseus-sr-only"
98
102
  >
99
- <div
100
- class="perseus-sr-only"
101
- >
102
- (Choice A, Checked)
103
- </div>
104
- <div
105
- aria-hidden="true"
106
- >
107
- A
108
- </div>
103
+ (Choice A, Checked)
109
104
  </div>
110
- </span>
111
- </div>
112
- </span>
105
+ <div
106
+ aria-hidden="true"
107
+ >
108
+ A
109
+ </div>
110
+ </div>
111
+ </span>
112
+ </div>
113
113
  <span
114
114
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
115
115
  >
@@ -170,33 +170,33 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
170
170
  <div
171
171
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
172
172
  >
173
- <span>
174
- <div
175
- class="iconWrapper_17y0hv9"
173
+ <div
174
+ class="iconWrapper_17y0hv9"
175
+ >
176
+ <span
177
+ class="ring_ya75gi"
178
+ data-test-id="focus-ring"
179
+ style="border-color: transparent; border-radius: 5px;"
176
180
  >
177
- <span
178
- class="ring_en36io"
179
- style="border-color: transparent;"
181
+ <div
182
+ class="circle_1tys2th"
183
+ data-is-radio-icon="true"
184
+ data-test-id="choice-icon__library-choice-icon"
185
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 3px;"
180
186
  >
181
187
  <div
182
- class="libraryCircle_1ytyy5d"
183
- data-is-radio-icon="true"
184
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
188
+ class="perseus-sr-only"
185
189
  >
186
- <div
187
- class="perseus-sr-only"
188
- >
189
- (Choice B)
190
- </div>
191
- <div
192
- aria-hidden="true"
193
- >
194
- B
195
- </div>
190
+ (Choice B)
196
191
  </div>
197
- </span>
198
- </div>
199
- </span>
192
+ <div
193
+ aria-hidden="true"
194
+ >
195
+ B
196
+ </div>
197
+ </div>
198
+ </span>
199
+ </div>
200
200
  <span
201
201
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
202
202
  >
@@ -257,33 +257,33 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
257
257
  <div
258
258
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
259
259
  >
260
- <span>
261
- <div
262
- class="iconWrapper_17y0hv9"
260
+ <div
261
+ class="iconWrapper_17y0hv9"
262
+ >
263
+ <span
264
+ class="ring_ya75gi"
265
+ data-test-id="focus-ring"
266
+ style="border-color: transparent; border-radius: 5px;"
263
267
  >
264
- <span
265
- class="ring_en36io"
266
- style="border-color: transparent;"
268
+ <div
269
+ class="circle_1tys2th"
270
+ data-is-radio-icon="true"
271
+ data-test-id="choice-icon__library-choice-icon"
272
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 3px;"
267
273
  >
268
274
  <div
269
- class="libraryCircle_1ytyy5d"
270
- data-is-radio-icon="true"
271
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
275
+ class="perseus-sr-only"
272
276
  >
273
- <div
274
- class="perseus-sr-only"
275
- >
276
- (Choice C)
277
- </div>
278
- <div
279
- aria-hidden="true"
280
- >
281
- C
282
- </div>
277
+ (Choice C)
283
278
  </div>
284
- </span>
285
- </div>
286
- </span>
279
+ <div
280
+ aria-hidden="true"
281
+ >
282
+ C
283
+ </div>
284
+ </div>
285
+ </span>
286
+ </div>
287
287
  <span
288
288
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
289
289
  >
@@ -344,33 +344,33 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
344
344
  <div
345
345
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
346
346
  >
347
- <span>
348
- <div
349
- class="iconWrapper_17y0hv9"
347
+ <div
348
+ class="iconWrapper_17y0hv9"
349
+ >
350
+ <span
351
+ class="ring_ya75gi"
352
+ data-test-id="focus-ring"
353
+ style="border-color: transparent; border-radius: 5px;"
350
354
  >
351
- <span
352
- class="ring_en36io"
353
- style="border-color: transparent;"
355
+ <div
356
+ class="circle_1tys2th"
357
+ data-is-radio-icon="true"
358
+ data-test-id="choice-icon__library-choice-icon"
359
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 3px;"
354
360
  >
355
361
  <div
356
- class="libraryCircle_1ytyy5d"
357
- data-is-radio-icon="true"
358
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
362
+ class="perseus-sr-only"
359
363
  >
360
- <div
361
- class="perseus-sr-only"
362
- >
363
- (Choice D)
364
- </div>
365
- <div
366
- aria-hidden="true"
367
- >
368
- D
369
- </div>
364
+ (Choice D)
370
365
  </div>
371
- </span>
372
- </div>
373
- </span>
366
+ <div
367
+ aria-hidden="true"
368
+ >
369
+ D
370
+ </div>
371
+ </div>
372
+ </span>
373
+ </div>
374
374
  <span
375
375
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
376
376
  >
@@ -543,33 +543,33 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
543
543
  <div
544
544
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
545
545
  >
546
- <span>
547
- <div
548
- class="iconWrapper_17y0hv9"
546
+ <div
547
+ class="iconWrapper_17y0hv9"
548
+ >
549
+ <span
550
+ class="ring_ya75gi"
551
+ data-test-id="focus-ring"
552
+ style="border-color: transparent; border-radius: 50%;"
549
553
  >
550
- <span
551
- class="ring_en36io"
552
- style="border-color: transparent;"
554
+ <div
555
+ class="circle_1tys2th"
556
+ data-is-radio-icon="true"
557
+ data-test-id="choice-icon__library-choice-icon"
558
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
553
559
  >
554
560
  <div
555
- class="libraryCircle_1ytyy5d"
556
- data-is-radio-icon="true"
557
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
561
+ class="perseus-sr-only"
558
562
  >
559
- <div
560
- class="perseus-sr-only"
561
- >
562
- (Choice A)
563
- </div>
564
- <div
565
- aria-hidden="true"
566
- >
567
- A
568
- </div>
563
+ (Choice A)
569
564
  </div>
570
- </span>
571
- </div>
572
- </span>
565
+ <div
566
+ aria-hidden="true"
567
+ >
568
+ A
569
+ </div>
570
+ </div>
571
+ </span>
572
+ </div>
573
573
  <span
574
574
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
575
575
  >
@@ -643,33 +643,33 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
643
643
  <div
644
644
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
645
645
  >
646
- <span>
647
- <div
648
- class="iconWrapper_17y0hv9"
646
+ <div
647
+ class="iconWrapper_17y0hv9"
648
+ >
649
+ <span
650
+ class="ring_ya75gi"
651
+ data-test-id="focus-ring"
652
+ style="border-color: transparent; border-radius: 50%;"
649
653
  >
650
- <span
651
- class="ring_en36io"
652
- style="border-color: transparent;"
654
+ <div
655
+ class="circle_1tys2th"
656
+ data-is-radio-icon="true"
657
+ data-test-id="choice-icon__library-choice-icon"
658
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
653
659
  >
654
660
  <div
655
- class="libraryCircle_1ytyy5d"
656
- data-is-radio-icon="true"
657
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
661
+ class="perseus-sr-only"
658
662
  >
659
- <div
660
- class="perseus-sr-only"
661
- >
662
- (Choice B)
663
- </div>
664
- <div
665
- aria-hidden="true"
666
- >
667
- B
668
- </div>
663
+ (Choice B)
669
664
  </div>
670
- </span>
671
- </div>
672
- </span>
665
+ <div
666
+ aria-hidden="true"
667
+ >
668
+ B
669
+ </div>
670
+ </div>
671
+ </span>
672
+ </div>
673
673
  <span
674
674
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
675
675
  >
@@ -730,33 +730,33 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
730
730
  <div
731
731
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
732
732
  >
733
- <span>
734
- <div
735
- class="iconWrapper_17y0hv9"
733
+ <div
734
+ class="iconWrapper_17y0hv9"
735
+ >
736
+ <span
737
+ class="ring_ya75gi"
738
+ data-test-id="focus-ring"
739
+ style="border-color: #1865f2; border-radius: 50%;"
736
740
  >
737
- <span
738
- class="ring_en36io"
739
- style="border-color: transparent;"
741
+ <div
742
+ class="circle_1tys2th"
743
+ data-is-radio-icon="true"
744
+ data-test-id="choice-icon__library-choice-icon"
745
+ style="border-color: #1865f2; color: rgb(255, 255, 255); border-radius: 24px; background-color: rgb(24, 101, 242);"
740
746
  >
741
747
  <div
742
- class="libraryCircle_1ytyy5d"
743
- data-is-radio-icon="true"
744
- style="border-color: #1865f2; color: rgb(255, 255, 255); background-color: rgb(24, 101, 242);"
748
+ class="perseus-sr-only"
745
749
  >
746
- <div
747
- class="perseus-sr-only"
748
- >
749
- (Choice C, Checked)
750
- </div>
751
- <div
752
- aria-hidden="true"
753
- >
754
- C
755
- </div>
750
+ (Choice C, Checked)
756
751
  </div>
757
- </span>
758
- </div>
759
- </span>
752
+ <div
753
+ aria-hidden="true"
754
+ >
755
+ C
756
+ </div>
757
+ </div>
758
+ </span>
759
+ </div>
760
760
  <span
761
761
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
762
762
  >
@@ -817,33 +817,33 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
817
817
  <div
818
818
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
819
819
  >
820
- <span>
821
- <div
822
- class="iconWrapper_17y0hv9"
820
+ <div
821
+ class="iconWrapper_17y0hv9"
822
+ >
823
+ <span
824
+ class="ring_ya75gi"
825
+ data-test-id="focus-ring"
826
+ style="border-color: transparent; border-radius: 50%;"
823
827
  >
824
- <span
825
- class="ring_en36io"
826
- style="border-color: transparent;"
828
+ <div
829
+ class="circle_1tys2th"
830
+ data-is-radio-icon="true"
831
+ data-test-id="choice-icon__library-choice-icon"
832
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
827
833
  >
828
834
  <div
829
- class="libraryCircle_1ytyy5d"
830
- data-is-radio-icon="true"
831
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
835
+ class="perseus-sr-only"
832
836
  >
833
- <div
834
- class="perseus-sr-only"
835
- >
836
- (Choice D)
837
- </div>
838
- <div
839
- aria-hidden="true"
840
- >
841
- D
842
- </div>
837
+ (Choice D)
843
838
  </div>
844
- </span>
845
- </div>
846
- </span>
839
+ <div
840
+ aria-hidden="true"
841
+ >
842
+ D
843
+ </div>
844
+ </div>
845
+ </span>
846
+ </div>
847
847
  <span
848
848
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
849
849
  >
@@ -990,33 +990,33 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
990
990
  <div
991
991
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
992
992
  >
993
- <span>
994
- <div
995
- class="iconWrapper_17y0hv9"
993
+ <div
994
+ class="iconWrapper_17y0hv9"
995
+ >
996
+ <span
997
+ class="ring_ya75gi"
998
+ data-test-id="focus-ring"
999
+ style="border-color: #1865f2; border-radius: 50%;"
996
1000
  >
997
- <span
998
- class="ring_en36io"
999
- style="border-color: transparent;"
1001
+ <div
1002
+ class="circle_1tys2th"
1003
+ data-is-radio-icon="true"
1004
+ data-test-id="choice-icon__library-choice-icon"
1005
+ style="border-color: #1865f2; color: rgb(255, 255, 255); border-radius: 24px; background-color: rgb(24, 101, 242);"
1000
1006
  >
1001
1007
  <div
1002
- class="libraryCircle_1ytyy5d"
1003
- data-is-radio-icon="true"
1004
- style="border-color: #1865f2; color: rgb(255, 255, 255); background-color: rgb(24, 101, 242);"
1008
+ class="perseus-sr-only"
1005
1009
  >
1006
- <div
1007
- class="perseus-sr-only"
1008
- >
1009
- (Choice A, Checked)
1010
- </div>
1011
- <div
1012
- aria-hidden="true"
1013
- >
1014
- A
1015
- </div>
1010
+ (Choice A, Checked)
1016
1011
  </div>
1017
- </span>
1018
- </div>
1019
- </span>
1012
+ <div
1013
+ aria-hidden="true"
1014
+ >
1015
+ A
1016
+ </div>
1017
+ </div>
1018
+ </span>
1019
+ </div>
1020
1020
  <span
1021
1021
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
1022
1022
  >
@@ -1090,33 +1090,33 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1090
1090
  <div
1091
1091
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
1092
1092
  >
1093
- <span>
1094
- <div
1095
- class="iconWrapper_17y0hv9"
1093
+ <div
1094
+ class="iconWrapper_17y0hv9"
1095
+ >
1096
+ <span
1097
+ class="ring_ya75gi"
1098
+ data-test-id="focus-ring"
1099
+ style="border-color: transparent; border-radius: 50%;"
1096
1100
  >
1097
- <span
1098
- class="ring_en36io"
1099
- style="border-color: transparent;"
1101
+ <div
1102
+ class="circle_1tys2th"
1103
+ data-is-radio-icon="true"
1104
+ data-test-id="choice-icon__library-choice-icon"
1105
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
1100
1106
  >
1101
1107
  <div
1102
- class="libraryCircle_1ytyy5d"
1103
- data-is-radio-icon="true"
1104
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
1108
+ class="perseus-sr-only"
1105
1109
  >
1106
- <div
1107
- class="perseus-sr-only"
1108
- >
1109
- (Choice B)
1110
- </div>
1111
- <div
1112
- aria-hidden="true"
1113
- >
1114
- B
1115
- </div>
1110
+ (Choice B)
1116
1111
  </div>
1117
- </span>
1118
- </div>
1119
- </span>
1112
+ <div
1113
+ aria-hidden="true"
1114
+ >
1115
+ B
1116
+ </div>
1117
+ </div>
1118
+ </span>
1119
+ </div>
1120
1120
  <span
1121
1121
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
1122
1122
  >
@@ -1177,33 +1177,33 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1177
1177
  <div
1178
1178
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
1179
1179
  >
1180
- <span>
1181
- <div
1182
- class="iconWrapper_17y0hv9"
1180
+ <div
1181
+ class="iconWrapper_17y0hv9"
1182
+ >
1183
+ <span
1184
+ class="ring_ya75gi"
1185
+ data-test-id="focus-ring"
1186
+ style="border-color: transparent; border-radius: 50%;"
1183
1187
  >
1184
- <span
1185
- class="ring_en36io"
1186
- style="border-color: transparent;"
1188
+ <div
1189
+ class="circle_1tys2th"
1190
+ data-is-radio-icon="true"
1191
+ data-test-id="choice-icon__library-choice-icon"
1192
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
1187
1193
  >
1188
1194
  <div
1189
- class="libraryCircle_1ytyy5d"
1190
- data-is-radio-icon="true"
1191
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
1195
+ class="perseus-sr-only"
1192
1196
  >
1193
- <div
1194
- class="perseus-sr-only"
1195
- >
1196
- (Choice C)
1197
- </div>
1198
- <div
1199
- aria-hidden="true"
1200
- >
1201
- C
1202
- </div>
1197
+ (Choice C)
1203
1198
  </div>
1204
- </span>
1205
- </div>
1206
- </span>
1199
+ <div
1200
+ aria-hidden="true"
1201
+ >
1202
+ C
1203
+ </div>
1204
+ </div>
1205
+ </span>
1206
+ </div>
1207
1207
  <span
1208
1208
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
1209
1209
  >
@@ -1264,33 +1264,33 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1264
1264
  <div
1265
1265
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
1266
1266
  >
1267
- <span>
1268
- <div
1269
- class="iconWrapper_17y0hv9"
1267
+ <div
1268
+ class="iconWrapper_17y0hv9"
1269
+ >
1270
+ <span
1271
+ class="ring_ya75gi"
1272
+ data-test-id="focus-ring"
1273
+ style="border-color: transparent; border-radius: 50%;"
1270
1274
  >
1271
- <span
1272
- class="ring_en36io"
1273
- style="border-color: transparent;"
1275
+ <div
1276
+ class="circle_1tys2th"
1277
+ data-is-radio-icon="true"
1278
+ data-test-id="choice-icon__library-choice-icon"
1279
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
1274
1280
  >
1275
1281
  <div
1276
- class="libraryCircle_1ytyy5d"
1277
- data-is-radio-icon="true"
1278
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
1282
+ class="perseus-sr-only"
1279
1283
  >
1280
- <div
1281
- class="perseus-sr-only"
1282
- >
1283
- (Choice D)
1284
- </div>
1285
- <div
1286
- aria-hidden="true"
1287
- >
1288
- D
1289
- </div>
1284
+ (Choice D)
1290
1285
  </div>
1291
- </span>
1292
- </div>
1293
- </span>
1286
+ <div
1287
+ aria-hidden="true"
1288
+ >
1289
+ D
1290
+ </div>
1291
+ </div>
1292
+ </span>
1293
+ </div>
1294
1294
  <span
1295
1295
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
1296
1296
  >
@@ -1437,33 +1437,33 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1437
1437
  <div
1438
1438
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
1439
1439
  >
1440
- <span>
1441
- <div
1442
- class="iconWrapper_17y0hv9"
1440
+ <div
1441
+ class="iconWrapper_17y0hv9"
1442
+ >
1443
+ <span
1444
+ class="ring_ya75gi"
1445
+ data-test-id="focus-ring"
1446
+ style="border-color: transparent; border-radius: 50%;"
1443
1447
  >
1444
- <span
1445
- class="ring_en36io"
1446
- style="border-color: transparent;"
1448
+ <div
1449
+ class="circle_1tys2th"
1450
+ data-is-radio-icon="true"
1451
+ data-test-id="choice-icon__library-choice-icon"
1452
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
1447
1453
  >
1448
1454
  <div
1449
- class="libraryCircle_1ytyy5d"
1450
- data-is-radio-icon="true"
1451
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
1455
+ class="perseus-sr-only"
1452
1456
  >
1453
- <div
1454
- class="perseus-sr-only"
1455
- >
1456
- (Choice A)
1457
- </div>
1458
- <div
1459
- aria-hidden="true"
1460
- >
1461
- A
1462
- </div>
1457
+ (Choice A)
1463
1458
  </div>
1464
- </span>
1465
- </div>
1466
- </span>
1459
+ <div
1460
+ aria-hidden="true"
1461
+ >
1462
+ A
1463
+ </div>
1464
+ </div>
1465
+ </span>
1466
+ </div>
1467
1467
  <span
1468
1468
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
1469
1469
  >
@@ -1537,33 +1537,33 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1537
1537
  <div
1538
1538
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
1539
1539
  >
1540
- <span>
1541
- <div
1542
- class="iconWrapper_17y0hv9"
1540
+ <div
1541
+ class="iconWrapper_17y0hv9"
1542
+ >
1543
+ <span
1544
+ class="ring_ya75gi"
1545
+ data-test-id="focus-ring"
1546
+ style="border-color: transparent; border-radius: 50%;"
1543
1547
  >
1544
- <span
1545
- class="ring_en36io"
1546
- style="border-color: transparent;"
1548
+ <div
1549
+ class="circle_1tys2th"
1550
+ data-is-radio-icon="true"
1551
+ data-test-id="choice-icon__library-choice-icon"
1552
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
1547
1553
  >
1548
1554
  <div
1549
- class="libraryCircle_1ytyy5d"
1550
- data-is-radio-icon="true"
1551
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
1555
+ class="perseus-sr-only"
1552
1556
  >
1553
- <div
1554
- class="perseus-sr-only"
1555
- >
1556
- (Choice B)
1557
- </div>
1558
- <div
1559
- aria-hidden="true"
1560
- >
1561
- B
1562
- </div>
1557
+ (Choice B)
1563
1558
  </div>
1564
- </span>
1565
- </div>
1566
- </span>
1559
+ <div
1560
+ aria-hidden="true"
1561
+ >
1562
+ B
1563
+ </div>
1564
+ </div>
1565
+ </span>
1566
+ </div>
1567
1567
  <span
1568
1568
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
1569
1569
  >
@@ -1624,33 +1624,33 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1624
1624
  <div
1625
1625
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
1626
1626
  >
1627
- <span>
1628
- <div
1629
- class="iconWrapper_17y0hv9"
1627
+ <div
1628
+ class="iconWrapper_17y0hv9"
1629
+ >
1630
+ <span
1631
+ class="ring_ya75gi"
1632
+ data-test-id="focus-ring"
1633
+ style="border-color: transparent; border-radius: 50%;"
1630
1634
  >
1631
- <span
1632
- class="ring_en36io"
1633
- style="border-color: transparent;"
1635
+ <div
1636
+ class="circle_1tys2th"
1637
+ data-is-radio-icon="true"
1638
+ data-test-id="choice-icon__library-choice-icon"
1639
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
1634
1640
  >
1635
1641
  <div
1636
- class="libraryCircle_1ytyy5d"
1637
- data-is-radio-icon="true"
1638
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
1642
+ class="perseus-sr-only"
1639
1643
  >
1640
- <div
1641
- class="perseus-sr-only"
1642
- >
1643
- (Choice C)
1644
- </div>
1645
- <div
1646
- aria-hidden="true"
1647
- >
1648
- C
1649
- </div>
1644
+ (Choice C)
1650
1645
  </div>
1651
- </span>
1652
- </div>
1653
- </span>
1646
+ <div
1647
+ aria-hidden="true"
1648
+ >
1649
+ C
1650
+ </div>
1651
+ </div>
1652
+ </span>
1653
+ </div>
1654
1654
  <span
1655
1655
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
1656
1656
  >
@@ -1711,33 +1711,33 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1711
1711
  <div
1712
1712
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
1713
1713
  >
1714
- <span>
1715
- <div
1716
- class="iconWrapper_17y0hv9"
1714
+ <div
1715
+ class="iconWrapper_17y0hv9"
1716
+ >
1717
+ <span
1718
+ class="ring_ya75gi"
1719
+ data-test-id="focus-ring"
1720
+ style="border-color: transparent; border-radius: 50%;"
1717
1721
  >
1718
- <span
1719
- class="ring_en36io"
1720
- style="border-color: transparent;"
1722
+ <div
1723
+ class="circle_1tys2th"
1724
+ data-is-radio-icon="true"
1725
+ data-test-id="choice-icon__library-choice-icon"
1726
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
1721
1727
  >
1722
1728
  <div
1723
- class="libraryCircle_1ytyy5d"
1724
- data-is-radio-icon="true"
1725
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
1729
+ class="perseus-sr-only"
1726
1730
  >
1727
- <div
1728
- class="perseus-sr-only"
1729
- >
1730
- (Choice D)
1731
- </div>
1732
- <div
1733
- aria-hidden="true"
1734
- >
1735
- D
1736
- </div>
1731
+ (Choice D)
1737
1732
  </div>
1738
- </span>
1739
- </div>
1740
- </span>
1733
+ <div
1734
+ aria-hidden="true"
1735
+ >
1736
+ D
1737
+ </div>
1738
+ </div>
1739
+ </span>
1740
+ </div>
1741
1741
  <span
1742
1742
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
1743
1743
  >
@@ -1884,33 +1884,33 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
1884
1884
  <div
1885
1885
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
1886
1886
  >
1887
- <span>
1888
- <div
1889
- class="iconWrapper_17y0hv9"
1887
+ <div
1888
+ class="iconWrapper_17y0hv9"
1889
+ >
1890
+ <span
1891
+ class="ring_ya75gi"
1892
+ data-test-id="focus-ring"
1893
+ style="border-color: transparent; border-radius: 50%;"
1890
1894
  >
1891
- <span
1892
- class="ring_en36io"
1893
- style="border-color: transparent;"
1895
+ <div
1896
+ class="circle_1tys2th"
1897
+ data-is-radio-icon="true"
1898
+ data-test-id="choice-icon__library-choice-icon"
1899
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
1894
1900
  >
1895
1901
  <div
1896
- class="libraryCircle_1ytyy5d"
1897
- data-is-radio-icon="true"
1898
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
1902
+ class="perseus-sr-only"
1899
1903
  >
1900
- <div
1901
- class="perseus-sr-only"
1902
- >
1903
- (Choice A)
1904
- </div>
1905
- <div
1906
- aria-hidden="true"
1907
- >
1908
- A
1909
- </div>
1904
+ (Choice A)
1910
1905
  </div>
1911
- </span>
1912
- </div>
1913
- </span>
1906
+ <div
1907
+ aria-hidden="true"
1908
+ >
1909
+ A
1910
+ </div>
1911
+ </div>
1912
+ </span>
1913
+ </div>
1914
1914
  <span
1915
1915
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
1916
1916
  >
@@ -1984,33 +1984,33 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
1984
1984
  <div
1985
1985
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
1986
1986
  >
1987
- <span>
1988
- <div
1989
- class="iconWrapper_17y0hv9"
1987
+ <div
1988
+ class="iconWrapper_17y0hv9"
1989
+ >
1990
+ <span
1991
+ class="ring_ya75gi"
1992
+ data-test-id="focus-ring"
1993
+ style="border-color: transparent; border-radius: 50%;"
1990
1994
  >
1991
- <span
1992
- class="ring_en36io"
1993
- style="border-color: transparent;"
1995
+ <div
1996
+ class="circle_1tys2th"
1997
+ data-is-radio-icon="true"
1998
+ data-test-id="choice-icon__library-choice-icon"
1999
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
1994
2000
  >
1995
2001
  <div
1996
- class="libraryCircle_1ytyy5d"
1997
- data-is-radio-icon="true"
1998
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
2002
+ class="perseus-sr-only"
1999
2003
  >
2000
- <div
2001
- class="perseus-sr-only"
2002
- >
2003
- (Choice B)
2004
- </div>
2005
- <div
2006
- aria-hidden="true"
2007
- >
2008
- B
2009
- </div>
2004
+ (Choice B)
2010
2005
  </div>
2011
- </span>
2012
- </div>
2013
- </span>
2006
+ <div
2007
+ aria-hidden="true"
2008
+ >
2009
+ B
2010
+ </div>
2011
+ </div>
2012
+ </span>
2013
+ </div>
2014
2014
  <span
2015
2015
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
2016
2016
  >
@@ -2071,33 +2071,33 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
2071
2071
  <div
2072
2072
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
2073
2073
  >
2074
- <span>
2075
- <div
2076
- class="iconWrapper_17y0hv9"
2074
+ <div
2075
+ class="iconWrapper_17y0hv9"
2076
+ >
2077
+ <span
2078
+ class="ring_ya75gi"
2079
+ data-test-id="focus-ring"
2080
+ style="border-color: #1865f2; border-radius: 50%;"
2077
2081
  >
2078
- <span
2079
- class="ring_en36io"
2080
- style="border-color: transparent;"
2082
+ <div
2083
+ class="circle_1tys2th"
2084
+ data-is-radio-icon="true"
2085
+ data-test-id="choice-icon__library-choice-icon"
2086
+ style="border-color: #1865f2; color: rgb(255, 255, 255); border-radius: 24px; background-color: rgb(24, 101, 242);"
2081
2087
  >
2082
2088
  <div
2083
- class="libraryCircle_1ytyy5d"
2084
- data-is-radio-icon="true"
2085
- style="border-color: #1865f2; color: rgb(255, 255, 255); background-color: rgb(24, 101, 242);"
2089
+ class="perseus-sr-only"
2086
2090
  >
2087
- <div
2088
- class="perseus-sr-only"
2089
- >
2090
- (Choice C, Checked)
2091
- </div>
2092
- <div
2093
- aria-hidden="true"
2094
- >
2095
- C
2096
- </div>
2091
+ (Choice C, Checked)
2092
+ </div>
2093
+ <div
2094
+ aria-hidden="true"
2095
+ >
2096
+ C
2097
2097
  </div>
2098
- </span>
2099
- </div>
2100
- </span>
2098
+ </div>
2099
+ </span>
2100
+ </div>
2101
2101
  <span
2102
2102
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
2103
2103
  >
@@ -2158,33 +2158,33 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
2158
2158
  <div
2159
2159
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
2160
2160
  >
2161
- <span>
2162
- <div
2163
- class="iconWrapper_17y0hv9"
2161
+ <div
2162
+ class="iconWrapper_17y0hv9"
2163
+ >
2164
+ <span
2165
+ class="ring_ya75gi"
2166
+ data-test-id="focus-ring"
2167
+ style="border-color: transparent; border-radius: 50%;"
2164
2168
  >
2165
- <span
2166
- class="ring_en36io"
2167
- style="border-color: transparent;"
2169
+ <div
2170
+ class="circle_1tys2th"
2171
+ data-is-radio-icon="true"
2172
+ data-test-id="choice-icon__library-choice-icon"
2173
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
2168
2174
  >
2169
2175
  <div
2170
- class="libraryCircle_1ytyy5d"
2171
- data-is-radio-icon="true"
2172
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
2176
+ class="perseus-sr-only"
2173
2177
  >
2174
- <div
2175
- class="perseus-sr-only"
2176
- >
2177
- (Choice D)
2178
- </div>
2179
- <div
2180
- aria-hidden="true"
2181
- >
2182
- D
2183
- </div>
2178
+ (Choice D)
2184
2179
  </div>
2185
- </span>
2186
- </div>
2187
- </span>
2180
+ <div
2181
+ aria-hidden="true"
2182
+ >
2183
+ D
2184
+ </div>
2185
+ </div>
2186
+ </span>
2187
+ </div>
2188
2188
  <span
2189
2189
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
2190
2190
  >
@@ -2331,33 +2331,33 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
2331
2331
  <div
2332
2332
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
2333
2333
  >
2334
- <span>
2335
- <div
2336
- class="iconWrapper_17y0hv9"
2334
+ <div
2335
+ class="iconWrapper_17y0hv9"
2336
+ >
2337
+ <span
2338
+ class="ring_ya75gi"
2339
+ data-test-id="focus-ring"
2340
+ style="border-color: #1865f2; border-radius: 50%;"
2337
2341
  >
2338
- <span
2339
- class="ring_en36io"
2340
- style="border-color: transparent;"
2342
+ <div
2343
+ class="circle_1tys2th"
2344
+ data-is-radio-icon="true"
2345
+ data-test-id="choice-icon__library-choice-icon"
2346
+ style="border-color: #1865f2; color: rgb(255, 255, 255); border-radius: 24px; background-color: rgb(24, 101, 242);"
2341
2347
  >
2342
2348
  <div
2343
- class="libraryCircle_1ytyy5d"
2344
- data-is-radio-icon="true"
2345
- style="border-color: #1865f2; color: rgb(255, 255, 255); background-color: rgb(24, 101, 242);"
2349
+ class="perseus-sr-only"
2346
2350
  >
2347
- <div
2348
- class="perseus-sr-only"
2349
- >
2350
- (Choice A, Checked)
2351
- </div>
2352
- <div
2353
- aria-hidden="true"
2354
- >
2355
- A
2356
- </div>
2351
+ (Choice A, Checked)
2357
2352
  </div>
2358
- </span>
2359
- </div>
2360
- </span>
2353
+ <div
2354
+ aria-hidden="true"
2355
+ >
2356
+ A
2357
+ </div>
2358
+ </div>
2359
+ </span>
2360
+ </div>
2361
2361
  <span
2362
2362
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
2363
2363
  >
@@ -2431,33 +2431,33 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
2431
2431
  <div
2432
2432
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
2433
2433
  >
2434
- <span>
2435
- <div
2436
- class="iconWrapper_17y0hv9"
2434
+ <div
2435
+ class="iconWrapper_17y0hv9"
2436
+ >
2437
+ <span
2438
+ class="ring_ya75gi"
2439
+ data-test-id="focus-ring"
2440
+ style="border-color: transparent; border-radius: 50%;"
2437
2441
  >
2438
- <span
2439
- class="ring_en36io"
2440
- style="border-color: transparent;"
2442
+ <div
2443
+ class="circle_1tys2th"
2444
+ data-is-radio-icon="true"
2445
+ data-test-id="choice-icon__library-choice-icon"
2446
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
2441
2447
  >
2442
2448
  <div
2443
- class="libraryCircle_1ytyy5d"
2444
- data-is-radio-icon="true"
2445
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
2449
+ class="perseus-sr-only"
2446
2450
  >
2447
- <div
2448
- class="perseus-sr-only"
2449
- >
2450
- (Choice B)
2451
- </div>
2452
- <div
2453
- aria-hidden="true"
2454
- >
2455
- B
2456
- </div>
2451
+ (Choice B)
2457
2452
  </div>
2458
- </span>
2459
- </div>
2460
- </span>
2453
+ <div
2454
+ aria-hidden="true"
2455
+ >
2456
+ B
2457
+ </div>
2458
+ </div>
2459
+ </span>
2460
+ </div>
2461
2461
  <span
2462
2462
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
2463
2463
  >
@@ -2518,33 +2518,33 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
2518
2518
  <div
2519
2519
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
2520
2520
  >
2521
- <span>
2522
- <div
2523
- class="iconWrapper_17y0hv9"
2521
+ <div
2522
+ class="iconWrapper_17y0hv9"
2523
+ >
2524
+ <span
2525
+ class="ring_ya75gi"
2526
+ data-test-id="focus-ring"
2527
+ style="border-color: transparent; border-radius: 50%;"
2524
2528
  >
2525
- <span
2526
- class="ring_en36io"
2527
- style="border-color: transparent;"
2529
+ <div
2530
+ class="circle_1tys2th"
2531
+ data-is-radio-icon="true"
2532
+ data-test-id="choice-icon__library-choice-icon"
2533
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
2528
2534
  >
2529
2535
  <div
2530
- class="libraryCircle_1ytyy5d"
2531
- data-is-radio-icon="true"
2532
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
2536
+ class="perseus-sr-only"
2533
2537
  >
2534
- <div
2535
- class="perseus-sr-only"
2536
- >
2537
- (Choice C)
2538
- </div>
2539
- <div
2540
- aria-hidden="true"
2541
- >
2542
- C
2543
- </div>
2538
+ (Choice C)
2544
2539
  </div>
2545
- </span>
2546
- </div>
2547
- </span>
2540
+ <div
2541
+ aria-hidden="true"
2542
+ >
2543
+ C
2544
+ </div>
2545
+ </div>
2546
+ </span>
2547
+ </div>
2548
2548
  <span
2549
2549
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
2550
2550
  >
@@ -2605,33 +2605,33 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
2605
2605
  <div
2606
2606
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
2607
2607
  >
2608
- <span>
2609
- <div
2610
- class="iconWrapper_17y0hv9"
2608
+ <div
2609
+ class="iconWrapper_17y0hv9"
2610
+ >
2611
+ <span
2612
+ class="ring_ya75gi"
2613
+ data-test-id="focus-ring"
2614
+ style="border-color: transparent; border-radius: 50%;"
2611
2615
  >
2612
- <span
2613
- class="ring_en36io"
2614
- style="border-color: transparent;"
2616
+ <div
2617
+ class="circle_1tys2th"
2618
+ data-is-radio-icon="true"
2619
+ data-test-id="choice-icon__library-choice-icon"
2620
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
2615
2621
  >
2616
2622
  <div
2617
- class="libraryCircle_1ytyy5d"
2618
- data-is-radio-icon="true"
2619
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
2623
+ class="perseus-sr-only"
2620
2624
  >
2621
- <div
2622
- class="perseus-sr-only"
2623
- >
2624
- (Choice D)
2625
- </div>
2626
- <div
2627
- aria-hidden="true"
2628
- >
2629
- D
2630
- </div>
2625
+ (Choice D)
2631
2626
  </div>
2632
- </span>
2633
- </div>
2634
- </span>
2627
+ <div
2628
+ aria-hidden="true"
2629
+ >
2630
+ D
2631
+ </div>
2632
+ </div>
2633
+ </span>
2634
+ </div>
2635
2635
  <span
2636
2636
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
2637
2637
  >
@@ -2778,45 +2778,45 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
2778
2778
  <div
2779
2779
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
2780
2780
  >
2781
- <span>
2782
- <div
2783
- class="iconWrapper_17y0hv9"
2781
+ <div
2782
+ class="iconWrapper_17y0hv9"
2783
+ >
2784
+ <span
2785
+ class="ring_ya75gi"
2786
+ data-test-id="focus-ring"
2787
+ style="border-color: transparent; border-radius: 50%;"
2784
2788
  >
2785
- <span
2786
- class="ring_en36io"
2787
- style="border-color: transparent;"
2789
+ <div
2790
+ class="circle_1tys2th-o_O-circleIncorrect_gxqnr9"
2791
+ data-is-radio-icon="true"
2792
+ data-test-id="choice-icon__library-choice-icon"
2793
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
2788
2794
  >
2789
2795
  <div
2790
- class="libraryCircle_1ytyy5d-o_O-libraryCircleIncorrect_gxqnr9"
2791
- data-is-radio-icon="true"
2792
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
2796
+ class="perseus-sr-only"
2793
2797
  >
2794
- <div
2795
- class="perseus-sr-only"
2796
- >
2797
- (Choice A, Incorrect)
2798
- </div>
2799
- <div
2798
+ (Choice A, Incorrect)
2799
+ </div>
2800
+ <div
2801
+ aria-hidden="true"
2802
+ >
2803
+ <svg
2800
2804
  aria-hidden="true"
2805
+ height="1em"
2806
+ role="img"
2807
+ style="vertical-align: middle;"
2808
+ viewBox="0 0 24 24"
2809
+ width="1em"
2801
2810
  >
2802
- <svg
2803
- aria-hidden="true"
2804
- height="1em"
2805
- role="img"
2806
- style="vertical-align: middle;"
2807
- viewBox="0 0 24 24"
2808
- width="1em"
2809
- >
2810
- <path
2811
- d="M8,13 L16,13 C16.5522847,13 17,12.5522847 17,12 C17,11.4477153 16.5522847,11 16,11 L8,11 C7.44771525,11 7,11.4477153 7,12 C7,12.5522847 7.44771525,13 8,13 Z"
2812
- fill="currentColor"
2813
- />
2814
- </svg>
2815
- </div>
2811
+ <path
2812
+ d="M8,13 L16,13 C16.5522847,13 17,12.5522847 17,12 C17,11.4477153 16.5522847,11 16,11 L8,11 C7.44771525,11 7,11.4477153 7,12 C7,12.5522847 7.44771525,13 8,13 Z"
2813
+ fill="currentColor"
2814
+ />
2815
+ </svg>
2816
2816
  </div>
2817
- </span>
2818
- </div>
2819
- </span>
2817
+ </div>
2818
+ </span>
2819
+ </div>
2820
2820
  <span
2821
2821
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
2822
2822
  >
@@ -2963,45 +2963,45 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
2963
2963
  <div
2964
2964
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
2965
2965
  >
2966
- <span>
2967
- <div
2968
- class="iconWrapper_17y0hv9"
2966
+ <div
2967
+ class="iconWrapper_17y0hv9"
2968
+ >
2969
+ <span
2970
+ class="ring_ya75gi"
2971
+ data-test-id="focus-ring"
2972
+ style="border-color: transparent; border-radius: 50%;"
2969
2973
  >
2970
- <span
2971
- class="ring_en36io"
2972
- style="border-color: transparent;"
2974
+ <div
2975
+ class="circle_1tys2th-o_O-circleIncorrect_gxqnr9"
2976
+ data-is-radio-icon="true"
2977
+ data-test-id="choice-icon__library-choice-icon"
2978
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
2973
2979
  >
2974
2980
  <div
2975
- class="libraryCircle_1ytyy5d-o_O-libraryCircleIncorrect_gxqnr9"
2976
- data-is-radio-icon="true"
2977
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
2981
+ class="perseus-sr-only"
2978
2982
  >
2979
- <div
2980
- class="perseus-sr-only"
2981
- >
2982
- (Choice B, Incorrect)
2983
- </div>
2984
- <div
2983
+ (Choice B, Incorrect)
2984
+ </div>
2985
+ <div
2986
+ aria-hidden="true"
2987
+ >
2988
+ <svg
2985
2989
  aria-hidden="true"
2990
+ height="1em"
2991
+ role="img"
2992
+ style="vertical-align: middle;"
2993
+ viewBox="0 0 24 24"
2994
+ width="1em"
2986
2995
  >
2987
- <svg
2988
- aria-hidden="true"
2989
- height="1em"
2990
- role="img"
2991
- style="vertical-align: middle;"
2992
- viewBox="0 0 24 24"
2993
- width="1em"
2994
- >
2995
- <path
2996
- d="M8,13 L16,13 C16.5522847,13 17,12.5522847 17,12 C17,11.4477153 16.5522847,11 16,11 L8,11 C7.44771525,11 7,11.4477153 7,12 C7,12.5522847 7.44771525,13 8,13 Z"
2997
- fill="currentColor"
2998
- />
2999
- </svg>
3000
- </div>
2996
+ <path
2997
+ d="M8,13 L16,13 C16.5522847,13 17,12.5522847 17,12 C17,11.4477153 16.5522847,11 16,11 L8,11 C7.44771525,11 7,11.4477153 7,12 C7,12.5522847 7.44771525,13 8,13 Z"
2998
+ fill="currentColor"
2999
+ />
3000
+ </svg>
3001
3001
  </div>
3002
- </span>
3003
- </div>
3004
- </span>
3002
+ </div>
3003
+ </span>
3004
+ </div>
3005
3005
  <span
3006
3006
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
3007
3007
  >
@@ -3119,45 +3119,45 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
3119
3119
  <div
3120
3120
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
3121
3121
  >
3122
- <span>
3123
- <div
3124
- class="iconWrapper_17y0hv9"
3122
+ <div
3123
+ class="iconWrapper_17y0hv9"
3124
+ >
3125
+ <span
3126
+ class="ring_ya75gi"
3127
+ data-test-id="focus-ring"
3128
+ style="border-color: transparent; border-radius: 50%;"
3125
3129
  >
3126
- <span
3127
- class="ring_en36io"
3128
- style="border-color: transparent;"
3130
+ <div
3131
+ class="circle_1tys2th-o_O-circleCorrect_ifnw95"
3132
+ data-is-radio-icon="true"
3133
+ data-test-id="choice-icon__library-choice-icon"
3134
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
3129
3135
  >
3130
3136
  <div
3131
- class="libraryCircle_1ytyy5d-o_O-libraryCircleCorrect_ifnw95"
3132
- data-is-radio-icon="true"
3133
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
3137
+ class="perseus-sr-only"
3134
3138
  >
3135
- <div
3136
- class="perseus-sr-only"
3137
- >
3138
- (Choice C, Correct)
3139
- </div>
3140
- <div
3139
+ (Choice C, Correct)
3140
+ </div>
3141
+ <div
3142
+ aria-hidden="true"
3143
+ >
3144
+ <svg
3141
3145
  aria-hidden="true"
3146
+ height="1em"
3147
+ role="img"
3148
+ style="vertical-align: middle; position: relative; top: -1px;"
3149
+ viewBox="0 0 24 24"
3150
+ width="1em"
3142
3151
  >
3143
- <svg
3144
- aria-hidden="true"
3145
- height="1em"
3146
- role="img"
3147
- style="vertical-align: middle; position: relative; top: -1px;"
3148
- viewBox="0 0 24 24"
3149
- width="1em"
3150
- >
3151
- <path
3152
- d="M8.70710678,12.2928932 C8.31658249,11.9023689 7.68341751,11.9023689 7.29289322,12.2928932 C6.90236893,12.6834175 6.90236893,13.3165825 7.29289322,13.7071068 L9.82842712,16.2426407 C10.2207367,16.6349502 10.8574274,16.6328935 11.2471942,16.2380576 L16.7116603,10.7025237 C17.0996535,10.3094846 17.0955629,9.67633279 16.7025237,9.28833966 C16.3094846,8.90034653 15.6763328,8.90443714 15.2883397,9.29747629 L10.5309507,14.1167372 L8.70710678,12.2928932 Z"
3153
- fill="currentColor"
3154
- />
3155
- </svg>
3156
- </div>
3152
+ <path
3153
+ d="M8.70710678,12.2928932 C8.31658249,11.9023689 7.68341751,11.9023689 7.29289322,12.2928932 C6.90236893,12.6834175 6.90236893,13.3165825 7.29289322,13.7071068 L9.82842712,16.2426407 C10.2207367,16.6349502 10.8574274,16.6328935 11.2471942,16.2380576 L16.7116603,10.7025237 C17.0996535,10.3094846 17.0955629,9.67633279 16.7025237,9.28833966 C16.3094846,8.90034653 15.6763328,8.90443714 15.2883397,9.29747629 L10.5309507,14.1167372 L8.70710678,12.2928932 Z"
3154
+ fill="currentColor"
3155
+ />
3156
+ </svg>
3157
3157
  </div>
3158
- </span>
3159
- </div>
3160
- </span>
3158
+ </div>
3159
+ </span>
3160
+ </div>
3161
3161
  <span
3162
3162
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
3163
3163
  >
@@ -3270,45 +3270,45 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
3270
3270
  <div
3271
3271
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
3272
3272
  >
3273
- <span>
3274
- <div
3275
- class="iconWrapper_17y0hv9"
3273
+ <div
3274
+ class="iconWrapper_17y0hv9"
3275
+ >
3276
+ <span
3277
+ class="ring_ya75gi"
3278
+ data-test-id="focus-ring"
3279
+ style="border-color: transparent; border-radius: 50%;"
3276
3280
  >
3277
- <span
3278
- class="ring_en36io"
3279
- style="border-color: transparent;"
3281
+ <div
3282
+ class="circle_1tys2th-o_O-circleIncorrect_gxqnr9"
3283
+ data-is-radio-icon="true"
3284
+ data-test-id="choice-icon__library-choice-icon"
3285
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
3280
3286
  >
3281
3287
  <div
3282
- class="libraryCircle_1ytyy5d-o_O-libraryCircleIncorrect_gxqnr9"
3283
- data-is-radio-icon="true"
3284
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
3288
+ class="perseus-sr-only"
3285
3289
  >
3286
- <div
3287
- class="perseus-sr-only"
3288
- >
3289
- (Choice D, Incorrect)
3290
- </div>
3291
- <div
3290
+ (Choice D, Incorrect)
3291
+ </div>
3292
+ <div
3293
+ aria-hidden="true"
3294
+ >
3295
+ <svg
3292
3296
  aria-hidden="true"
3297
+ height="1em"
3298
+ role="img"
3299
+ style="vertical-align: middle;"
3300
+ viewBox="0 0 24 24"
3301
+ width="1em"
3293
3302
  >
3294
- <svg
3295
- aria-hidden="true"
3296
- height="1em"
3297
- role="img"
3298
- style="vertical-align: middle;"
3299
- viewBox="0 0 24 24"
3300
- width="1em"
3301
- >
3302
- <path
3303
- d="M8,13 L16,13 C16.5522847,13 17,12.5522847 17,12 C17,11.4477153 16.5522847,11 16,11 L8,11 C7.44771525,11 7,11.4477153 7,12 C7,12.5522847 7.44771525,13 8,13 Z"
3304
- fill="currentColor"
3305
- />
3306
- </svg>
3307
- </div>
3303
+ <path
3304
+ d="M8,13 L16,13 C16.5522847,13 17,12.5522847 17,12 C17,11.4477153 16.5522847,11 16,11 L8,11 C7.44771525,11 7,11.4477153 7,12 C7,12.5522847 7.44771525,13 8,13 Z"
3305
+ fill="currentColor"
3306
+ />
3307
+ </svg>
3308
3308
  </div>
3309
- </span>
3310
- </div>
3311
- </span>
3309
+ </div>
3310
+ </span>
3311
+ </div>
3312
3312
  <span
3313
3313
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
3314
3314
  >
@@ -3490,31 +3490,30 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
3490
3490
  <div
3491
3491
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
3492
3492
  >
3493
- <span>
3493
+ <div
3494
+ class="iconWrapper_17y0hv9"
3495
+ >
3494
3496
  <div
3495
- class="iconWrapper_17y0hv9"
3497
+ class="satCircle_1anqode"
3498
+ data-test-id="choice-icon__sat-choice-icon"
3499
+ style="border-color: #0084ce; border-radius: 25px;"
3500
+ />
3501
+ <div
3502
+ class="letter_2ucovf"
3503
+ style="color: rgb(0, 132, 206);"
3496
3504
  >
3497
- <div
3498
- class="satCircle_vfr2zr"
3499
- style="border-color: #0084ce;"
3500
- />
3501
- <div
3502
- class="letter_2ucovf"
3503
- style="color: rgb(0, 132, 206);"
3505
+ <span
3506
+ class="perseus-sr-only"
3504
3507
  >
3505
- <span
3506
- class="perseus-sr-only"
3507
- >
3508
- (Choice A)
3509
- </span>
3510
- <span
3511
- aria-hidden="true"
3512
- >
3513
- A
3514
- </span>
3515
- </div>
3508
+ (Choice A)
3509
+ </span>
3510
+ <span
3511
+ aria-hidden="true"
3512
+ >
3513
+ A
3514
+ </span>
3516
3515
  </div>
3517
- </span>
3516
+ </div>
3518
3517
  <span
3519
3518
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
3520
3519
  >
@@ -3588,31 +3587,30 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
3588
3587
  <div
3589
3588
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
3590
3589
  >
3591
- <span>
3590
+ <div
3591
+ class="iconWrapper_17y0hv9"
3592
+ >
3593
+ <div
3594
+ class="satCircle_1anqode"
3595
+ data-test-id="choice-icon__sat-choice-icon"
3596
+ style="border-color: #0084ce; border-radius: 25px;"
3597
+ />
3592
3598
  <div
3593
- class="iconWrapper_17y0hv9"
3599
+ class="letter_2ucovf"
3600
+ style="color: rgb(0, 132, 206);"
3594
3601
  >
3595
- <div
3596
- class="satCircle_vfr2zr"
3597
- style="border-color: #0084ce;"
3598
- />
3599
- <div
3600
- class="letter_2ucovf"
3601
- style="color: rgb(0, 132, 206);"
3602
+ <span
3603
+ class="perseus-sr-only"
3602
3604
  >
3603
- <span
3604
- class="perseus-sr-only"
3605
- >
3606
- (Choice B)
3607
- </span>
3608
- <span
3609
- aria-hidden="true"
3610
- >
3611
- B
3612
- </span>
3613
- </div>
3605
+ (Choice B)
3606
+ </span>
3607
+ <span
3608
+ aria-hidden="true"
3609
+ >
3610
+ B
3611
+ </span>
3614
3612
  </div>
3615
- </span>
3613
+ </div>
3616
3614
  <span
3617
3615
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
3618
3616
  >
@@ -3673,31 +3671,30 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
3673
3671
  <div
3674
3672
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
3675
3673
  >
3676
- <span>
3674
+ <div
3675
+ class="iconWrapper_17y0hv9"
3676
+ >
3677
3677
  <div
3678
- class="iconWrapper_17y0hv9"
3678
+ class="satCircle_1anqode"
3679
+ data-test-id="choice-icon__sat-choice-icon"
3680
+ style="border-color: #0084ce; border-radius: 25px; background-color: rgb(0, 132, 206);"
3681
+ />
3682
+ <div
3683
+ class="letter_2ucovf"
3684
+ style="color: rgb(255, 255, 255);"
3679
3685
  >
3680
- <div
3681
- class="satCircle_vfr2zr"
3682
- style="border-color: #0084ce; background-color: rgb(0, 132, 206);"
3683
- />
3684
- <div
3685
- class="letter_2ucovf"
3686
- style="color: rgb(255, 255, 255);"
3686
+ <span
3687
+ class="perseus-sr-only"
3687
3688
  >
3688
- <span
3689
- class="perseus-sr-only"
3690
- >
3691
- (Choice C, Checked)
3692
- </span>
3693
- <span
3694
- aria-hidden="true"
3695
- >
3696
- C
3697
- </span>
3698
- </div>
3689
+ (Choice C, Checked)
3690
+ </span>
3691
+ <span
3692
+ aria-hidden="true"
3693
+ >
3694
+ C
3695
+ </span>
3699
3696
  </div>
3700
- </span>
3697
+ </div>
3701
3698
  <span
3702
3699
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
3703
3700
  >
@@ -3758,31 +3755,30 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
3758
3755
  <div
3759
3756
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
3760
3757
  >
3761
- <span>
3758
+ <div
3759
+ class="iconWrapper_17y0hv9"
3760
+ >
3761
+ <div
3762
+ class="satCircle_1anqode"
3763
+ data-test-id="choice-icon__sat-choice-icon"
3764
+ style="border-color: #0084ce; border-radius: 25px;"
3765
+ />
3762
3766
  <div
3763
- class="iconWrapper_17y0hv9"
3767
+ class="letter_2ucovf"
3768
+ style="color: rgb(0, 132, 206);"
3764
3769
  >
3765
- <div
3766
- class="satCircle_vfr2zr"
3767
- style="border-color: #0084ce;"
3768
- />
3769
- <div
3770
- class="letter_2ucovf"
3771
- style="color: rgb(0, 132, 206);"
3770
+ <span
3771
+ class="perseus-sr-only"
3772
3772
  >
3773
- <span
3774
- class="perseus-sr-only"
3775
- >
3776
- (Choice D)
3777
- </span>
3778
- <span
3779
- aria-hidden="true"
3780
- >
3781
- D
3782
- </span>
3783
- </div>
3773
+ (Choice D)
3774
+ </span>
3775
+ <span
3776
+ aria-hidden="true"
3777
+ >
3778
+ D
3779
+ </span>
3784
3780
  </div>
3785
- </span>
3781
+ </div>
3786
3782
  <span
3787
3783
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
3788
3784
  >
@@ -3924,31 +3920,30 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
3924
3920
  <div
3925
3921
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
3926
3922
  >
3927
- <span>
3923
+ <div
3924
+ class="iconWrapper_17y0hv9"
3925
+ >
3928
3926
  <div
3929
- class="iconWrapper_17y0hv9"
3927
+ class="satCircle_1anqode"
3928
+ data-test-id="choice-icon__sat-choice-icon"
3929
+ style="border-color: #0084ce; border-radius: 25px; background-color: rgb(0, 132, 206);"
3930
+ />
3931
+ <div
3932
+ class="letter_2ucovf"
3933
+ style="color: rgb(255, 255, 255);"
3930
3934
  >
3931
- <div
3932
- class="satCircle_vfr2zr"
3933
- style="border-color: #0084ce; background-color: rgb(0, 132, 206);"
3934
- />
3935
- <div
3936
- class="letter_2ucovf"
3937
- style="color: rgb(255, 255, 255);"
3935
+ <span
3936
+ class="perseus-sr-only"
3938
3937
  >
3939
- <span
3940
- class="perseus-sr-only"
3941
- >
3942
- (Choice A, Checked)
3943
- </span>
3944
- <span
3945
- aria-hidden="true"
3946
- >
3947
- A
3948
- </span>
3949
- </div>
3938
+ (Choice A, Checked)
3939
+ </span>
3940
+ <span
3941
+ aria-hidden="true"
3942
+ >
3943
+ A
3944
+ </span>
3950
3945
  </div>
3951
- </span>
3946
+ </div>
3952
3947
  <span
3953
3948
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
3954
3949
  >
@@ -4022,31 +4017,30 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
4022
4017
  <div
4023
4018
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
4024
4019
  >
4025
- <span>
4020
+ <div
4021
+ class="iconWrapper_17y0hv9"
4022
+ >
4023
+ <div
4024
+ class="satCircle_1anqode"
4025
+ data-test-id="choice-icon__sat-choice-icon"
4026
+ style="border-color: #0084ce; border-radius: 25px;"
4027
+ />
4026
4028
  <div
4027
- class="iconWrapper_17y0hv9"
4029
+ class="letter_2ucovf"
4030
+ style="color: rgb(0, 132, 206);"
4028
4031
  >
4029
- <div
4030
- class="satCircle_vfr2zr"
4031
- style="border-color: #0084ce;"
4032
- />
4033
- <div
4034
- class="letter_2ucovf"
4035
- style="color: rgb(0, 132, 206);"
4032
+ <span
4033
+ class="perseus-sr-only"
4036
4034
  >
4037
- <span
4038
- class="perseus-sr-only"
4039
- >
4040
- (Choice B)
4041
- </span>
4042
- <span
4043
- aria-hidden="true"
4044
- >
4045
- B
4046
- </span>
4047
- </div>
4035
+ (Choice B)
4036
+ </span>
4037
+ <span
4038
+ aria-hidden="true"
4039
+ >
4040
+ B
4041
+ </span>
4048
4042
  </div>
4049
- </span>
4043
+ </div>
4050
4044
  <span
4051
4045
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
4052
4046
  >
@@ -4107,31 +4101,30 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
4107
4101
  <div
4108
4102
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
4109
4103
  >
4110
- <span>
4104
+ <div
4105
+ class="iconWrapper_17y0hv9"
4106
+ >
4111
4107
  <div
4112
- class="iconWrapper_17y0hv9"
4108
+ class="satCircle_1anqode"
4109
+ data-test-id="choice-icon__sat-choice-icon"
4110
+ style="border-color: #0084ce; border-radius: 25px;"
4111
+ />
4112
+ <div
4113
+ class="letter_2ucovf"
4114
+ style="color: rgb(0, 132, 206);"
4113
4115
  >
4114
- <div
4115
- class="satCircle_vfr2zr"
4116
- style="border-color: #0084ce;"
4117
- />
4118
- <div
4119
- class="letter_2ucovf"
4120
- style="color: rgb(0, 132, 206);"
4116
+ <span
4117
+ class="perseus-sr-only"
4121
4118
  >
4122
- <span
4123
- class="perseus-sr-only"
4124
- >
4125
- (Choice C)
4126
- </span>
4127
- <span
4128
- aria-hidden="true"
4129
- >
4130
- C
4131
- </span>
4132
- </div>
4119
+ (Choice C)
4120
+ </span>
4121
+ <span
4122
+ aria-hidden="true"
4123
+ >
4124
+ C
4125
+ </span>
4133
4126
  </div>
4134
- </span>
4127
+ </div>
4135
4128
  <span
4136
4129
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
4137
4130
  >
@@ -4192,31 +4185,30 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
4192
4185
  <div
4193
4186
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
4194
4187
  >
4195
- <span>
4188
+ <div
4189
+ class="iconWrapper_17y0hv9"
4190
+ >
4191
+ <div
4192
+ class="satCircle_1anqode"
4193
+ data-test-id="choice-icon__sat-choice-icon"
4194
+ style="border-color: #0084ce; border-radius: 25px;"
4195
+ />
4196
4196
  <div
4197
- class="iconWrapper_17y0hv9"
4197
+ class="letter_2ucovf"
4198
+ style="color: rgb(0, 132, 206);"
4198
4199
  >
4199
- <div
4200
- class="satCircle_vfr2zr"
4201
- style="border-color: #0084ce;"
4202
- />
4203
- <div
4204
- class="letter_2ucovf"
4205
- style="color: rgb(0, 132, 206);"
4200
+ <span
4201
+ class="perseus-sr-only"
4206
4202
  >
4207
- <span
4208
- class="perseus-sr-only"
4209
- >
4210
- (Choice D)
4211
- </span>
4212
- <span
4213
- aria-hidden="true"
4214
- >
4215
- D
4216
- </span>
4217
- </div>
4203
+ (Choice D)
4204
+ </span>
4205
+ <span
4206
+ aria-hidden="true"
4207
+ >
4208
+ D
4209
+ </span>
4218
4210
  </div>
4219
- </span>
4211
+ </div>
4220
4212
  <span
4221
4213
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
4222
4214
  >
@@ -4358,31 +4350,30 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
4358
4350
  <div
4359
4351
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
4360
4352
  >
4361
- <span>
4353
+ <div
4354
+ class="iconWrapper_17y0hv9"
4355
+ >
4362
4356
  <div
4363
- class="iconWrapper_17y0hv9"
4357
+ class="satCircle_1anqode"
4358
+ data-test-id="choice-icon__sat-choice-icon"
4359
+ style="border-color: #0084ce; border-radius: 25px;"
4360
+ />
4361
+ <div
4362
+ class="letter_2ucovf"
4363
+ style="color: rgb(0, 132, 206);"
4364
4364
  >
4365
- <div
4366
- class="satCircle_vfr2zr"
4367
- style="border-color: #0084ce;"
4368
- />
4369
- <div
4370
- class="letter_2ucovf"
4371
- style="color: rgb(0, 132, 206);"
4365
+ <span
4366
+ class="perseus-sr-only"
4372
4367
  >
4373
- <span
4374
- class="perseus-sr-only"
4375
- >
4376
- (Choice A)
4377
- </span>
4378
- <span
4379
- aria-hidden="true"
4380
- >
4381
- A
4382
- </span>
4383
- </div>
4368
+ (Choice A)
4369
+ </span>
4370
+ <span
4371
+ aria-hidden="true"
4372
+ >
4373
+ A
4374
+ </span>
4384
4375
  </div>
4385
- </span>
4376
+ </div>
4386
4377
  <span
4387
4378
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
4388
4379
  >
@@ -4456,31 +4447,30 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
4456
4447
  <div
4457
4448
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
4458
4449
  >
4459
- <span>
4450
+ <div
4451
+ class="iconWrapper_17y0hv9"
4452
+ >
4453
+ <div
4454
+ class="satCircle_1anqode"
4455
+ data-test-id="choice-icon__sat-choice-icon"
4456
+ style="border-color: #0084ce; border-radius: 25px;"
4457
+ />
4460
4458
  <div
4461
- class="iconWrapper_17y0hv9"
4459
+ class="letter_2ucovf"
4460
+ style="color: rgb(0, 132, 206);"
4462
4461
  >
4463
- <div
4464
- class="satCircle_vfr2zr"
4465
- style="border-color: #0084ce;"
4466
- />
4467
- <div
4468
- class="letter_2ucovf"
4469
- style="color: rgb(0, 132, 206);"
4462
+ <span
4463
+ class="perseus-sr-only"
4470
4464
  >
4471
- <span
4472
- class="perseus-sr-only"
4473
- >
4474
- (Choice B)
4475
- </span>
4476
- <span
4477
- aria-hidden="true"
4478
- >
4479
- B
4480
- </span>
4481
- </div>
4465
+ (Choice B)
4466
+ </span>
4467
+ <span
4468
+ aria-hidden="true"
4469
+ >
4470
+ B
4471
+ </span>
4482
4472
  </div>
4483
- </span>
4473
+ </div>
4484
4474
  <span
4485
4475
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
4486
4476
  >
@@ -4541,31 +4531,30 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
4541
4531
  <div
4542
4532
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
4543
4533
  >
4544
- <span>
4534
+ <div
4535
+ class="iconWrapper_17y0hv9"
4536
+ >
4545
4537
  <div
4546
- class="iconWrapper_17y0hv9"
4538
+ class="satCircle_1anqode"
4539
+ data-test-id="choice-icon__sat-choice-icon"
4540
+ style="border-color: #0084ce; border-radius: 25px;"
4541
+ />
4542
+ <div
4543
+ class="letter_2ucovf"
4544
+ style="color: rgb(0, 132, 206);"
4547
4545
  >
4548
- <div
4549
- class="satCircle_vfr2zr"
4550
- style="border-color: #0084ce;"
4551
- />
4552
- <div
4553
- class="letter_2ucovf"
4554
- style="color: rgb(0, 132, 206);"
4546
+ <span
4547
+ class="perseus-sr-only"
4555
4548
  >
4556
- <span
4557
- class="perseus-sr-only"
4558
- >
4559
- (Choice C)
4560
- </span>
4561
- <span
4562
- aria-hidden="true"
4563
- >
4564
- C
4565
- </span>
4566
- </div>
4549
+ (Choice C)
4550
+ </span>
4551
+ <span
4552
+ aria-hidden="true"
4553
+ >
4554
+ C
4555
+ </span>
4567
4556
  </div>
4568
- </span>
4557
+ </div>
4569
4558
  <span
4570
4559
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
4571
4560
  >
@@ -4626,31 +4615,30 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
4626
4615
  <div
4627
4616
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
4628
4617
  >
4629
- <span>
4618
+ <div
4619
+ class="iconWrapper_17y0hv9"
4620
+ >
4621
+ <div
4622
+ class="satCircle_1anqode"
4623
+ data-test-id="choice-icon__sat-choice-icon"
4624
+ style="border-color: #0084ce; border-radius: 25px;"
4625
+ />
4630
4626
  <div
4631
- class="iconWrapper_17y0hv9"
4627
+ class="letter_2ucovf"
4628
+ style="color: rgb(0, 132, 206);"
4632
4629
  >
4633
- <div
4634
- class="satCircle_vfr2zr"
4635
- style="border-color: #0084ce;"
4636
- />
4637
- <div
4638
- class="letter_2ucovf"
4639
- style="color: rgb(0, 132, 206);"
4630
+ <span
4631
+ class="perseus-sr-only"
4640
4632
  >
4641
- <span
4642
- class="perseus-sr-only"
4643
- >
4644
- (Choice D)
4645
- </span>
4646
- <span
4647
- aria-hidden="true"
4648
- >
4649
- D
4650
- </span>
4651
- </div>
4633
+ (Choice D)
4634
+ </span>
4635
+ <span
4636
+ aria-hidden="true"
4637
+ >
4638
+ D
4639
+ </span>
4652
4640
  </div>
4653
- </span>
4641
+ </div>
4654
4642
  <span
4655
4643
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
4656
4644
  >
@@ -4792,31 +4780,30 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
4792
4780
  <div
4793
4781
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
4794
4782
  >
4795
- <span>
4783
+ <div
4784
+ class="iconWrapper_17y0hv9"
4785
+ >
4796
4786
  <div
4797
- class="iconWrapper_17y0hv9"
4787
+ class="satCircle_1anqode"
4788
+ data-test-id="choice-icon__sat-choice-icon"
4789
+ style="border-color: #0084ce; border-radius: 25px;"
4790
+ />
4791
+ <div
4792
+ class="letter_2ucovf"
4793
+ style="color: rgb(0, 132, 206);"
4798
4794
  >
4799
- <div
4800
- class="satCircle_vfr2zr"
4801
- style="border-color: #0084ce;"
4802
- />
4803
- <div
4804
- class="letter_2ucovf"
4805
- style="color: rgb(0, 132, 206);"
4795
+ <span
4796
+ class="perseus-sr-only"
4806
4797
  >
4807
- <span
4808
- class="perseus-sr-only"
4809
- >
4810
- (Choice A)
4811
- </span>
4812
- <span
4813
- aria-hidden="true"
4814
- >
4815
- A
4816
- </span>
4817
- </div>
4798
+ (Choice A)
4799
+ </span>
4800
+ <span
4801
+ aria-hidden="true"
4802
+ >
4803
+ A
4804
+ </span>
4818
4805
  </div>
4819
- </span>
4806
+ </div>
4820
4807
  <span
4821
4808
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
4822
4809
  >
@@ -4890,31 +4877,30 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
4890
4877
  <div
4891
4878
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
4892
4879
  >
4893
- <span>
4880
+ <div
4881
+ class="iconWrapper_17y0hv9"
4882
+ >
4883
+ <div
4884
+ class="satCircle_1anqode"
4885
+ data-test-id="choice-icon__sat-choice-icon"
4886
+ style="border-color: #0084ce; border-radius: 25px;"
4887
+ />
4894
4888
  <div
4895
- class="iconWrapper_17y0hv9"
4889
+ class="letter_2ucovf"
4890
+ style="color: rgb(0, 132, 206);"
4896
4891
  >
4897
- <div
4898
- class="satCircle_vfr2zr"
4899
- style="border-color: #0084ce;"
4900
- />
4901
- <div
4902
- class="letter_2ucovf"
4903
- style="color: rgb(0, 132, 206);"
4892
+ <span
4893
+ class="perseus-sr-only"
4904
4894
  >
4905
- <span
4906
- class="perseus-sr-only"
4907
- >
4908
- (Choice B)
4909
- </span>
4910
- <span
4911
- aria-hidden="true"
4912
- >
4913
- B
4914
- </span>
4915
- </div>
4895
+ (Choice B)
4896
+ </span>
4897
+ <span
4898
+ aria-hidden="true"
4899
+ >
4900
+ B
4901
+ </span>
4916
4902
  </div>
4917
- </span>
4903
+ </div>
4918
4904
  <span
4919
4905
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
4920
4906
  >
@@ -4975,31 +4961,30 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
4975
4961
  <div
4976
4962
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
4977
4963
  >
4978
- <span>
4964
+ <div
4965
+ class="iconWrapper_17y0hv9"
4966
+ >
4979
4967
  <div
4980
- class="iconWrapper_17y0hv9"
4968
+ class="satCircle_1anqode"
4969
+ data-test-id="choice-icon__sat-choice-icon"
4970
+ style="border-color: #0084ce; border-radius: 25px; background-color: rgb(0, 132, 206);"
4971
+ />
4972
+ <div
4973
+ class="letter_2ucovf"
4974
+ style="color: rgb(255, 255, 255);"
4981
4975
  >
4982
- <div
4983
- class="satCircle_vfr2zr"
4984
- style="border-color: #0084ce; background-color: rgb(0, 132, 206);"
4985
- />
4986
- <div
4987
- class="letter_2ucovf"
4988
- style="color: rgb(255, 255, 255);"
4976
+ <span
4977
+ class="perseus-sr-only"
4989
4978
  >
4990
- <span
4991
- class="perseus-sr-only"
4992
- >
4993
- (Choice C, Checked)
4994
- </span>
4995
- <span
4996
- aria-hidden="true"
4997
- >
4998
- C
4999
- </span>
5000
- </div>
4979
+ (Choice C, Checked)
4980
+ </span>
4981
+ <span
4982
+ aria-hidden="true"
4983
+ >
4984
+ C
4985
+ </span>
5001
4986
  </div>
5002
- </span>
4987
+ </div>
5003
4988
  <span
5004
4989
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
5005
4990
  >
@@ -5060,31 +5045,30 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
5060
5045
  <div
5061
5046
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
5062
5047
  >
5063
- <span>
5048
+ <div
5049
+ class="iconWrapper_17y0hv9"
5050
+ >
5051
+ <div
5052
+ class="satCircle_1anqode"
5053
+ data-test-id="choice-icon__sat-choice-icon"
5054
+ style="border-color: #0084ce; border-radius: 25px;"
5055
+ />
5064
5056
  <div
5065
- class="iconWrapper_17y0hv9"
5057
+ class="letter_2ucovf"
5058
+ style="color: rgb(0, 132, 206);"
5066
5059
  >
5067
- <div
5068
- class="satCircle_vfr2zr"
5069
- style="border-color: #0084ce;"
5070
- />
5071
- <div
5072
- class="letter_2ucovf"
5073
- style="color: rgb(0, 132, 206);"
5060
+ <span
5061
+ class="perseus-sr-only"
5074
5062
  >
5075
- <span
5076
- class="perseus-sr-only"
5077
- >
5078
- (Choice D)
5079
- </span>
5080
- <span
5081
- aria-hidden="true"
5082
- >
5083
- D
5084
- </span>
5085
- </div>
5063
+ (Choice D)
5064
+ </span>
5065
+ <span
5066
+ aria-hidden="true"
5067
+ >
5068
+ D
5069
+ </span>
5086
5070
  </div>
5087
- </span>
5071
+ </div>
5088
5072
  <span
5089
5073
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
5090
5074
  >
@@ -5226,31 +5210,30 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
5226
5210
  <div
5227
5211
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
5228
5212
  >
5229
- <span>
5213
+ <div
5214
+ class="iconWrapper_17y0hv9"
5215
+ >
5230
5216
  <div
5231
- class="iconWrapper_17y0hv9"
5217
+ class="satCircle_1anqode"
5218
+ data-test-id="choice-icon__sat-choice-icon"
5219
+ style="border-color: #0084ce; border-radius: 25px; background-color: rgb(0, 132, 206);"
5220
+ />
5221
+ <div
5222
+ class="letter_2ucovf"
5223
+ style="color: rgb(255, 255, 255);"
5232
5224
  >
5233
- <div
5234
- class="satCircle_vfr2zr"
5235
- style="border-color: #0084ce; background-color: rgb(0, 132, 206);"
5236
- />
5237
- <div
5238
- class="letter_2ucovf"
5239
- style="color: rgb(255, 255, 255);"
5225
+ <span
5226
+ class="perseus-sr-only"
5240
5227
  >
5241
- <span
5242
- class="perseus-sr-only"
5243
- >
5244
- (Choice A, Checked)
5245
- </span>
5246
- <span
5247
- aria-hidden="true"
5248
- >
5249
- A
5250
- </span>
5251
- </div>
5228
+ (Choice A, Checked)
5229
+ </span>
5230
+ <span
5231
+ aria-hidden="true"
5232
+ >
5233
+ A
5234
+ </span>
5252
5235
  </div>
5253
- </span>
5236
+ </div>
5254
5237
  <span
5255
5238
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
5256
5239
  >
@@ -5324,31 +5307,30 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
5324
5307
  <div
5325
5308
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
5326
5309
  >
5327
- <span>
5310
+ <div
5311
+ class="iconWrapper_17y0hv9"
5312
+ >
5313
+ <div
5314
+ class="satCircle_1anqode"
5315
+ data-test-id="choice-icon__sat-choice-icon"
5316
+ style="border-color: #0084ce; border-radius: 25px;"
5317
+ />
5328
5318
  <div
5329
- class="iconWrapper_17y0hv9"
5319
+ class="letter_2ucovf"
5320
+ style="color: rgb(0, 132, 206);"
5330
5321
  >
5331
- <div
5332
- class="satCircle_vfr2zr"
5333
- style="border-color: #0084ce;"
5334
- />
5335
- <div
5336
- class="letter_2ucovf"
5337
- style="color: rgb(0, 132, 206);"
5322
+ <span
5323
+ class="perseus-sr-only"
5338
5324
  >
5339
- <span
5340
- class="perseus-sr-only"
5341
- >
5342
- (Choice B)
5343
- </span>
5344
- <span
5345
- aria-hidden="true"
5346
- >
5347
- B
5348
- </span>
5349
- </div>
5325
+ (Choice B)
5326
+ </span>
5327
+ <span
5328
+ aria-hidden="true"
5329
+ >
5330
+ B
5331
+ </span>
5350
5332
  </div>
5351
- </span>
5333
+ </div>
5352
5334
  <span
5353
5335
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
5354
5336
  >
@@ -5409,31 +5391,30 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
5409
5391
  <div
5410
5392
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
5411
5393
  >
5412
- <span>
5394
+ <div
5395
+ class="iconWrapper_17y0hv9"
5396
+ >
5413
5397
  <div
5414
- class="iconWrapper_17y0hv9"
5398
+ class="satCircle_1anqode"
5399
+ data-test-id="choice-icon__sat-choice-icon"
5400
+ style="border-color: #0084ce; border-radius: 25px;"
5401
+ />
5402
+ <div
5403
+ class="letter_2ucovf"
5404
+ style="color: rgb(0, 132, 206);"
5415
5405
  >
5416
- <div
5417
- class="satCircle_vfr2zr"
5418
- style="border-color: #0084ce;"
5419
- />
5420
- <div
5421
- class="letter_2ucovf"
5422
- style="color: rgb(0, 132, 206);"
5406
+ <span
5407
+ class="perseus-sr-only"
5423
5408
  >
5424
- <span
5425
- class="perseus-sr-only"
5426
- >
5427
- (Choice C)
5428
- </span>
5429
- <span
5430
- aria-hidden="true"
5431
- >
5432
- C
5433
- </span>
5434
- </div>
5409
+ (Choice C)
5410
+ </span>
5411
+ <span
5412
+ aria-hidden="true"
5413
+ >
5414
+ C
5415
+ </span>
5435
5416
  </div>
5436
- </span>
5417
+ </div>
5437
5418
  <span
5438
5419
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
5439
5420
  >
@@ -5494,31 +5475,30 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
5494
5475
  <div
5495
5476
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
5496
5477
  >
5497
- <span>
5478
+ <div
5479
+ class="iconWrapper_17y0hv9"
5480
+ >
5481
+ <div
5482
+ class="satCircle_1anqode"
5483
+ data-test-id="choice-icon__sat-choice-icon"
5484
+ style="border-color: #0084ce; border-radius: 25px;"
5485
+ />
5498
5486
  <div
5499
- class="iconWrapper_17y0hv9"
5487
+ class="letter_2ucovf"
5488
+ style="color: rgb(0, 132, 206);"
5500
5489
  >
5501
- <div
5502
- class="satCircle_vfr2zr"
5503
- style="border-color: #0084ce;"
5504
- />
5505
- <div
5506
- class="letter_2ucovf"
5507
- style="color: rgb(0, 132, 206);"
5490
+ <span
5491
+ class="perseus-sr-only"
5508
5492
  >
5509
- <span
5510
- class="perseus-sr-only"
5511
- >
5512
- (Choice D)
5513
- </span>
5514
- <span
5515
- aria-hidden="true"
5516
- >
5517
- D
5518
- </span>
5519
- </div>
5493
+ (Choice D)
5494
+ </span>
5495
+ <span
5496
+ aria-hidden="true"
5497
+ >
5498
+ D
5499
+ </span>
5520
5500
  </div>
5521
- </span>
5501
+ </div>
5522
5502
  <span
5523
5503
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
5524
5504
  >
@@ -5660,31 +5640,30 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
5660
5640
  <div
5661
5641
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
5662
5642
  >
5663
- <span>
5643
+ <div
5644
+ class="iconWrapper_17y0hv9"
5645
+ >
5664
5646
  <div
5665
- class="iconWrapper_17y0hv9"
5647
+ class="satCircle_1anqode"
5648
+ data-test-id="choice-icon__sat-choice-icon"
5649
+ style="border-color: #0084ce; border-radius: 25px;"
5650
+ />
5651
+ <div
5652
+ class="letter_2ucovf"
5653
+ style="color: rgb(0, 132, 206);"
5666
5654
  >
5667
- <div
5668
- class="satCircle_vfr2zr"
5669
- style="border-color: #0084ce;"
5670
- />
5671
- <div
5672
- class="letter_2ucovf"
5673
- style="color: rgb(0, 132, 206);"
5655
+ <span
5656
+ class="perseus-sr-only"
5674
5657
  >
5675
- <span
5676
- class="perseus-sr-only"
5677
- >
5678
- (Choice A, Incorrect)
5679
- </span>
5680
- <span
5681
- aria-hidden="true"
5682
- >
5683
- A
5684
- </span>
5685
- </div>
5658
+ (Choice A, Incorrect)
5659
+ </span>
5660
+ <span
5661
+ aria-hidden="true"
5662
+ >
5663
+ A
5664
+ </span>
5686
5665
  </div>
5687
- </span>
5666
+ </div>
5688
5667
  <span
5689
5668
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
5690
5669
  >
@@ -5825,31 +5804,30 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
5825
5804
  <div
5826
5805
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
5827
5806
  >
5828
- <span>
5807
+ <div
5808
+ class="iconWrapper_17y0hv9"
5809
+ >
5810
+ <div
5811
+ class="satCircle_1anqode"
5812
+ data-test-id="choice-icon__sat-choice-icon"
5813
+ style="border-color: #0084ce; border-radius: 25px;"
5814
+ />
5829
5815
  <div
5830
- class="iconWrapper_17y0hv9"
5816
+ class="letter_2ucovf"
5817
+ style="color: rgb(0, 132, 206);"
5831
5818
  >
5832
- <div
5833
- class="satCircle_vfr2zr"
5834
- style="border-color: #0084ce;"
5835
- />
5836
- <div
5837
- class="letter_2ucovf"
5838
- style="color: rgb(0, 132, 206);"
5819
+ <span
5820
+ class="perseus-sr-only"
5839
5821
  >
5840
- <span
5841
- class="perseus-sr-only"
5842
- >
5843
- (Choice B, Incorrect)
5844
- </span>
5845
- <span
5846
- aria-hidden="true"
5847
- >
5848
- B
5849
- </span>
5850
- </div>
5822
+ (Choice B, Incorrect)
5823
+ </span>
5824
+ <span
5825
+ aria-hidden="true"
5826
+ >
5827
+ B
5828
+ </span>
5851
5829
  </div>
5852
- </span>
5830
+ </div>
5853
5831
  <span
5854
5832
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
5855
5833
  >
@@ -5961,31 +5939,30 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
5961
5939
  <div
5962
5940
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
5963
5941
  >
5964
- <span>
5942
+ <div
5943
+ class="iconWrapper_17y0hv9"
5944
+ >
5965
5945
  <div
5966
- class="iconWrapper_17y0hv9"
5946
+ class="satCircle_1anqode"
5947
+ data-test-id="choice-icon__sat-choice-icon"
5948
+ style="background-color: rgb(255, 255, 255); border-color: #009900; border-radius: 25px;"
5949
+ />
5950
+ <div
5951
+ class="letter_2ucovf"
5952
+ style="color: rgb(0, 153, 0);"
5967
5953
  >
5968
- <div
5969
- class="satCircle_vfr2zr"
5970
- style="background-color: rgb(255, 255, 255); border-color: #009900;"
5971
- />
5972
- <div
5973
- class="letter_2ucovf"
5974
- style="color: rgb(0, 153, 0);"
5954
+ <span
5955
+ class="perseus-sr-only"
5975
5956
  >
5976
- <span
5977
- class="perseus-sr-only"
5978
- >
5979
- (Choice C, Correct)
5980
- </span>
5981
- <span
5982
- aria-hidden="true"
5983
- >
5984
- C
5985
- </span>
5986
- </div>
5957
+ (Choice C, Correct)
5958
+ </span>
5959
+ <span
5960
+ aria-hidden="true"
5961
+ >
5962
+ C
5963
+ </span>
5987
5964
  </div>
5988
- </span>
5965
+ </div>
5989
5966
  <span
5990
5967
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
5991
5968
  >
@@ -6092,31 +6069,30 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
6092
6069
  <div
6093
6070
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
6094
6071
  >
6095
- <span>
6072
+ <div
6073
+ class="iconWrapper_17y0hv9"
6074
+ >
6075
+ <div
6076
+ class="satCircle_1anqode"
6077
+ data-test-id="choice-icon__sat-choice-icon"
6078
+ style="border-color: #0084ce; border-radius: 25px;"
6079
+ />
6096
6080
  <div
6097
- class="iconWrapper_17y0hv9"
6081
+ class="letter_2ucovf"
6082
+ style="color: rgb(0, 132, 206);"
6098
6083
  >
6099
- <div
6100
- class="satCircle_vfr2zr"
6101
- style="border-color: #0084ce;"
6102
- />
6103
- <div
6104
- class="letter_2ucovf"
6105
- style="color: rgb(0, 132, 206);"
6084
+ <span
6085
+ class="perseus-sr-only"
6106
6086
  >
6107
- <span
6108
- class="perseus-sr-only"
6109
- >
6110
- (Choice D, Incorrect)
6111
- </span>
6112
- <span
6113
- aria-hidden="true"
6114
- >
6115
- D
6116
- </span>
6117
- </div>
6087
+ (Choice D, Incorrect)
6088
+ </span>
6089
+ <span
6090
+ aria-hidden="true"
6091
+ >
6092
+ D
6093
+ </span>
6118
6094
  </div>
6119
- </span>
6095
+ </div>
6120
6096
  <span
6121
6097
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
6122
6098
  >