@patternfly/patternfly 4.179.2 → 4.180.1

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 (45) 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 +10 -7
  5. package/components/MenuToggle/menu-toggle.scss +11 -9
  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/LogViewer/examples/LogViewer.md +567 -198
  16. package/docs/components/Menu/examples/Menu.md +1908 -983
  17. package/docs/components/MenuToggle/examples/MenuToggle.md +77 -44
  18. package/docs/components/Nav/examples/Navigation.md +563 -231
  19. package/docs/components/Page/examples/Page.md +11 -2
  20. package/docs/components/Select/examples/Select.md +30 -14
  21. package/docs/components/Table/examples/Table.md +8 -0
  22. package/docs/components/Toolbar/examples/Toolbar.md +300 -180
  23. package/docs/components/TreeView/examples/TreeView.md +15 -7
  24. package/docs/components/Wizard/examples/Wizard.md +6 -6
  25. package/docs/demos/Alert/examples/Alert.md +20 -40
  26. package/docs/demos/BackToTop/examples/BackToTop.md +149 -249
  27. package/docs/demos/ContextSelector/examples/ContextSelector.md +595 -378
  28. package/docs/demos/DataList/examples/DataList.md +159 -114
  29. package/docs/demos/Drawer/examples/Drawer.md +60 -120
  30. package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -31
  31. package/docs/demos/Masthead/examples/Masthead.md +622 -517
  32. package/docs/demos/Nav/examples/Nav.md +203 -343
  33. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +100 -200
  34. package/docs/demos/Page/examples/Page.md +1522 -1475
  35. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +3 -3
  36. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +207 -126
  37. package/docs/demos/Table/examples/Table.md +2459 -1090
  38. package/docs/demos/Tabs/examples/Tabs.md +11 -19
  39. package/docs/demos/Toolbar/examples/Toolbar.md +55 -55
  40. package/docs/demos/Wizard/examples/Wizard.md +6 -2
  41. package/package.json +1 -1
  42. package/patternfly-no-reset.css +18 -11
  43. package/patternfly.css +18 -11
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
@@ -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">
@@ -267,55 +264,35 @@ section: components
267
264
  <section class="pf-c-page__main-section pf-m-limit-width">
268
265
  <div class="pf-c-page__main-body">
269
266
  <div class="pf-l-gallery pf-m-gutter">
270
- <div class="pf-l-gallery__item">
271
- <div class="pf-c-card">
272
- <div class="pf-c-card__body">This is a card</div>
273
- </div>
267
+ <div class="pf-c-card">
268
+ <div class="pf-c-card__body">This is a card</div>
274
269
  </div>
275
- <div class="pf-l-gallery__item">
276
- <div class="pf-c-card">
277
- <div class="pf-c-card__body">This is a card</div>
278
- </div>
270
+ <div class="pf-c-card">
271
+ <div class="pf-c-card__body">This is a card</div>
279
272
  </div>
280
- <div class="pf-l-gallery__item">
281
- <div class="pf-c-card">
282
- <div class="pf-c-card__body">This is a card</div>
283
- </div>
273
+ <div class="pf-c-card">
274
+ <div class="pf-c-card__body">This is a card</div>
284
275
  </div>
285
- <div class="pf-l-gallery__item">
286
- <div class="pf-c-card">
287
- <div class="pf-c-card__body">This is a card</div>
288
- </div>
276
+ <div class="pf-c-card">
277
+ <div class="pf-c-card__body">This is a card</div>
289
278
  </div>
290
- <div class="pf-l-gallery__item">
291
- <div class="pf-c-card">
292
- <div class="pf-c-card__body">This is a card</div>
293
- </div>
279
+ <div class="pf-c-card">
280
+ <div class="pf-c-card__body">This is a card</div>
294
281
  </div>
295
- <div class="pf-l-gallery__item">
296
- <div class="pf-c-card">
297
- <div class="pf-c-card__body">This is a card</div>
298
- </div>
282
+ <div class="pf-c-card">
283
+ <div class="pf-c-card__body">This is a card</div>
299
284
  </div>
300
- <div class="pf-l-gallery__item">
301
- <div class="pf-c-card">
302
- <div class="pf-c-card__body">This is a card</div>
303
- </div>
285
+ <div class="pf-c-card">
286
+ <div class="pf-c-card__body">This is a card</div>
304
287
  </div>
305
- <div class="pf-l-gallery__item">
306
- <div class="pf-c-card">
307
- <div class="pf-c-card__body">This is a card</div>
308
- </div>
288
+ <div class="pf-c-card">
289
+ <div class="pf-c-card__body">This is a card</div>
309
290
  </div>
310
- <div class="pf-l-gallery__item">
311
- <div class="pf-c-card">
312
- <div class="pf-c-card__body">This is a card</div>
313
- </div>
291
+ <div class="pf-c-card">
292
+ <div class="pf-c-card__body">This is a card</div>
314
293
  </div>
315
- <div class="pf-l-gallery__item">
316
- <div class="pf-c-card">
317
- <div class="pf-c-card__body">This is a card</div>
318
- </div>
294
+ <div class="pf-c-card">
295
+ <div class="pf-c-card__body">This is a card</div>
319
296
  </div>
320
297
  </div>
321
298
  </div>
@@ -404,14 +381,24 @@ section: components
404
381
  hidden
405
382
  >
406
383
  <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
- />
384
+ <div class="pf-c-search-input">
385
+ <div class="pf-c-search-input__bar">
386
+ <span class="pf-c-search-input__text">
387
+ <span class="pf-c-search-input__icon">
388
+ <i
389
+ class="fas fa-search fa-fw"
390
+ aria-hidden="true"
391
+ ></i>
392
+ </span>
393
+ <input
394
+ class="pf-c-search-input__text-input"
395
+ type="text"
396
+ placeholder="Filter by name"
397
+ aria-label="Filter by name"
398
+ />
399
+ </span>
400
+ </div>
401
+ </div>
415
402
  </div>
416
403
  <section class="pf-c-app-launcher__group">
417
404
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -612,12 +599,16 @@ section: components
612
599
  >
613
600
  <div class="pf-c-menu__content">
614
601
  <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">
602
+ <ul class="pf-c-menu__list" role="menu">
603
+ <li
604
+ class="pf-c-menu__list-item pf-m-disabled"
605
+ role="none"
606
+ >
617
607
  <button
618
608
  class="pf-c-menu__item"
619
609
  type="button"
620
610
  disabled
611
+ role="menuitem"
621
612
  >
622
613
  <span class="pf-c-menu__item-description">
623
614
  <div class="pf-u-font-size-sm">Username:</div>
@@ -627,11 +618,15 @@ section: components
627
618
  </span>
628
619
  </button>
629
620
  </li>
630
- <li class="pf-c-menu__list-item pf-m-disabled">
621
+ <li
622
+ class="pf-c-menu__list-item pf-m-disabled"
623
+ role="none"
624
+ >
631
625
  <button
632
626
  class="pf-c-menu__item"
633
627
  type="button"
634
628
  disabled
629
+ role="menuitem"
635
630
  >
636
631
  <span class="pf-c-menu__item-description">
637
632
  <div class="pf-u-font-size-sm">Account number:</div>
@@ -640,15 +635,23 @@ section: components
640
635
  </button>
641
636
  </li>
642
637
  <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">
638
+ <li class="pf-c-menu__list-item" role="none">
639
+ <button
640
+ class="pf-c-menu__item"
641
+ type="button"
642
+ role="menuitem"
643
+ >
645
644
  <span class="pf-c-menu__item-main">
646
645
  <span class="pf-c-menu__item-text">My profile</span>
647
646
  </span>
648
647
  </button>
649
648
  </li>
650
- <li class="pf-c-menu__list-item">
651
- <button class="pf-c-menu__item" type="button">
649
+ <li class="pf-c-menu__list-item" role="none">
650
+ <button
651
+ class="pf-c-menu__item"
652
+ type="button"
653
+ role="menuitem"
654
+ >
652
655
  <span class="pf-c-menu__item-main">
653
656
  <span
654
657
  class="pf-c-menu__item-text"
@@ -656,8 +659,12 @@ section: components
656
659
  </span>
657
660
  </button>
658
661
  </li>
659
- <li class="pf-c-menu__list-item">
660
- <button class="pf-c-menu__item" type="button">
662
+ <li class="pf-c-menu__list-item" role="none">
663
+ <button
664
+ class="pf-c-menu__item"
665
+ type="button"
666
+ role="menuitem"
667
+ >
661
668
  <span class="pf-c-menu__item-main">
662
669
  <span class="pf-c-menu__item-text">Logout</span>
663
670
  </span>
@@ -667,11 +674,12 @@ section: components
667
674
  </section>
668
675
  <hr class="pf-c-divider pf-m-hidden-on-sm" />
669
676
  <section class="pf-c-menu__group">
670
- <ul class="pf-c-menu__list">
671
- <li class="pf-c-menu__list-item">
677
+ <ul class="pf-c-menu__list" role="menu">
678
+ <li class="pf-c-menu__list-item" role="none">
672
679
  <button
673
680
  class="pf-c-menu__item"
674
681
  type="button"
682
+ role="menuitem"
675
683
  aria-expanded="false"
676
684
  >
677
685
  <span class="pf-c-menu__item-main">
@@ -689,13 +697,15 @@ section: components
689
697
  </button>
690
698
  <div class="pf-c-menu" hidden>
691
699
  <div class="pf-c-menu__content">
692
- <ul class="pf-c-menu__list">
700
+ <ul class="pf-c-menu__list" role="menu">
693
701
  <li
694
702
  class="pf-c-menu__list-item pf-m-drill-up"
703
+ role="none"
695
704
  >
696
705
  <button
697
706
  class="pf-c-menu__item"
698
707
  type="button"
708
+ role="menuitem"
699
709
  >
700
710
  <span class="pf-c-menu__item-main">
701
711
  <span
@@ -716,8 +726,15 @@ section: components
716
726
  </button>
717
727
  </li>
718
728
  <li class="pf-c-divider" role="separator"></li>
719
- <li class="pf-c-menu__list-item">
720
- <a class="pf-c-menu__item" href="#">
729
+ <li
730
+ class="pf-c-menu__list-item"
731
+ role="none"
732
+ >
733
+ <a
734
+ class="pf-c-menu__item"
735
+ href="#"
736
+ role="menuitem"
737
+ >
721
738
  <span class="pf-c-menu__item-main">
722
739
  <span
723
740
  class="pf-c-menu__item-text"
@@ -725,8 +742,15 @@ section: components
725
742
  </span>
726
743
  </a>
727
744
  </li>
728
- <li class="pf-c-menu__list-item">
729
- <a class="pf-c-menu__item" href="#">
745
+ <li
746
+ class="pf-c-menu__list-item"
747
+ role="none"
748
+ >
749
+ <a
750
+ class="pf-c-menu__item"
751
+ href="#"
752
+ role="menuitem"
753
+ >
730
754
  <span class="pf-c-menu__item-main">
731
755
  <span
732
756
  class="pf-c-menu__item-text"
@@ -739,10 +763,11 @@ section: components
739
763
  </div>
740
764
  </li>
741
765
 
742
- <li class="pf-c-menu__list-item">
766
+ <li class="pf-c-menu__list-item" role="none">
743
767
  <button
744
768
  class="pf-c-menu__item"
745
769
  type="button"
770
+ role="menuitem"
746
771
  aria-expanded="false"
747
772
  >
748
773
  <span class="pf-c-menu__item-main">
@@ -760,13 +785,15 @@ section: components
760
785
  </button>
761
786
  <div class="pf-c-menu" hidden>
762
787
  <div class="pf-c-menu__content">
763
- <ul class="pf-c-menu__list">
788
+ <ul class="pf-c-menu__list" role="menu">
764
789
  <li
765
790
  class="pf-c-menu__list-item pf-m-drill-up"
791
+ role="none"
766
792
  >
767
793
  <button
768
794
  class="pf-c-menu__item"
769
795
  type="button"
796
+ role="menuitem"
770
797
  >
771
798
  <span class="pf-c-menu__item-main">
772
799
  <span
@@ -787,8 +814,15 @@ section: components
787
814
  </button>
788
815
  </li>
789
816
  <li class="pf-c-divider" role="separator"></li>
790
- <li class="pf-c-menu__list-item">
791
- <a class="pf-c-menu__item" href="#">
817
+ <li
818
+ class="pf-c-menu__list-item"
819
+ role="none"
820
+ >
821
+ <a
822
+ class="pf-c-menu__item"
823
+ href="#"
824
+ role="menuitem"
825
+ >
792
826
  <span class="pf-c-menu__item-main">
793
827
  <span
794
828
  class="pf-c-menu__item-text"
@@ -796,8 +830,15 @@ section: components
796
830
  </span>
797
831
  </a>
798
832
  </li>
799
- <li class="pf-c-menu__list-item">
800
- <a class="pf-c-menu__item" href="#">
833
+ <li
834
+ class="pf-c-menu__list-item"
835
+ role="none"
836
+ >
837
+ <a
838
+ class="pf-c-menu__item"
839
+ href="#"
840
+ role="menuitem"
841
+ >
801
842
  <span class="pf-c-menu__item-main">
802
843
  <span
803
844
  class="pf-c-menu__item-text"
@@ -805,8 +846,15 @@ section: components
805
846
  </span>
806
847
  </a>
807
848
  </li>
808
- <li class="pf-c-menu__list-item">
809
- <a class="pf-c-menu__item" href="#">
849
+ <li
850
+ class="pf-c-menu__list-item"
851
+ role="none"
852
+ >
853
+ <a
854
+ class="pf-c-menu__item"
855
+ href="#"
856
+ role="menuitem"
857
+ >
810
858
  <span class="pf-c-menu__item-main">
811
859
  <span
812
860
  class="pf-c-menu__item-text"
@@ -819,8 +867,12 @@ section: components
819
867
  </div>
820
868
  </li>
821
869
 
822
- <li class="pf-c-menu__list-item">
823
- <button class="pf-c-menu__item" type="button">
870
+ <li class="pf-c-menu__list-item" role="none">
871
+ <button
872
+ class="pf-c-menu__item"
873
+ type="button"
874
+ role="menuitem"
875
+ >
824
876
  <span class="pf-c-menu__item-main">
825
877
  <span class="pf-c-menu__item-icon">
826
878
  <i
@@ -838,7 +890,11 @@ section: components
838
890
  </button>
839
891
  <div class="pf-c-menu" hidden>
840
892
  <div class="pf-c-menu__header">
841
- <button class="pf-c-menu__item" type="button">
893
+ <button
894
+ class="pf-c-menu__item"
895
+ type="button"
896
+ role="menuitem"
897
+ >
842
898
  <span class="pf-c-menu__item-main">
843
899
  <span class="pf-c-menu__item-toggle-icon">
844
900
  <i class="fas fa-angle-left"></i>
@@ -857,21 +913,39 @@ section: components
857
913
  </div>
858
914
  <div class="pf-c-menu__search">
859
915
  <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
- />
916
+ <div class="pf-c-search-input">
917
+ <div class="pf-c-search-input__bar">
918
+ <span class="pf-c-search-input__text">
919
+ <span class="pf-c-search-input__icon">
920
+ <i
921
+ class="fas fa-search fa-fw"
922
+ aria-hidden="true"
923
+ ></i>
924
+ </span>
925
+ <input
926
+ class="pf-c-search-input__text-input"
927
+ type="text"
928
+ placeholder="Search"
929
+ aria-label="Search"
930
+ />
931
+ </span>
932
+ </div>
933
+ </div>
867
934
  </div>
868
935
  </div>
869
936
  <hr class="pf-c-divider" />
870
937
  <section class="pf-c-menu__group">
871
938
  <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="#">
939
+ <ul class="pf-c-menu__list" role="menu">
940
+ <li
941
+ class="pf-c-menu__list-item"
942
+ role="none"
943
+ >
944
+ <a
945
+ class="pf-c-menu__item"
946
+ href="#"
947
+ role="menuitem"
948
+ >
875
949
  <span class="pf-c-menu__item-main">
876
950
  <span
877
951
  class="pf-c-menu__item-text"
@@ -893,10 +967,14 @@ section: components
893
967
  </span>
894
968
  </button>
895
969
  </li>
896
- <li class="pf-c-menu__list-item">
970
+ <li
971
+ class="pf-c-menu__list-item"
972
+ role="none"
973
+ >
897
974
  <a
898
975
  class="pf-c-menu__item"
899
976
  href="#"
977
+ role="menuitem"
900
978
  target="_blank"
901
979
  >
902
980
  <span class="pf-c-menu__item-main">
@@ -936,9 +1014,16 @@ section: components
936
1014
  <hr class="pf-c-divider" />
937
1015
  <section class="pf-c-menu__group">
938
1016
  <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="#">
1017
+ <ul class="pf-c-menu__list" role="menu">
1018
+ <li
1019
+ class="pf-c-menu__list-item"
1020
+ role="none"
1021
+ >
1022
+ <a
1023
+ class="pf-c-menu__item"
1024
+ href="#"
1025
+ role="menuitem"
1026
+ >
942
1027
  <span class="pf-c-menu__item-main">
943
1028
  <span
944
1029
  class="pf-c-menu__item-text"
@@ -960,10 +1045,14 @@ section: components
960
1045
  </span>
961
1046
  </button>
962
1047
  </li>
963
- <li class="pf-c-menu__list-item">
1048
+ <li
1049
+ class="pf-c-menu__list-item"
1050
+ role="none"
1051
+ >
964
1052
  <a
965
1053
  class="pf-c-menu__item"
966
1054
  href="#"
1055
+ role="menuitem"
967
1056
  target="_blank"
968
1057
  >
969
1058
  <span class="pf-c-menu__item-main">
@@ -1092,23 +1181,20 @@ section: components
1092
1181
  </button>
1093
1182
  <div class="pf-c-context-selector__menu" hidden>
1094
1183
  <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>
1184
+ <div class="pf-c-search-input">
1185
+ <div class="pf-c-search-input__bar">
1186
+ <span class="pf-c-search-input__text">
1187
+ <span class="pf-c-search-input__icon">
1188
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1189
+ </span>
1190
+ <input
1191
+ class="pf-c-search-input__text-input"
1192
+ type="text"
1193
+ placeholder="Search"
1194
+ aria-label="Search"
1195
+ />
1196
+ </span>
1197
+ </div>
1112
1198
  </div>
1113
1199
  </div>
1114
1200
  <ul class="pf-c-context-selector__menu-list">
@@ -1250,55 +1336,35 @@ section: components
1250
1336
  >
1251
1337
  <div class="pf-c-page__main-body">
1252
1338
  <div class="pf-l-gallery pf-m-gutter">
1253
- <div class="pf-l-gallery__item">
1254
- <div class="pf-c-card">
1255
- <div class="pf-c-card__body">This is a card</div>
1256
- </div>
1339
+ <div class="pf-c-card">
1340
+ <div class="pf-c-card__body">This is a card</div>
1257
1341
  </div>
1258
- <div class="pf-l-gallery__item">
1259
- <div class="pf-c-card">
1260
- <div class="pf-c-card__body">This is a card</div>
1261
- </div>
1342
+ <div class="pf-c-card">
1343
+ <div class="pf-c-card__body">This is a card</div>
1262
1344
  </div>
1263
- <div class="pf-l-gallery__item">
1264
- <div class="pf-c-card">
1265
- <div class="pf-c-card__body">This is a card</div>
1266
- </div>
1345
+ <div class="pf-c-card">
1346
+ <div class="pf-c-card__body">This is a card</div>
1267
1347
  </div>
1268
- <div class="pf-l-gallery__item">
1269
- <div class="pf-c-card">
1270
- <div class="pf-c-card__body">This is a card</div>
1271
- </div>
1348
+ <div class="pf-c-card">
1349
+ <div class="pf-c-card__body">This is a card</div>
1272
1350
  </div>
1273
- <div class="pf-l-gallery__item">
1274
- <div class="pf-c-card">
1275
- <div class="pf-c-card__body">This is a card</div>
1276
- </div>
1351
+ <div class="pf-c-card">
1352
+ <div class="pf-c-card__body">This is a card</div>
1277
1353
  </div>
1278
- <div class="pf-l-gallery__item">
1279
- <div class="pf-c-card">
1280
- <div class="pf-c-card__body">This is a card</div>
1281
- </div>
1354
+ <div class="pf-c-card">
1355
+ <div class="pf-c-card__body">This is a card</div>
1282
1356
  </div>
1283
- <div class="pf-l-gallery__item">
1284
- <div class="pf-c-card">
1285
- <div class="pf-c-card__body">This is a card</div>
1286
- </div>
1357
+ <div class="pf-c-card">
1358
+ <div class="pf-c-card__body">This is a card</div>
1287
1359
  </div>
1288
- <div class="pf-l-gallery__item">
1289
- <div class="pf-c-card">
1290
- <div class="pf-c-card__body">This is a card</div>
1291
- </div>
1360
+ <div class="pf-c-card">
1361
+ <div class="pf-c-card__body">This is a card</div>
1292
1362
  </div>
1293
- <div class="pf-l-gallery__item">
1294
- <div class="pf-c-card">
1295
- <div class="pf-c-card__body">This is a card</div>
1296
- </div>
1363
+ <div class="pf-c-card">
1364
+ <div class="pf-c-card__body">This is a card</div>
1297
1365
  </div>
1298
- <div class="pf-l-gallery__item">
1299
- <div class="pf-c-card">
1300
- <div class="pf-c-card__body">This is a card</div>
1301
- </div>
1366
+ <div class="pf-c-card">
1367
+ <div class="pf-c-card__body">This is a card</div>
1302
1368
  </div>
1303
1369
  </div>
1304
1370
  </div>
@@ -1394,14 +1460,24 @@ section: components
1394
1460
  hidden
1395
1461
  >
1396
1462
  <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
- />
1463
+ <div class="pf-c-search-input">
1464
+ <div class="pf-c-search-input__bar">
1465
+ <span class="pf-c-search-input__text">
1466
+ <span class="pf-c-search-input__icon">
1467
+ <i
1468
+ class="fas fa-search fa-fw"
1469
+ aria-hidden="true"
1470
+ ></i>
1471
+ </span>
1472
+ <input
1473
+ class="pf-c-search-input__text-input"
1474
+ type="text"
1475
+ placeholder="Filter by name"
1476
+ aria-label="Filter by name"
1477
+ />
1478
+ </span>
1479
+ </div>
1480
+ </div>
1405
1481
  </div>
1406
1482
  <section class="pf-c-app-launcher__group">
1407
1483
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -1602,12 +1678,16 @@ section: components
1602
1678
  >
1603
1679
  <div class="pf-c-menu__content">
1604
1680
  <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">
1681
+ <ul class="pf-c-menu__list" role="menu">
1682
+ <li
1683
+ class="pf-c-menu__list-item pf-m-disabled"
1684
+ role="none"
1685
+ >
1607
1686
  <button
1608
1687
  class="pf-c-menu__item"
1609
1688
  type="button"
1610
1689
  disabled
1690
+ role="menuitem"
1611
1691
  >
1612
1692
  <span class="pf-c-menu__item-description">
1613
1693
  <div class="pf-u-font-size-sm">Username:</div>
@@ -1617,11 +1697,15 @@ section: components
1617
1697
  </span>
1618
1698
  </button>
1619
1699
  </li>
1620
- <li class="pf-c-menu__list-item pf-m-disabled">
1700
+ <li
1701
+ class="pf-c-menu__list-item pf-m-disabled"
1702
+ role="none"
1703
+ >
1621
1704
  <button
1622
1705
  class="pf-c-menu__item"
1623
1706
  type="button"
1624
1707
  disabled
1708
+ role="menuitem"
1625
1709
  >
1626
1710
  <span class="pf-c-menu__item-description">
1627
1711
  <div class="pf-u-font-size-sm">Account number:</div>
@@ -1630,15 +1714,23 @@ section: components
1630
1714
  </button>
1631
1715
  </li>
1632
1716
  <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">
1717
+ <li class="pf-c-menu__list-item" role="none">
1718
+ <button
1719
+ class="pf-c-menu__item"
1720
+ type="button"
1721
+ role="menuitem"
1722
+ >
1635
1723
  <span class="pf-c-menu__item-main">
1636
1724
  <span class="pf-c-menu__item-text">My profile</span>
1637
1725
  </span>
1638
1726
  </button>
1639
1727
  </li>
1640
- <li class="pf-c-menu__list-item">
1641
- <button class="pf-c-menu__item" type="button">
1728
+ <li class="pf-c-menu__list-item" role="none">
1729
+ <button
1730
+ class="pf-c-menu__item"
1731
+ type="button"
1732
+ role="menuitem"
1733
+ >
1642
1734
  <span class="pf-c-menu__item-main">
1643
1735
  <span
1644
1736
  class="pf-c-menu__item-text"
@@ -1646,8 +1738,12 @@ section: components
1646
1738
  </span>
1647
1739
  </button>
1648
1740
  </li>
1649
- <li class="pf-c-menu__list-item">
1650
- <button class="pf-c-menu__item" type="button">
1741
+ <li class="pf-c-menu__list-item" role="none">
1742
+ <button
1743
+ class="pf-c-menu__item"
1744
+ type="button"
1745
+ role="menuitem"
1746
+ >
1651
1747
  <span class="pf-c-menu__item-main">
1652
1748
  <span class="pf-c-menu__item-text">Logout</span>
1653
1749
  </span>
@@ -1657,11 +1753,12 @@ section: components
1657
1753
  </section>
1658
1754
  <hr class="pf-c-divider pf-m-hidden-on-sm" />
1659
1755
  <section class="pf-c-menu__group">
1660
- <ul class="pf-c-menu__list">
1661
- <li class="pf-c-menu__list-item">
1756
+ <ul class="pf-c-menu__list" role="menu">
1757
+ <li class="pf-c-menu__list-item" role="none">
1662
1758
  <button
1663
1759
  class="pf-c-menu__item"
1664
1760
  type="button"
1761
+ role="menuitem"
1665
1762
  aria-expanded="false"
1666
1763
  >
1667
1764
  <span class="pf-c-menu__item-main">
@@ -1679,13 +1776,15 @@ section: components
1679
1776
  </button>
1680
1777
  <div class="pf-c-menu" hidden>
1681
1778
  <div class="pf-c-menu__content">
1682
- <ul class="pf-c-menu__list">
1779
+ <ul class="pf-c-menu__list" role="menu">
1683
1780
  <li
1684
1781
  class="pf-c-menu__list-item pf-m-drill-up"
1782
+ role="none"
1685
1783
  >
1686
1784
  <button
1687
1785
  class="pf-c-menu__item"
1688
1786
  type="button"
1787
+ role="menuitem"
1689
1788
  >
1690
1789
  <span class="pf-c-menu__item-main">
1691
1790
  <span
@@ -1706,8 +1805,15 @@ section: components
1706
1805
  </button>
1707
1806
  </li>
1708
1807
  <li class="pf-c-divider" role="separator"></li>
1709
- <li class="pf-c-menu__list-item">
1710
- <a class="pf-c-menu__item" href="#">
1808
+ <li
1809
+ class="pf-c-menu__list-item"
1810
+ role="none"
1811
+ >
1812
+ <a
1813
+ class="pf-c-menu__item"
1814
+ href="#"
1815
+ role="menuitem"
1816
+ >
1711
1817
  <span class="pf-c-menu__item-main">
1712
1818
  <span
1713
1819
  class="pf-c-menu__item-text"
@@ -1715,8 +1821,15 @@ section: components
1715
1821
  </span>
1716
1822
  </a>
1717
1823
  </li>
1718
- <li class="pf-c-menu__list-item">
1719
- <a class="pf-c-menu__item" href="#">
1824
+ <li
1825
+ class="pf-c-menu__list-item"
1826
+ role="none"
1827
+ >
1828
+ <a
1829
+ class="pf-c-menu__item"
1830
+ href="#"
1831
+ role="menuitem"
1832
+ >
1720
1833
  <span class="pf-c-menu__item-main">
1721
1834
  <span
1722
1835
  class="pf-c-menu__item-text"
@@ -1729,10 +1842,11 @@ section: components
1729
1842
  </div>
1730
1843
  </li>
1731
1844
 
1732
- <li class="pf-c-menu__list-item">
1845
+ <li class="pf-c-menu__list-item" role="none">
1733
1846
  <button
1734
1847
  class="pf-c-menu__item"
1735
1848
  type="button"
1849
+ role="menuitem"
1736
1850
  aria-expanded="false"
1737
1851
  >
1738
1852
  <span class="pf-c-menu__item-main">
@@ -1750,13 +1864,15 @@ section: components
1750
1864
  </button>
1751
1865
  <div class="pf-c-menu" hidden>
1752
1866
  <div class="pf-c-menu__content">
1753
- <ul class="pf-c-menu__list">
1867
+ <ul class="pf-c-menu__list" role="menu">
1754
1868
  <li
1755
1869
  class="pf-c-menu__list-item pf-m-drill-up"
1870
+ role="none"
1756
1871
  >
1757
1872
  <button
1758
1873
  class="pf-c-menu__item"
1759
1874
  type="button"
1875
+ role="menuitem"
1760
1876
  >
1761
1877
  <span class="pf-c-menu__item-main">
1762
1878
  <span
@@ -1777,8 +1893,15 @@ section: components
1777
1893
  </button>
1778
1894
  </li>
1779
1895
  <li class="pf-c-divider" role="separator"></li>
1780
- <li class="pf-c-menu__list-item">
1781
- <a class="pf-c-menu__item" href="#">
1896
+ <li
1897
+ class="pf-c-menu__list-item"
1898
+ role="none"
1899
+ >
1900
+ <a
1901
+ class="pf-c-menu__item"
1902
+ href="#"
1903
+ role="menuitem"
1904
+ >
1782
1905
  <span class="pf-c-menu__item-main">
1783
1906
  <span
1784
1907
  class="pf-c-menu__item-text"
@@ -1786,8 +1909,15 @@ section: components
1786
1909
  </span>
1787
1910
  </a>
1788
1911
  </li>
1789
- <li class="pf-c-menu__list-item">
1790
- <a class="pf-c-menu__item" href="#">
1912
+ <li
1913
+ class="pf-c-menu__list-item"
1914
+ role="none"
1915
+ >
1916
+ <a
1917
+ class="pf-c-menu__item"
1918
+ href="#"
1919
+ role="menuitem"
1920
+ >
1791
1921
  <span class="pf-c-menu__item-main">
1792
1922
  <span
1793
1923
  class="pf-c-menu__item-text"
@@ -1795,8 +1925,15 @@ section: components
1795
1925
  </span>
1796
1926
  </a>
1797
1927
  </li>
1798
- <li class="pf-c-menu__list-item">
1799
- <a class="pf-c-menu__item" href="#">
1928
+ <li
1929
+ class="pf-c-menu__list-item"
1930
+ role="none"
1931
+ >
1932
+ <a
1933
+ class="pf-c-menu__item"
1934
+ href="#"
1935
+ role="menuitem"
1936
+ >
1800
1937
  <span class="pf-c-menu__item-main">
1801
1938
  <span
1802
1939
  class="pf-c-menu__item-text"
@@ -1809,8 +1946,12 @@ section: components
1809
1946
  </div>
1810
1947
  </li>
1811
1948
 
1812
- <li class="pf-c-menu__list-item">
1813
- <button class="pf-c-menu__item" type="button">
1949
+ <li class="pf-c-menu__list-item" role="none">
1950
+ <button
1951
+ class="pf-c-menu__item"
1952
+ type="button"
1953
+ role="menuitem"
1954
+ >
1814
1955
  <span class="pf-c-menu__item-main">
1815
1956
  <span class="pf-c-menu__item-icon">
1816
1957
  <i
@@ -1828,7 +1969,11 @@ section: components
1828
1969
  </button>
1829
1970
  <div class="pf-c-menu" hidden>
1830
1971
  <div class="pf-c-menu__header">
1831
- <button class="pf-c-menu__item" type="button">
1972
+ <button
1973
+ class="pf-c-menu__item"
1974
+ type="button"
1975
+ role="menuitem"
1976
+ >
1832
1977
  <span class="pf-c-menu__item-main">
1833
1978
  <span class="pf-c-menu__item-toggle-icon">
1834
1979
  <i class="fas fa-angle-left"></i>
@@ -1847,21 +1992,39 @@ section: components
1847
1992
  </div>
1848
1993
  <div class="pf-c-menu__search">
1849
1994
  <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
- />
1995
+ <div class="pf-c-search-input">
1996
+ <div class="pf-c-search-input__bar">
1997
+ <span class="pf-c-search-input__text">
1998
+ <span class="pf-c-search-input__icon">
1999
+ <i
2000
+ class="fas fa-search fa-fw"
2001
+ aria-hidden="true"
2002
+ ></i>
2003
+ </span>
2004
+ <input
2005
+ class="pf-c-search-input__text-input"
2006
+ type="text"
2007
+ placeholder="Search"
2008
+ aria-label="Search"
2009
+ />
2010
+ </span>
2011
+ </div>
2012
+ </div>
1857
2013
  </div>
1858
2014
  </div>
1859
2015
  <hr class="pf-c-divider" />
1860
2016
  <section class="pf-c-menu__group">
1861
2017
  <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="#">
2018
+ <ul class="pf-c-menu__list" role="menu">
2019
+ <li
2020
+ class="pf-c-menu__list-item"
2021
+ role="none"
2022
+ >
2023
+ <a
2024
+ class="pf-c-menu__item"
2025
+ href="#"
2026
+ role="menuitem"
2027
+ >
1865
2028
  <span class="pf-c-menu__item-main">
1866
2029
  <span
1867
2030
  class="pf-c-menu__item-text"
@@ -1883,10 +2046,14 @@ section: components
1883
2046
  </span>
1884
2047
  </button>
1885
2048
  </li>
1886
- <li class="pf-c-menu__list-item">
2049
+ <li
2050
+ class="pf-c-menu__list-item"
2051
+ role="none"
2052
+ >
1887
2053
  <a
1888
2054
  class="pf-c-menu__item"
1889
2055
  href="#"
2056
+ role="menuitem"
1890
2057
  target="_blank"
1891
2058
  >
1892
2059
  <span class="pf-c-menu__item-main">
@@ -1926,9 +2093,16 @@ section: components
1926
2093
  <hr class="pf-c-divider" />
1927
2094
  <section class="pf-c-menu__group">
1928
2095
  <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="#">
2096
+ <ul class="pf-c-menu__list" role="menu">
2097
+ <li
2098
+ class="pf-c-menu__list-item"
2099
+ role="none"
2100
+ >
2101
+ <a
2102
+ class="pf-c-menu__item"
2103
+ href="#"
2104
+ role="menuitem"
2105
+ >
1932
2106
  <span class="pf-c-menu__item-main">
1933
2107
  <span
1934
2108
  class="pf-c-menu__item-text"
@@ -1950,10 +2124,14 @@ section: components
1950
2124
  </span>
1951
2125
  </button>
1952
2126
  </li>
1953
- <li class="pf-c-menu__list-item">
2127
+ <li
2128
+ class="pf-c-menu__list-item"
2129
+ role="none"
2130
+ >
1954
2131
  <a
1955
2132
  class="pf-c-menu__item"
1956
2133
  href="#"
2134
+ role="menuitem"
1957
2135
  target="_blank"
1958
2136
  >
1959
2137
  <span class="pf-c-menu__item-main">
@@ -2084,23 +2262,20 @@ section: components
2084
2262
  </button>
2085
2263
  <div class="pf-c-context-selector__menu">
2086
2264
  <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>
2265
+ <div class="pf-c-search-input">
2266
+ <div class="pf-c-search-input__bar">
2267
+ <span class="pf-c-search-input__text">
2268
+ <span class="pf-c-search-input__icon">
2269
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
2270
+ </span>
2271
+ <input
2272
+ class="pf-c-search-input__text-input"
2273
+ type="text"
2274
+ placeholder="Search"
2275
+ aria-label="Search"
2276
+ />
2277
+ </span>
2278
+ </div>
2104
2279
  </div>
2105
2280
  </div>
2106
2281
  <ul class="pf-c-context-selector__menu-list">
@@ -2242,55 +2417,35 @@ section: components
2242
2417
  >
2243
2418
  <div class="pf-c-page__main-body">
2244
2419
  <div class="pf-l-gallery pf-m-gutter">
2245
- <div class="pf-l-gallery__item">
2246
- <div class="pf-c-card">
2247
- <div class="pf-c-card__body">This is a card</div>
2248
- </div>
2420
+ <div class="pf-c-card">
2421
+ <div class="pf-c-card__body">This is a card</div>
2249
2422
  </div>
2250
- <div class="pf-l-gallery__item">
2251
- <div class="pf-c-card">
2252
- <div class="pf-c-card__body">This is a card</div>
2253
- </div>
2423
+ <div class="pf-c-card">
2424
+ <div class="pf-c-card__body">This is a card</div>
2254
2425
  </div>
2255
- <div class="pf-l-gallery__item">
2256
- <div class="pf-c-card">
2257
- <div class="pf-c-card__body">This is a card</div>
2258
- </div>
2426
+ <div class="pf-c-card">
2427
+ <div class="pf-c-card__body">This is a card</div>
2259
2428
  </div>
2260
- <div class="pf-l-gallery__item">
2261
- <div class="pf-c-card">
2262
- <div class="pf-c-card__body">This is a card</div>
2263
- </div>
2429
+ <div class="pf-c-card">
2430
+ <div class="pf-c-card__body">This is a card</div>
2264
2431
  </div>
2265
- <div class="pf-l-gallery__item">
2266
- <div class="pf-c-card">
2267
- <div class="pf-c-card__body">This is a card</div>
2268
- </div>
2432
+ <div class="pf-c-card">
2433
+ <div class="pf-c-card__body">This is a card</div>
2269
2434
  </div>
2270
- <div class="pf-l-gallery__item">
2271
- <div class="pf-c-card">
2272
- <div class="pf-c-card__body">This is a card</div>
2273
- </div>
2435
+ <div class="pf-c-card">
2436
+ <div class="pf-c-card__body">This is a card</div>
2274
2437
  </div>
2275
- <div class="pf-l-gallery__item">
2276
- <div class="pf-c-card">
2277
- <div class="pf-c-card__body">This is a card</div>
2278
- </div>
2438
+ <div class="pf-c-card">
2439
+ <div class="pf-c-card__body">This is a card</div>
2279
2440
  </div>
2280
- <div class="pf-l-gallery__item">
2281
- <div class="pf-c-card">
2282
- <div class="pf-c-card__body">This is a card</div>
2283
- </div>
2441
+ <div class="pf-c-card">
2442
+ <div class="pf-c-card__body">This is a card</div>
2284
2443
  </div>
2285
- <div class="pf-l-gallery__item">
2286
- <div class="pf-c-card">
2287
- <div class="pf-c-card__body">This is a card</div>
2288
- </div>
2444
+ <div class="pf-c-card">
2445
+ <div class="pf-c-card__body">This is a card</div>
2289
2446
  </div>
2290
- <div class="pf-l-gallery__item">
2291
- <div class="pf-c-card">
2292
- <div class="pf-c-card__body">This is a card</div>
2293
- </div>
2447
+ <div class="pf-c-card">
2448
+ <div class="pf-c-card__body">This is a card</div>
2294
2449
  </div>
2295
2450
  </div>
2296
2451
  </div>
@@ -2391,14 +2546,24 @@ section: components
2391
2546
  hidden
2392
2547
  >
2393
2548
  <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
- />
2549
+ <div class="pf-c-search-input">
2550
+ <div class="pf-c-search-input__bar">
2551
+ <span class="pf-c-search-input__text">
2552
+ <span class="pf-c-search-input__icon">
2553
+ <i
2554
+ class="fas fa-search fa-fw"
2555
+ aria-hidden="true"
2556
+ ></i>
2557
+ </span>
2558
+ <input
2559
+ class="pf-c-search-input__text-input"
2560
+ type="text"
2561
+ placeholder="Filter by name"
2562
+ aria-label="Filter by name"
2563
+ />
2564
+ </span>
2565
+ </div>
2566
+ </div>
2402
2567
  </div>
2403
2568
  <section class="pf-c-app-launcher__group">
2404
2569
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -2588,12 +2753,16 @@ section: components
2588
2753
  <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
2589
2754
  <div class="pf-c-menu__content">
2590
2755
  <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">
2756
+ <ul class="pf-c-menu__list" role="menu">
2757
+ <li
2758
+ class="pf-c-menu__list-item pf-m-disabled"
2759
+ role="none"
2760
+ >
2593
2761
  <button
2594
2762
  class="pf-c-menu__item"
2595
2763
  type="button"
2596
2764
  disabled
2765
+ role="menuitem"
2597
2766
  >
2598
2767
  <span class="pf-c-menu__item-description">
2599
2768
  <div class="pf-u-font-size-sm">Username:</div>
@@ -2603,11 +2772,15 @@ section: components
2603
2772
  </span>
2604
2773
  </button>
2605
2774
  </li>
2606
- <li class="pf-c-menu__list-item pf-m-disabled">
2775
+ <li
2776
+ class="pf-c-menu__list-item pf-m-disabled"
2777
+ role="none"
2778
+ >
2607
2779
  <button
2608
2780
  class="pf-c-menu__item"
2609
2781
  type="button"
2610
2782
  disabled
2783
+ role="menuitem"
2611
2784
  >
2612
2785
  <span class="pf-c-menu__item-description">
2613
2786
  <div class="pf-u-font-size-sm">Account number:</div>
@@ -2616,15 +2789,23 @@ section: components
2616
2789
  </button>
2617
2790
  </li>
2618
2791
  <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">
2792
+ <li class="pf-c-menu__list-item" role="none">
2793
+ <button
2794
+ class="pf-c-menu__item"
2795
+ type="button"
2796
+ role="menuitem"
2797
+ >
2621
2798
  <span class="pf-c-menu__item-main">
2622
2799
  <span class="pf-c-menu__item-text">My profile</span>
2623
2800
  </span>
2624
2801
  </button>
2625
2802
  </li>
2626
- <li class="pf-c-menu__list-item">
2627
- <button class="pf-c-menu__item" type="button">
2803
+ <li class="pf-c-menu__list-item" role="none">
2804
+ <button
2805
+ class="pf-c-menu__item"
2806
+ type="button"
2807
+ role="menuitem"
2808
+ >
2628
2809
  <span class="pf-c-menu__item-main">
2629
2810
  <span
2630
2811
  class="pf-c-menu__item-text"
@@ -2632,8 +2813,12 @@ section: components
2632
2813
  </span>
2633
2814
  </button>
2634
2815
  </li>
2635
- <li class="pf-c-menu__list-item">
2636
- <button class="pf-c-menu__item" type="button">
2816
+ <li class="pf-c-menu__list-item" role="none">
2817
+ <button
2818
+ class="pf-c-menu__item"
2819
+ type="button"
2820
+ role="menuitem"
2821
+ >
2637
2822
  <span class="pf-c-menu__item-main">
2638
2823
  <span class="pf-c-menu__item-text">Logout</span>
2639
2824
  </span>
@@ -2643,11 +2828,12 @@ section: components
2643
2828
  </section>
2644
2829
  <hr class="pf-c-divider pf-m-hidden-on-sm" />
2645
2830
  <section class="pf-c-menu__group">
2646
- <ul class="pf-c-menu__list">
2647
- <li class="pf-c-menu__list-item">
2831
+ <ul class="pf-c-menu__list" role="menu">
2832
+ <li class="pf-c-menu__list-item" role="none">
2648
2833
  <button
2649
2834
  class="pf-c-menu__item"
2650
2835
  type="button"
2836
+ role="menuitem"
2651
2837
  aria-expanded="false"
2652
2838
  >
2653
2839
  <span class="pf-c-menu__item-main">
@@ -2665,13 +2851,15 @@ section: components
2665
2851
  </button>
2666
2852
  <div class="pf-c-menu" hidden>
2667
2853
  <div class="pf-c-menu__content">
2668
- <ul class="pf-c-menu__list">
2854
+ <ul class="pf-c-menu__list" role="menu">
2669
2855
  <li
2670
2856
  class="pf-c-menu__list-item pf-m-drill-up"
2857
+ role="none"
2671
2858
  >
2672
2859
  <button
2673
2860
  class="pf-c-menu__item"
2674
2861
  type="button"
2862
+ role="menuitem"
2675
2863
  >
2676
2864
  <span class="pf-c-menu__item-main">
2677
2865
  <span
@@ -2692,8 +2880,12 @@ section: components
2692
2880
  </button>
2693
2881
  </li>
2694
2882
  <li class="pf-c-divider" role="separator"></li>
2695
- <li class="pf-c-menu__list-item">
2696
- <a class="pf-c-menu__item" href="#">
2883
+ <li class="pf-c-menu__list-item" role="none">
2884
+ <a
2885
+ class="pf-c-menu__item"
2886
+ href="#"
2887
+ role="menuitem"
2888
+ >
2697
2889
  <span class="pf-c-menu__item-main">
2698
2890
  <span
2699
2891
  class="pf-c-menu__item-text"
@@ -2701,8 +2893,12 @@ section: components
2701
2893
  </span>
2702
2894
  </a>
2703
2895
  </li>
2704
- <li class="pf-c-menu__list-item">
2705
- <a class="pf-c-menu__item" href="#">
2896
+ <li class="pf-c-menu__list-item" role="none">
2897
+ <a
2898
+ class="pf-c-menu__item"
2899
+ href="#"
2900
+ role="menuitem"
2901
+ >
2706
2902
  <span class="pf-c-menu__item-main">
2707
2903
  <span class="pf-c-menu__item-text">About</span>
2708
2904
  </span>
@@ -2713,10 +2909,11 @@ section: components
2713
2909
  </div>
2714
2910
  </li>
2715
2911
 
2716
- <li class="pf-c-menu__list-item">
2912
+ <li class="pf-c-menu__list-item" role="none">
2717
2913
  <button
2718
2914
  class="pf-c-menu__item"
2719
2915
  type="button"
2916
+ role="menuitem"
2720
2917
  aria-expanded="false"
2721
2918
  >
2722
2919
  <span class="pf-c-menu__item-main">
@@ -2734,13 +2931,15 @@ section: components
2734
2931
  </button>
2735
2932
  <div class="pf-c-menu" hidden>
2736
2933
  <div class="pf-c-menu__content">
2737
- <ul class="pf-c-menu__list">
2934
+ <ul class="pf-c-menu__list" role="menu">
2738
2935
  <li
2739
2936
  class="pf-c-menu__list-item pf-m-drill-up"
2937
+ role="none"
2740
2938
  >
2741
2939
  <button
2742
2940
  class="pf-c-menu__item"
2743
2941
  type="button"
2942
+ role="menuitem"
2744
2943
  >
2745
2944
  <span class="pf-c-menu__item-main">
2746
2945
  <span
@@ -2759,8 +2958,12 @@ section: components
2759
2958
  </button>
2760
2959
  </li>
2761
2960
  <li class="pf-c-divider" role="separator"></li>
2762
- <li class="pf-c-menu__list-item">
2763
- <a class="pf-c-menu__item" href="#">
2961
+ <li class="pf-c-menu__list-item" role="none">
2962
+ <a
2963
+ class="pf-c-menu__item"
2964
+ href="#"
2965
+ role="menuitem"
2966
+ >
2764
2967
  <span class="pf-c-menu__item-main">
2765
2968
  <span
2766
2969
  class="pf-c-menu__item-text"
@@ -2768,8 +2971,12 @@ section: components
2768
2971
  </span>
2769
2972
  </a>
2770
2973
  </li>
2771
- <li class="pf-c-menu__list-item">
2772
- <a class="pf-c-menu__item" href="#">
2974
+ <li class="pf-c-menu__list-item" role="none">
2975
+ <a
2976
+ class="pf-c-menu__item"
2977
+ href="#"
2978
+ role="menuitem"
2979
+ >
2773
2980
  <span class="pf-c-menu__item-main">
2774
2981
  <span
2775
2982
  class="pf-c-menu__item-text"
@@ -2777,8 +2984,12 @@ section: components
2777
2984
  </span>
2778
2985
  </a>
2779
2986
  </li>
2780
- <li class="pf-c-menu__list-item">
2781
- <a class="pf-c-menu__item" href="#">
2987
+ <li class="pf-c-menu__list-item" role="none">
2988
+ <a
2989
+ class="pf-c-menu__item"
2990
+ href="#"
2991
+ role="menuitem"
2992
+ >
2782
2993
  <span class="pf-c-menu__item-main">
2783
2994
  <span
2784
2995
  class="pf-c-menu__item-text"
@@ -2791,8 +3002,12 @@ section: components
2791
3002
  </div>
2792
3003
  </li>
2793
3004
 
2794
- <li class="pf-c-menu__list-item">
2795
- <button class="pf-c-menu__item" type="button">
3005
+ <li class="pf-c-menu__list-item" role="none">
3006
+ <button
3007
+ class="pf-c-menu__item"
3008
+ type="button"
3009
+ role="menuitem"
3010
+ >
2796
3011
  <span class="pf-c-menu__item-main">
2797
3012
  <span class="pf-c-menu__item-icon">
2798
3013
  <i class="fas fa-fw fa-th" aria-hidden="true"></i>
@@ -2807,7 +3022,11 @@ section: components
2807
3022
  </button>
2808
3023
  <div class="pf-c-menu" hidden>
2809
3024
  <div class="pf-c-menu__header">
2810
- <button class="pf-c-menu__item" type="button">
3025
+ <button
3026
+ class="pf-c-menu__item"
3027
+ type="button"
3028
+ role="menuitem"
3029
+ >
2811
3030
  <span class="pf-c-menu__item-main">
2812
3031
  <span class="pf-c-menu__item-toggle-icon">
2813
3032
  <i class="fas fa-angle-left"></i>
@@ -2826,21 +3045,36 @@ section: components
2826
3045
  </div>
2827
3046
  <div class="pf-c-menu__search">
2828
3047
  <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
- />
3048
+ <div class="pf-c-search-input">
3049
+ <div class="pf-c-search-input__bar">
3050
+ <span class="pf-c-search-input__text">
3051
+ <span class="pf-c-search-input__icon">
3052
+ <i
3053
+ class="fas fa-search fa-fw"
3054
+ aria-hidden="true"
3055
+ ></i>
3056
+ </span>
3057
+ <input
3058
+ class="pf-c-search-input__text-input"
3059
+ type="text"
3060
+ placeholder="Search"
3061
+ aria-label="Search"
3062
+ />
3063
+ </span>
3064
+ </div>
3065
+ </div>
2836
3066
  </div>
2837
3067
  </div>
2838
3068
  <hr class="pf-c-divider" />
2839
3069
  <section class="pf-c-menu__group">
2840
3070
  <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="#">
3071
+ <ul class="pf-c-menu__list" role="menu">
3072
+ <li class="pf-c-menu__list-item" role="none">
3073
+ <a
3074
+ class="pf-c-menu__item"
3075
+ href="#"
3076
+ role="menuitem"
3077
+ >
2844
3078
  <span class="pf-c-menu__item-main">
2845
3079
  <span
2846
3080
  class="pf-c-menu__item-text"
@@ -2860,10 +3094,11 @@ section: components
2860
3094
  </span>
2861
3095
  </button>
2862
3096
  </li>
2863
- <li class="pf-c-menu__list-item">
3097
+ <li class="pf-c-menu__list-item" role="none">
2864
3098
  <a
2865
3099
  class="pf-c-menu__item"
2866
3100
  href="#"
3101
+ role="menuitem"
2867
3102
  target="_blank"
2868
3103
  >
2869
3104
  <span class="pf-c-menu__item-main">
@@ -2901,9 +3136,13 @@ section: components
2901
3136
  <hr class="pf-c-divider" />
2902
3137
  <section class="pf-c-menu__group">
2903
3138
  <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="#">
3139
+ <ul class="pf-c-menu__list" role="menu">
3140
+ <li class="pf-c-menu__list-item" role="none">
3141
+ <a
3142
+ class="pf-c-menu__item"
3143
+ href="#"
3144
+ role="menuitem"
3145
+ >
2907
3146
  <span class="pf-c-menu__item-main">
2908
3147
  <span
2909
3148
  class="pf-c-menu__item-text"
@@ -2923,10 +3162,11 @@ section: components
2923
3162
  </span>
2924
3163
  </button>
2925
3164
  </li>
2926
- <li class="pf-c-menu__list-item">
3165
+ <li class="pf-c-menu__list-item" role="none">
2927
3166
  <a
2928
3167
  class="pf-c-menu__item"
2929
3168
  href="#"
3169
+ role="menuitem"
2930
3170
  target="_blank"
2931
3171
  >
2932
3172
  <span class="pf-c-menu__item-main">
@@ -3093,23 +3333,20 @@ section: components
3093
3333
  </button>
3094
3334
  <div class="pf-c-context-selector__menu" hidden>
3095
3335
  <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>
3336
+ <div class="pf-c-search-input">
3337
+ <div class="pf-c-search-input__bar">
3338
+ <span class="pf-c-search-input__text">
3339
+ <span class="pf-c-search-input__icon">
3340
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
3341
+ </span>
3342
+ <input
3343
+ class="pf-c-search-input__text-input"
3344
+ type="text"
3345
+ placeholder="Search"
3346
+ aria-label="Search"
3347
+ />
3348
+ </span>
3349
+ </div>
3113
3350
  </div>
3114
3351
  </div>
3115
3352
  <ul class="pf-c-context-selector__menu-list">
@@ -3319,55 +3556,35 @@ section: components
3319
3556
  <section class="pf-c-page__main-section pf-m-limit-width">
3320
3557
  <div class="pf-c-page__main-body">
3321
3558
  <div class="pf-l-gallery pf-m-gutter">
3322
- <div class="pf-l-gallery__item">
3323
- <div class="pf-c-card">
3324
- <div class="pf-c-card__body">This is a card</div>
3325
- </div>
3559
+ <div class="pf-c-card">
3560
+ <div class="pf-c-card__body">This is a card</div>
3326
3561
  </div>
3327
- <div class="pf-l-gallery__item">
3328
- <div class="pf-c-card">
3329
- <div class="pf-c-card__body">This is a card</div>
3330
- </div>
3562
+ <div class="pf-c-card">
3563
+ <div class="pf-c-card__body">This is a card</div>
3331
3564
  </div>
3332
- <div class="pf-l-gallery__item">
3333
- <div class="pf-c-card">
3334
- <div class="pf-c-card__body">This is a card</div>
3335
- </div>
3565
+ <div class="pf-c-card">
3566
+ <div class="pf-c-card__body">This is a card</div>
3336
3567
  </div>
3337
- <div class="pf-l-gallery__item">
3338
- <div class="pf-c-card">
3339
- <div class="pf-c-card__body">This is a card</div>
3340
- </div>
3568
+ <div class="pf-c-card">
3569
+ <div class="pf-c-card__body">This is a card</div>
3341
3570
  </div>
3342
- <div class="pf-l-gallery__item">
3343
- <div class="pf-c-card">
3344
- <div class="pf-c-card__body">This is a card</div>
3345
- </div>
3571
+ <div class="pf-c-card">
3572
+ <div class="pf-c-card__body">This is a card</div>
3346
3573
  </div>
3347
- <div class="pf-l-gallery__item">
3348
- <div class="pf-c-card">
3349
- <div class="pf-c-card__body">This is a card</div>
3350
- </div>
3574
+ <div class="pf-c-card">
3575
+ <div class="pf-c-card__body">This is a card</div>
3351
3576
  </div>
3352
- <div class="pf-l-gallery__item">
3353
- <div class="pf-c-card">
3354
- <div class="pf-c-card__body">This is a card</div>
3355
- </div>
3577
+ <div class="pf-c-card">
3578
+ <div class="pf-c-card__body">This is a card</div>
3356
3579
  </div>
3357
- <div class="pf-l-gallery__item">
3358
- <div class="pf-c-card">
3359
- <div class="pf-c-card__body">This is a card</div>
3360
- </div>
3580
+ <div class="pf-c-card">
3581
+ <div class="pf-c-card__body">This is a card</div>
3361
3582
  </div>
3362
- <div class="pf-l-gallery__item">
3363
- <div class="pf-c-card">
3364
- <div class="pf-c-card__body">This is a card</div>
3365
- </div>
3583
+ <div class="pf-c-card">
3584
+ <div class="pf-c-card__body">This is a card</div>
3366
3585
  </div>
3367
- <div class="pf-l-gallery__item">
3368
- <div class="pf-c-card">
3369
- <div class="pf-c-card__body">This is a card</div>
3370
- </div>
3586
+ <div class="pf-c-card">
3587
+ <div class="pf-c-card__body">This is a card</div>
3371
3588
  </div>
3372
3589
  </div>
3373
3590
  </div>