@khanacademy/wonder-blocks-dropdown 2.7.0 → 2.7.3
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 +28 -0
- package/dist/es/index.js +50 -7
- package/dist/index.js +71 -7
- package/package.json +10 -10
- package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +494 -0
- package/src/components/__tests__/dropdown-core-virtualized.test.js +0 -9
- package/src/components/__tests__/dropdown-core.test.js +65 -42
- package/src/components/__tests__/multi-select.test.js +57 -0
- package/src/components/__tests__/single-select.test.js +30 -0
- package/src/components/dropdown-core.js +55 -1
- package/src/components/multi-select.js +2 -1
- package/src/components/search-text-input.js +22 -0
- package/src/components/single-select.stories.js +9 -2
- package/src/util/constants.js +3 -0
|
@@ -43,6 +43,25 @@ exports[`wonder-blocks-dropdown example 1 1`] = `
|
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
>
|
|
46
|
+
<span
|
|
47
|
+
aria-atomic="true"
|
|
48
|
+
aria-live="polite"
|
|
49
|
+
aria-relevant="additions text"
|
|
50
|
+
className=""
|
|
51
|
+
data-test-id="dropdown-live-region"
|
|
52
|
+
style={
|
|
53
|
+
Object {
|
|
54
|
+
"border": 0,
|
|
55
|
+
"clip": "rect(0,0,0,0)",
|
|
56
|
+
"height": 1,
|
|
57
|
+
"margin": -1,
|
|
58
|
+
"overflow": "hidden",
|
|
59
|
+
"padding": 0,
|
|
60
|
+
"position": "absolute",
|
|
61
|
+
"width": 1,
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
/>
|
|
46
65
|
<button
|
|
47
66
|
aria-expanded="false"
|
|
48
67
|
aria-haspopup="menu"
|
|
@@ -246,6 +265,25 @@ exports[`wonder-blocks-dropdown example 2 1`] = `
|
|
|
246
265
|
}
|
|
247
266
|
}
|
|
248
267
|
>
|
|
268
|
+
<span
|
|
269
|
+
aria-atomic="true"
|
|
270
|
+
aria-live="polite"
|
|
271
|
+
aria-relevant="additions text"
|
|
272
|
+
className=""
|
|
273
|
+
data-test-id="dropdown-live-region"
|
|
274
|
+
style={
|
|
275
|
+
Object {
|
|
276
|
+
"border": 0,
|
|
277
|
+
"clip": "rect(0,0,0,0)",
|
|
278
|
+
"height": 1,
|
|
279
|
+
"margin": -1,
|
|
280
|
+
"overflow": "hidden",
|
|
281
|
+
"padding": 0,
|
|
282
|
+
"position": "absolute",
|
|
283
|
+
"width": 1,
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
/>
|
|
249
287
|
<button
|
|
250
288
|
aria-expanded="false"
|
|
251
289
|
aria-haspopup="menu"
|
|
@@ -427,6 +465,25 @@ exports[`wonder-blocks-dropdown example 3 1`] = `
|
|
|
427
465
|
}
|
|
428
466
|
}
|
|
429
467
|
>
|
|
468
|
+
<span
|
|
469
|
+
aria-atomic="true"
|
|
470
|
+
aria-live="polite"
|
|
471
|
+
aria-relevant="additions text"
|
|
472
|
+
className=""
|
|
473
|
+
data-test-id="dropdown-live-region"
|
|
474
|
+
style={
|
|
475
|
+
Object {
|
|
476
|
+
"border": 0,
|
|
477
|
+
"clip": "rect(0,0,0,0)",
|
|
478
|
+
"height": 1,
|
|
479
|
+
"margin": -1,
|
|
480
|
+
"overflow": "hidden",
|
|
481
|
+
"padding": 0,
|
|
482
|
+
"position": "absolute",
|
|
483
|
+
"width": 1,
|
|
484
|
+
}
|
|
485
|
+
}
|
|
486
|
+
/>
|
|
430
487
|
<button
|
|
431
488
|
aria-expanded="false"
|
|
432
489
|
aria-haspopup="menu"
|
|
@@ -608,6 +665,25 @@ exports[`wonder-blocks-dropdown example 4 1`] = `
|
|
|
608
665
|
}
|
|
609
666
|
}
|
|
610
667
|
>
|
|
668
|
+
<span
|
|
669
|
+
aria-atomic="true"
|
|
670
|
+
aria-live="polite"
|
|
671
|
+
aria-relevant="additions text"
|
|
672
|
+
className=""
|
|
673
|
+
data-test-id="dropdown-live-region"
|
|
674
|
+
style={
|
|
675
|
+
Object {
|
|
676
|
+
"border": 0,
|
|
677
|
+
"clip": "rect(0,0,0,0)",
|
|
678
|
+
"height": 1,
|
|
679
|
+
"margin": -1,
|
|
680
|
+
"overflow": "hidden",
|
|
681
|
+
"padding": 0,
|
|
682
|
+
"position": "absolute",
|
|
683
|
+
"width": 1,
|
|
684
|
+
}
|
|
685
|
+
}
|
|
686
|
+
/>
|
|
611
687
|
<button
|
|
612
688
|
aria-expanded="false"
|
|
613
689
|
aria-haspopup="menu"
|
|
@@ -789,6 +865,25 @@ exports[`wonder-blocks-dropdown example 5 1`] = `
|
|
|
789
865
|
}
|
|
790
866
|
}
|
|
791
867
|
>
|
|
868
|
+
<span
|
|
869
|
+
aria-atomic="true"
|
|
870
|
+
aria-live="polite"
|
|
871
|
+
aria-relevant="additions text"
|
|
872
|
+
className=""
|
|
873
|
+
data-test-id="dropdown-live-region"
|
|
874
|
+
style={
|
|
875
|
+
Object {
|
|
876
|
+
"border": 0,
|
|
877
|
+
"clip": "rect(0,0,0,0)",
|
|
878
|
+
"height": 1,
|
|
879
|
+
"margin": -1,
|
|
880
|
+
"overflow": "hidden",
|
|
881
|
+
"padding": 0,
|
|
882
|
+
"position": "absolute",
|
|
883
|
+
"width": 1,
|
|
884
|
+
}
|
|
885
|
+
}
|
|
886
|
+
/>
|
|
792
887
|
<button
|
|
793
888
|
aria-expanded="false"
|
|
794
889
|
aria-haspopup="menu"
|
|
@@ -971,6 +1066,25 @@ exports[`wonder-blocks-dropdown example 6 1`] = `
|
|
|
971
1066
|
}
|
|
972
1067
|
}
|
|
973
1068
|
>
|
|
1069
|
+
<span
|
|
1070
|
+
aria-atomic="true"
|
|
1071
|
+
aria-live="polite"
|
|
1072
|
+
aria-relevant="additions text"
|
|
1073
|
+
className=""
|
|
1074
|
+
data-test-id="dropdown-live-region"
|
|
1075
|
+
style={
|
|
1076
|
+
Object {
|
|
1077
|
+
"border": 0,
|
|
1078
|
+
"clip": "rect(0,0,0,0)",
|
|
1079
|
+
"height": 1,
|
|
1080
|
+
"margin": -1,
|
|
1081
|
+
"overflow": "hidden",
|
|
1082
|
+
"padding": 0,
|
|
1083
|
+
"position": "absolute",
|
|
1084
|
+
"width": 1,
|
|
1085
|
+
}
|
|
1086
|
+
}
|
|
1087
|
+
/>
|
|
974
1088
|
<button
|
|
975
1089
|
aria-expanded="false"
|
|
976
1090
|
aria-haspopup="menu"
|
|
@@ -1231,6 +1345,25 @@ exports[`wonder-blocks-dropdown example 7 1`] = `
|
|
|
1231
1345
|
}
|
|
1232
1346
|
}
|
|
1233
1347
|
>
|
|
1348
|
+
<span
|
|
1349
|
+
aria-atomic="true"
|
|
1350
|
+
aria-live="polite"
|
|
1351
|
+
aria-relevant="additions text"
|
|
1352
|
+
className=""
|
|
1353
|
+
data-test-id="dropdown-live-region"
|
|
1354
|
+
style={
|
|
1355
|
+
Object {
|
|
1356
|
+
"border": 0,
|
|
1357
|
+
"clip": "rect(0,0,0,0)",
|
|
1358
|
+
"height": 1,
|
|
1359
|
+
"margin": -1,
|
|
1360
|
+
"overflow": "hidden",
|
|
1361
|
+
"padding": 0,
|
|
1362
|
+
"position": "absolute",
|
|
1363
|
+
"width": 1,
|
|
1364
|
+
}
|
|
1365
|
+
}
|
|
1366
|
+
/>
|
|
1234
1367
|
<span
|
|
1235
1368
|
className=""
|
|
1236
1369
|
data-test-id="teacher-menu-custom-opener"
|
|
@@ -1309,6 +1442,25 @@ exports[`wonder-blocks-dropdown example 8 1`] = `
|
|
|
1309
1442
|
}
|
|
1310
1443
|
}
|
|
1311
1444
|
>
|
|
1445
|
+
<span
|
|
1446
|
+
aria-atomic="true"
|
|
1447
|
+
aria-live="polite"
|
|
1448
|
+
aria-relevant="additions text"
|
|
1449
|
+
className=""
|
|
1450
|
+
data-test-id="dropdown-live-region"
|
|
1451
|
+
style={
|
|
1452
|
+
Object {
|
|
1453
|
+
"border": 0,
|
|
1454
|
+
"clip": "rect(0,0,0,0)",
|
|
1455
|
+
"height": 1,
|
|
1456
|
+
"margin": -1,
|
|
1457
|
+
"overflow": "hidden",
|
|
1458
|
+
"padding": 0,
|
|
1459
|
+
"position": "absolute",
|
|
1460
|
+
"width": 1,
|
|
1461
|
+
}
|
|
1462
|
+
}
|
|
1463
|
+
/>
|
|
1312
1464
|
<button
|
|
1313
1465
|
aria-expanded="false"
|
|
1314
1466
|
aria-haspopup="listbox"
|
|
@@ -1446,6 +1598,25 @@ exports[`wonder-blocks-dropdown example 9 1`] = `
|
|
|
1446
1598
|
}
|
|
1447
1599
|
}
|
|
1448
1600
|
>
|
|
1601
|
+
<span
|
|
1602
|
+
aria-atomic="true"
|
|
1603
|
+
aria-live="polite"
|
|
1604
|
+
aria-relevant="additions text"
|
|
1605
|
+
className=""
|
|
1606
|
+
data-test-id="dropdown-live-region"
|
|
1607
|
+
style={
|
|
1608
|
+
Object {
|
|
1609
|
+
"border": 0,
|
|
1610
|
+
"clip": "rect(0,0,0,0)",
|
|
1611
|
+
"height": 1,
|
|
1612
|
+
"margin": -1,
|
|
1613
|
+
"overflow": "hidden",
|
|
1614
|
+
"padding": 0,
|
|
1615
|
+
"position": "absolute",
|
|
1616
|
+
"width": 1,
|
|
1617
|
+
}
|
|
1618
|
+
}
|
|
1619
|
+
/>
|
|
1449
1620
|
<button
|
|
1450
1621
|
aria-expanded="false"
|
|
1451
1622
|
aria-haspopup="listbox"
|
|
@@ -1582,6 +1753,25 @@ exports[`wonder-blocks-dropdown example 10 1`] = `
|
|
|
1582
1753
|
}
|
|
1583
1754
|
}
|
|
1584
1755
|
>
|
|
1756
|
+
<span
|
|
1757
|
+
aria-atomic="true"
|
|
1758
|
+
aria-live="polite"
|
|
1759
|
+
aria-relevant="additions text"
|
|
1760
|
+
className=""
|
|
1761
|
+
data-test-id="dropdown-live-region"
|
|
1762
|
+
style={
|
|
1763
|
+
Object {
|
|
1764
|
+
"border": 0,
|
|
1765
|
+
"clip": "rect(0,0,0,0)",
|
|
1766
|
+
"height": 1,
|
|
1767
|
+
"margin": -1,
|
|
1768
|
+
"overflow": "hidden",
|
|
1769
|
+
"padding": 0,
|
|
1770
|
+
"position": "absolute",
|
|
1771
|
+
"width": 1,
|
|
1772
|
+
}
|
|
1773
|
+
}
|
|
1774
|
+
/>
|
|
1585
1775
|
<button
|
|
1586
1776
|
aria-expanded="false"
|
|
1587
1777
|
aria-haspopup="listbox"
|
|
@@ -1744,6 +1934,25 @@ exports[`wonder-blocks-dropdown example 11 1`] = `
|
|
|
1744
1934
|
}
|
|
1745
1935
|
}
|
|
1746
1936
|
>
|
|
1937
|
+
<span
|
|
1938
|
+
aria-atomic="true"
|
|
1939
|
+
aria-live="polite"
|
|
1940
|
+
aria-relevant="additions text"
|
|
1941
|
+
className=""
|
|
1942
|
+
data-test-id="dropdown-live-region"
|
|
1943
|
+
style={
|
|
1944
|
+
Object {
|
|
1945
|
+
"border": 0,
|
|
1946
|
+
"clip": "rect(0,0,0,0)",
|
|
1947
|
+
"height": 1,
|
|
1948
|
+
"margin": -1,
|
|
1949
|
+
"overflow": "hidden",
|
|
1950
|
+
"padding": 0,
|
|
1951
|
+
"position": "absolute",
|
|
1952
|
+
"width": 1,
|
|
1953
|
+
}
|
|
1954
|
+
}
|
|
1955
|
+
/>
|
|
1747
1956
|
<button
|
|
1748
1957
|
aria-expanded="false"
|
|
1749
1958
|
aria-haspopup="listbox"
|
|
@@ -1881,6 +2090,25 @@ exports[`wonder-blocks-dropdown example 12 1`] = `
|
|
|
1881
2090
|
}
|
|
1882
2091
|
}
|
|
1883
2092
|
>
|
|
2093
|
+
<span
|
|
2094
|
+
aria-atomic="true"
|
|
2095
|
+
aria-live="polite"
|
|
2096
|
+
aria-relevant="additions text"
|
|
2097
|
+
className=""
|
|
2098
|
+
data-test-id="dropdown-live-region"
|
|
2099
|
+
style={
|
|
2100
|
+
Object {
|
|
2101
|
+
"border": 0,
|
|
2102
|
+
"clip": "rect(0,0,0,0)",
|
|
2103
|
+
"height": 1,
|
|
2104
|
+
"margin": -1,
|
|
2105
|
+
"overflow": "hidden",
|
|
2106
|
+
"padding": 0,
|
|
2107
|
+
"position": "absolute",
|
|
2108
|
+
"width": 1,
|
|
2109
|
+
}
|
|
2110
|
+
}
|
|
2111
|
+
/>
|
|
1884
2112
|
<button
|
|
1885
2113
|
aria-expanded="false"
|
|
1886
2114
|
aria-haspopup="listbox"
|
|
@@ -2036,6 +2264,25 @@ exports[`wonder-blocks-dropdown example 13 1`] = `
|
|
|
2036
2264
|
}
|
|
2037
2265
|
}
|
|
2038
2266
|
>
|
|
2267
|
+
<span
|
|
2268
|
+
aria-atomic="true"
|
|
2269
|
+
aria-live="polite"
|
|
2270
|
+
aria-relevant="additions text"
|
|
2271
|
+
className=""
|
|
2272
|
+
data-test-id="dropdown-live-region"
|
|
2273
|
+
style={
|
|
2274
|
+
Object {
|
|
2275
|
+
"border": 0,
|
|
2276
|
+
"clip": "rect(0,0,0,0)",
|
|
2277
|
+
"height": 1,
|
|
2278
|
+
"margin": -1,
|
|
2279
|
+
"overflow": "hidden",
|
|
2280
|
+
"padding": 0,
|
|
2281
|
+
"position": "absolute",
|
|
2282
|
+
"width": 1,
|
|
2283
|
+
}
|
|
2284
|
+
}
|
|
2285
|
+
/>
|
|
2039
2286
|
<button
|
|
2040
2287
|
aria-expanded="false"
|
|
2041
2288
|
aria-haspopup="listbox"
|
|
@@ -2174,6 +2421,25 @@ exports[`wonder-blocks-dropdown example 14 1`] = `
|
|
|
2174
2421
|
}
|
|
2175
2422
|
}
|
|
2176
2423
|
>
|
|
2424
|
+
<span
|
|
2425
|
+
aria-atomic="true"
|
|
2426
|
+
aria-live="polite"
|
|
2427
|
+
aria-relevant="additions text"
|
|
2428
|
+
className=""
|
|
2429
|
+
data-test-id="dropdown-live-region"
|
|
2430
|
+
style={
|
|
2431
|
+
Object {
|
|
2432
|
+
"border": 0,
|
|
2433
|
+
"clip": "rect(0,0,0,0)",
|
|
2434
|
+
"height": 1,
|
|
2435
|
+
"margin": -1,
|
|
2436
|
+
"overflow": "hidden",
|
|
2437
|
+
"padding": 0,
|
|
2438
|
+
"position": "absolute",
|
|
2439
|
+
"width": 1,
|
|
2440
|
+
}
|
|
2441
|
+
}
|
|
2442
|
+
/>
|
|
2177
2443
|
<button
|
|
2178
2444
|
aria-expanded="false"
|
|
2179
2445
|
aria-haspopup="listbox"
|
|
@@ -2389,6 +2655,25 @@ exports[`wonder-blocks-dropdown example 15 1`] = `
|
|
|
2389
2655
|
}
|
|
2390
2656
|
}
|
|
2391
2657
|
>
|
|
2658
|
+
<span
|
|
2659
|
+
aria-atomic="true"
|
|
2660
|
+
aria-live="polite"
|
|
2661
|
+
aria-relevant="additions text"
|
|
2662
|
+
className=""
|
|
2663
|
+
data-test-id="dropdown-live-region"
|
|
2664
|
+
style={
|
|
2665
|
+
Object {
|
|
2666
|
+
"border": 0,
|
|
2667
|
+
"clip": "rect(0,0,0,0)",
|
|
2668
|
+
"height": 1,
|
|
2669
|
+
"margin": -1,
|
|
2670
|
+
"overflow": "hidden",
|
|
2671
|
+
"padding": 0,
|
|
2672
|
+
"position": "absolute",
|
|
2673
|
+
"width": 1,
|
|
2674
|
+
}
|
|
2675
|
+
}
|
|
2676
|
+
/>
|
|
2392
2677
|
<h2
|
|
2393
2678
|
className=""
|
|
2394
2679
|
data-test-id="single-select-custom-opener"
|
|
@@ -2474,6 +2759,25 @@ exports[`wonder-blocks-dropdown example 16 1`] = `
|
|
|
2474
2759
|
}
|
|
2475
2760
|
}
|
|
2476
2761
|
>
|
|
2762
|
+
<span
|
|
2763
|
+
aria-atomic="true"
|
|
2764
|
+
aria-live="polite"
|
|
2765
|
+
aria-relevant="additions text"
|
|
2766
|
+
className=""
|
|
2767
|
+
data-test-id="dropdown-live-region"
|
|
2768
|
+
style={
|
|
2769
|
+
Object {
|
|
2770
|
+
"border": 0,
|
|
2771
|
+
"clip": "rect(0,0,0,0)",
|
|
2772
|
+
"height": 1,
|
|
2773
|
+
"margin": -1,
|
|
2774
|
+
"overflow": "hidden",
|
|
2775
|
+
"padding": 0,
|
|
2776
|
+
"position": "absolute",
|
|
2777
|
+
"width": 1,
|
|
2778
|
+
}
|
|
2779
|
+
}
|
|
2780
|
+
/>
|
|
2477
2781
|
<button
|
|
2478
2782
|
aria-expanded="false"
|
|
2479
2783
|
aria-haspopup="listbox"
|
|
@@ -2610,6 +2914,25 @@ exports[`wonder-blocks-dropdown example 17 1`] = `
|
|
|
2610
2914
|
}
|
|
2611
2915
|
}
|
|
2612
2916
|
>
|
|
2917
|
+
<span
|
|
2918
|
+
aria-atomic="true"
|
|
2919
|
+
aria-live="polite"
|
|
2920
|
+
aria-relevant="additions text"
|
|
2921
|
+
className=""
|
|
2922
|
+
data-test-id="dropdown-live-region"
|
|
2923
|
+
style={
|
|
2924
|
+
Object {
|
|
2925
|
+
"border": 0,
|
|
2926
|
+
"clip": "rect(0,0,0,0)",
|
|
2927
|
+
"height": 1,
|
|
2928
|
+
"margin": -1,
|
|
2929
|
+
"overflow": "hidden",
|
|
2930
|
+
"padding": 0,
|
|
2931
|
+
"position": "absolute",
|
|
2932
|
+
"width": 1,
|
|
2933
|
+
}
|
|
2934
|
+
}
|
|
2935
|
+
/>
|
|
2613
2936
|
<button
|
|
2614
2937
|
aria-expanded="false"
|
|
2615
2938
|
aria-haspopup="listbox"
|
|
@@ -2747,6 +3070,25 @@ exports[`wonder-blocks-dropdown example 18 1`] = `
|
|
|
2747
3070
|
}
|
|
2748
3071
|
}
|
|
2749
3072
|
>
|
|
3073
|
+
<span
|
|
3074
|
+
aria-atomic="true"
|
|
3075
|
+
aria-live="polite"
|
|
3076
|
+
aria-relevant="additions text"
|
|
3077
|
+
className=""
|
|
3078
|
+
data-test-id="dropdown-live-region"
|
|
3079
|
+
style={
|
|
3080
|
+
Object {
|
|
3081
|
+
"border": 0,
|
|
3082
|
+
"clip": "rect(0,0,0,0)",
|
|
3083
|
+
"height": 1,
|
|
3084
|
+
"margin": -1,
|
|
3085
|
+
"overflow": "hidden",
|
|
3086
|
+
"padding": 0,
|
|
3087
|
+
"position": "absolute",
|
|
3088
|
+
"width": 1,
|
|
3089
|
+
}
|
|
3090
|
+
}
|
|
3091
|
+
/>
|
|
2750
3092
|
<button
|
|
2751
3093
|
aria-expanded="false"
|
|
2752
3094
|
aria-haspopup="listbox"
|
|
@@ -2883,6 +3225,25 @@ exports[`wonder-blocks-dropdown example 19 1`] = `
|
|
|
2883
3225
|
}
|
|
2884
3226
|
}
|
|
2885
3227
|
>
|
|
3228
|
+
<span
|
|
3229
|
+
aria-atomic="true"
|
|
3230
|
+
aria-live="polite"
|
|
3231
|
+
aria-relevant="additions text"
|
|
3232
|
+
className=""
|
|
3233
|
+
data-test-id="dropdown-live-region"
|
|
3234
|
+
style={
|
|
3235
|
+
Object {
|
|
3236
|
+
"border": 0,
|
|
3237
|
+
"clip": "rect(0,0,0,0)",
|
|
3238
|
+
"height": 1,
|
|
3239
|
+
"margin": -1,
|
|
3240
|
+
"overflow": "hidden",
|
|
3241
|
+
"padding": 0,
|
|
3242
|
+
"position": "absolute",
|
|
3243
|
+
"width": 1,
|
|
3244
|
+
}
|
|
3245
|
+
}
|
|
3246
|
+
/>
|
|
2886
3247
|
<button
|
|
2887
3248
|
aria-expanded="false"
|
|
2888
3249
|
aria-haspopup="listbox"
|
|
@@ -3114,6 +3475,25 @@ exports[`wonder-blocks-dropdown example 21 1`] = `
|
|
|
3114
3475
|
}
|
|
3115
3476
|
}
|
|
3116
3477
|
>
|
|
3478
|
+
<span
|
|
3479
|
+
aria-atomic="true"
|
|
3480
|
+
aria-live="polite"
|
|
3481
|
+
aria-relevant="additions text"
|
|
3482
|
+
className=""
|
|
3483
|
+
data-test-id="dropdown-live-region"
|
|
3484
|
+
style={
|
|
3485
|
+
Object {
|
|
3486
|
+
"border": 0,
|
|
3487
|
+
"clip": "rect(0,0,0,0)",
|
|
3488
|
+
"height": 1,
|
|
3489
|
+
"margin": -1,
|
|
3490
|
+
"overflow": "hidden",
|
|
3491
|
+
"padding": 0,
|
|
3492
|
+
"position": "absolute",
|
|
3493
|
+
"width": 1,
|
|
3494
|
+
}
|
|
3495
|
+
}
|
|
3496
|
+
/>
|
|
3117
3497
|
<button
|
|
3118
3498
|
aria-expanded="false"
|
|
3119
3499
|
aria-haspopup="listbox"
|
|
@@ -3269,6 +3649,25 @@ exports[`wonder-blocks-dropdown example 22 1`] = `
|
|
|
3269
3649
|
}
|
|
3270
3650
|
}
|
|
3271
3651
|
>
|
|
3652
|
+
<span
|
|
3653
|
+
aria-atomic="true"
|
|
3654
|
+
aria-live="polite"
|
|
3655
|
+
aria-relevant="additions text"
|
|
3656
|
+
className=""
|
|
3657
|
+
data-test-id="dropdown-live-region"
|
|
3658
|
+
style={
|
|
3659
|
+
Object {
|
|
3660
|
+
"border": 0,
|
|
3661
|
+
"clip": "rect(0,0,0,0)",
|
|
3662
|
+
"height": 1,
|
|
3663
|
+
"margin": -1,
|
|
3664
|
+
"overflow": "hidden",
|
|
3665
|
+
"padding": 0,
|
|
3666
|
+
"position": "absolute",
|
|
3667
|
+
"width": 1,
|
|
3668
|
+
}
|
|
3669
|
+
}
|
|
3670
|
+
/>
|
|
3272
3671
|
<button
|
|
3273
3672
|
aria-expanded="false"
|
|
3274
3673
|
aria-haspopup="listbox"
|
|
@@ -3407,6 +3806,25 @@ exports[`wonder-blocks-dropdown example 23 1`] = `
|
|
|
3407
3806
|
}
|
|
3408
3807
|
}
|
|
3409
3808
|
>
|
|
3809
|
+
<span
|
|
3810
|
+
aria-atomic="true"
|
|
3811
|
+
aria-live="polite"
|
|
3812
|
+
aria-relevant="additions text"
|
|
3813
|
+
className=""
|
|
3814
|
+
data-test-id="dropdown-live-region"
|
|
3815
|
+
style={
|
|
3816
|
+
Object {
|
|
3817
|
+
"border": 0,
|
|
3818
|
+
"clip": "rect(0,0,0,0)",
|
|
3819
|
+
"height": 1,
|
|
3820
|
+
"margin": -1,
|
|
3821
|
+
"overflow": "hidden",
|
|
3822
|
+
"padding": 0,
|
|
3823
|
+
"position": "absolute",
|
|
3824
|
+
"width": 1,
|
|
3825
|
+
}
|
|
3826
|
+
}
|
|
3827
|
+
/>
|
|
3410
3828
|
<button
|
|
3411
3829
|
aria-expanded="false"
|
|
3412
3830
|
aria-haspopup="listbox"
|
|
@@ -3543,6 +3961,25 @@ exports[`wonder-blocks-dropdown example 24 1`] = `
|
|
|
3543
3961
|
}
|
|
3544
3962
|
}
|
|
3545
3963
|
>
|
|
3964
|
+
<span
|
|
3965
|
+
aria-atomic="true"
|
|
3966
|
+
aria-live="polite"
|
|
3967
|
+
aria-relevant="additions text"
|
|
3968
|
+
className=""
|
|
3969
|
+
data-test-id="dropdown-live-region"
|
|
3970
|
+
style={
|
|
3971
|
+
Object {
|
|
3972
|
+
"border": 0,
|
|
3973
|
+
"clip": "rect(0,0,0,0)",
|
|
3974
|
+
"height": 1,
|
|
3975
|
+
"margin": -1,
|
|
3976
|
+
"overflow": "hidden",
|
|
3977
|
+
"padding": 0,
|
|
3978
|
+
"position": "absolute",
|
|
3979
|
+
"width": 1,
|
|
3980
|
+
}
|
|
3981
|
+
}
|
|
3982
|
+
/>
|
|
3546
3983
|
<button
|
|
3547
3984
|
aria-expanded="false"
|
|
3548
3985
|
aria-haspopup="listbox"
|
|
@@ -3777,6 +4214,25 @@ exports[`wonder-blocks-dropdown example 25 1`] = `
|
|
|
3777
4214
|
}
|
|
3778
4215
|
}
|
|
3779
4216
|
>
|
|
4217
|
+
<span
|
|
4218
|
+
aria-atomic="true"
|
|
4219
|
+
aria-live="polite"
|
|
4220
|
+
aria-relevant="additions text"
|
|
4221
|
+
className=""
|
|
4222
|
+
data-test-id="dropdown-live-region"
|
|
4223
|
+
style={
|
|
4224
|
+
Object {
|
|
4225
|
+
"border": 0,
|
|
4226
|
+
"clip": "rect(0,0,0,0)",
|
|
4227
|
+
"height": 1,
|
|
4228
|
+
"margin": -1,
|
|
4229
|
+
"overflow": "hidden",
|
|
4230
|
+
"padding": 0,
|
|
4231
|
+
"position": "absolute",
|
|
4232
|
+
"width": 1,
|
|
4233
|
+
}
|
|
4234
|
+
}
|
|
4235
|
+
/>
|
|
3780
4236
|
<button
|
|
3781
4237
|
aria-expanded="false"
|
|
3782
4238
|
aria-haspopup="listbox"
|
|
@@ -3894,6 +4350,25 @@ exports[`wonder-blocks-dropdown example 26 1`] = `
|
|
|
3894
4350
|
}
|
|
3895
4351
|
}
|
|
3896
4352
|
>
|
|
4353
|
+
<span
|
|
4354
|
+
aria-atomic="true"
|
|
4355
|
+
aria-live="polite"
|
|
4356
|
+
aria-relevant="additions text"
|
|
4357
|
+
className=""
|
|
4358
|
+
data-test-id="dropdown-live-region"
|
|
4359
|
+
style={
|
|
4360
|
+
Object {
|
|
4361
|
+
"border": 0,
|
|
4362
|
+
"clip": "rect(0,0,0,0)",
|
|
4363
|
+
"height": 1,
|
|
4364
|
+
"margin": -1,
|
|
4365
|
+
"overflow": "hidden",
|
|
4366
|
+
"padding": 0,
|
|
4367
|
+
"position": "absolute",
|
|
4368
|
+
"width": 1,
|
|
4369
|
+
}
|
|
4370
|
+
}
|
|
4371
|
+
/>
|
|
3897
4372
|
<h2
|
|
3898
4373
|
className=""
|
|
3899
4374
|
data-test-id="multi-select-custom-opener"
|
|
@@ -3960,6 +4435,25 @@ exports[`wonder-blocks-dropdown example 27 1`] = `
|
|
|
3960
4435
|
}
|
|
3961
4436
|
}
|
|
3962
4437
|
>
|
|
4438
|
+
<span
|
|
4439
|
+
aria-atomic="true"
|
|
4440
|
+
aria-live="polite"
|
|
4441
|
+
aria-relevant="additions text"
|
|
4442
|
+
className=""
|
|
4443
|
+
data-test-id="dropdown-live-region"
|
|
4444
|
+
style={
|
|
4445
|
+
Object {
|
|
4446
|
+
"border": 0,
|
|
4447
|
+
"clip": "rect(0,0,0,0)",
|
|
4448
|
+
"height": 1,
|
|
4449
|
+
"margin": -1,
|
|
4450
|
+
"overflow": "hidden",
|
|
4451
|
+
"padding": 0,
|
|
4452
|
+
"position": "absolute",
|
|
4453
|
+
"width": 1,
|
|
4454
|
+
}
|
|
4455
|
+
}
|
|
4456
|
+
/>
|
|
3963
4457
|
<button
|
|
3964
4458
|
aria-expanded="false"
|
|
3965
4459
|
aria-haspopup="listbox"
|
|
@@ -8,15 +8,6 @@ import DropdownCoreVirtualized from "../dropdown-core-virtualized.js";
|
|
|
8
8
|
import SearchTextInput from "../search-text-input.js";
|
|
9
9
|
|
|
10
10
|
describe("DropdownCoreVirtualized", () => {
|
|
11
|
-
beforeEach(() => {
|
|
12
|
-
jest.useFakeTimers();
|
|
13
|
-
});
|
|
14
|
-
|
|
15
|
-
afterEach(() => {
|
|
16
|
-
jest.runOnlyPendingTimers();
|
|
17
|
-
jest.useRealTimers();
|
|
18
|
-
});
|
|
19
|
-
|
|
20
11
|
it("should sort the items on first load", () => {
|
|
21
12
|
// Arrange
|
|
22
13
|
const optionItems = ["a", "bb", "ccc"].map((item, i) => ({
|