@patternfly/patternfly 4.205.1 → 4.206.2

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 (54) hide show
  1. package/base/_common.scss +9 -0
  2. package/base/patternfly-common.css +7 -0
  3. package/components/Page/page.css +50 -0
  4. package/components/Page/page.scss +20 -6
  5. package/components/TreeView/tree-view.css +6 -12
  6. package/components/TreeView/tree-view.scss +4 -8
  7. package/docs/components/AppLauncher/examples/application-launcher.md +69 -22
  8. package/docs/components/DataList/examples/DataList.md +30 -30
  9. package/docs/components/DatePicker/examples/DatePicker.md +4 -4
  10. package/docs/components/LabelGroup/examples/LabelGroup.md +19 -19
  11. package/docs/components/LogViewer/examples/LogViewer.md +46 -37
  12. package/docs/components/Masthead/examples/masthead.md +1 -1
  13. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +54 -27
  14. package/docs/components/Nav/examples/Navigation.md +12 -6
  15. package/docs/components/Pagination/examples/Pagination.md +47 -14
  16. package/docs/components/Popover/examples/Popover.md +36 -24
  17. package/docs/components/SearchInput/examples/SearchInput.md +12 -12
  18. package/docs/components/Select/examples/Select.md +8 -8
  19. package/docs/components/Table/examples/Table.md +1 -1
  20. package/docs/components/Tabs/examples/Tabs.md +64 -70
  21. package/docs/components/TextInputGroup/examples/TextInputGroup.md +60 -60
  22. package/docs/components/Tile/examples/Tile.md +0 -2
  23. package/docs/components/TreeView/examples/TreeView.md +257 -217
  24. package/docs/demos/AboutModal/examples/AboutModal.md +1 -1
  25. package/docs/demos/Alert/examples/Alert.md +3 -3
  26. package/docs/demos/BackToTop/examples/BackToTop.md +1 -1
  27. package/docs/demos/Banner/examples/Banner.md +2 -2
  28. package/docs/demos/CardView/examples/CardView.md +1 -1
  29. package/docs/demos/ContextSelector/examples/ContextSelector.md +3 -3
  30. package/docs/demos/Dashboard/examples/Dashboard.md +1 -1
  31. package/docs/demos/DataList/examples/DataList.md +4 -4
  32. package/docs/demos/DescriptionList/examples/DescriptionList.md +3 -3
  33. package/docs/demos/Drawer/examples/Drawer.md +5 -5
  34. package/docs/demos/JumpLinks/examples/JumpLinks.md +6 -6
  35. package/docs/demos/Masthead/examples/Masthead.md +2 -2
  36. package/docs/demos/Modal/examples/Modal.md +6 -6
  37. package/docs/demos/Nav/examples/Nav.md +8 -8
  38. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
  39. package/docs/demos/Page/examples/Page.md +8 -8
  40. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +7 -7
  41. package/docs/demos/Skeleton/examples/Skeleton.md +1 -1
  42. package/docs/demos/Table/examples/Table.md +14 -14
  43. package/docs/demos/Tabs/examples/Tabs.md +8 -8
  44. package/docs/demos/Toolbar/examples/Toolbar.md +55 -37
  45. package/docs/demos/Wizard/examples/Wizard.md +8 -8
  46. package/docs/layouts/Flex/examples/Flex.md +1 -1
  47. package/docs/layouts/Grid/examples/Grid.md +1 -1
  48. package/package.json +1 -1
  49. package/patternfly-base-no-reset.css +7 -0
  50. package/patternfly-base.css +7 -0
  51. package/patternfly-no-reset.css +63 -12
  52. package/patternfly.css +63 -12
  53. package/patternfly.min.css +1 -1
  54. package/patternfly.min.css.map +1 -1
package/docs/components/TreeView/examples/TreeView.md CHANGED
@@ -24,7 +24,6 @@ beta: true
24
24
  <i class="fas fa-angle-right" aria-hidden="true"></i>
25
25
  </span>
26
26
  </span>
27
-
28
27
  <span class="pf-c-tree-view__node-text">Application launcher</span>
29
28
  </span>
30
29
  </button>
@@ -44,7 +43,6 @@ beta: true
44
43
  <i class="fas fa-angle-right" aria-hidden="true"></i>
45
44
  </span>
46
45
  </span>
47
-
48
46
  <span class="pf-c-tree-view__node-text">Application 1</span>
49
47
  </span>
50
48
  </button>
@@ -82,7 +80,6 @@ beta: true
82
80
  <i class="fas fa-angle-right" aria-hidden="true"></i>
83
81
  </span>
84
82
  </span>
85
-
86
83
  <span class="pf-c-tree-view__node-text">Loader</span>
87
84
  </span>
88
85
  </button>
@@ -104,7 +101,6 @@ beta: true
104
101
  <i class="fas fa-angle-right" aria-hidden="true"></i>
105
102
  </span>
106
103
  </span>
107
-
108
104
  <span class="pf-c-tree-view__node-text">Application 2</span>
109
105
  </span>
110
106
  </button>
@@ -133,7 +129,6 @@ beta: true
133
129
  <i class="fas fa-angle-right" aria-hidden="true"></i>
134
130
  </span>
135
131
  </span>
136
-
137
132
  <span class="pf-c-tree-view__node-text">Settings</span>
138
133
  </span>
139
134
  </button>
@@ -153,7 +148,6 @@ beta: true
153
148
  <i class="fas fa-angle-right" aria-hidden="true"></i>
154
149
  </span>
155
150
  </span>
156
-
157
151
  <span class="pf-c-tree-view__node-text">Loader</span>
158
152
  </span>
159
153
  </button>
@@ -173,7 +167,6 @@ beta: true
173
167
  <i class="fas fa-angle-right" aria-hidden="true"></i>
174
168
  </span>
175
169
  </span>
176
-
177
170
  <span class="pf-c-tree-view__node-text">Loader app 1</span>
178
171
  </span>
179
172
  </button>
@@ -225,7 +218,6 @@ beta: true
225
218
  <i class="fas fa-angle-right" aria-hidden="true"></i>
226
219
  </span>
227
220
  </span>
228
-
229
221
  <span class="pf-c-tree-view__node-text">Cost management</span>
230
222
  </span>
231
223
  </button>
@@ -245,7 +237,6 @@ beta: true
245
237
  <i class="fas fa-angle-right" aria-hidden="true"></i>
246
238
  </span>
247
239
  </span>
248
-
249
240
  <span class="pf-c-tree-view__node-text">Sources</span>
250
241
  </span>
251
242
  </button>
@@ -265,7 +256,6 @@ beta: true
265
256
  <i class="fas fa-angle-right" aria-hidden="true"></i>
266
257
  </span>
267
258
  </span>
268
-
269
259
  <span
270
260
  class="pf-c-tree-view__node-text"
271
261
  >This is a really really really long folder name that overflows from the width of the container.</span>
@@ -315,7 +305,6 @@ beta: true
315
305
  <i class="fas fa-angle-right" aria-hidden="true"></i>
316
306
  </span>
317
307
  </span>
318
-
319
308
  <span class="pf-c-tree-view__node-text">Application launcher</span>
320
309
  </span>
321
310
  </button>
@@ -335,7 +324,6 @@ beta: true
335
324
  <i class="fas fa-angle-right" aria-hidden="true"></i>
336
325
  </span>
337
326
  </span>
338
-
339
327
  <span class="pf-c-tree-view__node-text">Application 1</span>
340
328
  </span>
341
329
  </button>
@@ -375,7 +363,6 @@ beta: true
375
363
  <i class="fas fa-angle-right" aria-hidden="true"></i>
376
364
  </span>
377
365
  </span>
378
-
379
366
  <span class="pf-c-tree-view__node-text">Application 2</span>
380
367
  </span>
381
368
  </button>
@@ -395,7 +382,6 @@ beta: true
395
382
  <i class="fas fa-angle-right" aria-hidden="true"></i>
396
383
  </span>
397
384
  </span>
398
-
399
385
  <span class="pf-c-tree-view__node-text">Settings</span>
400
386
  </span>
401
387
  </button>
@@ -415,7 +401,6 @@ beta: true
415
401
  <i class="fas fa-angle-right" aria-hidden="true"></i>
416
402
  </span>
417
403
  </span>
418
-
419
404
  <span class="pf-c-tree-view__node-text">Loader</span>
420
405
  </span>
421
406
  </button>
@@ -435,7 +420,6 @@ beta: true
435
420
  <i class="fas fa-angle-right" aria-hidden="true"></i>
436
421
  </span>
437
422
  </span>
438
-
439
423
  <span class="pf-c-tree-view__node-text">Loader app 1</span>
440
424
  </span>
441
425
  </button>
@@ -487,7 +471,6 @@ beta: true
487
471
  <i class="fas fa-angle-right" aria-hidden="true"></i>
488
472
  </span>
489
473
  </span>
490
-
491
474
  <span class="pf-c-tree-view__node-text">Cost management</span>
492
475
  </span>
493
476
  </button>
@@ -507,7 +490,6 @@ beta: true
507
490
  <i class="fas fa-angle-right" aria-hidden="true"></i>
508
491
  </span>
509
492
  </span>
510
-
511
493
  <span class="pf-c-tree-view__node-text">Sources</span>
512
494
  </span>
513
495
  </button>
@@ -527,7 +509,6 @@ beta: true
527
509
  <i class="fas fa-angle-right" aria-hidden="true"></i>
528
510
  </span>
529
511
  </span>
530
-
531
512
  <span
532
513
  class="pf-c-tree-view__node-text"
533
514
  >This is a really really really long folder name that overflows from the width of the container.</span>
@@ -556,31 +537,33 @@ beta: true
556
537
  class="pf-c-tree-view__node pf-m-selectable"
557
538
  tabindex="0"
558
539
  for="check-1"
559
- id="label-1"
560
540
  >
561
541
  <span class="pf-c-tree-view__node-container">
562
542
  <button
563
543
  class="pf-c-tree-view__node-toggle"
564
544
  id="toggle-1"
565
545
  aria-label="Toggle"
566
- aria-labelledby="toggle-1 label-1"
546
+ aria-labelledby="toggle-1 text-1"
567
547
  >
568
548
  <span class="pf-c-tree-view__node-toggle-icon">
569
549
  <i class="fas fa-angle-right" aria-hidden="true"></i>
570
550
  </span>
571
551
  </button>
572
-
573
552
  <span class="pf-c-tree-view__node-check">
574
553
  <div class="pf-c-check pf-m-standalone">
575
554
  <input
576
555
  class="pf-c-check__input"
577
556
  type="checkbox"
578
557
  id="check-1"
579
- aria-label="Tree view node check"
558
+ aria-label="Select"
559
+ aria-labelledby="check-1 text-1"
580
560
  />
581
561
  </div>
582
562
  </span>
583
- <span class="pf-c-tree-view__node-text">Application launcher</span>
563
+ <span
564
+ class="pf-c-tree-view__node-text"
565
+ id="text-1"
566
+ >Application launcher</span>
584
567
  </span>
585
568
  </label>
586
569
  </div>
@@ -596,82 +579,76 @@ beta: true
596
579
  class="pf-c-tree-view__node pf-m-selectable"
597
580
  tabindex="0"
598
581
  for="check-2"
599
- id="label-2"
600
582
  >
601
583
  <span class="pf-c-tree-view__node-container">
602
584
  <button
603
585
  class="pf-c-tree-view__node-toggle"
604
586
  id="toggle-2"
605
587
  aria-label="Toggle"
606
- aria-labelledby="toggle-2 label-2"
588
+ aria-labelledby="toggle-2 text-2"
607
589
  >
608
590
  <span class="pf-c-tree-view__node-toggle-icon">
609
591
  <i class="fas fa-angle-right" aria-hidden="true"></i>
610
592
  </span>
611
593
  </button>
612
-
613
594
  <span class="pf-c-tree-view__node-check">
614
595
  <div class="pf-c-check pf-m-standalone">
615
596
  <input
616
597
  class="pf-c-check__input"
617
598
  type="checkbox"
618
- id="check-2"
619
599
  checked
620
- aria-label="Tree view node check checked"
600
+ id="check-2"
601
+ aria-label="Select"
602
+ aria-labelledby="check-2 text-2"
621
603
  />
622
604
  </div>
623
605
  </span>
624
- <span class="pf-c-tree-view__node-text">Application 1</span>
606
+ <span
607
+ class="pf-c-tree-view__node-text"
608
+ id="text-2"
609
+ >Application 1</span>
625
610
  </span>
626
611
  </label>
627
612
  </div>
628
613
  <ul class="pf-c-tree-view__list" role="group">
629
614
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
630
615
  <div class="pf-c-tree-view__content">
631
- <label
632
- class="pf-c-tree-view__node pf-m-selectable"
633
- tabindex="0"
634
- for="check-3"
635
- id="label-3"
636
- >
616
+ <label class="pf-c-tree-view__node" tabindex="0" for="check-3">
637
617
  <span class="pf-c-tree-view__node-container">
638
618
  <span class="pf-c-tree-view__node-check">
639
619
  <div class="pf-c-check pf-m-standalone">
640
620
  <input
641
621
  class="pf-c-check__input"
642
622
  type="checkbox"
643
- id="check-3"
644
623
  checked
645
- aria-label="Tree view node check checked"
624
+ id="check-3"
625
+ aria-label="Select"
626
+ aria-labelledby="check-3 text-3"
646
627
  />
647
628
  </div>
648
629
  </span>
649
- <span class="pf-c-tree-view__node-text">Settings</span>
630
+ <span class="pf-c-tree-view__node-text" id="text-3">Settings</span>
650
631
  </span>
651
632
  </label>
652
633
  </div>
653
634
  </li>
654
635
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
655
636
  <div class="pf-c-tree-view__content">
656
- <label
657
- class="pf-c-tree-view__node pf-m-selectable"
658
- tabindex="0"
659
- for="check-4"
660
- id="label-4"
661
- >
637
+ <label class="pf-c-tree-view__node" tabindex="0" for="check-4">
662
638
  <span class="pf-c-tree-view__node-container">
663
639
  <span class="pf-c-tree-view__node-check">
664
640
  <div class="pf-c-check pf-m-standalone">
665
641
  <input
666
642
  class="pf-c-check__input"
667
643
  type="checkbox"
668
- id="check-4"
669
644
  checked
670
- aria-label="Tree view node check checked"
645
+ id="check-4"
646
+ aria-label="Select"
647
+ aria-labelledby="check-4 text-4"
671
648
  />
672
649
  </div>
673
650
  </span>
674
- <span class="pf-c-tree-view__node-text">Loader</span>
651
+ <span class="pf-c-tree-view__node-text" id="text-4">Loader</span>
675
652
  </span>
676
653
  </label>
677
654
  </div>
@@ -687,32 +664,31 @@ beta: true
687
664
  class="pf-c-tree-view__node pf-m-selectable"
688
665
  tabindex="0"
689
666
  for="check-5"
690
- id="label-5"
691
667
  >
692
668
  <span class="pf-c-tree-view__node-container">
693
669
  <button
694
670
  class="pf-c-tree-view__node-toggle"
695
671
  id="toggle-5"
696
672
  aria-label="Toggle"
697
- aria-labelledby="toggle-5 label-5"
673
+ aria-labelledby="toggle-5 text-5"
698
674
  >
699
675
  <span class="pf-c-tree-view__node-toggle-icon">
700
676
  <i class="fas fa-angle-right" aria-hidden="true"></i>
701
677
  </span>
702
678
  </button>
703
-
704
679
  <span class="pf-c-tree-view__node-check">
705
680
  <div class="pf-c-check pf-m-standalone">
706
681
  <input
707
682
  class="pf-c-check__input"
708
683
  type="checkbox"
709
- id="check-5"
710
684
  checked
711
- aria-label="Tree view node check checked"
685
+ id="check-5"
686
+ aria-label="Select"
687
+ aria-labelledby="check-5 text-5"
712
688
  />
713
689
  </div>
714
690
  </span>
715
- <span class="pf-c-tree-view__node-text">Loader</span>
691
+ <span class="pf-c-tree-view__node-text" id="text-5">Loader</span>
716
692
  </span>
717
693
  </label>
718
694
  </div>
@@ -730,31 +706,33 @@ beta: true
730
706
  class="pf-c-tree-view__node pf-m-selectable"
731
707
  tabindex="0"
732
708
  for="check-6"
733
- id="label-6"
734
709
  >
735
710
  <span class="pf-c-tree-view__node-container">
736
711
  <button
737
712
  class="pf-c-tree-view__node-toggle"
738
713
  id="toggle-6"
739
714
  aria-label="Toggle"
740
- aria-labelledby="toggle-6 label-6"
715
+ aria-labelledby="toggle-6 text-6"
741
716
  >
742
717
  <span class="pf-c-tree-view__node-toggle-icon">
743
718
  <i class="fas fa-angle-right" aria-hidden="true"></i>
744
719
  </span>
745
720
  </button>
746
-
747
721
  <span class="pf-c-tree-view__node-check">
748
722
  <div class="pf-c-check pf-m-standalone">
749
723
  <input
750
724
  class="pf-c-check__input"
751
725
  type="checkbox"
752
726
  id="check-6"
753
- aria-label="Tree view node check"
727
+ aria-label="Select"
728
+ aria-labelledby="check-6 text-6"
754
729
  />
755
730
  </div>
756
731
  </span>
757
- <span class="pf-c-tree-view__node-text">Application 2</span>
732
+ <span
733
+ class="pf-c-tree-view__node-text"
734
+ id="text-6"
735
+ >Application 2</span>
758
736
  </span>
759
737
  </label>
760
738
  </div>
@@ -770,43 +748,37 @@ beta: true
770
748
  class="pf-c-tree-view__node pf-m-selectable"
771
749
  tabindex="0"
772
750
  for="check-7"
773
- id="label-7"
774
751
  >
775
752
  <span class="pf-c-tree-view__node-container">
776
753
  <button
777
754
  class="pf-c-tree-view__node-toggle"
778
755
  id="toggle-7"
779
756
  aria-label="Toggle"
780
- aria-labelledby="toggle-7 label-7"
757
+ aria-labelledby="toggle-7 text-7"
781
758
  >
782
759
  <span class="pf-c-tree-view__node-toggle-icon">
783
760
  <i class="fas fa-angle-right" aria-hidden="true"></i>
784
761
  </span>
785
762
  </button>
786
-
787
763
  <span class="pf-c-tree-view__node-check">
788
764
  <div class="pf-c-check pf-m-standalone">
789
765
  <input
790
766
  class="pf-c-check__input"
791
767
  type="checkbox"
792
768
  id="check-7"
793
- aria-label="Tree view node check"
769
+ aria-label="Select"
770
+ aria-labelledby="check-7 text-7"
794
771
  />
795
772
  </div>
796
773
  </span>
797
- <span class="pf-c-tree-view__node-text">Settings</span>
774
+ <span class="pf-c-tree-view__node-text" id="text-7">Settings</span>
798
775
  </span>
799
776
  </label>
800
777
  </div>
801
778
  </li>
802
779
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
803
780
  <div class="pf-c-tree-view__content">
804
- <label
805
- class="pf-c-tree-view__node pf-m-selectable"
806
- tabindex="0"
807
- for="check-8"
808
- id="label-8"
809
- >
781
+ <label class="pf-c-tree-view__node" tabindex="0" for="check-8">
810
782
  <span class="pf-c-tree-view__node-container">
811
783
  <span class="pf-c-tree-view__node-check">
812
784
  <div class="pf-c-check pf-m-standalone">
@@ -814,11 +786,12 @@ beta: true
814
786
  class="pf-c-check__input"
815
787
  type="checkbox"
816
788
  id="check-8"
817
- aria-label="Tree view node check"
789
+ aria-label="Select"
790
+ aria-labelledby="check-8 text-8"
818
791
  />
819
792
  </div>
820
793
  </span>
821
- <span class="pf-c-tree-view__node-text">Settings</span>
794
+ <span class="pf-c-tree-view__node-text" id="text-8">Settings</span>
822
795
  </span>
823
796
  </label>
824
797
  </div>
@@ -834,31 +807,30 @@ beta: true
834
807
  class="pf-c-tree-view__node pf-m-selectable"
835
808
  tabindex="0"
836
809
  for="check-9"
837
- id="label-9"
838
810
  >
839
811
  <span class="pf-c-tree-view__node-container">
840
812
  <button
841
813
  class="pf-c-tree-view__node-toggle"
842
814
  id="toggle-9"
843
815
  aria-label="Toggle"
844
- aria-labelledby="toggle-9 label-9"
816
+ aria-labelledby="toggle-9 text-9"
845
817
  >
846
818
  <span class="pf-c-tree-view__node-toggle-icon">
847
819
  <i class="fas fa-angle-right" aria-hidden="true"></i>
848
820
  </span>
849
821
  </button>
850
-
851
822
  <span class="pf-c-tree-view__node-check">
852
823
  <div class="pf-c-check pf-m-standalone">
853
824
  <input
854
825
  class="pf-c-check__input"
855
826
  type="checkbox"
856
827
  id="check-9"
857
- aria-label="Tree view node check"
828
+ aria-label="Select"
829
+ aria-labelledby="check-9 text-9"
858
830
  />
859
831
  </div>
860
832
  </span>
861
- <span class="pf-c-tree-view__node-text">Current</span>
833
+ <span class="pf-c-tree-view__node-text" id="text-9">Current</span>
862
834
  </span>
863
835
  </label>
864
836
  </div>
@@ -874,31 +846,33 @@ beta: true
874
846
  class="pf-c-tree-view__node pf-m-selectable"
875
847
  tabindex="0"
876
848
  for="check-10"
877
- id="label-10"
878
849
  >
879
850
  <span class="pf-c-tree-view__node-container">
880
851
  <button
881
852
  class="pf-c-tree-view__node-toggle"
882
853
  id="toggle-10"
883
854
  aria-label="Toggle"
884
- aria-labelledby="toggle-10 label-10"
855
+ aria-labelledby="toggle-10 text-10"
885
856
  >
886
857
  <span class="pf-c-tree-view__node-toggle-icon">
887
858
  <i class="fas fa-angle-right" aria-hidden="true"></i>
888
859
  </span>
889
860
  </button>
890
-
891
861
  <span class="pf-c-tree-view__node-check">
892
862
  <div class="pf-c-check pf-m-standalone">
893
863
  <input
894
864
  class="pf-c-check__input"
895
865
  type="checkbox"
896
866
  id="check-10"
897
- aria-label="Tree view node check"
867
+ aria-label="Select"
868
+ aria-labelledby="check-10 text-10"
898
869
  />
899
870
  </div>
900
871
  </span>
901
- <span class="pf-c-tree-view__node-text">Loader app 1</span>
872
+ <span
873
+ class="pf-c-tree-view__node-text"
874
+ id="text-10"
875
+ >Loader app 1</span>
902
876
  </span>
903
877
  </label>
904
878
  </div>
@@ -910,10 +884,9 @@ beta: true
910
884
  >
911
885
  <div class="pf-c-tree-view__content">
912
886
  <label
913
- class="pf-c-tree-view__node pf-m-selectable"
887
+ class="pf-c-tree-view__node"
914
888
  tabindex="0"
915
889
  for="check-11"
916
- id="label-11"
917
890
  >
918
891
  <span class="pf-c-tree-view__node-container">
919
892
  <span class="pf-c-tree-view__node-check">
@@ -921,13 +894,17 @@ beta: true
921
894
  <input
922
895
  class="pf-c-check__input"
923
896
  type="checkbox"
924
- id="check-11"
925
897
  checked
926
- aria-label="Tree view node check checked"
898
+ id="check-11"
899
+ aria-label="Select"
900
+ aria-labelledby="check-11 text-11"
927
901
  />
928
902
  </div>
929
903
  </span>
930
- <span class="pf-c-tree-view__node-text">Loader app 2</span>
904
+ <span
905
+ class="pf-c-tree-view__node-text"
906
+ id="text-11"
907
+ >Loader app 2</span>
931
908
  </span>
932
909
  </label>
933
910
  </div>
@@ -939,10 +916,9 @@ beta: true
939
916
  >
940
917
  <div class="pf-c-tree-view__content">
941
918
  <label
942
- class="pf-c-tree-view__node pf-m-selectable"
919
+ class="pf-c-tree-view__node"
943
920
  tabindex="0"
944
921
  for="check-12"
945
- id="label-12"
946
922
  >
947
923
  <span class="pf-c-tree-view__node-container">
948
924
  <span class="pf-c-tree-view__node-check">
@@ -951,11 +927,15 @@ beta: true
951
927
  class="pf-c-check__input"
952
928
  type="checkbox"
953
929
  id="check-12"
954
- aria-label="Tree view node check"
930
+ aria-label="Select"
931
+ aria-labelledby="check-12 text-12"
955
932
  />
956
933
  </div>
957
934
  </span>
958
- <span class="pf-c-tree-view__node-text">Loader app 3</span>
935
+ <span
936
+ class="pf-c-tree-view__node-text"
937
+ id="text-12"
938
+ >Loader app 3</span>
959
939
  </span>
960
940
  </label>
961
941
  </div>
@@ -977,31 +957,30 @@ beta: true
977
957
  class="pf-c-tree-view__node pf-m-selectable"
978
958
  tabindex="0"
979
959
  for="check-13"
980
- id="label-13"
981
960
  >
982
961
  <span class="pf-c-tree-view__node-container">
983
962
  <button
984
963
  class="pf-c-tree-view__node-toggle"
985
964
  id="toggle-13"
986
965
  aria-label="Toggle"
987
- aria-labelledby="toggle-13 label-13"
966
+ aria-labelledby="toggle-13 text-13"
988
967
  >
989
968
  <span class="pf-c-tree-view__node-toggle-icon">
990
969
  <i class="fas fa-angle-right" aria-hidden="true"></i>
991
970
  </span>
992
971
  </button>
993
-
994
972
  <span class="pf-c-tree-view__node-check">
995
973
  <div class="pf-c-check pf-m-standalone">
996
974
  <input
997
975
  class="pf-c-check__input"
998
976
  type="checkbox"
999
977
  id="check-13"
1000
- aria-label="Tree view node check"
978
+ aria-label="Select"
979
+ aria-labelledby="check-13 text-13"
1001
980
  />
1002
981
  </div>
1003
982
  </span>
1004
- <span class="pf-c-tree-view__node-text">Cost management</span>
983
+ <span class="pf-c-tree-view__node-text" id="text-13">Cost management</span>
1005
984
  </span>
1006
985
  </label>
1007
986
  </div>
@@ -1017,31 +996,30 @@ beta: true
1017
996
  class="pf-c-tree-view__node pf-m-selectable"
1018
997
  tabindex="0"
1019
998
  for="check-14"
1020
- id="label-14"
1021
999
  >
1022
1000
  <span class="pf-c-tree-view__node-container">
1023
1001
  <button
1024
1002
  class="pf-c-tree-view__node-toggle"
1025
1003
  id="toggle-14"
1026
1004
  aria-label="Toggle"
1027
- aria-labelledby="toggle-14 label-14"
1005
+ aria-labelledby="toggle-14 text-14"
1028
1006
  >
1029
1007
  <span class="pf-c-tree-view__node-toggle-icon">
1030
1008
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1031
1009
  </span>
1032
1010
  </button>
1033
-
1034
1011
  <span class="pf-c-tree-view__node-check">
1035
1012
  <div class="pf-c-check pf-m-standalone">
1036
1013
  <input
1037
1014
  class="pf-c-check__input"
1038
1015
  type="checkbox"
1039
1016
  id="check-14"
1040
- aria-label="Tree view node check"
1017
+ aria-label="Select"
1018
+ aria-labelledby="check-14 text-14"
1041
1019
  />
1042
1020
  </div>
1043
1021
  </span>
1044
- <span class="pf-c-tree-view__node-text">Sources</span>
1022
+ <span class="pf-c-tree-view__node-text" id="text-14">Sources</span>
1045
1023
  </span>
1046
1024
  </label>
1047
1025
  </div>
@@ -1057,33 +1035,33 @@ beta: true
1057
1035
  class="pf-c-tree-view__node pf-m-selectable"
1058
1036
  tabindex="0"
1059
1037
  for="check-15"
1060
- id="label-15"
1061
1038
  >
1062
1039
  <span class="pf-c-tree-view__node-container">
1063
1040
  <button
1064
1041
  class="pf-c-tree-view__node-toggle"
1065
1042
  id="toggle-15"
1066
1043
  aria-label="Toggle"
1067
- aria-labelledby="toggle-15 label-15"
1044
+ aria-labelledby="toggle-15 text-15"
1068
1045
  >
1069
1046
  <span class="pf-c-tree-view__node-toggle-icon">
1070
1047
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1071
1048
  </span>
1072
1049
  </button>
1073
-
1074
1050
  <span class="pf-c-tree-view__node-check">
1075
1051
  <div class="pf-c-check pf-m-standalone">
1076
1052
  <input
1077
1053
  class="pf-c-check__input"
1078
1054
  type="checkbox"
1079
- id="check-15"
1080
1055
  checked
1081
- aria-label="Tree view node check checked"
1056
+ id="check-15"
1057
+ aria-label="Select"
1058
+ aria-labelledby="check-15 text-15"
1082
1059
  />
1083
1060
  </div>
1084
1061
  </span>
1085
1062
  <span
1086
1063
  class="pf-c-tree-view__node-text"
1064
+ id="text-15"
1087
1065
  >This is a really really really long folder name that overflows from the width of the container.</span>
1088
1066
  </span>
1089
1067
  </label>
@@ -1113,7 +1091,6 @@ beta: true
1113
1091
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1114
1092
  </span>
1115
1093
  </span>
1116
-
1117
1094
  <span class="pf-c-tree-view__node-icon">
1118
1095
  <i class="fas fa-folder-open" aria-hidden="true"></i>
1119
1096
  </span>
@@ -1136,7 +1113,6 @@ beta: true
1136
1113
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1137
1114
  </span>
1138
1115
  </span>
1139
-
1140
1116
  <span class="pf-c-tree-view__node-icon">
1141
1117
  <i class="fas fa-folder-open" aria-hidden="true"></i>
1142
1118
  </span>
@@ -1185,7 +1161,6 @@ beta: true
1185
1161
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1186
1162
  </span>
1187
1163
  </span>
1188
-
1189
1164
  <span class="pf-c-tree-view__node-icon">
1190
1165
  <i class="fas fa-folder-open" aria-hidden="true"></i>
1191
1166
  </span>
@@ -1208,7 +1183,6 @@ beta: true
1208
1183
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1209
1184
  </span>
1210
1185
  </span>
1211
-
1212
1186
  <span class="pf-c-tree-view__node-icon">
1213
1187
  <i class="fas fa-folder" aria-hidden="true"></i>
1214
1188
  </span>
@@ -1231,7 +1205,6 @@ beta: true
1231
1205
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1232
1206
  </span>
1233
1207
  </span>
1234
-
1235
1208
  <span class="pf-c-tree-view__node-icon">
1236
1209
  <i class="fas fa-folder-open" aria-hidden="true"></i>
1237
1210
  </span>
@@ -1254,7 +1227,6 @@ beta: true
1254
1227
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1255
1228
  </span>
1256
1229
  </span>
1257
-
1258
1230
  <span class="pf-c-tree-view__node-icon">
1259
1231
  <i class="fas fa-folder" aria-hidden="true"></i>
1260
1232
  </span>
@@ -1315,7 +1287,6 @@ beta: true
1315
1287
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1316
1288
  </span>
1317
1289
  </span>
1318
-
1319
1290
  <span class="pf-c-tree-view__node-icon">
1320
1291
  <i class="fas fa-folder" aria-hidden="true"></i>
1321
1292
  </span>
@@ -1338,7 +1309,6 @@ beta: true
1338
1309
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1339
1310
  </span>
1340
1311
  </span>
1341
-
1342
1312
  <span class="pf-c-tree-view__node-icon">
1343
1313
  <i class="fas fa-folder" aria-hidden="true"></i>
1344
1314
  </span>
@@ -1361,7 +1331,6 @@ beta: true
1361
1331
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1362
1332
  </span>
1363
1333
  </span>
1364
-
1365
1334
  <span class="pf-c-tree-view__node-icon">
1366
1335
  <i class="fas fa-folder" aria-hidden="true"></i>
1367
1336
  </span>
@@ -1396,7 +1365,6 @@ beta: true
1396
1365
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1397
1366
  </span>
1398
1367
  </span>
1399
-
1400
1368
  <span class="pf-c-tree-view__node-text">Application launcher</span>
1401
1369
  <span class="pf-c-tree-view__node-count">
1402
1370
  <span class="pf-c-badge pf-m-read">2</span>
@@ -1419,7 +1387,6 @@ beta: true
1419
1387
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1420
1388
  </span>
1421
1389
  </span>
1422
-
1423
1390
  <span class="pf-c-tree-view__node-text">Application 1</span>
1424
1391
  <span class="pf-c-tree-view__node-count">
1425
1392
  <span class="pf-c-badge pf-m-read">2</span>
@@ -1462,7 +1429,6 @@ beta: true
1462
1429
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1463
1430
  </span>
1464
1431
  </span>
1465
-
1466
1432
  <span class="pf-c-tree-view__node-text">Application 2</span>
1467
1433
  <span class="pf-c-tree-view__node-count">
1468
1434
  <span class="pf-c-badge pf-m-read">2</span>
@@ -1485,7 +1451,6 @@ beta: true
1485
1451
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1486
1452
  </span>
1487
1453
  </span>
1488
-
1489
1454
  <span class="pf-c-tree-view__node-text">Settings</span>
1490
1455
  <span class="pf-c-tree-view__node-count">
1491
1456
  <span class="pf-c-badge pf-m-read">2</span>
@@ -1508,7 +1473,6 @@ beta: true
1508
1473
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1509
1474
  </span>
1510
1475
  </span>
1511
-
1512
1476
  <span class="pf-c-tree-view__node-text">Loader</span>
1513
1477
  <span class="pf-c-tree-view__node-count">
1514
1478
  <span class="pf-c-badge pf-m-read">2</span>
@@ -1531,7 +1495,6 @@ beta: true
1531
1495
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1532
1496
  </span>
1533
1497
  </span>
1534
-
1535
1498
  <span class="pf-c-tree-view__node-text">Loader app 1</span>
1536
1499
  <span class="pf-c-tree-view__node-count">
1537
1500
  <span class="pf-c-badge pf-m-read">2</span>
@@ -1586,7 +1549,6 @@ beta: true
1586
1549
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1587
1550
  </span>
1588
1551
  </span>
1589
-
1590
1552
  <span class="pf-c-tree-view__node-text">Cost management</span>
1591
1553
  <span class="pf-c-tree-view__node-count">
1592
1554
  <span class="pf-c-badge pf-m-read">2</span>
@@ -1609,7 +1571,6 @@ beta: true
1609
1571
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1610
1572
  </span>
1611
1573
  </span>
1612
-
1613
1574
  <span class="pf-c-tree-view__node-text">Sources</span>
1614
1575
  <span class="pf-c-tree-view__node-count">
1615
1576
  <span class="pf-c-badge pf-m-read">2</span>
@@ -1632,7 +1593,6 @@ beta: true
1632
1593
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1633
1594
  </span>
1634
1595
  </span>
1635
-
1636
1596
  <span
1637
1597
  class="pf-c-tree-view__node-text"
1638
1598
  >This is a really really really long folder name that overflows from the width of the container.</span>
@@ -1667,7 +1627,6 @@ beta: true
1667
1627
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1668
1628
  </span>
1669
1629
  </span>
1670
-
1671
1630
  <span class="pf-c-tree-view__node-text">Application launcher</span>
1672
1631
  </span>
1673
1632
  </button>
@@ -1697,7 +1656,6 @@ beta: true
1697
1656
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1698
1657
  </span>
1699
1658
  </span>
1700
-
1701
1659
  <span class="pf-c-tree-view__node-text">Application 1</span>
1702
1660
  </span>
1703
1661
  </button>
@@ -1747,7 +1705,6 @@ beta: true
1747
1705
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1748
1706
  </span>
1749
1707
  </span>
1750
-
1751
1708
  <span class="pf-c-tree-view__node-text">Application 2</span>
1752
1709
  </span>
1753
1710
  </button>
@@ -1777,7 +1734,6 @@ beta: true
1777
1734
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1778
1735
  </span>
1779
1736
  </span>
1780
-
1781
1737
  <span class="pf-c-tree-view__node-text">Settings</span>
1782
1738
  </span>
1783
1739
  </button>
@@ -1797,7 +1753,6 @@ beta: true
1797
1753
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1798
1754
  </span>
1799
1755
  </span>
1800
-
1801
1756
  <span class="pf-c-tree-view__node-text">Loader</span>
1802
1757
  </span>
1803
1758
  </button>
@@ -1817,7 +1772,6 @@ beta: true
1817
1772
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1818
1773
  </span>
1819
1774
  </span>
1820
-
1821
1775
  <span class="pf-c-tree-view__node-text">Loader app 1</span>
1822
1776
  </span>
1823
1777
  </button>
@@ -1869,7 +1823,6 @@ beta: true
1869
1823
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1870
1824
  </span>
1871
1825
  </span>
1872
-
1873
1826
  <span class="pf-c-tree-view__node-text">Cost management</span>
1874
1827
  </span>
1875
1828
  </button>
@@ -1889,7 +1842,6 @@ beta: true
1889
1842
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1890
1843
  </span>
1891
1844
  </span>
1892
-
1893
1845
  <span class="pf-c-tree-view__node-text">Sources</span>
1894
1846
  </span>
1895
1847
  </button>
@@ -1909,7 +1861,6 @@ beta: true
1909
1861
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1910
1862
  </span>
1911
1863
  </span>
1912
-
1913
1864
  <span
1914
1865
  class="pf-c-tree-view__node-text"
1915
1866
  >This is a really really really long folder name that overflows from the width of the container.</span>
@@ -1986,7 +1937,6 @@ beta: true
1986
1937
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1987
1938
  </span>
1988
1939
  </span>
1989
-
1990
1940
  <span class="pf-c-tree-view__node-text">Application launcher</span>
1991
1941
  </span>
1992
1942
  </button>
@@ -2006,7 +1956,6 @@ beta: true
2006
1956
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2007
1957
  </span>
2008
1958
  </span>
2009
-
2010
1959
  <span class="pf-c-tree-view__node-text">Application 1</span>
2011
1960
  </span>
2012
1961
  </button>
@@ -2044,7 +1993,6 @@ beta: true
2044
1993
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2045
1994
  </span>
2046
1995
  </span>
2047
-
2048
1996
  <span class="pf-c-tree-view__node-text">Loader</span>
2049
1997
  </span>
2050
1998
  </button>
@@ -2066,7 +2014,6 @@ beta: true
2066
2014
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2067
2015
  </span>
2068
2016
  </span>
2069
-
2070
2017
  <span class="pf-c-tree-view__node-text">Application 2</span>
2071
2018
  </span>
2072
2019
  </button>
@@ -2095,7 +2042,6 @@ beta: true
2095
2042
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2096
2043
  </span>
2097
2044
  </span>
2098
-
2099
2045
  <span class="pf-c-tree-view__node-text">Settings</span>
2100
2046
  </span>
2101
2047
  </button>
@@ -2115,7 +2061,6 @@ beta: true
2115
2061
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2116
2062
  </span>
2117
2063
  </span>
2118
-
2119
2064
  <span class="pf-c-tree-view__node-text">Loader</span>
2120
2065
  </span>
2121
2066
  </button>
@@ -2135,7 +2080,6 @@ beta: true
2135
2080
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2136
2081
  </span>
2137
2082
  </span>
2138
-
2139
2083
  <span class="pf-c-tree-view__node-text">Loader app 1</span>
2140
2084
  </span>
2141
2085
  </button>
@@ -2196,7 +2140,6 @@ beta: true
2196
2140
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2197
2141
  </span>
2198
2142
  </span>
2199
-
2200
2143
  <span class="pf-c-tree-view__node-text">Sources</span>
2201
2144
  </span>
2202
2145
  </button>
@@ -2230,17 +2173,30 @@ beta: true
2230
2173
  tabindex="0"
2231
2174
  >
2232
2175
  <div class="pf-c-tree-view__content">
2233
- <button class="pf-c-tree-view__node pf-m-selectable">
2176
+ <div
2177
+ class="pf-c-tree-view__node pf-m-selectable"
2178
+ tabindex="0"
2179
+ id="node-1"
2180
+ aria-label="Select"
2181
+ aria-labelledby="node-1 text-1"
2182
+ >
2234
2183
  <span class="pf-c-tree-view__node-container">
2235
- <span class="pf-c-tree-view__node-toggle">
2184
+ <button
2185
+ class="pf-c-tree-view__node-toggle"
2186
+ id="toggle-1"
2187
+ aria-label="Toggle"
2188
+ aria-labelledby="toggle-1 text-1"
2189
+ >
2236
2190
  <span class="pf-c-tree-view__node-toggle-icon">
2237
2191
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2238
2192
  </span>
2239
- </span>
2240
-
2241
- <span class="pf-c-tree-view__node-text">Application launcher</span>
2193
+ </button>
2194
+ <span
2195
+ class="pf-c-tree-view__node-text"
2196
+ id="text-1"
2197
+ >Application launcher</span>
2242
2198
  </span>
2243
- </button>
2199
+ </div>
2244
2200
  </div>
2245
2201
  <ul class="pf-c-tree-view__list" role="group">
2246
2202
  <li
@@ -2250,17 +2206,30 @@ beta: true
2250
2206
  tabindex="0"
2251
2207
  >
2252
2208
  <div class="pf-c-tree-view__content">
2253
- <button class="pf-c-tree-view__node pf-m-selectable">
2209
+ <div
2210
+ class="pf-c-tree-view__node pf-m-selectable"
2211
+ tabindex="0"
2212
+ id="node-2"
2213
+ aria-label="Select"
2214
+ aria-labelledby="node-2 text-2"
2215
+ >
2254
2216
  <span class="pf-c-tree-view__node-container">
2255
- <span class="pf-c-tree-view__node-toggle">
2217
+ <button
2218
+ class="pf-c-tree-view__node-toggle"
2219
+ id="toggle-2"
2220
+ aria-label="Toggle"
2221
+ aria-labelledby="toggle-2 text-2"
2222
+ >
2256
2223
  <span class="pf-c-tree-view__node-toggle-icon">
2257
2224
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2258
2225
  </span>
2259
- </span>
2260
-
2261
- <span class="pf-c-tree-view__node-text">Application 1</span>
2226
+ </button>
2227
+ <span
2228
+ class="pf-c-tree-view__node-text"
2229
+ id="text-2"
2230
+ >Application 1</span>
2262
2231
  </span>
2263
- </button>
2232
+ </div>
2264
2233
  </div>
2265
2234
  <ul class="pf-c-tree-view__list" role="group">
2266
2235
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
@@ -2276,7 +2245,7 @@ beta: true
2276
2245
  <div class="pf-c-tree-view__content">
2277
2246
  <button class="pf-c-tree-view__node">
2278
2247
  <span class="pf-c-tree-view__node-container">
2279
- <span class="pf-c-tree-view__node-text">Current</span>
2248
+ <span class="pf-c-tree-view__node-text">Options</span>
2280
2249
  </span>
2281
2250
  </button>
2282
2251
  </div>
@@ -2288,17 +2257,27 @@ beta: true
2288
2257
  tabindex="0"
2289
2258
  >
2290
2259
  <div class="pf-c-tree-view__content">
2291
- <button class="pf-c-tree-view__node pf-m-selectable">
2260
+ <div
2261
+ class="pf-c-tree-view__node pf-m-selectable"
2262
+ tabindex="0"
2263
+ id="node-3"
2264
+ aria-label="Select"
2265
+ aria-labelledby="node-3 text-3"
2266
+ >
2292
2267
  <span class="pf-c-tree-view__node-container">
2293
- <span class="pf-c-tree-view__node-toggle">
2268
+ <button
2269
+ class="pf-c-tree-view__node-toggle"
2270
+ id="toggle-3"
2271
+ aria-label="Toggle"
2272
+ aria-labelledby="toggle-3 text-3"
2273
+ >
2294
2274
  <span class="pf-c-tree-view__node-toggle-icon">
2295
2275
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2296
2276
  </span>
2297
- </span>
2298
-
2299
- <span class="pf-c-tree-view__node-text">Loader</span>
2277
+ </button>
2278
+ <span class="pf-c-tree-view__node-text" id="text-3">Loader</span>
2300
2279
  </span>
2301
- </button>
2280
+ </div>
2302
2281
  </div>
2303
2282
  </li>
2304
2283
  </ul>
@@ -2310,17 +2289,30 @@ beta: true
2310
2289
  tabindex="0"
2311
2290
  >
2312
2291
  <div class="pf-c-tree-view__content">
2313
- <button class="pf-c-tree-view__node pf-m-selectable">
2292
+ <div
2293
+ class="pf-c-tree-view__node pf-m-selectable"
2294
+ tabindex="0"
2295
+ id="node-4"
2296
+ aria-label="Select"
2297
+ aria-labelledby="node-4 text-4"
2298
+ >
2314
2299
  <span class="pf-c-tree-view__node-container">
2315
- <span class="pf-c-tree-view__node-toggle">
2300
+ <button
2301
+ class="pf-c-tree-view__node-toggle"
2302
+ id="toggle-4"
2303
+ aria-label="Toggle"
2304
+ aria-labelledby="toggle-4 text-4"
2305
+ >
2316
2306
  <span class="pf-c-tree-view__node-toggle-icon">
2317
2307
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2318
2308
  </span>
2319
- </span>
2320
-
2321
- <span class="pf-c-tree-view__node-text">Application 2</span>
2309
+ </button>
2310
+ <span
2311
+ class="pf-c-tree-view__node-text"
2312
+ id="text-4"
2313
+ >Application 2</span>
2322
2314
  </span>
2323
- </button>
2315
+ </div>
2324
2316
  </div>
2325
2317
  <ul class="pf-c-tree-view__list" role="group">
2326
2318
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
@@ -2339,17 +2331,27 @@ beta: true
2339
2331
  tabindex="0"
2340
2332
  >
2341
2333
  <div class="pf-c-tree-view__content">
2342
- <button class="pf-c-tree-view__node pf-m-selectable">
2334
+ <div
2335
+ class="pf-c-tree-view__node pf-m-selectable"
2336
+ tabindex="0"
2337
+ id="node-5"
2338
+ aria-label="Select"
2339
+ aria-labelledby="node-5 text-5"
2340
+ >
2343
2341
  <span class="pf-c-tree-view__node-container">
2344
- <span class="pf-c-tree-view__node-toggle">
2342
+ <button
2343
+ class="pf-c-tree-view__node-toggle"
2344
+ id="toggle-5"
2345
+ aria-label="Toggle"
2346
+ aria-labelledby="toggle-5 text-5"
2347
+ >
2345
2348
  <span class="pf-c-tree-view__node-toggle-icon">
2346
2349
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2347
2350
  </span>
2348
- </span>
2349
-
2350
- <span class="pf-c-tree-view__node-text">Settings</span>
2351
+ </button>
2352
+ <span class="pf-c-tree-view__node-text" id="text-5">Settings</span>
2351
2353
  </span>
2352
- </button>
2354
+ </div>
2353
2355
  </div>
2354
2356
  </li>
2355
2357
  <li
@@ -2359,17 +2361,27 @@ beta: true
2359
2361
  tabindex="0"
2360
2362
  >
2361
2363
  <div class="pf-c-tree-view__content">
2362
- <button class="pf-c-tree-view__node pf-m-selectable">
2364
+ <div
2365
+ class="pf-c-tree-view__node pf-m-selectable"
2366
+ tabindex="0"
2367
+ id="node-6"
2368
+ aria-label="Select"
2369
+ aria-labelledby="node-6 text-6"
2370
+ >
2363
2371
  <span class="pf-c-tree-view__node-container">
2364
- <span class="pf-c-tree-view__node-toggle">
2372
+ <button
2373
+ class="pf-c-tree-view__node-toggle"
2374
+ id="toggle-6"
2375
+ aria-label="Toggle"
2376
+ aria-labelledby="toggle-6 text-6"
2377
+ >
2365
2378
  <span class="pf-c-tree-view__node-toggle-icon">
2366
2379
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2367
2380
  </span>
2368
- </span>
2369
-
2370
- <span class="pf-c-tree-view__node-text">Loader</span>
2381
+ </button>
2382
+ <span class="pf-c-tree-view__node-text" id="text-6">Loader</span>
2371
2383
  </span>
2372
- </button>
2384
+ </div>
2373
2385
  </div>
2374
2386
  <ul class="pf-c-tree-view__list" role="group">
2375
2387
  <li
@@ -2379,17 +2391,30 @@ beta: true
2379
2391
  tabindex="0"
2380
2392
  >
2381
2393
  <div class="pf-c-tree-view__content">
2382
- <button class="pf-c-tree-view__node pf-m-selectable">
2394
+ <div
2395
+ class="pf-c-tree-view__node pf-m-selectable pf-m-current"
2396
+ tabindex="0"
2397
+ id="node-7"
2398
+ aria-label="Select"
2399
+ aria-labelledby="node-7 text-7"
2400
+ >
2383
2401
  <span class="pf-c-tree-view__node-container">
2384
- <span class="pf-c-tree-view__node-toggle">
2402
+ <button
2403
+ class="pf-c-tree-view__node-toggle"
2404
+ id="toggle-7"
2405
+ aria-label="Toggle"
2406
+ aria-labelledby="toggle-7 text-7"
2407
+ >
2385
2408
  <span class="pf-c-tree-view__node-toggle-icon">
2386
2409
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2387
2410
  </span>
2388
- </span>
2389
-
2390
- <span class="pf-c-tree-view__node-text">Loader app 1</span>
2411
+ </button>
2412
+ <span
2413
+ class="pf-c-tree-view__node-text"
2414
+ id="text-7"
2415
+ >Loader app 1</span>
2391
2416
  </span>
2392
- </button>
2417
+ </div>
2393
2418
  </div>
2394
2419
  </li>
2395
2420
  <li
@@ -2431,17 +2456,27 @@ beta: true
2431
2456
  tabindex="0"
2432
2457
  >
2433
2458
  <div class="pf-c-tree-view__content">
2434
- <button class="pf-c-tree-view__node pf-m-selectable">
2459
+ <div
2460
+ class="pf-c-tree-view__node pf-m-selectable"
2461
+ tabindex="0"
2462
+ id="node-8"
2463
+ aria-label="Select"
2464
+ aria-labelledby="node-8 text-8"
2465
+ >
2435
2466
  <span class="pf-c-tree-view__node-container">
2436
- <span class="pf-c-tree-view__node-toggle">
2467
+ <button
2468
+ class="pf-c-tree-view__node-toggle"
2469
+ id="toggle-8"
2470
+ aria-label="Toggle"
2471
+ aria-labelledby="toggle-8 text-8"
2472
+ >
2437
2473
  <span class="pf-c-tree-view__node-toggle-icon">
2438
2474
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2439
2475
  </span>
2440
- </span>
2441
-
2442
- <span class="pf-c-tree-view__node-text">Cost management</span>
2476
+ </button>
2477
+ <span class="pf-c-tree-view__node-text" id="text-8">Cost management</span>
2443
2478
  </span>
2444
- </button>
2479
+ </div>
2445
2480
  </div>
2446
2481
  </li>
2447
2482
  <li
@@ -2451,17 +2486,27 @@ beta: true
2451
2486
  tabindex="0"
2452
2487
  >
2453
2488
  <div class="pf-c-tree-view__content">
2454
- <button class="pf-c-tree-view__node pf-m-selectable">
2489
+ <div
2490
+ class="pf-c-tree-view__node pf-m-selectable"
2491
+ tabindex="0"
2492
+ id="node-9"
2493
+ aria-label="Select"
2494
+ aria-labelledby="node-9 text-9"
2495
+ >
2455
2496
  <span class="pf-c-tree-view__node-container">
2456
- <span class="pf-c-tree-view__node-toggle">
2497
+ <button
2498
+ class="pf-c-tree-view__node-toggle"
2499
+ id="toggle-9"
2500
+ aria-label="Toggle"
2501
+ aria-labelledby="toggle-9 text-9"
2502
+ >
2457
2503
  <span class="pf-c-tree-view__node-toggle-icon">
2458
2504
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2459
2505
  </span>
2460
- </span>
2461
-
2462
- <span class="pf-c-tree-view__node-text">Sources</span>
2506
+ </button>
2507
+ <span class="pf-c-tree-view__node-text" id="text-9">Sources</span>
2463
2508
  </span>
2464
- </button>
2509
+ </div>
2465
2510
  </div>
2466
2511
  </li>
2467
2512
  <li
@@ -2471,19 +2516,30 @@ beta: true
2471
2516
  tabindex="0"
2472
2517
  >
2473
2518
  <div class="pf-c-tree-view__content">
2474
- <button class="pf-c-tree-view__node pf-m-selectable">
2519
+ <div
2520
+ class="pf-c-tree-view__node pf-m-selectable"
2521
+ tabindex="0"
2522
+ id="node-10"
2523
+ aria-label="Select"
2524
+ aria-labelledby="node-10 text-10"
2525
+ >
2475
2526
  <span class="pf-c-tree-view__node-container">
2476
- <span class="pf-c-tree-view__node-toggle">
2527
+ <button
2528
+ class="pf-c-tree-view__node-toggle"
2529
+ id="toggle-10"
2530
+ aria-label="Toggle"
2531
+ aria-labelledby="toggle-10 text-10"
2532
+ >
2477
2533
  <span class="pf-c-tree-view__node-toggle-icon">
2478
2534
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2479
2535
  </span>
2480
- </span>
2481
-
2536
+ </button>
2482
2537
  <span
2483
2538
  class="pf-c-tree-view__node-text"
2539
+ id="text-10"
2484
2540
  >This is a really really really long folder name that overflows from the width of the container.</span>
2485
2541
  </span>
2486
- </button>
2542
+ </div>
2487
2543
  </div>
2488
2544
  </li>
2489
2545
  </ul>
@@ -2510,7 +2566,6 @@ beta: true
2510
2566
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2511
2567
  </span>
2512
2568
  </span>
2513
-
2514
2569
  <span class="pf-c-tree-view__node-text">Application launcher</span>
2515
2570
  </span>
2516
2571
  </button>
@@ -2530,7 +2585,6 @@ beta: true
2530
2585
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2531
2586
  </span>
2532
2587
  </span>
2533
-
2534
2588
  <span class="pf-c-tree-view__node-text">Application 1</span>
2535
2589
  </span>
2536
2590
  </button>
@@ -2568,7 +2622,6 @@ beta: true
2568
2622
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2569
2623
  </span>
2570
2624
  </span>
2571
-
2572
2625
  <span class="pf-c-tree-view__node-text">Loader</span>
2573
2626
  </span>
2574
2627
  </button>
@@ -2590,7 +2643,6 @@ beta: true
2590
2643
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2591
2644
  </span>
2592
2645
  </span>
2593
-
2594
2646
  <span class="pf-c-tree-view__node-text">Application 2</span>
2595
2647
  </span>
2596
2648
  </button>
@@ -2619,7 +2671,6 @@ beta: true
2619
2671
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2620
2672
  </span>
2621
2673
  </span>
2622
-
2623
2674
  <span class="pf-c-tree-view__node-text">Settings</span>
2624
2675
  </span>
2625
2676
  </button>
@@ -2639,7 +2690,6 @@ beta: true
2639
2690
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2640
2691
  </span>
2641
2692
  </span>
2642
-
2643
2693
  <span class="pf-c-tree-view__node-text">Loader</span>
2644
2694
  </span>
2645
2695
  </button>
@@ -2659,7 +2709,6 @@ beta: true
2659
2709
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2660
2710
  </span>
2661
2711
  </span>
2662
-
2663
2712
  <span class="pf-c-tree-view__node-text">Loader app 1</span>
2664
2713
  </span>
2665
2714
  </button>
@@ -2711,7 +2760,6 @@ beta: true
2711
2760
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2712
2761
  </span>
2713
2762
  </span>
2714
-
2715
2763
  <span class="pf-c-tree-view__node-text">Cost management</span>
2716
2764
  </span>
2717
2765
  </button>
@@ -2731,7 +2779,6 @@ beta: true
2731
2779
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2732
2780
  </span>
2733
2781
  </span>
2734
-
2735
2782
  <span class="pf-c-tree-view__node-text">Sources</span>
2736
2783
  </span>
2737
2784
  </button>
@@ -2751,7 +2798,6 @@ beta: true
2751
2798
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2752
2799
  </span>
2753
2800
  </span>
2754
-
2755
2801
  <span
2756
2802
  class="pf-c-tree-view__node-text"
2757
2803
  >This is a really really really long folder name that overflows from the width of the container.</span>
@@ -2823,7 +2869,6 @@ beta: true
2823
2869
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2824
2870
  </span>
2825
2871
  </span>
2826
-
2827
2872
  <span class="pf-c-tree-view__node-content">
2828
2873
  <span class="pf-c-tree-view__node-title">spec</span>
2829
2874
  <span
@@ -2920,7 +2965,6 @@ beta: true
2920
2965
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2921
2966
  </span>
2922
2967
  </span>
2923
-
2924
2968
  <span class="pf-c-tree-view__node-content">
2925
2969
  <span class="pf-c-tree-view__node-title">Selector</span>
2926
2970
  <span
@@ -2945,7 +2989,6 @@ beta: true
2945
2989
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2946
2990
  </span>
2947
2991
  </span>
2948
-
2949
2992
  <span class="pf-c-tree-view__node-content">
2950
2993
  <span class="pf-c-tree-view__node-title">matchExpressions</span>
2951
2994
  <span
@@ -3072,7 +3115,6 @@ beta: true
3072
3115
  <i class="fas fa-angle-right" aria-hidden="true"></i>
3073
3116
  </span>
3074
3117
  </span>
3075
-
3076
3118
  <span class="pf-c-tree-view__node-content">
3077
3119
  <span class="pf-c-tree-view__node-title">spec</span>
3078
3120
  <span
@@ -3169,7 +3211,6 @@ beta: true
3169
3211
  <i class="fas fa-angle-right" aria-hidden="true"></i>
3170
3212
  </span>
3171
3213
  </span>
3172
-
3173
3214
  <span class="pf-c-tree-view__node-content">
3174
3215
  <span class="pf-c-tree-view__node-title">Selector</span>
3175
3216
  <span
@@ -3194,7 +3235,6 @@ beta: true
3194
3235
  <i class="fas fa-angle-right" aria-hidden="true"></i>
3195
3236
  </span>
3196
3237
  </span>
3197
-
3198
3238
  <span class="pf-c-tree-view__node-content">
3199
3239
  <span class="pf-c-tree-view__node-title">matchExpressions</span>
3200
3240
  <span