@khanacademy/perseus 1.0.0 → 1.1.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.
- package/CHANGELOG.md +11 -0
- package/dist/es/index.css +15 -8
- package/dist/es/index.js +225 -194
- package/dist/es/index.js.map +1 -1
- package/dist/index.css +15 -8
- package/dist/index.js +229 -196
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/number-input.jsx +2 -2
- package/src/components/simple-keypad-input.jsx +18 -21
- package/src/index.js +1 -1
- package/src/multi-items/__tests__/__snapshots__/multi-renderer_test.js.snap +356 -65
- package/src/multi-items/__tests__/multi-renderer_test.js +9 -9
- package/src/perseus-types.js +18 -7
- package/src/styles/perseus-renderer.less +8 -2
- package/src/styles/widgets/passage.less +9 -5
- package/src/util/answer-types.js +2 -3
- package/src/util/math.js +3 -10
- package/src/widgets/__stories__/numeric-input.stories.jsx +43 -2
- package/src/widgets/__tests__/__snapshots__/definition_test.js.snap +4 -4
- package/src/widgets/__tests__/__snapshots__/group_test.jsx.snap +226 -65
- package/src/widgets/__tests__/__snapshots__/radio_test.jsx.snap +2581 -679
- package/src/widgets/__tests__/group_test.jsx +4 -4
- package/src/widgets/__tests__/numeric-input_test.jsx +12 -8
- package/src/widgets/__tests__/passage_test.jsx +81 -0
- package/src/widgets/__tests__/radio/base-radio_test.jsx +55 -7
- package/src/widgets/__tests__/radio/choice_test.jsx +164 -63
- package/src/widgets/__tests__/radio_test.jsx +39 -15
- package/src/widgets/definition.jsx +1 -1
- package/src/widgets/group.jsx +84 -102
- package/src/widgets/input-number.jsx +6 -1
- package/src/widgets/numeric-input.jsx +87 -80
- package/src/widgets/radio/base-radio.jsx +3 -1
- package/src/widgets/radio/choice-a11y-text.js +62 -0
- package/src/widgets/radio/choice-icon/choice-icon.jsx +0 -68
- package/src/widgets/radio/choice-icon/library-choice-icon.jsx +5 -10
- package/src/widgets/radio/choice-icon/sat-choice-icon.jsx +3 -12
- package/src/widgets/radio/choice.jsx +46 -3
|
@@ -128,6 +128,7 @@ exports[`group widget should snapshot: initial render 1`] = `
|
|
|
128
128
|
Choose 1 answer:
|
|
129
129
|
</legend>
|
|
130
130
|
<div
|
|
131
|
+
aria-hidden="true"
|
|
131
132
|
class="instructions instructions_125m8j1"
|
|
132
133
|
>
|
|
133
134
|
Choose 1 answer:
|
|
@@ -145,12 +146,53 @@ exports[`group widget should snapshot: initial render 1`] = `
|
|
|
145
146
|
<div
|
|
146
147
|
style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
|
|
147
148
|
>
|
|
149
|
+
<div
|
|
150
|
+
class="perseus-sr-only"
|
|
151
|
+
>
|
|
152
|
+
<input
|
|
153
|
+
id="choice-5"
|
|
154
|
+
tabindex="-1"
|
|
155
|
+
type="radio"
|
|
156
|
+
/>
|
|
157
|
+
<label
|
|
158
|
+
for="choice-5"
|
|
159
|
+
>
|
|
160
|
+
(Choice A)
|
|
161
|
+
|
|
162
|
+
<span
|
|
163
|
+
class="mock-KatexProvider"
|
|
164
|
+
>
|
|
165
|
+
<div
|
|
166
|
+
class="perseus-renderer perseus-renderer-responsive"
|
|
167
|
+
>
|
|
168
|
+
<div
|
|
169
|
+
class="paragraph perseus-paragraph-centered"
|
|
170
|
+
data-perseus-paragraph-index="0"
|
|
171
|
+
>
|
|
172
|
+
<div
|
|
173
|
+
class="perseus-block-math"
|
|
174
|
+
>
|
|
175
|
+
<div
|
|
176
|
+
class="perseus-block-math-inner"
|
|
177
|
+
style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
|
|
178
|
+
>
|
|
179
|
+
<span
|
|
180
|
+
class="mock-TeX"
|
|
181
|
+
>
|
|
182
|
+
45
|
|
183
|
+
</span>
|
|
184
|
+
</div>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
</span>
|
|
189
|
+
</label>
|
|
190
|
+
</div>
|
|
148
191
|
<button
|
|
149
|
-
aria-checked="false"
|
|
150
192
|
aria-disabled="false"
|
|
151
|
-
aria-
|
|
193
|
+
aria-hidden="true"
|
|
194
|
+
aria-label=""
|
|
152
195
|
class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
|
|
153
|
-
role="checkbox"
|
|
154
196
|
tabindex="0"
|
|
155
197
|
type="button"
|
|
156
198
|
>
|
|
@@ -171,16 +213,7 @@ exports[`group widget should snapshot: initial render 1`] = `
|
|
|
171
213
|
data-test-id="choice-icon__library-choice-icon"
|
|
172
214
|
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
|
|
173
215
|
>
|
|
174
|
-
|
|
175
|
-
class="perseus-sr-only"
|
|
176
|
-
>
|
|
177
|
-
(Choice A)
|
|
178
|
-
</div>
|
|
179
|
-
<div
|
|
180
|
-
aria-hidden="true"
|
|
181
|
-
>
|
|
182
|
-
A
|
|
183
|
-
</div>
|
|
216
|
+
A
|
|
184
217
|
</div>
|
|
185
218
|
</span>
|
|
186
219
|
</div>
|
|
@@ -232,12 +265,53 @@ exports[`group widget should snapshot: initial render 1`] = `
|
|
|
232
265
|
<div
|
|
233
266
|
style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
|
|
234
267
|
>
|
|
268
|
+
<div
|
|
269
|
+
class="perseus-sr-only"
|
|
270
|
+
>
|
|
271
|
+
<input
|
|
272
|
+
id="choice-6"
|
|
273
|
+
tabindex="-1"
|
|
274
|
+
type="radio"
|
|
275
|
+
/>
|
|
276
|
+
<label
|
|
277
|
+
for="choice-6"
|
|
278
|
+
>
|
|
279
|
+
(Choice B)
|
|
280
|
+
|
|
281
|
+
<span
|
|
282
|
+
class="mock-KatexProvider"
|
|
283
|
+
>
|
|
284
|
+
<div
|
|
285
|
+
class="perseus-renderer perseus-renderer-responsive"
|
|
286
|
+
>
|
|
287
|
+
<div
|
|
288
|
+
class="paragraph perseus-paragraph-centered"
|
|
289
|
+
data-perseus-paragraph-index="0"
|
|
290
|
+
>
|
|
291
|
+
<div
|
|
292
|
+
class="perseus-block-math"
|
|
293
|
+
>
|
|
294
|
+
<div
|
|
295
|
+
class="perseus-block-math-inner"
|
|
296
|
+
style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
|
|
297
|
+
>
|
|
298
|
+
<span
|
|
299
|
+
class="mock-TeX"
|
|
300
|
+
>
|
|
301
|
+
42
|
|
302
|
+
</span>
|
|
303
|
+
</div>
|
|
304
|
+
</div>
|
|
305
|
+
</div>
|
|
306
|
+
</div>
|
|
307
|
+
</span>
|
|
308
|
+
</label>
|
|
309
|
+
</div>
|
|
235
310
|
<button
|
|
236
|
-
aria-checked="false"
|
|
237
311
|
aria-disabled="false"
|
|
238
|
-
aria-
|
|
312
|
+
aria-hidden="true"
|
|
313
|
+
aria-label=""
|
|
239
314
|
class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
|
|
240
|
-
role="checkbox"
|
|
241
315
|
tabindex="0"
|
|
242
316
|
type="button"
|
|
243
317
|
>
|
|
@@ -258,16 +332,7 @@ exports[`group widget should snapshot: initial render 1`] = `
|
|
|
258
332
|
data-test-id="choice-icon__library-choice-icon"
|
|
259
333
|
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
|
|
260
334
|
>
|
|
261
|
-
|
|
262
|
-
class="perseus-sr-only"
|
|
263
|
-
>
|
|
264
|
-
(Choice B)
|
|
265
|
-
</div>
|
|
266
|
-
<div
|
|
267
|
-
aria-hidden="true"
|
|
268
|
-
>
|
|
269
|
-
B
|
|
270
|
-
</div>
|
|
335
|
+
B
|
|
271
336
|
</div>
|
|
272
337
|
</span>
|
|
273
338
|
</div>
|
|
@@ -319,12 +384,53 @@ exports[`group widget should snapshot: initial render 1`] = `
|
|
|
319
384
|
<div
|
|
320
385
|
style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
|
|
321
386
|
>
|
|
387
|
+
<div
|
|
388
|
+
class="perseus-sr-only"
|
|
389
|
+
>
|
|
390
|
+
<input
|
|
391
|
+
id="choice-7"
|
|
392
|
+
tabindex="-1"
|
|
393
|
+
type="radio"
|
|
394
|
+
/>
|
|
395
|
+
<label
|
|
396
|
+
for="choice-7"
|
|
397
|
+
>
|
|
398
|
+
(Choice C)
|
|
399
|
+
|
|
400
|
+
<span
|
|
401
|
+
class="mock-KatexProvider"
|
|
402
|
+
>
|
|
403
|
+
<div
|
|
404
|
+
class="perseus-renderer perseus-renderer-responsive"
|
|
405
|
+
>
|
|
406
|
+
<div
|
|
407
|
+
class="paragraph perseus-paragraph-centered"
|
|
408
|
+
data-perseus-paragraph-index="0"
|
|
409
|
+
>
|
|
410
|
+
<div
|
|
411
|
+
class="perseus-block-math"
|
|
412
|
+
>
|
|
413
|
+
<div
|
|
414
|
+
class="perseus-block-math-inner"
|
|
415
|
+
style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
|
|
416
|
+
>
|
|
417
|
+
<span
|
|
418
|
+
class="mock-TeX"
|
|
419
|
+
>
|
|
420
|
+
30
|
|
421
|
+
</span>
|
|
422
|
+
</div>
|
|
423
|
+
</div>
|
|
424
|
+
</div>
|
|
425
|
+
</div>
|
|
426
|
+
</span>
|
|
427
|
+
</label>
|
|
428
|
+
</div>
|
|
322
429
|
<button
|
|
323
|
-
aria-checked="false"
|
|
324
430
|
aria-disabled="false"
|
|
325
|
-
aria-
|
|
431
|
+
aria-hidden="true"
|
|
432
|
+
aria-label=""
|
|
326
433
|
class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
|
|
327
|
-
role="checkbox"
|
|
328
434
|
tabindex="0"
|
|
329
435
|
type="button"
|
|
330
436
|
>
|
|
@@ -345,16 +451,7 @@ exports[`group widget should snapshot: initial render 1`] = `
|
|
|
345
451
|
data-test-id="choice-icon__library-choice-icon"
|
|
346
452
|
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
|
|
347
453
|
>
|
|
348
|
-
|
|
349
|
-
class="perseus-sr-only"
|
|
350
|
-
>
|
|
351
|
-
(Choice C)
|
|
352
|
-
</div>
|
|
353
|
-
<div
|
|
354
|
-
aria-hidden="true"
|
|
355
|
-
>
|
|
356
|
-
C
|
|
357
|
-
</div>
|
|
454
|
+
C
|
|
358
455
|
</div>
|
|
359
456
|
</span>
|
|
360
457
|
</div>
|
|
@@ -406,12 +503,53 @@ exports[`group widget should snapshot: initial render 1`] = `
|
|
|
406
503
|
<div
|
|
407
504
|
style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
|
|
408
505
|
>
|
|
506
|
+
<div
|
|
507
|
+
class="perseus-sr-only"
|
|
508
|
+
>
|
|
509
|
+
<input
|
|
510
|
+
id="choice-8"
|
|
511
|
+
tabindex="-1"
|
|
512
|
+
type="radio"
|
|
513
|
+
/>
|
|
514
|
+
<label
|
|
515
|
+
for="choice-8"
|
|
516
|
+
>
|
|
517
|
+
(Choice D)
|
|
518
|
+
|
|
519
|
+
<span
|
|
520
|
+
class="mock-KatexProvider"
|
|
521
|
+
>
|
|
522
|
+
<div
|
|
523
|
+
class="perseus-renderer perseus-renderer-responsive"
|
|
524
|
+
>
|
|
525
|
+
<div
|
|
526
|
+
class="paragraph perseus-paragraph-centered"
|
|
527
|
+
data-perseus-paragraph-index="0"
|
|
528
|
+
>
|
|
529
|
+
<div
|
|
530
|
+
class="perseus-block-math"
|
|
531
|
+
>
|
|
532
|
+
<div
|
|
533
|
+
class="perseus-block-math-inner"
|
|
534
|
+
style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
|
|
535
|
+
>
|
|
536
|
+
<span
|
|
537
|
+
class="mock-TeX"
|
|
538
|
+
>
|
|
539
|
+
18
|
|
540
|
+
</span>
|
|
541
|
+
</div>
|
|
542
|
+
</div>
|
|
543
|
+
</div>
|
|
544
|
+
</div>
|
|
545
|
+
</span>
|
|
546
|
+
</label>
|
|
547
|
+
</div>
|
|
409
548
|
<button
|
|
410
|
-
aria-checked="false"
|
|
411
549
|
aria-disabled="false"
|
|
412
|
-
aria-
|
|
550
|
+
aria-hidden="true"
|
|
551
|
+
aria-label=""
|
|
413
552
|
class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
|
|
414
|
-
role="checkbox"
|
|
415
553
|
tabindex="0"
|
|
416
554
|
type="button"
|
|
417
555
|
>
|
|
@@ -432,16 +570,7 @@ exports[`group widget should snapshot: initial render 1`] = `
|
|
|
432
570
|
data-test-id="choice-icon__library-choice-icon"
|
|
433
571
|
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
|
|
434
572
|
>
|
|
435
|
-
|
|
436
|
-
class="perseus-sr-only"
|
|
437
|
-
>
|
|
438
|
-
(Choice D)
|
|
439
|
-
</div>
|
|
440
|
-
<div
|
|
441
|
-
aria-hidden="true"
|
|
442
|
-
>
|
|
443
|
-
D
|
|
444
|
-
</div>
|
|
573
|
+
D
|
|
445
574
|
</div>
|
|
446
575
|
</span>
|
|
447
576
|
</div>
|
|
@@ -493,12 +622,53 @@ exports[`group widget should snapshot: initial render 1`] = `
|
|
|
493
622
|
<div
|
|
494
623
|
style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
|
|
495
624
|
>
|
|
625
|
+
<div
|
|
626
|
+
class="perseus-sr-only"
|
|
627
|
+
>
|
|
628
|
+
<input
|
|
629
|
+
id="choice-9"
|
|
630
|
+
tabindex="-1"
|
|
631
|
+
type="radio"
|
|
632
|
+
/>
|
|
633
|
+
<label
|
|
634
|
+
for="choice-9"
|
|
635
|
+
>
|
|
636
|
+
(Choice E)
|
|
637
|
+
|
|
638
|
+
<span
|
|
639
|
+
class="mock-KatexProvider"
|
|
640
|
+
>
|
|
641
|
+
<div
|
|
642
|
+
class="perseus-renderer perseus-renderer-responsive"
|
|
643
|
+
>
|
|
644
|
+
<div
|
|
645
|
+
class="paragraph perseus-paragraph-centered"
|
|
646
|
+
data-perseus-paragraph-index="0"
|
|
647
|
+
>
|
|
648
|
+
<div
|
|
649
|
+
class="perseus-block-math"
|
|
650
|
+
>
|
|
651
|
+
<div
|
|
652
|
+
class="perseus-block-math-inner"
|
|
653
|
+
style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
|
|
654
|
+
>
|
|
655
|
+
<span
|
|
656
|
+
class="mock-TeX"
|
|
657
|
+
>
|
|
658
|
+
15
|
|
659
|
+
</span>
|
|
660
|
+
</div>
|
|
661
|
+
</div>
|
|
662
|
+
</div>
|
|
663
|
+
</div>
|
|
664
|
+
</span>
|
|
665
|
+
</label>
|
|
666
|
+
</div>
|
|
496
667
|
<button
|
|
497
|
-
aria-checked="false"
|
|
498
668
|
aria-disabled="false"
|
|
499
|
-
aria-
|
|
669
|
+
aria-hidden="true"
|
|
670
|
+
aria-label=""
|
|
500
671
|
class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
|
|
501
|
-
role="checkbox"
|
|
502
672
|
tabindex="0"
|
|
503
673
|
type="button"
|
|
504
674
|
>
|
|
@@ -519,16 +689,7 @@ exports[`group widget should snapshot: initial render 1`] = `
|
|
|
519
689
|
data-test-id="choice-icon__library-choice-icon"
|
|
520
690
|
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
|
|
521
691
|
>
|
|
522
|
-
|
|
523
|
-
class="perseus-sr-only"
|
|
524
|
-
>
|
|
525
|
-
(Choice E)
|
|
526
|
-
</div>
|
|
527
|
-
<div
|
|
528
|
-
aria-hidden="true"
|
|
529
|
-
>
|
|
530
|
-
E
|
|
531
|
-
</div>
|
|
692
|
+
E
|
|
532
693
|
</div>
|
|
533
694
|
</span>
|
|
534
695
|
</div>
|