@patternfly/patternfly 4.156.2 → 4.156.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/components/DualListSelector/dual-list-selector.css +3 -5
- package/components/DualListSelector/dual-list-selector.scss +4 -6
- package/docs/components/DualListSelector/examples/DualListSelector.md +359 -182
- package/package.json +1 -1
- package/patternfly-no-reset.css +3 -5
- package/patternfly.css +3 -5
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -74,41 +74,49 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
74
74
|
</div>
|
|
75
75
|
</div>
|
|
76
76
|
<div class="pf-c-dual-list-selector__status">
|
|
77
|
-
<span
|
|
77
|
+
<span
|
|
78
|
+
class="pf-c-dual-list-selector__status-text"
|
|
79
|
+
id="basic-available-status-text"
|
|
80
|
+
>0 of 5 items selected</span>
|
|
78
81
|
</div>
|
|
79
82
|
<div class="pf-c-dual-list-selector__menu">
|
|
80
|
-
<ul
|
|
81
|
-
|
|
83
|
+
<ul
|
|
84
|
+
class="pf-c-dual-list-selector__list"
|
|
85
|
+
role="listbox"
|
|
86
|
+
aria-labelledby="basic-available-status-text"
|
|
87
|
+
aria-multiselectable="true"
|
|
88
|
+
aria-activedescendant
|
|
89
|
+
>
|
|
90
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
82
91
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
83
|
-
<
|
|
92
|
+
<span class="pf-c-dual-list-selector__item">
|
|
84
93
|
<span class="pf-c-dual-list-selector__item-main">
|
|
85
94
|
<span class="pf-c-dual-list-selector__item-text">Item1</span>
|
|
86
95
|
</span>
|
|
87
96
|
<span class="pf-c-dual-list-selector__item-count">
|
|
88
97
|
<span class="pf-c-badge pf-m-read"></span>
|
|
89
98
|
</span>
|
|
90
|
-
</
|
|
99
|
+
</span>
|
|
91
100
|
</div>
|
|
92
101
|
</li>
|
|
93
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
102
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
94
103
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
95
|
-
<
|
|
104
|
+
<span class="pf-c-dual-list-selector__item">
|
|
96
105
|
<span class="pf-c-dual-list-selector__item-main">
|
|
97
106
|
<span class="pf-c-dual-list-selector__item-text">Item2</span>
|
|
98
107
|
</span>
|
|
99
108
|
<span class="pf-c-dual-list-selector__item-count">
|
|
100
109
|
<span class="pf-c-badge pf-m-read"></span>
|
|
101
110
|
</span>
|
|
102
|
-
</
|
|
111
|
+
</span>
|
|
103
112
|
</div>
|
|
104
113
|
</li>
|
|
105
|
-
<li
|
|
114
|
+
<li
|
|
115
|
+
class="pf-c-dual-list-selector__list-item pf-m-disabled"
|
|
116
|
+
role="option"
|
|
117
|
+
>
|
|
106
118
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
107
|
-
<
|
|
108
|
-
class="pf-c-dual-list-selector__item"
|
|
109
|
-
disabled
|
|
110
|
-
type="button"
|
|
111
|
-
>
|
|
119
|
+
<span class="pf-c-dual-list-selector__item">
|
|
112
120
|
<span class="pf-c-dual-list-selector__item-main">
|
|
113
121
|
<span
|
|
114
122
|
class="pf-c-dual-list-selector__item-text"
|
|
@@ -117,31 +125,31 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
117
125
|
<span class="pf-c-dual-list-selector__item-count">
|
|
118
126
|
<span class="pf-c-badge pf-m-read"></span>
|
|
119
127
|
</span>
|
|
120
|
-
</
|
|
128
|
+
</span>
|
|
121
129
|
</div>
|
|
122
130
|
</li>
|
|
123
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
131
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
124
132
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
125
|
-
<
|
|
133
|
+
<span class="pf-c-dual-list-selector__item">
|
|
126
134
|
<span class="pf-c-dual-list-selector__item-main">
|
|
127
135
|
<span class="pf-c-dual-list-selector__item-text">Item4</span>
|
|
128
136
|
</span>
|
|
129
137
|
<span class="pf-c-dual-list-selector__item-count">
|
|
130
138
|
<span class="pf-c-badge pf-m-read"></span>
|
|
131
139
|
</span>
|
|
132
|
-
</
|
|
140
|
+
</span>
|
|
133
141
|
</div>
|
|
134
142
|
</li>
|
|
135
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
143
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
136
144
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
137
|
-
<
|
|
145
|
+
<span class="pf-c-dual-list-selector__item">
|
|
138
146
|
<span class="pf-c-dual-list-selector__item-main">
|
|
139
147
|
<span class="pf-c-dual-list-selector__item-text">Item5</span>
|
|
140
148
|
</span>
|
|
141
149
|
<span class="pf-c-dual-list-selector__item-count">
|
|
142
150
|
<span class="pf-c-badge pf-m-read"></span>
|
|
143
151
|
</span>
|
|
144
|
-
</
|
|
152
|
+
</span>
|
|
145
153
|
</div>
|
|
146
154
|
</li>
|
|
147
155
|
</ul>
|
|
@@ -249,10 +257,19 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
249
257
|
</div>
|
|
250
258
|
</div>
|
|
251
259
|
<div class="pf-c-dual-list-selector__status">
|
|
252
|
-
<span
|
|
260
|
+
<span
|
|
261
|
+
class="pf-c-dual-list-selector__status-text"
|
|
262
|
+
id="basic-chosen-status-text"
|
|
263
|
+
>0 of 0 items selected</span>
|
|
253
264
|
</div>
|
|
254
265
|
<div class="pf-c-dual-list-selector__menu">
|
|
255
|
-
<ul
|
|
266
|
+
<ul
|
|
267
|
+
class="pf-c-dual-list-selector__list"
|
|
268
|
+
role="listbox"
|
|
269
|
+
aria-labelledby="basic-chosen-status-text"
|
|
270
|
+
aria-multiselectable="true"
|
|
271
|
+
aria-activedescendant
|
|
272
|
+
></ul>
|
|
256
273
|
</div>
|
|
257
274
|
</div>
|
|
258
275
|
</div>
|
|
@@ -328,68 +345,77 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
328
345
|
</div>
|
|
329
346
|
</div>
|
|
330
347
|
<div class="pf-c-dual-list-selector__status">
|
|
331
|
-
<span
|
|
348
|
+
<span
|
|
349
|
+
class="pf-c-dual-list-selector__status-text"
|
|
350
|
+
id="available-item-selected-available-status-text"
|
|
351
|
+
>1 of 5 items selected</span>
|
|
332
352
|
</div>
|
|
333
353
|
<div class="pf-c-dual-list-selector__menu">
|
|
334
|
-
<ul
|
|
335
|
-
|
|
354
|
+
<ul
|
|
355
|
+
class="pf-c-dual-list-selector__list"
|
|
356
|
+
role="listbox"
|
|
357
|
+
aria-labelledby="available-item-selected-available-status-text"
|
|
358
|
+
aria-multiselectable="true"
|
|
359
|
+
aria-activedescendant
|
|
360
|
+
>
|
|
361
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
336
362
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
337
|
-
<
|
|
363
|
+
<span class="pf-c-dual-list-selector__item">
|
|
338
364
|
<span class="pf-c-dual-list-selector__item-main">
|
|
339
365
|
<span class="pf-c-dual-list-selector__item-text">Item1</span>
|
|
340
366
|
</span>
|
|
341
367
|
<span class="pf-c-dual-list-selector__item-count">
|
|
342
368
|
<span class="pf-c-badge pf-m-read"></span>
|
|
343
369
|
</span>
|
|
344
|
-
</
|
|
370
|
+
</span>
|
|
345
371
|
</div>
|
|
346
372
|
</li>
|
|
347
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
373
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
348
374
|
<div class="pf-c-dual-list-selector__list-item-row pf-m-selected">
|
|
349
|
-
<
|
|
375
|
+
<span class="pf-c-dual-list-selector__item">
|
|
350
376
|
<span class="pf-c-dual-list-selector__item-main">
|
|
351
377
|
<span class="pf-c-dual-list-selector__item-text">Item2</span>
|
|
352
378
|
</span>
|
|
353
379
|
<span class="pf-c-dual-list-selector__item-count">
|
|
354
380
|
<span class="pf-c-badge pf-m-read"></span>
|
|
355
381
|
</span>
|
|
356
|
-
</
|
|
382
|
+
</span>
|
|
357
383
|
</div>
|
|
358
384
|
</li>
|
|
359
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
385
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
360
386
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
361
|
-
<
|
|
387
|
+
<span class="pf-c-dual-list-selector__item">
|
|
362
388
|
<span class="pf-c-dual-list-selector__item-main">
|
|
363
389
|
<span class="pf-c-dual-list-selector__item-text">Item3</span>
|
|
364
390
|
</span>
|
|
365
391
|
<span class="pf-c-dual-list-selector__item-count">
|
|
366
392
|
<span class="pf-c-badge pf-m-read"></span>
|
|
367
393
|
</span>
|
|
368
|
-
</
|
|
394
|
+
</span>
|
|
369
395
|
</div>
|
|
370
396
|
</li>
|
|
371
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
397
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
372
398
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
373
|
-
<
|
|
399
|
+
<span class="pf-c-dual-list-selector__item">
|
|
374
400
|
<span class="pf-c-dual-list-selector__item-main">
|
|
375
401
|
<span class="pf-c-dual-list-selector__item-text">Item4</span>
|
|
376
402
|
</span>
|
|
377
403
|
<span class="pf-c-dual-list-selector__item-count">
|
|
378
404
|
<span class="pf-c-badge pf-m-read"></span>
|
|
379
405
|
</span>
|
|
380
|
-
</
|
|
406
|
+
</span>
|
|
381
407
|
</div>
|
|
382
408
|
</li>
|
|
383
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
409
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
384
410
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
385
|
-
<
|
|
411
|
+
<span class="pf-c-dual-list-selector__item">
|
|
386
412
|
<span class="pf-c-dual-list-selector__item-main">
|
|
387
413
|
<span class="pf-c-dual-list-selector__item-text">Item5</span>
|
|
388
414
|
</span>
|
|
389
415
|
<span class="pf-c-dual-list-selector__item-count">
|
|
390
416
|
<span class="pf-c-badge pf-m-read"></span>
|
|
391
417
|
</span>
|
|
392
|
-
</
|
|
418
|
+
</span>
|
|
393
419
|
</div>
|
|
394
420
|
</li>
|
|
395
421
|
</ul>
|
|
@@ -496,10 +522,19 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
496
522
|
</div>
|
|
497
523
|
</div>
|
|
498
524
|
<div class="pf-c-dual-list-selector__status">
|
|
499
|
-
<span
|
|
525
|
+
<span
|
|
526
|
+
class="pf-c-dual-list-selector__status-text"
|
|
527
|
+
id="available-item-selected-chosen-status-text"
|
|
528
|
+
>0 of 0 items selected</span>
|
|
500
529
|
</div>
|
|
501
530
|
<div class="pf-c-dual-list-selector__menu">
|
|
502
|
-
<ul
|
|
531
|
+
<ul
|
|
532
|
+
class="pf-c-dual-list-selector__list"
|
|
533
|
+
role="listbox"
|
|
534
|
+
aria-labelledby="available-item-selected-chosen-status-text"
|
|
535
|
+
aria-multiselectable="true"
|
|
536
|
+
aria-activedescendant
|
|
537
|
+
></ul>
|
|
503
538
|
</div>
|
|
504
539
|
</div>
|
|
505
540
|
</div>
|
|
@@ -575,68 +610,77 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
575
610
|
</div>
|
|
576
611
|
</div>
|
|
577
612
|
<div class="pf-c-dual-list-selector__status">
|
|
578
|
-
<span
|
|
613
|
+
<span
|
|
614
|
+
class="pf-c-dual-list-selector__status-text"
|
|
615
|
+
id="multiple-available-items-selected-available-status-text"
|
|
616
|
+
>1 of 5 items selected</span>
|
|
579
617
|
</div>
|
|
580
618
|
<div class="pf-c-dual-list-selector__menu">
|
|
581
|
-
<ul
|
|
582
|
-
|
|
619
|
+
<ul
|
|
620
|
+
class="pf-c-dual-list-selector__list"
|
|
621
|
+
role="listbox"
|
|
622
|
+
aria-labelledby="multiple-available-items-selected-available-status-text"
|
|
623
|
+
aria-multiselectable="true"
|
|
624
|
+
aria-activedescendant
|
|
625
|
+
>
|
|
626
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
583
627
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
584
|
-
<
|
|
628
|
+
<span class="pf-c-dual-list-selector__item">
|
|
585
629
|
<span class="pf-c-dual-list-selector__item-main">
|
|
586
630
|
<span class="pf-c-dual-list-selector__item-text">Item1</span>
|
|
587
631
|
</span>
|
|
588
632
|
<span class="pf-c-dual-list-selector__item-count">
|
|
589
633
|
<span class="pf-c-badge pf-m-read"></span>
|
|
590
634
|
</span>
|
|
591
|
-
</
|
|
635
|
+
</span>
|
|
592
636
|
</div>
|
|
593
637
|
</li>
|
|
594
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
638
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
595
639
|
<div class="pf-c-dual-list-selector__list-item-row pf-m-selected">
|
|
596
|
-
<
|
|
640
|
+
<span class="pf-c-dual-list-selector__item">
|
|
597
641
|
<span class="pf-c-dual-list-selector__item-main">
|
|
598
642
|
<span class="pf-c-dual-list-selector__item-text">Item2</span>
|
|
599
643
|
</span>
|
|
600
644
|
<span class="pf-c-dual-list-selector__item-count">
|
|
601
645
|
<span class="pf-c-badge pf-m-read"></span>
|
|
602
646
|
</span>
|
|
603
|
-
</
|
|
647
|
+
</span>
|
|
604
648
|
</div>
|
|
605
649
|
</li>
|
|
606
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
650
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
607
651
|
<div class="pf-c-dual-list-selector__list-item-row pf-m-selected">
|
|
608
|
-
<
|
|
652
|
+
<span class="pf-c-dual-list-selector__item">
|
|
609
653
|
<span class="pf-c-dual-list-selector__item-main">
|
|
610
654
|
<span class="pf-c-dual-list-selector__item-text">Item3</span>
|
|
611
655
|
</span>
|
|
612
656
|
<span class="pf-c-dual-list-selector__item-count">
|
|
613
657
|
<span class="pf-c-badge pf-m-read"></span>
|
|
614
658
|
</span>
|
|
615
|
-
</
|
|
659
|
+
</span>
|
|
616
660
|
</div>
|
|
617
661
|
</li>
|
|
618
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
662
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
619
663
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
620
|
-
<
|
|
664
|
+
<span class="pf-c-dual-list-selector__item">
|
|
621
665
|
<span class="pf-c-dual-list-selector__item-main">
|
|
622
666
|
<span class="pf-c-dual-list-selector__item-text">Item4</span>
|
|
623
667
|
</span>
|
|
624
668
|
<span class="pf-c-dual-list-selector__item-count">
|
|
625
669
|
<span class="pf-c-badge pf-m-read"></span>
|
|
626
670
|
</span>
|
|
627
|
-
</
|
|
671
|
+
</span>
|
|
628
672
|
</div>
|
|
629
673
|
</li>
|
|
630
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
674
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
631
675
|
<div class="pf-c-dual-list-selector__list-item-row pf-m-selected">
|
|
632
|
-
<
|
|
676
|
+
<span class="pf-c-dual-list-selector__item">
|
|
633
677
|
<span class="pf-c-dual-list-selector__item-main">
|
|
634
678
|
<span class="pf-c-dual-list-selector__item-text">Item5</span>
|
|
635
679
|
</span>
|
|
636
680
|
<span class="pf-c-dual-list-selector__item-count">
|
|
637
681
|
<span class="pf-c-badge pf-m-read"></span>
|
|
638
682
|
</span>
|
|
639
|
-
</
|
|
683
|
+
</span>
|
|
640
684
|
</div>
|
|
641
685
|
</li>
|
|
642
686
|
</ul>
|
|
@@ -743,10 +787,19 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
743
787
|
</div>
|
|
744
788
|
</div>
|
|
745
789
|
<div class="pf-c-dual-list-selector__status">
|
|
746
|
-
<span
|
|
790
|
+
<span
|
|
791
|
+
class="pf-c-dual-list-selector__status-text"
|
|
792
|
+
id="multiple-available-items-selected-chosen-status-text"
|
|
793
|
+
>0 of 0 items selected</span>
|
|
747
794
|
</div>
|
|
748
795
|
<div class="pf-c-dual-list-selector__menu">
|
|
749
|
-
<ul
|
|
796
|
+
<ul
|
|
797
|
+
class="pf-c-dual-list-selector__list"
|
|
798
|
+
role="listbox"
|
|
799
|
+
aria-labelledby="multiple-available-items-selected-chosen-status-text"
|
|
800
|
+
aria-multiselectable="true"
|
|
801
|
+
aria-activedescendant
|
|
802
|
+
></ul>
|
|
750
803
|
</div>
|
|
751
804
|
</div>
|
|
752
805
|
</div>
|
|
@@ -822,68 +875,77 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
822
875
|
</div>
|
|
823
876
|
</div>
|
|
824
877
|
<div class="pf-c-dual-list-selector__status">
|
|
825
|
-
<span
|
|
878
|
+
<span
|
|
879
|
+
class="pf-c-dual-list-selector__status-text"
|
|
880
|
+
id="chosen-item-available-status-text"
|
|
881
|
+
>0 of 4 items selected</span>
|
|
826
882
|
</div>
|
|
827
883
|
<div class="pf-c-dual-list-selector__menu">
|
|
828
|
-
<ul
|
|
829
|
-
|
|
884
|
+
<ul
|
|
885
|
+
class="pf-c-dual-list-selector__list"
|
|
886
|
+
role="listbox"
|
|
887
|
+
aria-labelledby="chosen-item-available-status-text"
|
|
888
|
+
aria-multiselectable="true"
|
|
889
|
+
aria-activedescendant
|
|
890
|
+
>
|
|
891
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
830
892
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
831
|
-
<
|
|
893
|
+
<span class="pf-c-dual-list-selector__item">
|
|
832
894
|
<span class="pf-c-dual-list-selector__item-main">
|
|
833
895
|
<span class="pf-c-dual-list-selector__item-text">Item1</span>
|
|
834
896
|
</span>
|
|
835
897
|
<span class="pf-c-dual-list-selector__item-count">
|
|
836
898
|
<span class="pf-c-badge pf-m-read"></span>
|
|
837
899
|
</span>
|
|
838
|
-
</
|
|
900
|
+
</span>
|
|
839
901
|
</div>
|
|
840
902
|
</li>
|
|
841
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
903
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
842
904
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
843
|
-
<
|
|
905
|
+
<span class="pf-c-dual-list-selector__item">
|
|
844
906
|
<span class="pf-c-dual-list-selector__item-main">
|
|
845
907
|
<span class="pf-c-dual-list-selector__item-text">Item2</span>
|
|
846
908
|
</span>
|
|
847
909
|
<span class="pf-c-dual-list-selector__item-count">
|
|
848
910
|
<span class="pf-c-badge pf-m-read"></span>
|
|
849
911
|
</span>
|
|
850
|
-
</
|
|
912
|
+
</span>
|
|
851
913
|
</div>
|
|
852
914
|
</li>
|
|
853
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
915
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
854
916
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
855
|
-
<
|
|
917
|
+
<span class="pf-c-dual-list-selector__item">
|
|
856
918
|
<span class="pf-c-dual-list-selector__item-main">
|
|
857
919
|
<span class="pf-c-dual-list-selector__item-text">Item3</span>
|
|
858
920
|
</span>
|
|
859
921
|
<span class="pf-c-dual-list-selector__item-count">
|
|
860
922
|
<span class="pf-c-badge pf-m-read"></span>
|
|
861
923
|
</span>
|
|
862
|
-
</
|
|
924
|
+
</span>
|
|
863
925
|
</div>
|
|
864
926
|
</li>
|
|
865
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
927
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
866
928
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
867
|
-
<
|
|
929
|
+
<span class="pf-c-dual-list-selector__item">
|
|
868
930
|
<span class="pf-c-dual-list-selector__item-main">
|
|
869
931
|
<span class="pf-c-dual-list-selector__item-text">Item4</span>
|
|
870
932
|
</span>
|
|
871
933
|
<span class="pf-c-dual-list-selector__item-count">
|
|
872
934
|
<span class="pf-c-badge pf-m-read"></span>
|
|
873
935
|
</span>
|
|
874
|
-
</
|
|
936
|
+
</span>
|
|
875
937
|
</div>
|
|
876
938
|
</li>
|
|
877
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
939
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
878
940
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
879
|
-
<
|
|
941
|
+
<span class="pf-c-dual-list-selector__item">
|
|
880
942
|
<span class="pf-c-dual-list-selector__item-main">
|
|
881
943
|
<span class="pf-c-dual-list-selector__item-text">Item5</span>
|
|
882
944
|
</span>
|
|
883
945
|
<span class="pf-c-dual-list-selector__item-count">
|
|
884
946
|
<span class="pf-c-badge pf-m-read"></span>
|
|
885
947
|
</span>
|
|
886
|
-
</
|
|
948
|
+
</span>
|
|
887
949
|
</div>
|
|
888
950
|
</li>
|
|
889
951
|
</ul>
|
|
@@ -990,20 +1052,29 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
990
1052
|
</div>
|
|
991
1053
|
</div>
|
|
992
1054
|
<div class="pf-c-dual-list-selector__status">
|
|
993
|
-
<span
|
|
1055
|
+
<span
|
|
1056
|
+
class="pf-c-dual-list-selector__status-text"
|
|
1057
|
+
id="chosen-item-chosen-status-text"
|
|
1058
|
+
>0 of 1 items selected</span>
|
|
994
1059
|
</div>
|
|
995
1060
|
<div class="pf-c-dual-list-selector__menu">
|
|
996
|
-
<ul
|
|
997
|
-
|
|
1061
|
+
<ul
|
|
1062
|
+
class="pf-c-dual-list-selector__list"
|
|
1063
|
+
role="listbox"
|
|
1064
|
+
aria-labelledby="chosen-item-chosen-status-text"
|
|
1065
|
+
aria-multiselectable="true"
|
|
1066
|
+
aria-activedescendant
|
|
1067
|
+
>
|
|
1068
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
998
1069
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
999
|
-
<
|
|
1070
|
+
<span class="pf-c-dual-list-selector__item">
|
|
1000
1071
|
<span class="pf-c-dual-list-selector__item-main">
|
|
1001
1072
|
<span class="pf-c-dual-list-selector__item-text">Item1</span>
|
|
1002
1073
|
</span>
|
|
1003
1074
|
<span class="pf-c-dual-list-selector__item-count">
|
|
1004
1075
|
<span class="pf-c-badge pf-m-read"></span>
|
|
1005
1076
|
</span>
|
|
1006
|
-
</
|
|
1077
|
+
</span>
|
|
1007
1078
|
</div>
|
|
1008
1079
|
</li>
|
|
1009
1080
|
</ul>
|
|
@@ -1082,68 +1153,77 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1082
1153
|
</div>
|
|
1083
1154
|
</div>
|
|
1084
1155
|
<div class="pf-c-dual-list-selector__status">
|
|
1085
|
-
<span
|
|
1156
|
+
<span
|
|
1157
|
+
class="pf-c-dual-list-selector__status-text"
|
|
1158
|
+
id="chosen-item-selected-available-status-text"
|
|
1159
|
+
>0 of 4 items selected</span>
|
|
1086
1160
|
</div>
|
|
1087
1161
|
<div class="pf-c-dual-list-selector__menu">
|
|
1088
|
-
<ul
|
|
1089
|
-
|
|
1162
|
+
<ul
|
|
1163
|
+
class="pf-c-dual-list-selector__list"
|
|
1164
|
+
role="listbox"
|
|
1165
|
+
aria-labelledby="chosen-item-selected-available-status-text"
|
|
1166
|
+
aria-multiselectable="true"
|
|
1167
|
+
aria-activedescendant
|
|
1168
|
+
>
|
|
1169
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
1090
1170
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
1091
|
-
<
|
|
1171
|
+
<span class="pf-c-dual-list-selector__item">
|
|
1092
1172
|
<span class="pf-c-dual-list-selector__item-main">
|
|
1093
1173
|
<span class="pf-c-dual-list-selector__item-text">Item1</span>
|
|
1094
1174
|
</span>
|
|
1095
1175
|
<span class="pf-c-dual-list-selector__item-count">
|
|
1096
1176
|
<span class="pf-c-badge pf-m-read"></span>
|
|
1097
1177
|
</span>
|
|
1098
|
-
</
|
|
1178
|
+
</span>
|
|
1099
1179
|
</div>
|
|
1100
1180
|
</li>
|
|
1101
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
1181
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
1102
1182
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
1103
|
-
<
|
|
1183
|
+
<span class="pf-c-dual-list-selector__item">
|
|
1104
1184
|
<span class="pf-c-dual-list-selector__item-main">
|
|
1105
1185
|
<span class="pf-c-dual-list-selector__item-text">Item2</span>
|
|
1106
1186
|
</span>
|
|
1107
1187
|
<span class="pf-c-dual-list-selector__item-count">
|
|
1108
1188
|
<span class="pf-c-badge pf-m-read"></span>
|
|
1109
1189
|
</span>
|
|
1110
|
-
</
|
|
1190
|
+
</span>
|
|
1111
1191
|
</div>
|
|
1112
1192
|
</li>
|
|
1113
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
1193
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
1114
1194
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
1115
|
-
<
|
|
1195
|
+
<span class="pf-c-dual-list-selector__item">
|
|
1116
1196
|
<span class="pf-c-dual-list-selector__item-main">
|
|
1117
1197
|
<span class="pf-c-dual-list-selector__item-text">Item3</span>
|
|
1118
1198
|
</span>
|
|
1119
1199
|
<span class="pf-c-dual-list-selector__item-count">
|
|
1120
1200
|
<span class="pf-c-badge pf-m-read"></span>
|
|
1121
1201
|
</span>
|
|
1122
|
-
</
|
|
1202
|
+
</span>
|
|
1123
1203
|
</div>
|
|
1124
1204
|
</li>
|
|
1125
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
1205
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
1126
1206
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
1127
|
-
<
|
|
1207
|
+
<span class="pf-c-dual-list-selector__item">
|
|
1128
1208
|
<span class="pf-c-dual-list-selector__item-main">
|
|
1129
1209
|
<span class="pf-c-dual-list-selector__item-text">Item4</span>
|
|
1130
1210
|
</span>
|
|
1131
1211
|
<span class="pf-c-dual-list-selector__item-count">
|
|
1132
1212
|
<span class="pf-c-badge pf-m-read"></span>
|
|
1133
1213
|
</span>
|
|
1134
|
-
</
|
|
1214
|
+
</span>
|
|
1135
1215
|
</div>
|
|
1136
1216
|
</li>
|
|
1137
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
1217
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
1138
1218
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
1139
|
-
<
|
|
1219
|
+
<span class="pf-c-dual-list-selector__item">
|
|
1140
1220
|
<span class="pf-c-dual-list-selector__item-main">
|
|
1141
1221
|
<span class="pf-c-dual-list-selector__item-text">Item5</span>
|
|
1142
1222
|
</span>
|
|
1143
1223
|
<span class="pf-c-dual-list-selector__item-count">
|
|
1144
1224
|
<span class="pf-c-badge pf-m-read"></span>
|
|
1145
1225
|
</span>
|
|
1146
|
-
</
|
|
1226
|
+
</span>
|
|
1147
1227
|
</div>
|
|
1148
1228
|
</li>
|
|
1149
1229
|
</ul>
|
|
@@ -1249,20 +1329,29 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1249
1329
|
</div>
|
|
1250
1330
|
</div>
|
|
1251
1331
|
<div class="pf-c-dual-list-selector__status">
|
|
1252
|
-
<span
|
|
1332
|
+
<span
|
|
1333
|
+
class="pf-c-dual-list-selector__status-text"
|
|
1334
|
+
id="chosen-item-selected-chosen-status-text"
|
|
1335
|
+
>1 of 1 items selected</span>
|
|
1253
1336
|
</div>
|
|
1254
1337
|
<div class="pf-c-dual-list-selector__menu">
|
|
1255
|
-
<ul
|
|
1256
|
-
|
|
1338
|
+
<ul
|
|
1339
|
+
class="pf-c-dual-list-selector__list"
|
|
1340
|
+
role="listbox"
|
|
1341
|
+
aria-labelledby="chosen-item-selected-chosen-status-text"
|
|
1342
|
+
aria-multiselectable="true"
|
|
1343
|
+
aria-activedescendant
|
|
1344
|
+
>
|
|
1345
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
1257
1346
|
<div class="pf-c-dual-list-selector__list-item-row pf-m-selected">
|
|
1258
|
-
<
|
|
1347
|
+
<span class="pf-c-dual-list-selector__item">
|
|
1259
1348
|
<span class="pf-c-dual-list-selector__item-main">
|
|
1260
1349
|
<span class="pf-c-dual-list-selector__item-text">Item5</span>
|
|
1261
1350
|
</span>
|
|
1262
1351
|
<span class="pf-c-dual-list-selector__item-count">
|
|
1263
1352
|
<span class="pf-c-badge pf-m-read"></span>
|
|
1264
1353
|
</span>
|
|
1265
|
-
</
|
|
1354
|
+
</span>
|
|
1266
1355
|
</div>
|
|
1267
1356
|
</li>
|
|
1268
1357
|
</ul>
|
|
@@ -1288,7 +1377,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1288
1377
|
class="pf-c-form-control pf-m-search"
|
|
1289
1378
|
type="text"
|
|
1290
1379
|
placeholder="Filter options"
|
|
1291
|
-
id="
|
|
1380
|
+
id="tree-available-filter"
|
|
1292
1381
|
aria-label="Filter options"
|
|
1293
1382
|
/>
|
|
1294
1383
|
</div>
|
|
@@ -1299,7 +1388,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1299
1388
|
<div class="pf-c-dropdown">
|
|
1300
1389
|
<button
|
|
1301
1390
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1302
|
-
id="dropdown-kebab-
|
|
1391
|
+
id="dropdown-kebab-tree-available-button"
|
|
1303
1392
|
aria-expanded="false"
|
|
1304
1393
|
type="button"
|
|
1305
1394
|
aria-label="Actions"
|
|
@@ -1308,7 +1397,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1308
1397
|
</button>
|
|
1309
1398
|
<ul
|
|
1310
1399
|
class="pf-c-dropdown__menu"
|
|
1311
|
-
aria-labelledby="dropdown-kebab-
|
|
1400
|
+
aria-labelledby="dropdown-kebab-tree-available-button"
|
|
1312
1401
|
hidden
|
|
1313
1402
|
>
|
|
1314
1403
|
<li>
|
|
@@ -1341,13 +1430,23 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1341
1430
|
</div>
|
|
1342
1431
|
</div>
|
|
1343
1432
|
<div class="pf-c-dual-list-selector__status">
|
|
1344
|
-
<span
|
|
1433
|
+
<span
|
|
1434
|
+
class="pf-c-dual-list-selector__status-text"
|
|
1435
|
+
id="tree-available-status-text"
|
|
1436
|
+
>1 of 11 items selected</span>
|
|
1345
1437
|
</div>
|
|
1346
1438
|
<div class="pf-c-dual-list-selector__menu">
|
|
1347
|
-
<ul
|
|
1439
|
+
<ul
|
|
1440
|
+
class="pf-c-dual-list-selector__list"
|
|
1441
|
+
role="tree"
|
|
1442
|
+
aria-labelledby="tree-available-status-text"
|
|
1443
|
+
aria-multiselectable="true"
|
|
1444
|
+
aria-activedescendant
|
|
1445
|
+
>
|
|
1348
1446
|
<li
|
|
1349
1447
|
class="pf-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded"
|
|
1350
1448
|
aria-expanded="true"
|
|
1449
|
+
role="treeitem"
|
|
1351
1450
|
>
|
|
1352
1451
|
<div class="pf-c-dual-list-selector__list-item-row pf-m-check">
|
|
1353
1452
|
<div class="pf-c-dual-list-selector__item" tabindex="0">
|
|
@@ -1375,8 +1474,12 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1375
1474
|
</div>
|
|
1376
1475
|
</div>
|
|
1377
1476
|
|
|
1378
|
-
<ul
|
|
1379
|
-
|
|
1477
|
+
<ul
|
|
1478
|
+
class="pf-c-dual-list-selector__list"
|
|
1479
|
+
role="group"
|
|
1480
|
+
aria-labelledby="-status-text"
|
|
1481
|
+
>
|
|
1482
|
+
<li class="pf-c-dual-list-selector__list-item" role="treeitem">
|
|
1380
1483
|
<div class="pf-c-dual-list-selector__list-item-row pf-m-check">
|
|
1381
1484
|
<div class="pf-c-dual-list-selector__item" tabindex="0">
|
|
1382
1485
|
<span class="pf-c-dual-list-selector__item-main">
|
|
@@ -1398,7 +1501,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1398
1501
|
</div>
|
|
1399
1502
|
</div>
|
|
1400
1503
|
</li>
|
|
1401
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
1504
|
+
<li class="pf-c-dual-list-selector__list-item" role="treeitem">
|
|
1402
1505
|
<div
|
|
1403
1506
|
class="pf-c-dual-list-selector__list-item-row pf-m-check pf-m-selected"
|
|
1404
1507
|
>
|
|
@@ -1423,7 +1526,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1423
1526
|
</div>
|
|
1424
1527
|
</div>
|
|
1425
1528
|
</li>
|
|
1426
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
1529
|
+
<li class="pf-c-dual-list-selector__list-item" role="treeitem">
|
|
1427
1530
|
<div class="pf-c-dual-list-selector__list-item-row pf-m-check">
|
|
1428
1531
|
<div class="pf-c-dual-list-selector__item" tabindex="0">
|
|
1429
1532
|
<span class="pf-c-dual-list-selector__item-main">
|
|
@@ -1448,6 +1551,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1448
1551
|
<li
|
|
1449
1552
|
class="pf-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded"
|
|
1450
1553
|
aria-expanded="true"
|
|
1554
|
+
role="treeitem"
|
|
1451
1555
|
>
|
|
1452
1556
|
<div class="pf-c-dual-list-selector__list-item-row pf-m-check">
|
|
1453
1557
|
<div class="pf-c-dual-list-selector__item" tabindex="0">
|
|
@@ -1475,8 +1579,12 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1475
1579
|
</div>
|
|
1476
1580
|
</div>
|
|
1477
1581
|
|
|
1478
|
-
<ul
|
|
1479
|
-
|
|
1582
|
+
<ul
|
|
1583
|
+
class="pf-c-dual-list-selector__list"
|
|
1584
|
+
role="group"
|
|
1585
|
+
aria-labelledby="-status-text"
|
|
1586
|
+
>
|
|
1587
|
+
<li class="pf-c-dual-list-selector__list-item" role="treeitem">
|
|
1480
1588
|
<div
|
|
1481
1589
|
class="pf-c-dual-list-selector__list-item-row pf-m-check"
|
|
1482
1590
|
>
|
|
@@ -1502,7 +1610,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1502
1610
|
</div>
|
|
1503
1611
|
</div>
|
|
1504
1612
|
</li>
|
|
1505
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
1613
|
+
<li class="pf-c-dual-list-selector__list-item" role="treeitem">
|
|
1506
1614
|
<div
|
|
1507
1615
|
class="pf-c-dual-list-selector__list-item-row pf-m-check"
|
|
1508
1616
|
>
|
|
@@ -1528,7 +1636,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1528
1636
|
</div>
|
|
1529
1637
|
</div>
|
|
1530
1638
|
</li>
|
|
1531
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
1639
|
+
<li class="pf-c-dual-list-selector__list-item" role="treeitem">
|
|
1532
1640
|
<div
|
|
1533
1641
|
class="pf-c-dual-list-selector__list-item-row pf-m-check"
|
|
1534
1642
|
>
|
|
@@ -1561,7 +1669,8 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1561
1669
|
|
|
1562
1670
|
<li
|
|
1563
1671
|
class="pf-c-dual-list-selector__list-item pf-m-expandable"
|
|
1564
|
-
aria-expanded="
|
|
1672
|
+
aria-expanded="true"
|
|
1673
|
+
role="treeitem"
|
|
1565
1674
|
>
|
|
1566
1675
|
<div class="pf-c-dual-list-selector__list-item-row pf-m-check">
|
|
1567
1676
|
<div class="pf-c-dual-list-selector__item" tabindex="0">
|
|
@@ -1590,7 +1699,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1590
1699
|
</div>
|
|
1591
1700
|
</li>
|
|
1592
1701
|
|
|
1593
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
1702
|
+
<li class="pf-c-dual-list-selector__list-item" role="treeitem">
|
|
1594
1703
|
<div class="pf-c-dual-list-selector__list-item-row pf-m-check">
|
|
1595
1704
|
<div class="pf-c-dual-list-selector__item" tabindex="0">
|
|
1596
1705
|
<span class="pf-c-dual-list-selector__item-main">
|
|
@@ -1615,7 +1724,8 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1615
1724
|
|
|
1616
1725
|
<li
|
|
1617
1726
|
class="pf-c-dual-list-selector__list-item pf-m-expandable"
|
|
1618
|
-
aria-expanded="
|
|
1727
|
+
aria-expanded="true"
|
|
1728
|
+
role="treeitem"
|
|
1619
1729
|
>
|
|
1620
1730
|
<div class="pf-c-dual-list-selector__list-item-row pf-m-check">
|
|
1621
1731
|
<div class="pf-c-dual-list-selector__item" tabindex="0">
|
|
@@ -1695,7 +1805,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1695
1805
|
class="pf-c-form-control pf-m-search"
|
|
1696
1806
|
type="text"
|
|
1697
1807
|
placeholder="Filter options"
|
|
1698
|
-
id="
|
|
1808
|
+
id="tree-chosen-filter"
|
|
1699
1809
|
aria-label="Filter options"
|
|
1700
1810
|
/>
|
|
1701
1811
|
</div>
|
|
@@ -1706,7 +1816,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1706
1816
|
<div class="pf-c-dropdown">
|
|
1707
1817
|
<button
|
|
1708
1818
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1709
|
-
id="dropdown-kebab-
|
|
1819
|
+
id="dropdown-kebab-tree-chosen-button"
|
|
1710
1820
|
aria-expanded="false"
|
|
1711
1821
|
type="button"
|
|
1712
1822
|
aria-label="Actions"
|
|
@@ -1715,7 +1825,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1715
1825
|
</button>
|
|
1716
1826
|
<ul
|
|
1717
1827
|
class="pf-c-dropdown__menu"
|
|
1718
|
-
aria-labelledby="dropdown-kebab-
|
|
1828
|
+
aria-labelledby="dropdown-kebab-tree-chosen-button"
|
|
1719
1829
|
hidden
|
|
1720
1830
|
>
|
|
1721
1831
|
<li>
|
|
@@ -1748,10 +1858,19 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1748
1858
|
</div>
|
|
1749
1859
|
</div>
|
|
1750
1860
|
<div class="pf-c-dual-list-selector__status">
|
|
1751
|
-
<span
|
|
1861
|
+
<span
|
|
1862
|
+
class="pf-c-dual-list-selector__status-text"
|
|
1863
|
+
id="tree-chosen-status-text"
|
|
1864
|
+
>0 of 0 items selected</span>
|
|
1752
1865
|
</div>
|
|
1753
1866
|
<div class="pf-c-dual-list-selector__menu">
|
|
1754
|
-
<ul
|
|
1867
|
+
<ul
|
|
1868
|
+
class="pf-c-dual-list-selector__list"
|
|
1869
|
+
role="listbox"
|
|
1870
|
+
aria-labelledby="tree-chosen-status-text"
|
|
1871
|
+
aria-multiselectable="true"
|
|
1872
|
+
aria-activedescendant
|
|
1873
|
+
></ul>
|
|
1755
1874
|
</div>
|
|
1756
1875
|
</div>
|
|
1757
1876
|
</div>
|
|
@@ -1774,7 +1893,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1774
1893
|
class="pf-c-form-control pf-m-search"
|
|
1775
1894
|
type="text"
|
|
1776
1895
|
placeholder="Filter options"
|
|
1777
|
-
id="
|
|
1896
|
+
id="tree-options-available-filter"
|
|
1778
1897
|
aria-label="Filter options"
|
|
1779
1898
|
/>
|
|
1780
1899
|
</div>
|
|
@@ -1785,7 +1904,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1785
1904
|
<div class="pf-c-dropdown">
|
|
1786
1905
|
<button
|
|
1787
1906
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1788
|
-
id="dropdown-kebab-
|
|
1907
|
+
id="dropdown-kebab-tree-options-available-button"
|
|
1789
1908
|
aria-expanded="false"
|
|
1790
1909
|
type="button"
|
|
1791
1910
|
aria-label="Actions"
|
|
@@ -1794,7 +1913,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1794
1913
|
</button>
|
|
1795
1914
|
<ul
|
|
1796
1915
|
class="pf-c-dropdown__menu"
|
|
1797
|
-
aria-labelledby="dropdown-kebab-
|
|
1916
|
+
aria-labelledby="dropdown-kebab-tree-options-available-button"
|
|
1798
1917
|
hidden
|
|
1799
1918
|
>
|
|
1800
1919
|
<li>
|
|
@@ -1827,13 +1946,23 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1827
1946
|
</div>
|
|
1828
1947
|
</div>
|
|
1829
1948
|
<div class="pf-c-dual-list-selector__status">
|
|
1830
|
-
<span
|
|
1949
|
+
<span
|
|
1950
|
+
class="pf-c-dual-list-selector__status-text"
|
|
1951
|
+
id="tree-options-available-status-text"
|
|
1952
|
+
>0 of 10 items selected</span>
|
|
1831
1953
|
</div>
|
|
1832
1954
|
<div class="pf-c-dual-list-selector__menu">
|
|
1833
|
-
<ul
|
|
1955
|
+
<ul
|
|
1956
|
+
class="pf-c-dual-list-selector__list"
|
|
1957
|
+
role="tree"
|
|
1958
|
+
aria-labelledby="tree-options-available-status-text"
|
|
1959
|
+
aria-multiselectable="true"
|
|
1960
|
+
aria-activedescendant
|
|
1961
|
+
>
|
|
1834
1962
|
<li
|
|
1835
1963
|
class="pf-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded"
|
|
1836
1964
|
aria-expanded="true"
|
|
1965
|
+
role="treeitem"
|
|
1837
1966
|
>
|
|
1838
1967
|
<div class="pf-c-dual-list-selector__list-item-row pf-m-check">
|
|
1839
1968
|
<div class="pf-c-dual-list-selector__item" tabindex="0">
|
|
@@ -1861,8 +1990,12 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1861
1990
|
</div>
|
|
1862
1991
|
</div>
|
|
1863
1992
|
|
|
1864
|
-
<ul
|
|
1865
|
-
|
|
1993
|
+
<ul
|
|
1994
|
+
class="pf-c-dual-list-selector__list"
|
|
1995
|
+
role="group"
|
|
1996
|
+
aria-labelledby="-status-text"
|
|
1997
|
+
>
|
|
1998
|
+
<li class="pf-c-dual-list-selector__list-item" role="treeitem">
|
|
1866
1999
|
<div
|
|
1867
2000
|
class="pf-c-dual-list-selector__list-item-row pf-m-check pf-m-selected"
|
|
1868
2001
|
>
|
|
@@ -1887,7 +2020,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1887
2020
|
</div>
|
|
1888
2021
|
</div>
|
|
1889
2022
|
</li>
|
|
1890
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
2023
|
+
<li class="pf-c-dual-list-selector__list-item" role="treeitem">
|
|
1891
2024
|
<div class="pf-c-dual-list-selector__list-item-row pf-m-check">
|
|
1892
2025
|
<div class="pf-c-dual-list-selector__item" tabindex="0">
|
|
1893
2026
|
<span class="pf-c-dual-list-selector__item-main">
|
|
@@ -1912,6 +2045,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1912
2045
|
<li
|
|
1913
2046
|
class="pf-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded pf-m-disabled"
|
|
1914
2047
|
aria-expanded="true"
|
|
2048
|
+
role="treeitem"
|
|
1915
2049
|
>
|
|
1916
2050
|
<div class="pf-c-dual-list-selector__list-item-row pf-m-check">
|
|
1917
2051
|
<div class="pf-c-dual-list-selector__item">
|
|
@@ -1942,8 +2076,12 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1942
2076
|
</div>
|
|
1943
2077
|
</div>
|
|
1944
2078
|
|
|
1945
|
-
<ul
|
|
1946
|
-
|
|
2079
|
+
<ul
|
|
2080
|
+
class="pf-c-dual-list-selector__list"
|
|
2081
|
+
role="group"
|
|
2082
|
+
aria-labelledby="-status-text"
|
|
2083
|
+
>
|
|
2084
|
+
<li class="pf-c-dual-list-selector__list-item" role="treeitem">
|
|
1947
2085
|
<div
|
|
1948
2086
|
class="pf-c-dual-list-selector__list-item-row pf-m-check"
|
|
1949
2087
|
>
|
|
@@ -1970,7 +2108,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1970
2108
|
</div>
|
|
1971
2109
|
</div>
|
|
1972
2110
|
</li>
|
|
1973
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
2111
|
+
<li class="pf-c-dual-list-selector__list-item" role="treeitem">
|
|
1974
2112
|
<div
|
|
1975
2113
|
class="pf-c-dual-list-selector__list-item-row pf-m-check"
|
|
1976
2114
|
>
|
|
@@ -1997,7 +2135,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
1997
2135
|
</div>
|
|
1998
2136
|
</div>
|
|
1999
2137
|
</li>
|
|
2000
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
2138
|
+
<li class="pf-c-dual-list-selector__list-item" role="treeitem">
|
|
2001
2139
|
<div
|
|
2002
2140
|
class="pf-c-dual-list-selector__list-item-row pf-m-check"
|
|
2003
2141
|
>
|
|
@@ -2030,7 +2168,8 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
2030
2168
|
</li>
|
|
2031
2169
|
<li
|
|
2032
2170
|
class="pf-c-dual-list-selector__list-item pf-m-expandable"
|
|
2033
|
-
aria-expanded="
|
|
2171
|
+
aria-expanded="true"
|
|
2172
|
+
role="treeitem"
|
|
2034
2173
|
>
|
|
2035
2174
|
<div class="pf-c-dual-list-selector__list-item-row pf-m-check">
|
|
2036
2175
|
<div class="pf-c-dual-list-selector__item" tabindex="0">
|
|
@@ -2058,7 +2197,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
2058
2197
|
</div>
|
|
2059
2198
|
</div>
|
|
2060
2199
|
</li>
|
|
2061
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
2200
|
+
<li class="pf-c-dual-list-selector__list-item" role="treeitem">
|
|
2062
2201
|
<div class="pf-c-dual-list-selector__list-item-row pf-m-check">
|
|
2063
2202
|
<div class="pf-c-dual-list-selector__item" tabindex="0">
|
|
2064
2203
|
<span class="pf-c-dual-list-selector__item-main">
|
|
@@ -2082,7 +2221,8 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
2082
2221
|
</li>
|
|
2083
2222
|
<li
|
|
2084
2223
|
class="pf-c-dual-list-selector__list-item pf-m-expandable"
|
|
2085
|
-
aria-expanded="
|
|
2224
|
+
aria-expanded="true"
|
|
2225
|
+
role="treeitem"
|
|
2086
2226
|
>
|
|
2087
2227
|
<div class="pf-c-dual-list-selector__list-item-row pf-m-check">
|
|
2088
2228
|
<div class="pf-c-dual-list-selector__item" tabindex="0">
|
|
@@ -2162,7 +2302,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
2162
2302
|
class="pf-c-form-control pf-m-search"
|
|
2163
2303
|
type="text"
|
|
2164
2304
|
placeholder="Filter options"
|
|
2165
|
-
id="
|
|
2305
|
+
id="tree-options-chosen-filter"
|
|
2166
2306
|
aria-label="Filter options"
|
|
2167
2307
|
/>
|
|
2168
2308
|
</div>
|
|
@@ -2173,7 +2313,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
2173
2313
|
<div class="pf-c-dropdown">
|
|
2174
2314
|
<button
|
|
2175
2315
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2176
|
-
id="dropdown-kebab-
|
|
2316
|
+
id="dropdown-kebab-tree-options-chosen-button"
|
|
2177
2317
|
aria-expanded="false"
|
|
2178
2318
|
type="button"
|
|
2179
2319
|
aria-label="Actions"
|
|
@@ -2182,7 +2322,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
2182
2322
|
</button>
|
|
2183
2323
|
<ul
|
|
2184
2324
|
class="pf-c-dropdown__menu"
|
|
2185
|
-
aria-labelledby="dropdown-kebab-
|
|
2325
|
+
aria-labelledby="dropdown-kebab-tree-options-chosen-button"
|
|
2186
2326
|
hidden
|
|
2187
2327
|
>
|
|
2188
2328
|
<li>
|
|
@@ -2215,13 +2355,23 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
2215
2355
|
</div>
|
|
2216
2356
|
</div>
|
|
2217
2357
|
<div class="pf-c-dual-list-selector__status">
|
|
2218
|
-
<span
|
|
2358
|
+
<span
|
|
2359
|
+
class="pf-c-dual-list-selector__status-text"
|
|
2360
|
+
id="tree-options-chosen-status-text"
|
|
2361
|
+
>0 of 0 items selected</span>
|
|
2219
2362
|
</div>
|
|
2220
2363
|
<div class="pf-c-dual-list-selector__menu">
|
|
2221
|
-
<ul
|
|
2364
|
+
<ul
|
|
2365
|
+
class="pf-c-dual-list-selector__list"
|
|
2366
|
+
role="tree"
|
|
2367
|
+
aria-labelledby="tree-options-chosen-status-text"
|
|
2368
|
+
aria-multiselectable="true"
|
|
2369
|
+
aria-activedescendant
|
|
2370
|
+
>
|
|
2222
2371
|
<li
|
|
2223
2372
|
class="pf-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded"
|
|
2224
2373
|
aria-expanded="true"
|
|
2374
|
+
role="treeitem"
|
|
2225
2375
|
>
|
|
2226
2376
|
<div class="pf-c-dual-list-selector__list-item-row pf-m-check">
|
|
2227
2377
|
<div class="pf-c-dual-list-selector__item" tabindex="0">
|
|
@@ -2249,8 +2399,12 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
2249
2399
|
</div>
|
|
2250
2400
|
</div>
|
|
2251
2401
|
|
|
2252
|
-
<ul
|
|
2253
|
-
|
|
2402
|
+
<ul
|
|
2403
|
+
class="pf-c-dual-list-selector__list"
|
|
2404
|
+
role="group"
|
|
2405
|
+
aria-labelledby="-status-text"
|
|
2406
|
+
>
|
|
2407
|
+
<li class="pf-c-dual-list-selector__list-item" role="treeitem">
|
|
2254
2408
|
<div
|
|
2255
2409
|
class="pf-c-dual-list-selector__list-item-row pf-m-check pf-m-selected"
|
|
2256
2410
|
>
|
|
@@ -2356,44 +2510,53 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
2356
2510
|
</div>
|
|
2357
2511
|
</div>
|
|
2358
2512
|
<div class="pf-c-dual-list-selector__status">
|
|
2359
|
-
<span
|
|
2513
|
+
<span
|
|
2514
|
+
class="pf-c-dual-list-selector__status-text"
|
|
2515
|
+
id="draggable-available-status-text"
|
|
2516
|
+
>0 of 5 items selected</span>
|
|
2360
2517
|
</div>
|
|
2361
2518
|
<div class="pf-c-dual-list-selector__menu">
|
|
2362
|
-
<ul
|
|
2363
|
-
|
|
2519
|
+
<ul
|
|
2520
|
+
class="pf-c-dual-list-selector__list"
|
|
2521
|
+
role="listbox"
|
|
2522
|
+
aria-labelledby="draggable-available-status-text"
|
|
2523
|
+
aria-multiselectable="true"
|
|
2524
|
+
aria-activedescendant
|
|
2525
|
+
>
|
|
2526
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
2364
2527
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
2365
|
-
<
|
|
2528
|
+
<span class="pf-c-dual-list-selector__item">
|
|
2366
2529
|
<span class="pf-c-dual-list-selector__item-main">
|
|
2367
2530
|
<span class="pf-c-dual-list-selector__item-text">Item1</span>
|
|
2368
2531
|
</span>
|
|
2369
2532
|
<span class="pf-c-dual-list-selector__item-count">
|
|
2370
2533
|
<span class="pf-c-badge pf-m-read"></span>
|
|
2371
2534
|
</span>
|
|
2372
|
-
</
|
|
2535
|
+
</span>
|
|
2373
2536
|
</div>
|
|
2374
2537
|
</li>
|
|
2375
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
2538
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
2376
2539
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
2377
|
-
<
|
|
2540
|
+
<span class="pf-c-dual-list-selector__item">
|
|
2378
2541
|
<span class="pf-c-dual-list-selector__item-main">
|
|
2379
2542
|
<span class="pf-c-dual-list-selector__item-text">Item4</span>
|
|
2380
2543
|
</span>
|
|
2381
2544
|
<span class="pf-c-dual-list-selector__item-count">
|
|
2382
2545
|
<span class="pf-c-badge pf-m-read"></span>
|
|
2383
2546
|
</span>
|
|
2384
|
-
</
|
|
2547
|
+
</span>
|
|
2385
2548
|
</div>
|
|
2386
2549
|
</li>
|
|
2387
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
2550
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
2388
2551
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
2389
|
-
<
|
|
2552
|
+
<span class="pf-c-dual-list-selector__item">
|
|
2390
2553
|
<span class="pf-c-dual-list-selector__item-main">
|
|
2391
2554
|
<span class="pf-c-dual-list-selector__item-text">Item6</span>
|
|
2392
2555
|
</span>
|
|
2393
2556
|
<span class="pf-c-dual-list-selector__item-count">
|
|
2394
2557
|
<span class="pf-c-badge pf-m-read"></span>
|
|
2395
2558
|
</span>
|
|
2396
|
-
</
|
|
2559
|
+
</span>
|
|
2397
2560
|
</div>
|
|
2398
2561
|
</li>
|
|
2399
2562
|
</ul>
|
|
@@ -2501,11 +2664,20 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
2501
2664
|
</div>
|
|
2502
2665
|
</div>
|
|
2503
2666
|
<div class="pf-c-dual-list-selector__status">
|
|
2504
|
-
<span
|
|
2667
|
+
<span
|
|
2668
|
+
class="pf-c-dual-list-selector__status-text"
|
|
2669
|
+
id="draggable-chosen-status-text"
|
|
2670
|
+
>0 of 0 items selected</span>
|
|
2505
2671
|
</div>
|
|
2506
2672
|
<div class="pf-c-dual-list-selector__menu">
|
|
2507
|
-
<ul
|
|
2508
|
-
|
|
2673
|
+
<ul
|
|
2674
|
+
class="pf-c-dual-list-selector__list"
|
|
2675
|
+
role="listbox"
|
|
2676
|
+
aria-labelledby="draggable-chosen-status-text"
|
|
2677
|
+
aria-multiselectable="true"
|
|
2678
|
+
aria-activedescendant
|
|
2679
|
+
>
|
|
2680
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
2509
2681
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
2510
2682
|
<div class="pf-c-dual-list-selector__draggable">
|
|
2511
2683
|
<button
|
|
@@ -2521,7 +2693,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
2521
2693
|
<i class="fas fa-grip-vertical" aria-hidden="true"></i>
|
|
2522
2694
|
</button>
|
|
2523
2695
|
</div>
|
|
2524
|
-
<
|
|
2696
|
+
<span class="pf-c-dual-list-selector__item">
|
|
2525
2697
|
<span class="pf-c-dual-list-selector__item-main">
|
|
2526
2698
|
<span
|
|
2527
2699
|
class="pf-c-dual-list-selector__item-text"
|
|
@@ -2531,10 +2703,10 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
2531
2703
|
<span class="pf-c-dual-list-selector__item-count">
|
|
2532
2704
|
<span class="pf-c-badge pf-m-read"></span>
|
|
2533
2705
|
</span>
|
|
2534
|
-
</
|
|
2706
|
+
</span>
|
|
2535
2707
|
</div>
|
|
2536
2708
|
</li>
|
|
2537
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
2709
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
2538
2710
|
<div class="pf-c-dual-list-selector__list-item-row">
|
|
2539
2711
|
<div class="pf-c-dual-list-selector__draggable">
|
|
2540
2712
|
<button
|
|
@@ -2549,7 +2721,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
2549
2721
|
<i class="fas fa-grip-vertical" aria-hidden="true"></i>
|
|
2550
2722
|
</button>
|
|
2551
2723
|
</div>
|
|
2552
|
-
<
|
|
2724
|
+
<span class="pf-c-dual-list-selector__item">
|
|
2553
2725
|
<span class="pf-c-dual-list-selector__item-main">
|
|
2554
2726
|
<span
|
|
2555
2727
|
class="pf-c-dual-list-selector__item-text"
|
|
@@ -2559,10 +2731,10 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
2559
2731
|
<span class="pf-c-dual-list-selector__item-count">
|
|
2560
2732
|
<span class="pf-c-badge pf-m-read"></span>
|
|
2561
2733
|
</span>
|
|
2562
|
-
</
|
|
2734
|
+
</span>
|
|
2563
2735
|
</div>
|
|
2564
2736
|
</li>
|
|
2565
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
2737
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
2566
2738
|
<div class="pf-c-dual-list-selector__list-item-row pf-m-ghost-row">
|
|
2567
2739
|
<div class="pf-c-dual-list-selector__draggable">
|
|
2568
2740
|
<button
|
|
@@ -2578,7 +2750,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
2578
2750
|
<i class="fas fa-grip-vertical" aria-hidden="true"></i>
|
|
2579
2751
|
</button>
|
|
2580
2752
|
</div>
|
|
2581
|
-
<
|
|
2753
|
+
<span class="pf-c-dual-list-selector__item">
|
|
2582
2754
|
<span class="pf-c-dual-list-selector__item-main">
|
|
2583
2755
|
<span
|
|
2584
2756
|
class="pf-c-dual-list-selector__item-text"
|
|
@@ -2588,10 +2760,10 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
2588
2760
|
<span class="pf-c-dual-list-selector__item-count">
|
|
2589
2761
|
<span class="pf-c-badge pf-m-read"></span>
|
|
2590
2762
|
</span>
|
|
2591
|
-
</
|
|
2763
|
+
</span>
|
|
2592
2764
|
</div>
|
|
2593
2765
|
</li>
|
|
2594
|
-
<li class="pf-c-dual-list-selector__list-item">
|
|
2766
|
+
<li class="pf-c-dual-list-selector__list-item" role="option">
|
|
2595
2767
|
<div class="pf-c-dual-list-selector__list-item-row pf-m-selected">
|
|
2596
2768
|
<div class="pf-c-dual-list-selector__draggable">
|
|
2597
2769
|
<button
|
|
@@ -2606,7 +2778,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
2606
2778
|
<i class="fas fa-grip-vertical" aria-hidden="true"></i>
|
|
2607
2779
|
</button>
|
|
2608
2780
|
</div>
|
|
2609
|
-
<
|
|
2781
|
+
<span class="pf-c-dual-list-selector__item">
|
|
2610
2782
|
<span class="pf-c-dual-list-selector__item-main">
|
|
2611
2783
|
<span
|
|
2612
2784
|
class="pf-c-dual-list-selector__item-text"
|
|
@@ -2616,7 +2788,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
2616
2788
|
<span class="pf-c-dual-list-selector__item-count">
|
|
2617
2789
|
<span class="pf-c-badge pf-m-read"></span>
|
|
2618
2790
|
</span>
|
|
2619
|
-
</
|
|
2791
|
+
</span>
|
|
2620
2792
|
</div>
|
|
2621
2793
|
</li>
|
|
2622
2794
|
</ul>
|
|
@@ -2634,14 +2806,19 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
2634
2806
|
|
|
2635
2807
|
### Accessibility
|
|
2636
2808
|
|
|
2637
|
-
| Attribute | Applied to
|
|
2638
|
-
| ---------------------------------------------------------------------------------------------- |
|
|
2639
|
-
| `aria-pressed="true or false"` | `.pf-c-dual-list-selector__draggable .pf-c-button`
|
|
2640
|
-
| `aria-live` | `[element with live text]`
|
|
2641
|
-
| `aria-describedby="[id value of applicable content]"` | `.pf-c-dual-list-selector__draggable .pf-c-button`
|
|
2642
|
-
| `aria-labelledby="[id of .pf-c-dual-list-selector__draggable .pf-c-button] [id of item text]"` | `.pf-c-table__dual-list-selector .pf-c-button`
|
|
2643
|
-
| `id="[]"` | `.pf-c-dual-list-selector__draggable .pf-c-button`, `[item text]` | Gives the button and the text element accessible IDs. |
|
|
2644
|
-
| `
|
|
2809
|
+
| Attribute | Applied to | Outcome |
|
|
2810
|
+
| ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
2811
|
+
| `aria-pressed="true or false"` | `.pf-c-dual-list-selector__draggable .pf-c-button` | Indicates whether the button is currently pressed or not. |
|
|
2812
|
+
| `aria-live` | `[element with live text]` | To give screen reader users live feedback about what's happening during interaction with the dual list selector, both during drag and drop interactions and keyboard interactions. **Highly Recommended** |
|
|
2813
|
+
| `aria-describedby="[id value of applicable content]"` | `.pf-c-dual-list-selector__draggable .pf-c-button` | Gives the draggable button an accessible description by referring to the textual content that describes how to use the button to drag elements. **Highly recommended** |
|
|
2814
|
+
| `aria-labelledby="[id of .pf-c-dual-list-selector__draggable .pf-c-button] [id of item text]"` | `.pf-c-table__dual-list-selector .pf-c-button` | Provides an accessible name for the draggable button. |
|
|
2815
|
+
| `id="[]"` | `.pf-c-dual-list-selector__draggable .pf-c-button`, `[item text]`, `.pf-c-dual-list-selector__status-text` | Gives the button and the text element accessible IDs. |
|
|
2816
|
+
| `aria-labelledby="[id of .pf-c-dual-list-selector__status-text]` | `.pf-c-dual-list-selector__list [ul]` | Gives the list an accessible name. |
|
|
2817
|
+
| `role="listbox or tree or group"` | `.pf-c-dual-list-selector__list [ul]` | Indicates the list is single, a tree, or a subgroup within the tree. |
|
|
2818
|
+
| `aria-multiselectable="true"` | `.pf-c-dual-list-selector__list [ul]` | Indicates the list is multiselectable. |
|
|
2819
|
+
| `aria-activedescendant=""` | `.pf-c-dual-list-selector__list [ul]` | Indicates the list has clickable children. |
|
|
2820
|
+
| `role="option or treeitem"` | `.pf-c-dual-list-selector__list-item [li]` | Indicates whether the item is part of a tree. |
|
|
2821
|
+
| `aria-expanded="true"` | `.pf-c-dual-list-selector__list-item [li]` | Indicates a treeitem is expanded. |
|
|
2645
2822
|
|
|
2646
2823
|
### Usage
|
|
2647
2824
|
|
|
@@ -2663,7 +2840,7 @@ cssPrefix: pf-c-dual-list-selector
|
|
|
2663
2840
|
| `.pf-c-dual-list-selector__list-item` | `<li>` | Initiates a dual list selector pane menu list item. **Required** |
|
|
2664
2841
|
| `.pf-c-dual-list-selector__list-item-row` | `<div>` | Initiates a dual list selector pane menu list item row. **Required** |
|
|
2665
2842
|
| `.pf-c-dual-list-selector__draggable` | `<div>` | Initiates a dual list selector pane draggable element. |
|
|
2666
|
-
| `.pf-c-dual-list-selector__item` | `<
|
|
2843
|
+
| `.pf-c-dual-list-selector__item` | `<span>`, `<div>` | Initiates a dual list selector pane menu item. **Required** |
|
|
2667
2844
|
| `.pf-c-dual-list-selector__item-main` | `<span>` | Initiates a dual list selector pane menu item main container. **Required** |
|
|
2668
2845
|
| `.pf-c-dual-list-selector__item-check` | `<span>` | Initiates the dual list selector item check. |
|
|
2669
2846
|
| `.pf-c-dual-list-selector__item-count` | `<span>` | Initiates the dual list selector item count. |
|