@patternfly/patternfly 4.179.1 → 4.180.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/components/Dropdown/dropdown.css +4 -2
  2. package/components/Dropdown/dropdown.scss +4 -2
  3. package/components/FormControl/form-control.scss +3 -0
  4. package/components/MenuToggle/menu-toggle.css +4 -1
  5. package/components/MenuToggle/menu-toggle.scss +4 -3
  6. package/components/SearchInput/search-input.css +1 -0
  7. package/components/SearchInput/search-input.scss +1 -0
  8. package/components/Select/select.css +3 -2
  9. package/components/Select/select.scss +4 -2
  10. package/docs/components/AppLauncher/examples/application-launcher.md +15 -8
  11. package/docs/components/ContextSelector/examples/context-selector.md +84 -102
  12. package/docs/components/DualListSelector/examples/DualListSelector.md +240 -112
  13. package/docs/components/FormControl/examples/FormControl.md +0 -11
  14. package/docs/components/InputGroup/examples/InputGroup.md +6 -22
  15. package/docs/components/LabelGroup/examples/LabelGroup.md +135 -2
  16. package/docs/components/LogViewer/examples/LogViewer.md +567 -198
  17. package/docs/components/Menu/examples/Menu.md +1908 -983
  18. package/docs/components/MenuToggle/examples/MenuToggle.md +77 -44
  19. package/docs/components/Nav/examples/Navigation.md +563 -231
  20. package/docs/components/Select/examples/Select.md +30 -14
  21. package/docs/components/Spinner/examples/Spinner.md +50 -55
  22. package/docs/components/Toolbar/examples/Toolbar.md +300 -180
  23. package/docs/components/TreeView/examples/TreeView.md +15 -7
  24. package/docs/demos/ContextSelector/examples/ContextSelector.md +515 -218
  25. package/docs/demos/DataList/examples/DataList.md +159 -114
  26. package/docs/demos/Masthead/examples/Masthead.md +482 -237
  27. package/docs/demos/Page/examples/Page.md +945 -350
  28. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +3 -3
  29. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +207 -126
  30. package/docs/demos/Table/examples/Table.md +2459 -1090
  31. package/docs/demos/Toolbar/examples/Toolbar.md +55 -55
  32. package/package.json +1 -1
  33. package/patternfly-no-reset.css +12 -5
  34. package/patternfly.css +12 -5
  35. package/patternfly.min.css +1 -1
  36. package/patternfly.min.css.map +1 -1
package/docs/demos/ContextSelector/examples/ContextSelector.md CHANGED
@@ -68,23 +68,20 @@ section: components
68
68
  </button>
69
69
  <div class="pf-c-context-selector__menu" hidden>
70
70
  <div class="pf-c-context-selector__menu-search">
71
- <div class="pf-c-input-group">
72
- <input
73
- class="pf-c-form-control"
74
- type="search"
75
- placeholder="Search"
76
- id="context-selector-in-masthead-masthead-context-selectortextInput1"
77
- name="context-selector-in-masthead-masthead-context-selectortextInput1"
78
- aria-labelledby="context-selector-in-masthead-masthead-context-selector-search-button"
79
- />
80
- <button
81
- class="pf-c-button pf-m-control"
82
- type="button"
83
- id="context-selector-in-masthead-masthead-context-selector-search-button"
84
- aria-label="Search menu items"
85
- >
86
- <i class="fas fa-search" aria-hidden="true"></i>
87
- </button>
71
+ <div class="pf-c-search-input">
72
+ <div class="pf-c-search-input__bar">
73
+ <span class="pf-c-search-input__text">
74
+ <span class="pf-c-search-input__icon">
75
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
76
+ </span>
77
+ <input
78
+ class="pf-c-search-input__text-input"
79
+ type="text"
80
+ placeholder="Search"
81
+ aria-label="Search"
82
+ />
83
+ </span>
84
+ </div>
88
85
  </div>
89
86
  </div>
90
87
  <ul class="pf-c-context-selector__menu-list">
@@ -404,14 +401,24 @@ section: components
404
401
  hidden
405
402
  >
406
403
  <div class="pf-c-app-launcher__menu-search">
407
- <input
408
- class="pf-c-form-control"
409
- type="search"
410
- aria-label="Type to filter"
411
- placeholder="Filter by name..."
412
- id="-application-launcher-text-input"
413
- name="textInput1"
414
- />
404
+ <div class="pf-c-search-input">
405
+ <div class="pf-c-search-input__bar">
406
+ <span class="pf-c-search-input__text">
407
+ <span class="pf-c-search-input__icon">
408
+ <i
409
+ class="fas fa-search fa-fw"
410
+ aria-hidden="true"
411
+ ></i>
412
+ </span>
413
+ <input
414
+ class="pf-c-search-input__text-input"
415
+ type="text"
416
+ placeholder="Filter by name"
417
+ aria-label="Filter by name"
418
+ />
419
+ </span>
420
+ </div>
421
+ </div>
415
422
  </div>
416
423
  <section class="pf-c-app-launcher__group">
417
424
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -612,12 +619,16 @@ section: components
612
619
  >
613
620
  <div class="pf-c-menu__content">
614
621
  <section class="pf-c-menu__group pf-m-hidden-on-sm">
615
- <ul class="pf-c-menu__list">
616
- <li class="pf-c-menu__list-item pf-m-disabled">
622
+ <ul class="pf-c-menu__list" role="menu">
623
+ <li
624
+ class="pf-c-menu__list-item pf-m-disabled"
625
+ role="none"
626
+ >
617
627
  <button
618
628
  class="pf-c-menu__item"
619
629
  type="button"
620
630
  disabled
631
+ role="menuitem"
621
632
  >
622
633
  <span class="pf-c-menu__item-description">
623
634
  <div class="pf-u-font-size-sm">Username:</div>
@@ -627,11 +638,15 @@ section: components
627
638
  </span>
628
639
  </button>
629
640
  </li>
630
- <li class="pf-c-menu__list-item pf-m-disabled">
641
+ <li
642
+ class="pf-c-menu__list-item pf-m-disabled"
643
+ role="none"
644
+ >
631
645
  <button
632
646
  class="pf-c-menu__item"
633
647
  type="button"
634
648
  disabled
649
+ role="menuitem"
635
650
  >
636
651
  <span class="pf-c-menu__item-description">
637
652
  <div class="pf-u-font-size-sm">Account number:</div>
@@ -640,15 +655,23 @@ section: components
640
655
  </button>
641
656
  </li>
642
657
  <li class="pf-c-divider" role="separator"></li>
643
- <li class="pf-c-menu__list-item">
644
- <button class="pf-c-menu__item" type="button">
658
+ <li class="pf-c-menu__list-item" role="none">
659
+ <button
660
+ class="pf-c-menu__item"
661
+ type="button"
662
+ role="menuitem"
663
+ >
645
664
  <span class="pf-c-menu__item-main">
646
665
  <span class="pf-c-menu__item-text">My profile</span>
647
666
  </span>
648
667
  </button>
649
668
  </li>
650
- <li class="pf-c-menu__list-item">
651
- <button class="pf-c-menu__item" type="button">
669
+ <li class="pf-c-menu__list-item" role="none">
670
+ <button
671
+ class="pf-c-menu__item"
672
+ type="button"
673
+ role="menuitem"
674
+ >
652
675
  <span class="pf-c-menu__item-main">
653
676
  <span
654
677
  class="pf-c-menu__item-text"
@@ -656,8 +679,12 @@ section: components
656
679
  </span>
657
680
  </button>
658
681
  </li>
659
- <li class="pf-c-menu__list-item">
660
- <button class="pf-c-menu__item" type="button">
682
+ <li class="pf-c-menu__list-item" role="none">
683
+ <button
684
+ class="pf-c-menu__item"
685
+ type="button"
686
+ role="menuitem"
687
+ >
661
688
  <span class="pf-c-menu__item-main">
662
689
  <span class="pf-c-menu__item-text">Logout</span>
663
690
  </span>
@@ -667,11 +694,12 @@ section: components
667
694
  </section>
668
695
  <hr class="pf-c-divider pf-m-hidden-on-sm" />
669
696
  <section class="pf-c-menu__group">
670
- <ul class="pf-c-menu__list">
671
- <li class="pf-c-menu__list-item">
697
+ <ul class="pf-c-menu__list" role="menu">
698
+ <li class="pf-c-menu__list-item" role="none">
672
699
  <button
673
700
  class="pf-c-menu__item"
674
701
  type="button"
702
+ role="menuitem"
675
703
  aria-expanded="false"
676
704
  >
677
705
  <span class="pf-c-menu__item-main">
@@ -689,13 +717,15 @@ section: components
689
717
  </button>
690
718
  <div class="pf-c-menu" hidden>
691
719
  <div class="pf-c-menu__content">
692
- <ul class="pf-c-menu__list">
720
+ <ul class="pf-c-menu__list" role="menu">
693
721
  <li
694
722
  class="pf-c-menu__list-item pf-m-drill-up"
723
+ role="none"
695
724
  >
696
725
  <button
697
726
  class="pf-c-menu__item"
698
727
  type="button"
728
+ role="menuitem"
699
729
  >
700
730
  <span class="pf-c-menu__item-main">
701
731
  <span
@@ -716,8 +746,15 @@ section: components
716
746
  </button>
717
747
  </li>
718
748
  <li class="pf-c-divider" role="separator"></li>
719
- <li class="pf-c-menu__list-item">
720
- <a class="pf-c-menu__item" href="#">
749
+ <li
750
+ class="pf-c-menu__list-item"
751
+ role="none"
752
+ >
753
+ <a
754
+ class="pf-c-menu__item"
755
+ href="#"
756
+ role="menuitem"
757
+ >
721
758
  <span class="pf-c-menu__item-main">
722
759
  <span
723
760
  class="pf-c-menu__item-text"
@@ -725,8 +762,15 @@ section: components
725
762
  </span>
726
763
  </a>
727
764
  </li>
728
- <li class="pf-c-menu__list-item">
729
- <a class="pf-c-menu__item" href="#">
765
+ <li
766
+ class="pf-c-menu__list-item"
767
+ role="none"
768
+ >
769
+ <a
770
+ class="pf-c-menu__item"
771
+ href="#"
772
+ role="menuitem"
773
+ >
730
774
  <span class="pf-c-menu__item-main">
731
775
  <span
732
776
  class="pf-c-menu__item-text"
@@ -739,10 +783,11 @@ section: components
739
783
  </div>
740
784
  </li>
741
785
 
742
- <li class="pf-c-menu__list-item">
786
+ <li class="pf-c-menu__list-item" role="none">
743
787
  <button
744
788
  class="pf-c-menu__item"
745
789
  type="button"
790
+ role="menuitem"
746
791
  aria-expanded="false"
747
792
  >
748
793
  <span class="pf-c-menu__item-main">
@@ -760,13 +805,15 @@ section: components
760
805
  </button>
761
806
  <div class="pf-c-menu" hidden>
762
807
  <div class="pf-c-menu__content">
763
- <ul class="pf-c-menu__list">
808
+ <ul class="pf-c-menu__list" role="menu">
764
809
  <li
765
810
  class="pf-c-menu__list-item pf-m-drill-up"
811
+ role="none"
766
812
  >
767
813
  <button
768
814
  class="pf-c-menu__item"
769
815
  type="button"
816
+ role="menuitem"
770
817
  >
771
818
  <span class="pf-c-menu__item-main">
772
819
  <span
@@ -787,8 +834,15 @@ section: components
787
834
  </button>
788
835
  </li>
789
836
  <li class="pf-c-divider" role="separator"></li>
790
- <li class="pf-c-menu__list-item">
791
- <a class="pf-c-menu__item" href="#">
837
+ <li
838
+ class="pf-c-menu__list-item"
839
+ role="none"
840
+ >
841
+ <a
842
+ class="pf-c-menu__item"
843
+ href="#"
844
+ role="menuitem"
845
+ >
792
846
  <span class="pf-c-menu__item-main">
793
847
  <span
794
848
  class="pf-c-menu__item-text"
@@ -796,8 +850,15 @@ section: components
796
850
  </span>
797
851
  </a>
798
852
  </li>
799
- <li class="pf-c-menu__list-item">
800
- <a class="pf-c-menu__item" href="#">
853
+ <li
854
+ class="pf-c-menu__list-item"
855
+ role="none"
856
+ >
857
+ <a
858
+ class="pf-c-menu__item"
859
+ href="#"
860
+ role="menuitem"
861
+ >
801
862
  <span class="pf-c-menu__item-main">
802
863
  <span
803
864
  class="pf-c-menu__item-text"
@@ -805,8 +866,15 @@ section: components
805
866
  </span>
806
867
  </a>
807
868
  </li>
808
- <li class="pf-c-menu__list-item">
809
- <a class="pf-c-menu__item" href="#">
869
+ <li
870
+ class="pf-c-menu__list-item"
871
+ role="none"
872
+ >
873
+ <a
874
+ class="pf-c-menu__item"
875
+ href="#"
876
+ role="menuitem"
877
+ >
810
878
  <span class="pf-c-menu__item-main">
811
879
  <span
812
880
  class="pf-c-menu__item-text"
@@ -819,8 +887,12 @@ section: components
819
887
  </div>
820
888
  </li>
821
889
 
822
- <li class="pf-c-menu__list-item">
823
- <button class="pf-c-menu__item" type="button">
890
+ <li class="pf-c-menu__list-item" role="none">
891
+ <button
892
+ class="pf-c-menu__item"
893
+ type="button"
894
+ role="menuitem"
895
+ >
824
896
  <span class="pf-c-menu__item-main">
825
897
  <span class="pf-c-menu__item-icon">
826
898
  <i
@@ -838,7 +910,11 @@ section: components
838
910
  </button>
839
911
  <div class="pf-c-menu" hidden>
840
912
  <div class="pf-c-menu__header">
841
- <button class="pf-c-menu__item" type="button">
913
+ <button
914
+ class="pf-c-menu__item"
915
+ type="button"
916
+ role="menuitem"
917
+ >
842
918
  <span class="pf-c-menu__item-main">
843
919
  <span class="pf-c-menu__item-toggle-icon">
844
920
  <i class="fas fa-angle-left"></i>
@@ -857,21 +933,39 @@ section: components
857
933
  </div>
858
934
  <div class="pf-c-menu__search">
859
935
  <div class="pf-c-menu__search-input">
860
- <input
861
- class="pf-c-form-control pf-m-search"
862
- type="search"
863
- id="-drilldown-menu-list-3-search-input"
864
- name="-drilldown-menu-list-3-search-input"
865
- aria-label="Search"
866
- />
936
+ <div class="pf-c-search-input">
937
+ <div class="pf-c-search-input__bar">
938
+ <span class="pf-c-search-input__text">
939
+ <span class="pf-c-search-input__icon">
940
+ <i
941
+ class="fas fa-search fa-fw"
942
+ aria-hidden="true"
943
+ ></i>
944
+ </span>
945
+ <input
946
+ class="pf-c-search-input__text-input"
947
+ type="text"
948
+ placeholder="Search"
949
+ aria-label="Search"
950
+ />
951
+ </span>
952
+ </div>
953
+ </div>
867
954
  </div>
868
955
  </div>
869
956
  <hr class="pf-c-divider" />
870
957
  <section class="pf-c-menu__group">
871
958
  <h1 class="pf-c-menu__group-title">Favorites</h1>
872
- <ul class="pf-c-menu__list">
873
- <li class="pf-c-menu__list-item">
874
- <a class="pf-c-menu__item" href="#">
959
+ <ul class="pf-c-menu__list" role="menu">
960
+ <li
961
+ class="pf-c-menu__list-item"
962
+ role="none"
963
+ >
964
+ <a
965
+ class="pf-c-menu__item"
966
+ href="#"
967
+ role="menuitem"
968
+ >
875
969
  <span class="pf-c-menu__item-main">
876
970
  <span
877
971
  class="pf-c-menu__item-text"
@@ -893,10 +987,14 @@ section: components
893
987
  </span>
894
988
  </button>
895
989
  </li>
896
- <li class="pf-c-menu__list-item">
990
+ <li
991
+ class="pf-c-menu__list-item"
992
+ role="none"
993
+ >
897
994
  <a
898
995
  class="pf-c-menu__item"
899
996
  href="#"
997
+ role="menuitem"
900
998
  target="_blank"
901
999
  >
902
1000
  <span class="pf-c-menu__item-main">
@@ -936,9 +1034,16 @@ section: components
936
1034
  <hr class="pf-c-divider" />
937
1035
  <section class="pf-c-menu__group">
938
1036
  <h1 class="pf-c-menu__group-title">Group 1</h1>
939
- <ul class="pf-c-menu__list">
940
- <li class="pf-c-menu__list-item">
941
- <a class="pf-c-menu__item" href="#">
1037
+ <ul class="pf-c-menu__list" role="menu">
1038
+ <li
1039
+ class="pf-c-menu__list-item"
1040
+ role="none"
1041
+ >
1042
+ <a
1043
+ class="pf-c-menu__item"
1044
+ href="#"
1045
+ role="menuitem"
1046
+ >
942
1047
  <span class="pf-c-menu__item-main">
943
1048
  <span
944
1049
  class="pf-c-menu__item-text"
@@ -960,10 +1065,14 @@ section: components
960
1065
  </span>
961
1066
  </button>
962
1067
  </li>
963
- <li class="pf-c-menu__list-item">
1068
+ <li
1069
+ class="pf-c-menu__list-item"
1070
+ role="none"
1071
+ >
964
1072
  <a
965
1073
  class="pf-c-menu__item"
966
1074
  href="#"
1075
+ role="menuitem"
967
1076
  target="_blank"
968
1077
  >
969
1078
  <span class="pf-c-menu__item-main">
@@ -1092,23 +1201,20 @@ section: components
1092
1201
  </button>
1093
1202
  <div class="pf-c-context-selector__menu" hidden>
1094
1203
  <div class="pf-c-context-selector__menu-search">
1095
- <div class="pf-c-input-group">
1096
- <input
1097
- class="pf-c-form-control"
1098
- type="search"
1099
- placeholder="Search"
1100
- id="textInput1"
1101
- name="textInput1"
1102
- aria-labelledby="context-selector-collapsed-example-search-button"
1103
- />
1104
- <button
1105
- class="pf-c-button pf-m-control"
1106
- type="button"
1107
- id="context-selector-collapsed-example-search-button"
1108
- aria-label="Search menu items"
1109
- >
1110
- <i class="fas fa-search" aria-hidden="true"></i>
1111
- </button>
1204
+ <div class="pf-c-search-input">
1205
+ <div class="pf-c-search-input__bar">
1206
+ <span class="pf-c-search-input__text">
1207
+ <span class="pf-c-search-input__icon">
1208
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1209
+ </span>
1210
+ <input
1211
+ class="pf-c-search-input__text-input"
1212
+ type="text"
1213
+ placeholder="Search"
1214
+ aria-label="Search"
1215
+ />
1216
+ </span>
1217
+ </div>
1112
1218
  </div>
1113
1219
  </div>
1114
1220
  <ul class="pf-c-context-selector__menu-list">
@@ -1394,14 +1500,24 @@ section: components
1394
1500
  hidden
1395
1501
  >
1396
1502
  <div class="pf-c-app-launcher__menu-search">
1397
- <input
1398
- class="pf-c-form-control"
1399
- type="search"
1400
- aria-label="Type to filter"
1401
- placeholder="Filter by name..."
1402
- id="-application-launcher-text-input"
1403
- name="textInput1"
1404
- />
1503
+ <div class="pf-c-search-input">
1504
+ <div class="pf-c-search-input__bar">
1505
+ <span class="pf-c-search-input__text">
1506
+ <span class="pf-c-search-input__icon">
1507
+ <i
1508
+ class="fas fa-search fa-fw"
1509
+ aria-hidden="true"
1510
+ ></i>
1511
+ </span>
1512
+ <input
1513
+ class="pf-c-search-input__text-input"
1514
+ type="text"
1515
+ placeholder="Filter by name"
1516
+ aria-label="Filter by name"
1517
+ />
1518
+ </span>
1519
+ </div>
1520
+ </div>
1405
1521
  </div>
1406
1522
  <section class="pf-c-app-launcher__group">
1407
1523
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -1602,12 +1718,16 @@ section: components
1602
1718
  >
1603
1719
  <div class="pf-c-menu__content">
1604
1720
  <section class="pf-c-menu__group pf-m-hidden-on-sm">
1605
- <ul class="pf-c-menu__list">
1606
- <li class="pf-c-menu__list-item pf-m-disabled">
1721
+ <ul class="pf-c-menu__list" role="menu">
1722
+ <li
1723
+ class="pf-c-menu__list-item pf-m-disabled"
1724
+ role="none"
1725
+ >
1607
1726
  <button
1608
1727
  class="pf-c-menu__item"
1609
1728
  type="button"
1610
1729
  disabled
1730
+ role="menuitem"
1611
1731
  >
1612
1732
  <span class="pf-c-menu__item-description">
1613
1733
  <div class="pf-u-font-size-sm">Username:</div>
@@ -1617,11 +1737,15 @@ section: components
1617
1737
  </span>
1618
1738
  </button>
1619
1739
  </li>
1620
- <li class="pf-c-menu__list-item pf-m-disabled">
1740
+ <li
1741
+ class="pf-c-menu__list-item pf-m-disabled"
1742
+ role="none"
1743
+ >
1621
1744
  <button
1622
1745
  class="pf-c-menu__item"
1623
1746
  type="button"
1624
1747
  disabled
1748
+ role="menuitem"
1625
1749
  >
1626
1750
  <span class="pf-c-menu__item-description">
1627
1751
  <div class="pf-u-font-size-sm">Account number:</div>
@@ -1630,15 +1754,23 @@ section: components
1630
1754
  </button>
1631
1755
  </li>
1632
1756
  <li class="pf-c-divider" role="separator"></li>
1633
- <li class="pf-c-menu__list-item">
1634
- <button class="pf-c-menu__item" type="button">
1757
+ <li class="pf-c-menu__list-item" role="none">
1758
+ <button
1759
+ class="pf-c-menu__item"
1760
+ type="button"
1761
+ role="menuitem"
1762
+ >
1635
1763
  <span class="pf-c-menu__item-main">
1636
1764
  <span class="pf-c-menu__item-text">My profile</span>
1637
1765
  </span>
1638
1766
  </button>
1639
1767
  </li>
1640
- <li class="pf-c-menu__list-item">
1641
- <button class="pf-c-menu__item" type="button">
1768
+ <li class="pf-c-menu__list-item" role="none">
1769
+ <button
1770
+ class="pf-c-menu__item"
1771
+ type="button"
1772
+ role="menuitem"
1773
+ >
1642
1774
  <span class="pf-c-menu__item-main">
1643
1775
  <span
1644
1776
  class="pf-c-menu__item-text"
@@ -1646,8 +1778,12 @@ section: components
1646
1778
  </span>
1647
1779
  </button>
1648
1780
  </li>
1649
- <li class="pf-c-menu__list-item">
1650
- <button class="pf-c-menu__item" type="button">
1781
+ <li class="pf-c-menu__list-item" role="none">
1782
+ <button
1783
+ class="pf-c-menu__item"
1784
+ type="button"
1785
+ role="menuitem"
1786
+ >
1651
1787
  <span class="pf-c-menu__item-main">
1652
1788
  <span class="pf-c-menu__item-text">Logout</span>
1653
1789
  </span>
@@ -1657,11 +1793,12 @@ section: components
1657
1793
  </section>
1658
1794
  <hr class="pf-c-divider pf-m-hidden-on-sm" />
1659
1795
  <section class="pf-c-menu__group">
1660
- <ul class="pf-c-menu__list">
1661
- <li class="pf-c-menu__list-item">
1796
+ <ul class="pf-c-menu__list" role="menu">
1797
+ <li class="pf-c-menu__list-item" role="none">
1662
1798
  <button
1663
1799
  class="pf-c-menu__item"
1664
1800
  type="button"
1801
+ role="menuitem"
1665
1802
  aria-expanded="false"
1666
1803
  >
1667
1804
  <span class="pf-c-menu__item-main">
@@ -1679,13 +1816,15 @@ section: components
1679
1816
  </button>
1680
1817
  <div class="pf-c-menu" hidden>
1681
1818
  <div class="pf-c-menu__content">
1682
- <ul class="pf-c-menu__list">
1819
+ <ul class="pf-c-menu__list" role="menu">
1683
1820
  <li
1684
1821
  class="pf-c-menu__list-item pf-m-drill-up"
1822
+ role="none"
1685
1823
  >
1686
1824
  <button
1687
1825
  class="pf-c-menu__item"
1688
1826
  type="button"
1827
+ role="menuitem"
1689
1828
  >
1690
1829
  <span class="pf-c-menu__item-main">
1691
1830
  <span
@@ -1706,8 +1845,15 @@ section: components
1706
1845
  </button>
1707
1846
  </li>
1708
1847
  <li class="pf-c-divider" role="separator"></li>
1709
- <li class="pf-c-menu__list-item">
1710
- <a class="pf-c-menu__item" href="#">
1848
+ <li
1849
+ class="pf-c-menu__list-item"
1850
+ role="none"
1851
+ >
1852
+ <a
1853
+ class="pf-c-menu__item"
1854
+ href="#"
1855
+ role="menuitem"
1856
+ >
1711
1857
  <span class="pf-c-menu__item-main">
1712
1858
  <span
1713
1859
  class="pf-c-menu__item-text"
@@ -1715,8 +1861,15 @@ section: components
1715
1861
  </span>
1716
1862
  </a>
1717
1863
  </li>
1718
- <li class="pf-c-menu__list-item">
1719
- <a class="pf-c-menu__item" href="#">
1864
+ <li
1865
+ class="pf-c-menu__list-item"
1866
+ role="none"
1867
+ >
1868
+ <a
1869
+ class="pf-c-menu__item"
1870
+ href="#"
1871
+ role="menuitem"
1872
+ >
1720
1873
  <span class="pf-c-menu__item-main">
1721
1874
  <span
1722
1875
  class="pf-c-menu__item-text"
@@ -1729,10 +1882,11 @@ section: components
1729
1882
  </div>
1730
1883
  </li>
1731
1884
 
1732
- <li class="pf-c-menu__list-item">
1885
+ <li class="pf-c-menu__list-item" role="none">
1733
1886
  <button
1734
1887
  class="pf-c-menu__item"
1735
1888
  type="button"
1889
+ role="menuitem"
1736
1890
  aria-expanded="false"
1737
1891
  >
1738
1892
  <span class="pf-c-menu__item-main">
@@ -1750,13 +1904,15 @@ section: components
1750
1904
  </button>
1751
1905
  <div class="pf-c-menu" hidden>
1752
1906
  <div class="pf-c-menu__content">
1753
- <ul class="pf-c-menu__list">
1907
+ <ul class="pf-c-menu__list" role="menu">
1754
1908
  <li
1755
1909
  class="pf-c-menu__list-item pf-m-drill-up"
1910
+ role="none"
1756
1911
  >
1757
1912
  <button
1758
1913
  class="pf-c-menu__item"
1759
1914
  type="button"
1915
+ role="menuitem"
1760
1916
  >
1761
1917
  <span class="pf-c-menu__item-main">
1762
1918
  <span
@@ -1777,8 +1933,15 @@ section: components
1777
1933
  </button>
1778
1934
  </li>
1779
1935
  <li class="pf-c-divider" role="separator"></li>
1780
- <li class="pf-c-menu__list-item">
1781
- <a class="pf-c-menu__item" href="#">
1936
+ <li
1937
+ class="pf-c-menu__list-item"
1938
+ role="none"
1939
+ >
1940
+ <a
1941
+ class="pf-c-menu__item"
1942
+ href="#"
1943
+ role="menuitem"
1944
+ >
1782
1945
  <span class="pf-c-menu__item-main">
1783
1946
  <span
1784
1947
  class="pf-c-menu__item-text"
@@ -1786,8 +1949,15 @@ section: components
1786
1949
  </span>
1787
1950
  </a>
1788
1951
  </li>
1789
- <li class="pf-c-menu__list-item">
1790
- <a class="pf-c-menu__item" href="#">
1952
+ <li
1953
+ class="pf-c-menu__list-item"
1954
+ role="none"
1955
+ >
1956
+ <a
1957
+ class="pf-c-menu__item"
1958
+ href="#"
1959
+ role="menuitem"
1960
+ >
1791
1961
  <span class="pf-c-menu__item-main">
1792
1962
  <span
1793
1963
  class="pf-c-menu__item-text"
@@ -1795,8 +1965,15 @@ section: components
1795
1965
  </span>
1796
1966
  </a>
1797
1967
  </li>
1798
- <li class="pf-c-menu__list-item">
1799
- <a class="pf-c-menu__item" href="#">
1968
+ <li
1969
+ class="pf-c-menu__list-item"
1970
+ role="none"
1971
+ >
1972
+ <a
1973
+ class="pf-c-menu__item"
1974
+ href="#"
1975
+ role="menuitem"
1976
+ >
1800
1977
  <span class="pf-c-menu__item-main">
1801
1978
  <span
1802
1979
  class="pf-c-menu__item-text"
@@ -1809,8 +1986,12 @@ section: components
1809
1986
  </div>
1810
1987
  </li>
1811
1988
 
1812
- <li class="pf-c-menu__list-item">
1813
- <button class="pf-c-menu__item" type="button">
1989
+ <li class="pf-c-menu__list-item" role="none">
1990
+ <button
1991
+ class="pf-c-menu__item"
1992
+ type="button"
1993
+ role="menuitem"
1994
+ >
1814
1995
  <span class="pf-c-menu__item-main">
1815
1996
  <span class="pf-c-menu__item-icon">
1816
1997
  <i
@@ -1828,7 +2009,11 @@ section: components
1828
2009
  </button>
1829
2010
  <div class="pf-c-menu" hidden>
1830
2011
  <div class="pf-c-menu__header">
1831
- <button class="pf-c-menu__item" type="button">
2012
+ <button
2013
+ class="pf-c-menu__item"
2014
+ type="button"
2015
+ role="menuitem"
2016
+ >
1832
2017
  <span class="pf-c-menu__item-main">
1833
2018
  <span class="pf-c-menu__item-toggle-icon">
1834
2019
  <i class="fas fa-angle-left"></i>
@@ -1847,21 +2032,39 @@ section: components
1847
2032
  </div>
1848
2033
  <div class="pf-c-menu__search">
1849
2034
  <div class="pf-c-menu__search-input">
1850
- <input
1851
- class="pf-c-form-control pf-m-search"
1852
- type="search"
1853
- id="-drilldown-menu-list-3-search-input"
1854
- name="-drilldown-menu-list-3-search-input"
1855
- aria-label="Search"
1856
- />
2035
+ <div class="pf-c-search-input">
2036
+ <div class="pf-c-search-input__bar">
2037
+ <span class="pf-c-search-input__text">
2038
+ <span class="pf-c-search-input__icon">
2039
+ <i
2040
+ class="fas fa-search fa-fw"
2041
+ aria-hidden="true"
2042
+ ></i>
2043
+ </span>
2044
+ <input
2045
+ class="pf-c-search-input__text-input"
2046
+ type="text"
2047
+ placeholder="Search"
2048
+ aria-label="Search"
2049
+ />
2050
+ </span>
2051
+ </div>
2052
+ </div>
1857
2053
  </div>
1858
2054
  </div>
1859
2055
  <hr class="pf-c-divider" />
1860
2056
  <section class="pf-c-menu__group">
1861
2057
  <h1 class="pf-c-menu__group-title">Favorites</h1>
1862
- <ul class="pf-c-menu__list">
1863
- <li class="pf-c-menu__list-item">
1864
- <a class="pf-c-menu__item" href="#">
2058
+ <ul class="pf-c-menu__list" role="menu">
2059
+ <li
2060
+ class="pf-c-menu__list-item"
2061
+ role="none"
2062
+ >
2063
+ <a
2064
+ class="pf-c-menu__item"
2065
+ href="#"
2066
+ role="menuitem"
2067
+ >
1865
2068
  <span class="pf-c-menu__item-main">
1866
2069
  <span
1867
2070
  class="pf-c-menu__item-text"
@@ -1883,10 +2086,14 @@ section: components
1883
2086
  </span>
1884
2087
  </button>
1885
2088
  </li>
1886
- <li class="pf-c-menu__list-item">
2089
+ <li
2090
+ class="pf-c-menu__list-item"
2091
+ role="none"
2092
+ >
1887
2093
  <a
1888
2094
  class="pf-c-menu__item"
1889
2095
  href="#"
2096
+ role="menuitem"
1890
2097
  target="_blank"
1891
2098
  >
1892
2099
  <span class="pf-c-menu__item-main">
@@ -1926,9 +2133,16 @@ section: components
1926
2133
  <hr class="pf-c-divider" />
1927
2134
  <section class="pf-c-menu__group">
1928
2135
  <h1 class="pf-c-menu__group-title">Group 1</h1>
1929
- <ul class="pf-c-menu__list">
1930
- <li class="pf-c-menu__list-item">
1931
- <a class="pf-c-menu__item" href="#">
2136
+ <ul class="pf-c-menu__list" role="menu">
2137
+ <li
2138
+ class="pf-c-menu__list-item"
2139
+ role="none"
2140
+ >
2141
+ <a
2142
+ class="pf-c-menu__item"
2143
+ href="#"
2144
+ role="menuitem"
2145
+ >
1932
2146
  <span class="pf-c-menu__item-main">
1933
2147
  <span
1934
2148
  class="pf-c-menu__item-text"
@@ -1950,10 +2164,14 @@ section: components
1950
2164
  </span>
1951
2165
  </button>
1952
2166
  </li>
1953
- <li class="pf-c-menu__list-item">
2167
+ <li
2168
+ class="pf-c-menu__list-item"
2169
+ role="none"
2170
+ >
1954
2171
  <a
1955
2172
  class="pf-c-menu__item"
1956
2173
  href="#"
2174
+ role="menuitem"
1957
2175
  target="_blank"
1958
2176
  >
1959
2177
  <span class="pf-c-menu__item-main">
@@ -2084,23 +2302,20 @@ section: components
2084
2302
  </button>
2085
2303
  <div class="pf-c-context-selector__menu">
2086
2304
  <div class="pf-c-context-selector__menu-search">
2087
- <div class="pf-c-input-group">
2088
- <input
2089
- class="pf-c-form-control"
2090
- type="search"
2091
- placeholder="Search"
2092
- id="textInput1"
2093
- name="textInput1"
2094
- aria-labelledby="context-selector-collapsed-example-search-button"
2095
- />
2096
- <button
2097
- class="pf-c-button pf-m-control"
2098
- type="button"
2099
- id="context-selector-collapsed-example-search-button"
2100
- aria-label="Search menu items"
2101
- >
2102
- <i class="fas fa-search" aria-hidden="true"></i>
2103
- </button>
2305
+ <div class="pf-c-search-input">
2306
+ <div class="pf-c-search-input__bar">
2307
+ <span class="pf-c-search-input__text">
2308
+ <span class="pf-c-search-input__icon">
2309
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
2310
+ </span>
2311
+ <input
2312
+ class="pf-c-search-input__text-input"
2313
+ type="text"
2314
+ placeholder="Search"
2315
+ aria-label="Search"
2316
+ />
2317
+ </span>
2318
+ </div>
2104
2319
  </div>
2105
2320
  </div>
2106
2321
  <ul class="pf-c-context-selector__menu-list">
@@ -2391,14 +2606,24 @@ section: components
2391
2606
  hidden
2392
2607
  >
2393
2608
  <div class="pf-c-app-launcher__menu-search">
2394
- <input
2395
- class="pf-c-form-control"
2396
- type="search"
2397
- aria-label="Type to filter"
2398
- placeholder="Filter by name..."
2399
- id="context-selector-in-page-content-demo-masthead-application-launcher-text-input"
2400
- name="textInput1"
2401
- />
2609
+ <div class="pf-c-search-input">
2610
+ <div class="pf-c-search-input__bar">
2611
+ <span class="pf-c-search-input__text">
2612
+ <span class="pf-c-search-input__icon">
2613
+ <i
2614
+ class="fas fa-search fa-fw"
2615
+ aria-hidden="true"
2616
+ ></i>
2617
+ </span>
2618
+ <input
2619
+ class="pf-c-search-input__text-input"
2620
+ type="text"
2621
+ placeholder="Filter by name"
2622
+ aria-label="Filter by name"
2623
+ />
2624
+ </span>
2625
+ </div>
2626
+ </div>
2402
2627
  </div>
2403
2628
  <section class="pf-c-app-launcher__group">
2404
2629
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -2588,12 +2813,16 @@ section: components
2588
2813
  <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
2589
2814
  <div class="pf-c-menu__content">
2590
2815
  <section class="pf-c-menu__group pf-m-hidden-on-sm">
2591
- <ul class="pf-c-menu__list">
2592
- <li class="pf-c-menu__list-item pf-m-disabled">
2816
+ <ul class="pf-c-menu__list" role="menu">
2817
+ <li
2818
+ class="pf-c-menu__list-item pf-m-disabled"
2819
+ role="none"
2820
+ >
2593
2821
  <button
2594
2822
  class="pf-c-menu__item"
2595
2823
  type="button"
2596
2824
  disabled
2825
+ role="menuitem"
2597
2826
  >
2598
2827
  <span class="pf-c-menu__item-description">
2599
2828
  <div class="pf-u-font-size-sm">Username:</div>
@@ -2603,11 +2832,15 @@ section: components
2603
2832
  </span>
2604
2833
  </button>
2605
2834
  </li>
2606
- <li class="pf-c-menu__list-item pf-m-disabled">
2835
+ <li
2836
+ class="pf-c-menu__list-item pf-m-disabled"
2837
+ role="none"
2838
+ >
2607
2839
  <button
2608
2840
  class="pf-c-menu__item"
2609
2841
  type="button"
2610
2842
  disabled
2843
+ role="menuitem"
2611
2844
  >
2612
2845
  <span class="pf-c-menu__item-description">
2613
2846
  <div class="pf-u-font-size-sm">Account number:</div>
@@ -2616,15 +2849,23 @@ section: components
2616
2849
  </button>
2617
2850
  </li>
2618
2851
  <li class="pf-c-divider" role="separator"></li>
2619
- <li class="pf-c-menu__list-item">
2620
- <button class="pf-c-menu__item" type="button">
2852
+ <li class="pf-c-menu__list-item" role="none">
2853
+ <button
2854
+ class="pf-c-menu__item"
2855
+ type="button"
2856
+ role="menuitem"
2857
+ >
2621
2858
  <span class="pf-c-menu__item-main">
2622
2859
  <span class="pf-c-menu__item-text">My profile</span>
2623
2860
  </span>
2624
2861
  </button>
2625
2862
  </li>
2626
- <li class="pf-c-menu__list-item">
2627
- <button class="pf-c-menu__item" type="button">
2863
+ <li class="pf-c-menu__list-item" role="none">
2864
+ <button
2865
+ class="pf-c-menu__item"
2866
+ type="button"
2867
+ role="menuitem"
2868
+ >
2628
2869
  <span class="pf-c-menu__item-main">
2629
2870
  <span
2630
2871
  class="pf-c-menu__item-text"
@@ -2632,8 +2873,12 @@ section: components
2632
2873
  </span>
2633
2874
  </button>
2634
2875
  </li>
2635
- <li class="pf-c-menu__list-item">
2636
- <button class="pf-c-menu__item" type="button">
2876
+ <li class="pf-c-menu__list-item" role="none">
2877
+ <button
2878
+ class="pf-c-menu__item"
2879
+ type="button"
2880
+ role="menuitem"
2881
+ >
2637
2882
  <span class="pf-c-menu__item-main">
2638
2883
  <span class="pf-c-menu__item-text">Logout</span>
2639
2884
  </span>
@@ -2643,11 +2888,12 @@ section: components
2643
2888
  </section>
2644
2889
  <hr class="pf-c-divider pf-m-hidden-on-sm" />
2645
2890
  <section class="pf-c-menu__group">
2646
- <ul class="pf-c-menu__list">
2647
- <li class="pf-c-menu__list-item">
2891
+ <ul class="pf-c-menu__list" role="menu">
2892
+ <li class="pf-c-menu__list-item" role="none">
2648
2893
  <button
2649
2894
  class="pf-c-menu__item"
2650
2895
  type="button"
2896
+ role="menuitem"
2651
2897
  aria-expanded="false"
2652
2898
  >
2653
2899
  <span class="pf-c-menu__item-main">
@@ -2665,13 +2911,15 @@ section: components
2665
2911
  </button>
2666
2912
  <div class="pf-c-menu" hidden>
2667
2913
  <div class="pf-c-menu__content">
2668
- <ul class="pf-c-menu__list">
2914
+ <ul class="pf-c-menu__list" role="menu">
2669
2915
  <li
2670
2916
  class="pf-c-menu__list-item pf-m-drill-up"
2917
+ role="none"
2671
2918
  >
2672
2919
  <button
2673
2920
  class="pf-c-menu__item"
2674
2921
  type="button"
2922
+ role="menuitem"
2675
2923
  >
2676
2924
  <span class="pf-c-menu__item-main">
2677
2925
  <span
@@ -2692,8 +2940,12 @@ section: components
2692
2940
  </button>
2693
2941
  </li>
2694
2942
  <li class="pf-c-divider" role="separator"></li>
2695
- <li class="pf-c-menu__list-item">
2696
- <a class="pf-c-menu__item" href="#">
2943
+ <li class="pf-c-menu__list-item" role="none">
2944
+ <a
2945
+ class="pf-c-menu__item"
2946
+ href="#"
2947
+ role="menuitem"
2948
+ >
2697
2949
  <span class="pf-c-menu__item-main">
2698
2950
  <span
2699
2951
  class="pf-c-menu__item-text"
@@ -2701,8 +2953,12 @@ section: components
2701
2953
  </span>
2702
2954
  </a>
2703
2955
  </li>
2704
- <li class="pf-c-menu__list-item">
2705
- <a class="pf-c-menu__item" href="#">
2956
+ <li class="pf-c-menu__list-item" role="none">
2957
+ <a
2958
+ class="pf-c-menu__item"
2959
+ href="#"
2960
+ role="menuitem"
2961
+ >
2706
2962
  <span class="pf-c-menu__item-main">
2707
2963
  <span class="pf-c-menu__item-text">About</span>
2708
2964
  </span>
@@ -2713,10 +2969,11 @@ section: components
2713
2969
  </div>
2714
2970
  </li>
2715
2971
 
2716
- <li class="pf-c-menu__list-item">
2972
+ <li class="pf-c-menu__list-item" role="none">
2717
2973
  <button
2718
2974
  class="pf-c-menu__item"
2719
2975
  type="button"
2976
+ role="menuitem"
2720
2977
  aria-expanded="false"
2721
2978
  >
2722
2979
  <span class="pf-c-menu__item-main">
@@ -2734,13 +2991,15 @@ section: components
2734
2991
  </button>
2735
2992
  <div class="pf-c-menu" hidden>
2736
2993
  <div class="pf-c-menu__content">
2737
- <ul class="pf-c-menu__list">
2994
+ <ul class="pf-c-menu__list" role="menu">
2738
2995
  <li
2739
2996
  class="pf-c-menu__list-item pf-m-drill-up"
2997
+ role="none"
2740
2998
  >
2741
2999
  <button
2742
3000
  class="pf-c-menu__item"
2743
3001
  type="button"
3002
+ role="menuitem"
2744
3003
  >
2745
3004
  <span class="pf-c-menu__item-main">
2746
3005
  <span
@@ -2759,8 +3018,12 @@ section: components
2759
3018
  </button>
2760
3019
  </li>
2761
3020
  <li class="pf-c-divider" role="separator"></li>
2762
- <li class="pf-c-menu__list-item">
2763
- <a class="pf-c-menu__item" href="#">
3021
+ <li class="pf-c-menu__list-item" role="none">
3022
+ <a
3023
+ class="pf-c-menu__item"
3024
+ href="#"
3025
+ role="menuitem"
3026
+ >
2764
3027
  <span class="pf-c-menu__item-main">
2765
3028
  <span
2766
3029
  class="pf-c-menu__item-text"
@@ -2768,8 +3031,12 @@ section: components
2768
3031
  </span>
2769
3032
  </a>
2770
3033
  </li>
2771
- <li class="pf-c-menu__list-item">
2772
- <a class="pf-c-menu__item" href="#">
3034
+ <li class="pf-c-menu__list-item" role="none">
3035
+ <a
3036
+ class="pf-c-menu__item"
3037
+ href="#"
3038
+ role="menuitem"
3039
+ >
2773
3040
  <span class="pf-c-menu__item-main">
2774
3041
  <span
2775
3042
  class="pf-c-menu__item-text"
@@ -2777,8 +3044,12 @@ section: components
2777
3044
  </span>
2778
3045
  </a>
2779
3046
  </li>
2780
- <li class="pf-c-menu__list-item">
2781
- <a class="pf-c-menu__item" href="#">
3047
+ <li class="pf-c-menu__list-item" role="none">
3048
+ <a
3049
+ class="pf-c-menu__item"
3050
+ href="#"
3051
+ role="menuitem"
3052
+ >
2782
3053
  <span class="pf-c-menu__item-main">
2783
3054
  <span
2784
3055
  class="pf-c-menu__item-text"
@@ -2791,8 +3062,12 @@ section: components
2791
3062
  </div>
2792
3063
  </li>
2793
3064
 
2794
- <li class="pf-c-menu__list-item">
2795
- <button class="pf-c-menu__item" type="button">
3065
+ <li class="pf-c-menu__list-item" role="none">
3066
+ <button
3067
+ class="pf-c-menu__item"
3068
+ type="button"
3069
+ role="menuitem"
3070
+ >
2796
3071
  <span class="pf-c-menu__item-main">
2797
3072
  <span class="pf-c-menu__item-icon">
2798
3073
  <i class="fas fa-fw fa-th" aria-hidden="true"></i>
@@ -2807,7 +3082,11 @@ section: components
2807
3082
  </button>
2808
3083
  <div class="pf-c-menu" hidden>
2809
3084
  <div class="pf-c-menu__header">
2810
- <button class="pf-c-menu__item" type="button">
3085
+ <button
3086
+ class="pf-c-menu__item"
3087
+ type="button"
3088
+ role="menuitem"
3089
+ >
2811
3090
  <span class="pf-c-menu__item-main">
2812
3091
  <span class="pf-c-menu__item-toggle-icon">
2813
3092
  <i class="fas fa-angle-left"></i>
@@ -2826,21 +3105,36 @@ section: components
2826
3105
  </div>
2827
3106
  <div class="pf-c-menu__search">
2828
3107
  <div class="pf-c-menu__search-input">
2829
- <input
2830
- class="pf-c-form-control pf-m-search"
2831
- type="search"
2832
- id="context-selector-in-page-content-demo-masthead-drilldown-menu-list-3-search-input"
2833
- name="context-selector-in-page-content-demo-masthead-drilldown-menu-list-3-search-input"
2834
- aria-label="Search"
2835
- />
3108
+ <div class="pf-c-search-input">
3109
+ <div class="pf-c-search-input__bar">
3110
+ <span class="pf-c-search-input__text">
3111
+ <span class="pf-c-search-input__icon">
3112
+ <i
3113
+ class="fas fa-search fa-fw"
3114
+ aria-hidden="true"
3115
+ ></i>
3116
+ </span>
3117
+ <input
3118
+ class="pf-c-search-input__text-input"
3119
+ type="text"
3120
+ placeholder="Search"
3121
+ aria-label="Search"
3122
+ />
3123
+ </span>
3124
+ </div>
3125
+ </div>
2836
3126
  </div>
2837
3127
  </div>
2838
3128
  <hr class="pf-c-divider" />
2839
3129
  <section class="pf-c-menu__group">
2840
3130
  <h1 class="pf-c-menu__group-title">Favorites</h1>
2841
- <ul class="pf-c-menu__list">
2842
- <li class="pf-c-menu__list-item">
2843
- <a class="pf-c-menu__item" href="#">
3131
+ <ul class="pf-c-menu__list" role="menu">
3132
+ <li class="pf-c-menu__list-item" role="none">
3133
+ <a
3134
+ class="pf-c-menu__item"
3135
+ href="#"
3136
+ role="menuitem"
3137
+ >
2844
3138
  <span class="pf-c-menu__item-main">
2845
3139
  <span
2846
3140
  class="pf-c-menu__item-text"
@@ -2860,10 +3154,11 @@ section: components
2860
3154
  </span>
2861
3155
  </button>
2862
3156
  </li>
2863
- <li class="pf-c-menu__list-item">
3157
+ <li class="pf-c-menu__list-item" role="none">
2864
3158
  <a
2865
3159
  class="pf-c-menu__item"
2866
3160
  href="#"
3161
+ role="menuitem"
2867
3162
  target="_blank"
2868
3163
  >
2869
3164
  <span class="pf-c-menu__item-main">
@@ -2901,9 +3196,13 @@ section: components
2901
3196
  <hr class="pf-c-divider" />
2902
3197
  <section class="pf-c-menu__group">
2903
3198
  <h1 class="pf-c-menu__group-title">Group 1</h1>
2904
- <ul class="pf-c-menu__list">
2905
- <li class="pf-c-menu__list-item">
2906
- <a class="pf-c-menu__item" href="#">
3199
+ <ul class="pf-c-menu__list" role="menu">
3200
+ <li class="pf-c-menu__list-item" role="none">
3201
+ <a
3202
+ class="pf-c-menu__item"
3203
+ href="#"
3204
+ role="menuitem"
3205
+ >
2907
3206
  <span class="pf-c-menu__item-main">
2908
3207
  <span
2909
3208
  class="pf-c-menu__item-text"
@@ -2923,10 +3222,11 @@ section: components
2923
3222
  </span>
2924
3223
  </button>
2925
3224
  </li>
2926
- <li class="pf-c-menu__list-item">
3225
+ <li class="pf-c-menu__list-item" role="none">
2927
3226
  <a
2928
3227
  class="pf-c-menu__item"
2929
3228
  href="#"
3229
+ role="menuitem"
2930
3230
  target="_blank"
2931
3231
  >
2932
3232
  <span class="pf-c-menu__item-main">
@@ -3093,23 +3393,20 @@ section: components
3093
3393
  </button>
3094
3394
  <div class="pf-c-context-selector__menu" hidden>
3095
3395
  <div class="pf-c-context-selector__menu-search">
3096
- <div class="pf-c-input-group">
3097
- <input
3098
- class="pf-c-form-control"
3099
- type="search"
3100
- placeholder="Search"
3101
- id="textInput1"
3102
- name="textInput1"
3103
- aria-labelledby="-context-selector-search-button"
3104
- />
3105
- <button
3106
- class="pf-c-button pf-m-control"
3107
- type="button"
3108
- id="-context-selector-search-button"
3109
- aria-label="Search menu items"
3110
- >
3111
- <i class="fas fa-search" aria-hidden="true"></i>
3112
- </button>
3396
+ <div class="pf-c-search-input">
3397
+ <div class="pf-c-search-input__bar">
3398
+ <span class="pf-c-search-input__text">
3399
+ <span class="pf-c-search-input__icon">
3400
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
3401
+ </span>
3402
+ <input
3403
+ class="pf-c-search-input__text-input"
3404
+ type="text"
3405
+ placeholder="Search"
3406
+ aria-label="Search"
3407
+ />
3408
+ </span>
3409
+ </div>
3113
3410
  </div>
3114
3411
  </div>
3115
3412
  <ul class="pf-c-context-selector__menu-list">