@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.40

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 (340) hide show
  1. package/RELEASE-NOTES.md +18 -1
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/images/pfbg-icon.svg +1 -0
  4. package/assets/pficon/pficon.scss +7 -2
  5. package/assets/pficon/pficon.woff2 +0 -0
  6. package/base/_base.scss +0 -18
  7. package/base/_chart-globals.scss +0 -4
  8. package/base/_common.scss +0 -22
  9. package/base/_fa-icons.scss +1 -2
  10. package/base/_fonts.scss +22 -27
  11. package/base/_globals.scss +92 -86
  12. package/base/_icons.scss +1 -28
  13. package/base/_svg-icons.scss +6 -0
  14. package/base/_variables.scss +4 -4
  15. package/base/patternfly-common.css +0 -10
  16. package/base/patternfly-fa-icons.css +1 -1
  17. package/base/patternfly-fonts.css +17 -17
  18. package/base/patternfly-globals.css +35 -41
  19. package/base/patternfly-icons.css +8 -22
  20. package/base/patternfly-pf-icons.css +6 -2
  21. package/base/patternfly-themes.css +0 -42
  22. package/base/patternfly-variables.css +3 -3
  23. package/base/themes/dark/_globals.scss +1 -1
  24. package/base/themes/dark/_variables.scss +1 -1
  25. package/components/AboutModalBox/about-modal-box.css +20 -50
  26. package/components/AboutModalBox/about-modal-box.scss +22 -14
  27. package/components/Accordion/accordion.css +2 -0
  28. package/components/Accordion/accordion.scss +2 -0
  29. package/components/Alert/alert.css +17 -8
  30. package/components/Alert/alert.scss +21 -7
  31. package/components/Alert/themes/dark/alert.scss +1 -1
  32. package/components/AppLauncher/app-launcher.css +2 -0
  33. package/components/AppLauncher/app-launcher.scss +2 -0
  34. package/components/Avatar/avatar.scss +2 -2
  35. package/components/BackgroundImage/background-image.css +8 -35
  36. package/components/BackgroundImage/background-image.scss +17 -43
  37. package/components/Banner/banner.css +14 -52
  38. package/components/Banner/banner.scss +9 -13
  39. package/components/Breadcrumb/breadcrumb.css +2 -0
  40. package/components/Breadcrumb/breadcrumb.scss +2 -0
  41. package/components/CalendarMonth/calendar-month.css +2 -2
  42. package/components/CalendarMonth/calendar-month.scss +3 -3
  43. package/components/Card/card.css +115 -50
  44. package/components/Card/card.scss +164 -63
  45. package/components/Chip/chip.css +33 -24
  46. package/components/Chip/chip.scss +40 -31
  47. package/components/ChipGroup/chip-group.css +27 -17
  48. package/components/ChipGroup/chip-group.scss +36 -22
  49. package/components/Content/content.css +11 -5
  50. package/components/Content/content.scss +17 -9
  51. package/components/ContextSelector/context-selector.css +13 -6
  52. package/components/ContextSelector/context-selector.scss +14 -7
  53. package/components/DataList/data-list-grid.css +7 -7
  54. package/components/DataList/data-list-grid.scss +1 -1
  55. package/components/DataList/data-list.css +46 -40
  56. package/components/DataList/data-list.scss +37 -28
  57. package/components/DatePicker/date-picker.css +0 -8
  58. package/components/DatePicker/date-picker.scss +0 -9
  59. package/components/DescriptionList/description-list.css +7 -7
  60. package/components/DescriptionList/description-list.scss +7 -7
  61. package/components/Divider/divider.css +2 -2
  62. package/components/Divider/divider.scss +3 -3
  63. package/components/Drawer/drawer.css +15 -16
  64. package/components/Drawer/drawer.scss +2 -3
  65. package/components/Dropdown/dropdown.css +26 -25
  66. package/components/Dropdown/dropdown.scss +17 -18
  67. package/components/DualListSelector/dual-list-selector.css +1 -1
  68. package/components/DualListSelector/dual-list-selector.scss +1 -1
  69. package/components/EmptyState/empty-state.css +46 -52
  70. package/components/EmptyState/empty-state.scss +58 -57
  71. package/components/ExpandableSection/expandable-section.css +2 -0
  72. package/components/ExpandableSection/expandable-section.scss +2 -0
  73. package/components/Form/form.css +14 -12
  74. package/components/Form/form.scss +9 -7
  75. package/components/FormControl/form-control.css +2 -5
  76. package/components/FormControl/themes/dark/form-control.scss +2 -6
  77. package/components/HelperText/helper-text.css +4 -0
  78. package/components/HelperText/helper-text.scss +5 -0
  79. package/components/Hint/hint.css +2 -2
  80. package/components/Hint/hint.scss +2 -2
  81. package/components/Icon/icon.css +3 -3
  82. package/components/Icon/icon.scss +3 -3
  83. package/components/InputGroup/input-group.css +61 -85
  84. package/components/InputGroup/input-group.scss +55 -61
  85. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  86. package/components/Label/label.css +49 -36
  87. package/components/Label/label.scss +53 -38
  88. package/components/Label/themes/dark/label.scss +2 -2
  89. package/components/LabelGroup/label-group.css +26 -22
  90. package/components/LabelGroup/label-group.scss +31 -26
  91. package/components/LogViewer/log-viewer.css +0 -38
  92. package/components/Login/login.css +20 -60
  93. package/components/Login/login.scss +16 -18
  94. package/components/Login/themes/dark/login.scss +4 -0
  95. package/components/Masthead/masthead.css +4 -42
  96. package/components/Masthead/masthead.scss +4 -4
  97. package/components/Menu/menu.css +9 -6
  98. package/components/Menu/menu.scss +34 -31
  99. package/components/MenuToggle/menu-toggle.css +3 -1
  100. package/components/MenuToggle/menu-toggle.scss +3 -1
  101. package/components/ModalBox/modal-box.css +12 -11
  102. package/components/ModalBox/modal-box.scss +14 -14
  103. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  104. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  105. package/components/Nav/nav.css +1 -1
  106. package/components/Nav/nav.scss +2 -2
  107. package/components/NotificationDrawer/notification-drawer.css +8 -8
  108. package/components/NotificationDrawer/notification-drawer.scss +8 -8
  109. package/components/OptionsMenu/options-menu.css +8 -10
  110. package/components/OptionsMenu/options-menu.scss +9 -11
  111. package/components/Page/page.css +101 -122
  112. package/components/Page/page.scss +49 -21
  113. package/components/Pagination/pagination.css +2 -110
  114. package/components/Pagination/pagination.scss +0 -6
  115. package/components/Popover/popover.css +31 -37
  116. package/components/Popover/popover.scss +32 -37
  117. package/components/Popover/themes/dark/popover.scss +3 -9
  118. package/components/Progress/progress.css +13 -10
  119. package/components/Progress/progress.scss +13 -10
  120. package/components/ProgressStepper/progress-stepper.css +5 -5
  121. package/components/ProgressStepper/progress-stepper.scss +5 -5
  122. package/components/SearchInput/search-input.css +4 -2
  123. package/components/SearchInput/search-input.scss +4 -2
  124. package/components/Select/select.css +1 -1
  125. package/components/Select/select.scss +1 -1
  126. package/components/Sidebar/sidebar.css +69 -26
  127. package/components/Sidebar/sidebar.scss +84 -27
  128. package/components/SimpleList/simple-list.css +1 -1
  129. package/components/SimpleList/simple-list.scss +2 -2
  130. package/components/Spinner/spinner.css +4 -4
  131. package/components/Spinner/spinner.scss +4 -4
  132. package/components/Table/table-grid.css +28 -28
  133. package/components/Table/table-scrollable.css +31 -26
  134. package/components/Table/table-scrollable.scss +33 -28
  135. package/components/Table/table-tree-view.css +14 -4
  136. package/components/Table/table-tree-view.scss +15 -0
  137. package/components/Table/table.css +67 -65
  138. package/components/Table/table.scss +65 -62
  139. package/components/Tabs/tabs.css +0 -4
  140. package/components/Tabs/tabs.scss +0 -7
  141. package/components/TextInputGroup/text-input-group.css +6 -4
  142. package/components/TextInputGroup/text-input-group.scss +6 -5
  143. package/components/Tile/tile.css +1 -1
  144. package/components/Tile/tile.scss +1 -1
  145. package/components/Timestamp/timestamp.css +3 -3
  146. package/components/Timestamp/timestamp.scss +3 -3
  147. package/components/Toolbar/toolbar.css +78 -43
  148. package/components/Toolbar/toolbar.scss +50 -10
  149. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  150. package/components/Tooltip/tooltip.css +7 -12
  151. package/components/Tooltip/tooltip.scss +6 -3
  152. package/components/TreeView/tree-view.css +7 -15
  153. package/components/TreeView/tree-view.scss +7 -18
  154. package/components/Wizard/wizard.css +16 -39
  155. package/components/Wizard/wizard.scss +20 -2
  156. package/docs/components/AboutModalBox/examples/AboutModalBox.md +20 -14
  157. package/docs/components/Accordion/examples/Accordion.md +12 -12
  158. package/docs/components/ActionList/examples/ActionList.md +6 -6
  159. package/docs/components/Alert/examples/Alert.md +29 -29
  160. package/docs/components/AlertGroup/examples/AlertGroup.md +15 -15
  161. package/docs/components/AppLauncher/examples/application-launcher.md +52 -46
  162. package/docs/components/Avatar/examples/Avatar.md +11 -11
  163. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  164. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  165. package/docs/components/BackgroundImage/examples/BackgroundImage.md +13 -29
  166. package/docs/components/Badge/examples/Badge.md +5 -5
  167. package/docs/components/Banner/examples/Banner.md +8 -8
  168. package/docs/components/Brand/examples/Brand.md +9 -9
  169. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  170. package/docs/components/Button/examples/Button.md +35 -35
  171. package/docs/components/CalendarMonth/examples/CalendarMonth.md +301 -284
  172. package/docs/components/Card/examples/Card.md +676 -116
  173. package/docs/components/Check/examples/Check.md +16 -19
  174. package/docs/components/Chip/examples/Chip.md +70 -52
  175. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  176. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  177. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  178. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  179. package/docs/components/Content/examples/Content.md +37 -9
  180. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  181. package/docs/components/ContextSelector/examples/context-selector.md +87 -80
  182. package/docs/components/DataList/examples/DataList.md +239 -202
  183. package/docs/components/DatePicker/examples/DatePicker.md +139 -104
  184. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  185. package/docs/components/Divider/examples/Divider.md +10 -10
  186. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  187. package/docs/components/Drawer/examples/Drawer.md +43 -43
  188. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  189. package/docs/components/Dropdown/examples/Dropdown.md +125 -100
  190. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  191. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  192. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  193. package/docs/components/FileUpload/examples/FileUpload.md +146 -105
  194. package/docs/components/Form/examples/Form.md +152 -130
  195. package/docs/components/FormControl/examples/FormControl.md +21 -20
  196. package/docs/components/HelperText/examples/HelperText.md +24 -35
  197. package/docs/components/Hint/examples/Hint.md +7 -7
  198. package/docs/components/Icon/examples/Icon.md +11 -12
  199. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  200. package/docs/components/InputGroup/examples/InputGroup.md +229 -179
  201. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  202. package/docs/components/Label/examples/Label.md +1427 -746
  203. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  204. package/docs/components/List/examples/List.md +18 -18
  205. package/docs/components/LogViewer/examples/LogViewer.md +79 -74
  206. package/docs/components/Login/examples/Login.md +103 -181
  207. package/docs/components/Masthead/examples/masthead.md +9 -9
  208. package/docs/components/Menu/examples/Menu.md +83 -80
  209. package/docs/components/MenuToggle/examples/MenuToggle.md +29 -28
  210. package/docs/components/ModalBox/examples/ModalBox.md +113 -92
  211. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +27 -26
  212. package/docs/components/Nav/examples/Navigation.md +69 -69
  213. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  214. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +64 -64
  215. package/docs/components/NumberInput/examples/NumberInput.md +311 -239
  216. package/docs/components/OptionsMenu/examples/options-menu.md +28 -28
  217. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  218. package/docs/components/Page/examples/Page.css +7 -1
  219. package/docs/components/Page/examples/Page.md +81 -54
  220. package/docs/components/Pagination/examples/Pagination.md +27 -27
  221. package/docs/components/Panel/examples/Panel.md +10 -10
  222. package/docs/components/Popover/examples/Popover.md +206 -149
  223. package/docs/components/Progress/examples/Progress.md +32 -61
  224. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -39
  225. package/docs/components/Radio/examples/Radio.md +12 -11
  226. package/docs/components/SearchInput/examples/SearchInput.md +185 -148
  227. package/docs/components/Select/examples/Select.md +368 -313
  228. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  229. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  230. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  231. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  232. package/docs/components/Slider/examples/Slider.md +84 -62
  233. package/docs/components/Spinner/examples/Spinner.md +24 -24
  234. package/docs/components/Switch/examples/Switch.md +19 -19
  235. package/docs/components/TabContent/examples/TabContent.md +13 -13
  236. package/docs/components/Table/examples/Table.css +4 -0
  237. package/docs/components/Table/examples/Table.md +5212 -5750
  238. package/docs/components/Tabs/examples/Tabs.md +155 -155
  239. package/docs/components/TextInputGroup/examples/TextInputGroup.md +523 -406
  240. package/docs/components/Tile/examples/Tile.md +16 -17
  241. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  242. package/docs/components/Title/examples/Title.md +17 -17
  243. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  244. package/docs/components/Toolbar/examples/Toolbar.md +848 -726
  245. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  246. package/docs/components/TreeView/examples/TreeView.md +34 -34
  247. package/docs/components/Truncate/examples/Truncate.md +4 -5
  248. package/docs/components/Wizard/examples/Wizard.md +119 -127
  249. package/docs/demos/AboutModal/examples/AboutModal.md +4 -5
  250. package/docs/demos/Alert/examples/Alert.md +118 -71
  251. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  252. package/docs/demos/Banner/examples/Banner.md +8 -9
  253. package/docs/demos/Card/examples/Card.md +216 -153
  254. package/docs/demos/CardView/examples/CardView.md +57 -30
  255. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  256. package/docs/demos/Dashboard/examples/Dashboard.md +51 -33
  257. package/docs/demos/DataList/examples/DataList.md +312 -255
  258. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  259. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  260. package/docs/demos/Form/examples/BasicForms.md +220 -213
  261. package/docs/demos/HelperText/examples/HelperText.md +16 -14
  262. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  263. package/docs/demos/Masthead/examples/Masthead.md +302 -284
  264. package/docs/demos/Modal/examples/Modal.md +54 -66
  265. package/docs/demos/Nav/examples/Nav.md +47 -47
  266. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +70 -58
  267. package/docs/demos/Page/examples/Page.md +982 -51
  268. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +22 -18
  269. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +121 -106
  270. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +345 -311
  271. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  272. package/docs/demos/Table/examples/Table.md +3323 -1288
  273. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  274. package/docs/demos/Toolbar/examples/Toolbar.md +1994 -329
  275. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  276. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  277. package/docs/layouts/Flex/examples/Flex.md +98 -98
  278. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  279. package/docs/layouts/Grid/examples/Grid.md +9 -9
  280. package/docs/layouts/Level/examples/Level.md +5 -5
  281. package/docs/layouts/Split/examples/Split.md +7 -7
  282. package/docs/layouts/Stack/examples/Stack.md +6 -6
  283. package/docs/utilities/Accessibility/examples/Accessibility.md +5 -5
  284. package/docs/utilities/Alignment/examples/Alignment.md +7 -7
  285. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +13 -13
  286. package/docs/utilities/BoxShadow/examples/box-shadow.md +23 -23
  287. package/docs/utilities/Display/examples/Display.md +12 -12
  288. package/docs/utilities/Flex/examples/Flex.md +35 -35
  289. package/docs/utilities/Float/examples/Float.md +5 -5
  290. package/docs/utilities/Sizing/examples/Sizing.md +51 -51
  291. package/docs/utilities/Spacing/examples/Spacing.md +35 -35
  292. package/docs/utilities/Text/examples/Text.md +31 -31
  293. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  294. package/layouts/Gallery/gallery.css +1 -1
  295. package/layouts/Gallery/gallery.scss +1 -1
  296. package/layouts/Grid/grid.css +7 -7
  297. package/layouts/Grid/grid.scss +2 -2
  298. package/package.json +59 -65
  299. package/patternfly-addons.css +48 -48
  300. package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +28 -73
  301. package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
  302. package/patternfly-base.css +63 -114
  303. package/{patternfly-no-reset.css → patternfly-no-globals.css} +1179 -2293
  304. package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
  305. package/patternfly.css +1207 -2327
  306. package/patternfly.min.css +1 -1
  307. package/patternfly.min.css.map +1 -1
  308. package/sass-utilities/functions.scss +8 -24
  309. package/sass-utilities/mixins.scss +15 -39
  310. package/sass-utilities/placeholders.scss +0 -23
  311. package/sass-utilities/scss-variables.scss +5 -6
  312. package/sass-utilities/themes/dark/placeholders.scss +0 -22
  313. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  314. package/utilities/Spacing/spacing.scss +2 -2
  315. package/utilities/Text/text.css +48 -48
  316. package/utilities/Text/text.scss +6 -6
  317. package/utilities/Text/themes/dark/text.scss +2 -2
  318. package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
  319. package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
  320. package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
  321. package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
  322. package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
  323. package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
  324. package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
  325. package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
  326. package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
  327. package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
  328. package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
  329. package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
  330. package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
  331. package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
  332. package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
  333. package/assets/pficon/pficon.woff +0 -0
  334. package/base/_shield-inheritable.scss +0 -69
  335. package/base/_shield-noninheritable.scss +0 -13
  336. package/base/patternfly-shield-inheritable.css +0 -66
  337. package/base/patternfly-shield-inheritable.scss +0 -4
  338. package/base/patternfly-shield-noninheritable.css +0 -9
  339. package/base/patternfly-shield-noninheritable.scss +0 -4
  340. package/sass-utilities/bs-variables.scss +0 -709
package/docs/demos/Masthead/examples/Masthead.md CHANGED
@@ -113,7 +113,7 @@ wrapperTag: div
113
113
  id="masthead-basic-example-primary-nav"
114
114
  aria-label="Global"
115
115
  >
116
- <ul class="pf-c-nav__list">
116
+ <ul class="pf-c-nav__list" role="list">
117
117
  <li class="pf-c-nav__item">
118
118
  <a href="#" class="pf-c-nav__link">System panel</a>
119
119
  </li>
@@ -145,7 +145,7 @@ wrapperTag: div
145
145
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
146
146
  <div class="pf-c-page__main-body">
147
147
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
148
- <ol class="pf-c-breadcrumb__list">
148
+ <ol class="pf-c-breadcrumb__list" role="list">
149
149
  <li class="pf-c-breadcrumb__item">
150
150
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
151
151
  </li>
@@ -313,7 +313,7 @@ wrapperTag: div
313
313
  </div>
314
314
  </div>
315
315
  </div>
316
- <ul class="pf-c-context-selector__menu-list">
316
+ <ul class="pf-c-context-selector__menu-list" role="list">
317
317
  <li>
318
318
  <a
319
319
  class="pf-c-context-selector__menu-list-item"
@@ -517,7 +517,7 @@ wrapperTag: div
517
517
  id="masthead-context-selecton-drilldown-example-primary-nav"
518
518
  aria-label="Global"
519
519
  >
520
- <ul class="pf-c-nav__list">
520
+ <ul class="pf-c-nav__list" role="list">
521
521
  <li class="pf-c-nav__item">
522
522
  <a href="#" class="pf-c-nav__link">System panel</a>
523
523
  </li>
@@ -549,7 +549,7 @@ wrapperTag: div
549
549
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
550
550
  <div class="pf-c-page__main-body">
551
551
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
552
- <ol class="pf-c-breadcrumb__list">
552
+ <ol class="pf-c-breadcrumb__list" role="list">
553
553
  <li class="pf-c-breadcrumb__item">
554
554
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
555
555
  </li>
@@ -696,90 +696,93 @@ wrapperTag: div
696
696
  aria-label="search filter"
697
697
  role="group"
698
698
  >
699
- <div class="pf-c-select" style="width: 175px">
700
- <span
701
- id="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
702
- hidden
703
- >Choose one</span>
699
+ <div class="pf-c-input-group__item pf-m-fill">
700
+ <div class="pf-c-select" style="width: 124px">
701
+ <span
702
+ id="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
703
+ hidden
704
+ >Choose one</span>
704
705
 
705
- <button
706
- class="pf-c-select__toggle"
707
- type="button"
708
- id="masthead-toolbar-filters-example-masthead-toolbar-select-name-toggle"
709
- aria-haspopup="true"
710
- aria-expanded="false"
711
- aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-select-name-label masthead-toolbar-filters-example-masthead-toolbar-select-name-toggle"
712
- >
713
- <div class="pf-c-select__toggle-wrapper">
714
- <span class="pf-c-select__toggle-icon">
715
- <i class="fas fa-filter" aria-hidden="true"></i>
706
+ <button
707
+ class="pf-c-select__toggle"
708
+ type="button"
709
+ id="masthead-toolbar-filters-example-masthead-toolbar-select-name-toggle"
710
+ aria-haspopup="true"
711
+ aria-expanded="false"
712
+ aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-select-name-label masthead-toolbar-filters-example-masthead-toolbar-select-name-toggle"
713
+ >
714
+ <div class="pf-c-select__toggle-wrapper">
715
+ <span class="pf-c-select__toggle-icon">
716
+ <i class="fas fa-filter" aria-hidden="true"></i>
717
+ </span>
718
+ <span class="pf-c-select__toggle-text">Name</span>
719
+ </div>
720
+ <span class="pf-c-select__toggle-arrow">
721
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
716
722
  </span>
717
- <span class="pf-c-select__toggle-text">Name</span>
718
- </div>
719
- <span class="pf-c-select__toggle-arrow">
720
- <i class="fas fa-caret-down" aria-hidden="true"></i>
721
- </span>
722
- </button>
723
+ </button>
723
724
 
724
- <ul
725
- class="pf-c-select__menu"
726
- role="listbox"
727
- aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
728
- hidden
729
- style="width: 175px"
730
- >
731
- <li role="presentation">
732
- <button
733
- class="pf-c-select__menu-item"
734
- role="option"
735
- >Running</button>
736
- </li>
737
- <li role="presentation">
738
- <button
739
- class="pf-c-select__menu-item pf-m-selected"
740
- role="option"
741
- aria-selected="true"
742
- >
743
- Stopped
744
- <span class="pf-c-select__menu-item-icon">
745
- <i class="fas fa-check" aria-hidden="true"></i>
746
- </span>
747
- </button>
748
- </li>
749
- <li role="presentation">
750
- <button
751
- class="pf-c-select__menu-item"
752
- role="option"
753
- >Down</button>
754
- </li>
755
- <li role="presentation">
756
- <button
757
- class="pf-c-select__menu-item"
758
- role="option"
759
- >Degraded</button>
760
- </li>
761
- <li role="presentation">
762
- <button
763
- class="pf-c-select__menu-item"
764
- role="option"
765
- >Needs maintenance</button>
766
- </li>
767
- </ul>
725
+ <ul
726
+ class="pf-c-select__menu"
727
+ role="listbox"
728
+ aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
729
+ hidden
730
+ >
731
+ <li role="presentation">
732
+ <button
733
+ class="pf-c-select__menu-item"
734
+ role="option"
735
+ >Running</button>
736
+ </li>
737
+ <li role="presentation">
738
+ <button
739
+ class="pf-c-select__menu-item pf-m-selected"
740
+ role="option"
741
+ aria-selected="true"
742
+ >
743
+ Stopped
744
+ <span class="pf-c-select__menu-item-icon">
745
+ <i class="fas fa-check" aria-hidden="true"></i>
746
+ </span>
747
+ </button>
748
+ </li>
749
+ <li role="presentation">
750
+ <button
751
+ class="pf-c-select__menu-item"
752
+ role="option"
753
+ >Down</button>
754
+ </li>
755
+ <li role="presentation">
756
+ <button
757
+ class="pf-c-select__menu-item"
758
+ role="option"
759
+ >Degraded</button>
760
+ </li>
761
+ <li role="presentation">
762
+ <button
763
+ class="pf-c-select__menu-item"
764
+ role="option"
765
+ >Needs maintenance</button>
766
+ </li>
767
+ </ul>
768
+ </div>
768
769
  </div>
769
- <div class="pf-c-text-input-group">
770
- <div class="pf-c-text-input-group__main pf-m-icon">
771
- <span class="pf-c-text-input-group__text">
772
- <span class="pf-c-text-input-group__icon">
773
- <i class="fas fa-fw fa-search"></i>
770
+ <div class="pf-c-input-group__item">
771
+ <div class="pf-c-text-input-group" style="width: auto">
772
+ <div class="pf-c-text-input-group__main pf-m-icon">
773
+ <span class="pf-c-text-input-group__text">
774
+ <span class="pf-c-text-input-group__icon">
775
+ <i class="fas fa-fw fa-search"></i>
776
+ </span>
777
+ <input
778
+ class="pf-c-text-input-group__text-input"
779
+ type="search"
780
+ placeholder="Filter by name"
781
+ value
782
+ aria-label="Type to filter"
783
+ />
774
784
  </span>
775
- <input
776
- class="pf-c-text-input-group__text-input"
777
- type="text"
778
- value
779
- placeholder="Filter by name"
780
- aria-label="Type to filter"
781
- />
782
- </span>
785
+ </div>
783
786
  </div>
784
787
  </div>
785
788
  </div>
@@ -849,7 +852,7 @@ wrapperTag: div
849
852
  id="masthead-toolbar-filters-example-primary-nav"
850
853
  aria-label="Global"
851
854
  >
852
- <ul class="pf-c-nav__list">
855
+ <ul class="pf-c-nav__list" role="list">
853
856
  <li class="pf-c-nav__item">
854
857
  <a href="#" class="pf-c-nav__link">System panel</a>
855
858
  </li>
@@ -881,7 +884,7 @@ wrapperTag: div
881
884
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
882
885
  <div class="pf-c-page__main-body">
883
886
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
884
- <ol class="pf-c-breadcrumb__list">
887
+ <ol class="pf-c-breadcrumb__list" role="list">
885
888
  <li class="pf-c-breadcrumb__item">
886
889
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
887
890
  </li>
@@ -1031,90 +1034,93 @@ wrapperTag: div
1031
1034
  aria-label="search filter"
1032
1035
  role="group"
1033
1036
  >
1034
- <div class="pf-c-select" style="width: 175px">
1035
- <span
1036
- id="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
1037
- hidden
1038
- >Choose one</span>
1037
+ <div class="pf-c-input-group__item pf-m-fill">
1038
+ <div class="pf-c-select" style="width: 124px">
1039
+ <span
1040
+ id="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
1041
+ hidden
1042
+ >Choose one</span>
1039
1043
 
1040
- <button
1041
- class="pf-c-select__toggle"
1042
- type="button"
1043
- id="masthead-toggle-group-filters-example-masthead-toolbar-select-name-toggle"
1044
- aria-haspopup="true"
1045
- aria-expanded="false"
1046
- aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label masthead-toggle-group-filters-example-masthead-toolbar-select-name-toggle"
1047
- >
1048
- <div class="pf-c-select__toggle-wrapper">
1049
- <span class="pf-c-select__toggle-icon">
1050
- <i class="fas fa-filter" aria-hidden="true"></i>
1044
+ <button
1045
+ class="pf-c-select__toggle"
1046
+ type="button"
1047
+ id="masthead-toggle-group-filters-example-masthead-toolbar-select-name-toggle"
1048
+ aria-haspopup="true"
1049
+ aria-expanded="false"
1050
+ aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label masthead-toggle-group-filters-example-masthead-toolbar-select-name-toggle"
1051
+ >
1052
+ <div class="pf-c-select__toggle-wrapper">
1053
+ <span class="pf-c-select__toggle-icon">
1054
+ <i class="fas fa-filter" aria-hidden="true"></i>
1055
+ </span>
1056
+ <span class="pf-c-select__toggle-text">Name</span>
1057
+ </div>
1058
+ <span class="pf-c-select__toggle-arrow">
1059
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1051
1060
  </span>
1052
- <span class="pf-c-select__toggle-text">Name</span>
1053
- </div>
1054
- <span class="pf-c-select__toggle-arrow">
1055
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1056
- </span>
1057
- </button>
1061
+ </button>
1058
1062
 
1059
- <ul
1060
- class="pf-c-select__menu"
1061
- role="listbox"
1062
- aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
1063
- hidden
1064
- style="width: 175px"
1065
- >
1066
- <li role="presentation">
1067
- <button
1068
- class="pf-c-select__menu-item"
1069
- role="option"
1070
- >Running</button>
1071
- </li>
1072
- <li role="presentation">
1073
- <button
1074
- class="pf-c-select__menu-item pf-m-selected"
1075
- role="option"
1076
- aria-selected="true"
1077
- >
1078
- Stopped
1079
- <span class="pf-c-select__menu-item-icon">
1080
- <i class="fas fa-check" aria-hidden="true"></i>
1081
- </span>
1082
- </button>
1083
- </li>
1084
- <li role="presentation">
1085
- <button
1086
- class="pf-c-select__menu-item"
1087
- role="option"
1088
- >Down</button>
1089
- </li>
1090
- <li role="presentation">
1091
- <button
1092
- class="pf-c-select__menu-item"
1093
- role="option"
1094
- >Degraded</button>
1095
- </li>
1096
- <li role="presentation">
1097
- <button
1098
- class="pf-c-select__menu-item"
1099
- role="option"
1100
- >Needs maintenance</button>
1101
- </li>
1102
- </ul>
1063
+ <ul
1064
+ class="pf-c-select__menu"
1065
+ role="listbox"
1066
+ aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
1067
+ hidden
1068
+ >
1069
+ <li role="presentation">
1070
+ <button
1071
+ class="pf-c-select__menu-item"
1072
+ role="option"
1073
+ >Running</button>
1074
+ </li>
1075
+ <li role="presentation">
1076
+ <button
1077
+ class="pf-c-select__menu-item pf-m-selected"
1078
+ role="option"
1079
+ aria-selected="true"
1080
+ >
1081
+ Stopped
1082
+ <span class="pf-c-select__menu-item-icon">
1083
+ <i class="fas fa-check" aria-hidden="true"></i>
1084
+ </span>
1085
+ </button>
1086
+ </li>
1087
+ <li role="presentation">
1088
+ <button
1089
+ class="pf-c-select__menu-item"
1090
+ role="option"
1091
+ >Down</button>
1092
+ </li>
1093
+ <li role="presentation">
1094
+ <button
1095
+ class="pf-c-select__menu-item"
1096
+ role="option"
1097
+ >Degraded</button>
1098
+ </li>
1099
+ <li role="presentation">
1100
+ <button
1101
+ class="pf-c-select__menu-item"
1102
+ role="option"
1103
+ >Needs maintenance</button>
1104
+ </li>
1105
+ </ul>
1106
+ </div>
1103
1107
  </div>
1104
- <div class="pf-c-text-input-group">
1105
- <div class="pf-c-text-input-group__main pf-m-icon">
1106
- <span class="pf-c-text-input-group__text">
1107
- <span class="pf-c-text-input-group__icon">
1108
- <i class="fas fa-fw fa-search"></i>
1108
+ <div class="pf-c-input-group__item">
1109
+ <div class="pf-c-text-input-group" style="width: auto">
1110
+ <div class="pf-c-text-input-group__main pf-m-icon">
1111
+ <span class="pf-c-text-input-group__text">
1112
+ <span class="pf-c-text-input-group__icon">
1113
+ <i class="fas fa-fw fa-search"></i>
1114
+ </span>
1115
+ <input
1116
+ class="pf-c-text-input-group__text-input"
1117
+ type="search"
1118
+ placeholder="Filter by name"
1119
+ value
1120
+ aria-label="Type to filter"
1121
+ />
1109
1122
  </span>
1110
- <input
1111
- class="pf-c-text-input-group__text-input"
1112
- type="text"
1113
- value
1114
- placeholder="Filter by name"
1115
- aria-label="Type to filter"
1116
- />
1117
- </span>
1123
+ </div>
1118
1124
  </div>
1119
1125
  </div>
1120
1126
  </div>
@@ -1184,7 +1190,7 @@ wrapperTag: div
1184
1190
  id="masthead-toggle-group-filters-example-primary-nav"
1185
1191
  aria-label="Global"
1186
1192
  >
1187
- <ul class="pf-c-nav__list">
1193
+ <ul class="pf-c-nav__list" role="list">
1188
1194
  <li class="pf-c-nav__item">
1189
1195
  <a href="#" class="pf-c-nav__link">System panel</a>
1190
1196
  </li>
@@ -1216,7 +1222,7 @@ wrapperTag: div
1216
1222
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
1217
1223
  <div class="pf-c-page__main-body">
1218
1224
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
1219
- <ol class="pf-c-breadcrumb__list">
1225
+ <ol class="pf-c-breadcrumb__list" role="list">
1220
1226
  <li class="pf-c-breadcrumb__item">
1221
1227
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
1222
1228
  </li>
@@ -1349,13 +1355,15 @@ wrapperTag: div
1349
1355
  <div class="pf-c-toolbar__group pf-m-align-right">
1350
1356
  <div class="pf-c-toolbar__item">
1351
1357
  <div class="pf-c-input-group pf-m-plain">
1352
- <button
1353
- class="pf-c-button pf-m-plain"
1354
- type="button"
1355
- aria-label="Open search"
1356
- >
1357
- <i class="fas fa-fw fa-search" aria-hidden="true"></i>
1358
- </button>
1358
+ <div class="pf-c-input-group__item pf-m-plain">
1359
+ <button
1360
+ class="pf-c-button pf-m-plain"
1361
+ type="button"
1362
+ aria-label="Open search"
1363
+ >
1364
+ <i class="fas fa-fw fa-search" aria-hidden="true"></i>
1365
+ </button>
1366
+ </div>
1359
1367
  </div>
1360
1368
  </div>
1361
1369
  </div>
@@ -1371,7 +1379,7 @@ wrapperTag: div
1371
1379
  id="masthead-expandable-search-example-primary-nav"
1372
1380
  aria-label="Global"
1373
1381
  >
1374
- <ul class="pf-c-nav__list">
1382
+ <ul class="pf-c-nav__list" role="list">
1375
1383
  <li class="pf-c-nav__item">
1376
1384
  <a href="#" class="pf-c-nav__link">System panel</a>
1377
1385
  </li>
@@ -1403,7 +1411,7 @@ wrapperTag: div
1403
1411
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
1404
1412
  <div class="pf-c-page__main-body">
1405
1413
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
1406
- <ol class="pf-c-breadcrumb__list">
1414
+ <ol class="pf-c-breadcrumb__list" role="list">
1407
1415
  <li class="pf-c-breadcrumb__item">
1408
1416
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
1409
1417
  </li>
@@ -1536,29 +1544,33 @@ wrapperTag: div
1536
1544
  <div class="pf-c-toolbar__group pf-m-align-right">
1537
1545
  <div class="pf-c-toolbar__item">
1538
1546
  <div class="pf-c-input-group pf-m-plain">
1539
- <div class="pf-c-text-input-group">
1540
- <div class="pf-c-text-input-group__main pf-m-icon">
1541
- <span class="pf-c-text-input-group__text">
1542
- <span class="pf-c-text-input-group__icon">
1543
- <i class="fas fa-fw fa-search"></i>
1547
+ <div class="pf-c-input-group__item pf-m-fill">
1548
+ <div class="pf-c-text-input-group">
1549
+ <div class="pf-c-text-input-group__main pf-m-icon">
1550
+ <span class="pf-c-text-input-group__text">
1551
+ <span class="pf-c-text-input-group__icon">
1552
+ <i class="fas fa-fw fa-search"></i>
1553
+ </span>
1554
+ <input
1555
+ class="pf-c-text-input-group__text-input"
1556
+ type="text"
1557
+ placeholder="Search"
1558
+ value
1559
+ aria-label="Type to filter"
1560
+ />
1544
1561
  </span>
1545
- <input
1546
- class="pf-c-text-input-group__text-input"
1547
- type="text"
1548
- value
1549
- aria-label="Type to filter"
1550
- placeholder="Search"
1551
- />
1552
- </span>
1562
+ </div>
1553
1563
  </div>
1554
1564
  </div>
1555
- <button
1556
- class="pf-c-button pf-m-plain"
1557
- type="button"
1558
- aria-label="Close"
1559
- >
1560
- <i class="fas fa-times" aria-hidden="true"></i>
1561
- </button>
1565
+ <div class="pf-c-input-group__item pf-m-plain">
1566
+ <button
1567
+ class="pf-c-button pf-m-plain"
1568
+ type="button"
1569
+ aria-label="Close"
1570
+ >
1571
+ <i class="fas fa-times" aria-hidden="true"></i>
1572
+ </button>
1573
+ </div>
1562
1574
  </div>
1563
1575
  </div>
1564
1576
  </div>
@@ -1574,7 +1586,7 @@ wrapperTag: div
1574
1586
  id="masthead-expandable-search-expanded-example-primary-nav"
1575
1587
  aria-label="Global"
1576
1588
  >
1577
- <ul class="pf-c-nav__list">
1589
+ <ul class="pf-c-nav__list" role="list">
1578
1590
  <li class="pf-c-nav__item">
1579
1591
  <a href="#" class="pf-c-nav__link">System panel</a>
1580
1592
  </li>
@@ -1606,7 +1618,7 @@ wrapperTag: div
1606
1618
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
1607
1619
  <div class="pf-c-page__main-body">
1608
1620
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
1609
- <ol class="pf-c-breadcrumb__list">
1621
+ <ol class="pf-c-breadcrumb__list" role="list">
1610
1622
  <li class="pf-c-breadcrumb__item">
1611
1623
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
1612
1624
  </li>
@@ -1783,7 +1795,7 @@ wrapperTag: div
1783
1795
  </div>
1784
1796
  <section class="pf-c-app-launcher__group">
1785
1797
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
1786
- <ul>
1798
+ <ul role="list">
1787
1799
  <li
1788
1800
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1789
1801
  >
@@ -1835,7 +1847,7 @@ wrapperTag: div
1835
1847
  <hr class="pf-c-divider" />
1836
1848
  <section class="pf-c-app-launcher__group">
1837
1849
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
1838
- <ul>
1850
+ <ul role="list">
1839
1851
  <li
1840
1852
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
1841
1853
  >
@@ -2490,7 +2502,7 @@ wrapperTag: div
2490
2502
  id="masthead-advanced-with-menu-example-primary-nav"
2491
2503
  aria-label="Global"
2492
2504
  >
2493
- <ul class="pf-c-nav__list">
2505
+ <ul class="pf-c-nav__list" role="list">
2494
2506
  <li class="pf-c-nav__item">
2495
2507
  <a href="#" class="pf-c-nav__link">System panel</a>
2496
2508
  </li>
@@ -2522,7 +2534,7 @@ wrapperTag: div
2522
2534
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
2523
2535
  <div class="pf-c-page__main-body">
2524
2536
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
2525
- <ol class="pf-c-breadcrumb__list">
2537
+ <ol class="pf-c-breadcrumb__list" role="list">
2526
2538
  <li class="pf-c-breadcrumb__item">
2527
2539
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
2528
2540
  </li>
@@ -2656,7 +2668,7 @@ wrapperTag: div
2656
2668
  >
2657
2669
  <i class="fas fa-angle-left" aria-hidden="true"></i>
2658
2670
  </button>
2659
- <ul class="pf-c-nav__list">
2671
+ <ul class="pf-c-nav__list" role="list">
2660
2672
  <li class="pf-c-nav__item">
2661
2673
  <a href="#" class="pf-c-nav__link">Horizontal nav item 1</a>
2662
2674
  </li>
@@ -2732,7 +2744,7 @@ wrapperTag: div
2732
2744
  </div>
2733
2745
  <section class="pf-c-app-launcher__group">
2734
2746
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
2735
- <ul>
2747
+ <ul role="list">
2736
2748
  <li
2737
2749
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
2738
2750
  >
@@ -2784,7 +2796,7 @@ wrapperTag: div
2784
2796
  <hr class="pf-c-divider" />
2785
2797
  <section class="pf-c-app-launcher__group">
2786
2798
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
2787
- <ul>
2799
+ <ul role="list">
2788
2800
  <li
2789
2801
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
2790
2802
  >
@@ -3440,7 +3452,7 @@ wrapperTag: div
3440
3452
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
3441
3453
  <div class="pf-c-page__main-body">
3442
3454
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
3443
- <ol class="pf-c-breadcrumb__list">
3455
+ <ol class="pf-c-breadcrumb__list" role="list">
3444
3456
  <li class="pf-c-breadcrumb__item">
3445
3457
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
3446
3458
  </li>
@@ -3648,87 +3660,93 @@ wrapperTag: div
3648
3660
  aria-label="search filter"
3649
3661
  role="group"
3650
3662
  >
3651
- <div class="pf-c-select" style="width: 175px">
3652
- <span
3653
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
3654
- hidden
3655
- >Choose one</span>
3663
+ <div class="pf-c-input-group__item pf-m-fill">
3664
+ <div class="pf-c-select" style="width: 124px">
3665
+ <span
3666
+ id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
3667
+ hidden
3668
+ >Choose one</span>
3656
3669
 
3657
- <button
3658
- class="pf-c-select__toggle"
3659
- type="button"
3660
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-toggle"
3661
- aria-haspopup="true"
3662
- aria-expanded="false"
3663
- aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-toggle"
3664
- >
3665
- <div class="pf-c-select__toggle-wrapper">
3666
- <span class="pf-c-select__toggle-icon">
3667
- <i class="fas fa-filter" aria-hidden="true"></i>
3670
+ <button
3671
+ class="pf-c-select__toggle"
3672
+ type="button"
3673
+ id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-toggle"
3674
+ aria-haspopup="true"
3675
+ aria-expanded="false"
3676
+ aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-toggle"
3677
+ >
3678
+ <div class="pf-c-select__toggle-wrapper">
3679
+ <span class="pf-c-select__toggle-icon">
3680
+ <i class="fas fa-filter" aria-hidden="true"></i>
3681
+ </span>
3682
+ <span class="pf-c-select__toggle-text">Name</span>
3683
+ </div>
3684
+ <span class="pf-c-select__toggle-arrow">
3685
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3668
3686
  </span>
3669
- <span class="pf-c-select__toggle-text">Name</span>
3670
- </div>
3671
- <span class="pf-c-select__toggle-arrow">
3672
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3673
- </span>
3674
- </button>
3687
+ </button>
3675
3688
 
3676
- <ul
3677
- class="pf-c-select__menu"
3678
- role="listbox"
3679
- aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
3680
- hidden
3681
- style="width: 175px"
3682
- >
3683
- <li role="presentation">
3684
- <button
3685
- class="pf-c-select__menu-item"
3686
- role="option"
3687
- >Running</button>
3688
- </li>
3689
- <li role="presentation">
3690
- <button
3691
- class="pf-c-select__menu-item pf-m-selected"
3692
- role="option"
3693
- aria-selected="true"
3694
- >
3695
- Stopped
3696
- <span class="pf-c-select__menu-item-icon">
3697
- <i class="fas fa-check" aria-hidden="true"></i>
3698
- </span>
3699
- </button>
3700
- </li>
3701
- <li role="presentation">
3702
- <button class="pf-c-select__menu-item" role="option">Down</button>
3703
- </li>
3704
- <li role="presentation">
3705
- <button
3706
- class="pf-c-select__menu-item"
3707
- role="option"
3708
- >Degraded</button>
3709
- </li>
3710
- <li role="presentation">
3711
- <button
3712
- class="pf-c-select__menu-item"
3713
- role="option"
3714
- >Needs maintenance</button>
3715
- </li>
3716
- </ul>
3689
+ <ul
3690
+ class="pf-c-select__menu"
3691
+ role="listbox"
3692
+ aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
3693
+ hidden
3694
+ >
3695
+ <li role="presentation">
3696
+ <button
3697
+ class="pf-c-select__menu-item"
3698
+ role="option"
3699
+ >Running</button>
3700
+ </li>
3701
+ <li role="presentation">
3702
+ <button
3703
+ class="pf-c-select__menu-item pf-m-selected"
3704
+ role="option"
3705
+ aria-selected="true"
3706
+ >
3707
+ Stopped
3708
+ <span class="pf-c-select__menu-item-icon">
3709
+ <i class="fas fa-check" aria-hidden="true"></i>
3710
+ </span>
3711
+ </button>
3712
+ </li>
3713
+ <li role="presentation">
3714
+ <button
3715
+ class="pf-c-select__menu-item"
3716
+ role="option"
3717
+ >Down</button>
3718
+ </li>
3719
+ <li role="presentation">
3720
+ <button
3721
+ class="pf-c-select__menu-item"
3722
+ role="option"
3723
+ >Degraded</button>
3724
+ </li>
3725
+ <li role="presentation">
3726
+ <button
3727
+ class="pf-c-select__menu-item"
3728
+ role="option"
3729
+ >Needs maintenance</button>
3730
+ </li>
3731
+ </ul>
3732
+ </div>
3717
3733
  </div>
3718
- <div class="pf-c-text-input-group">
3719
- <div class="pf-c-text-input-group__main pf-m-icon">
3720
- <span class="pf-c-text-input-group__text">
3721
- <span class="pf-c-text-input-group__icon">
3722
- <i class="fas fa-fw fa-search"></i>
3734
+ <div class="pf-c-input-group__item">
3735
+ <div class="pf-c-text-input-group" style="width: auto">
3736
+ <div class="pf-c-text-input-group__main pf-m-icon">
3737
+ <span class="pf-c-text-input-group__text">
3738
+ <span class="pf-c-text-input-group__icon">
3739
+ <i class="fas fa-fw fa-search"></i>
3740
+ </span>
3741
+ <input
3742
+ class="pf-c-text-input-group__text-input"
3743
+ type="search"
3744
+ placeholder="Filter by name"
3745
+ value
3746
+ aria-label="Type to filter"
3747
+ />
3723
3748
  </span>
3724
- <input
3725
- class="pf-c-text-input-group__text-input"
3726
- type="text"
3727
- value
3728
- placeholder="Filter by name"
3729
- aria-label="Type to filter"
3730
- />
3731
- </span>
3749
+ </div>
3732
3750
  </div>
3733
3751
  </div>
3734
3752
  </div>
@@ -3745,7 +3763,7 @@ wrapperTag: div
3745
3763
  id="masthead-toggle-group-filters-expanded-mobile-example-primary-nav"
3746
3764
  aria-label="Global"
3747
3765
  >
3748
- <ul class="pf-c-nav__list">
3766
+ <ul class="pf-c-nav__list" role="list">
3749
3767
  <li class="pf-c-nav__item">
3750
3768
  <a href="#" class="pf-c-nav__link">System panel</a>
3751
3769
  </li>
@@ -3777,7 +3795,7 @@ wrapperTag: div
3777
3795
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
3778
3796
  <div class="pf-c-page__main-body">
3779
3797
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
3780
- <ol class="pf-c-breadcrumb__list">
3798
+ <ol class="pf-c-breadcrumb__list" role="list">
3781
3799
  <li class="pf-c-breadcrumb__item">
3782
3800
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
3783
3801
  </li>