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

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 (342) hide show
  1. package/README.md +4 -4
  2. package/RELEASE-NOTES.md +18 -1
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/images/pfbg-icon.svg +1 -0
  5. package/assets/pficon/pficon.scss +7 -2
  6. package/assets/pficon/pficon.woff2 +0 -0
  7. package/base/_base.scss +0 -18
  8. package/base/_chart-globals.scss +0 -4
  9. package/base/_common.scss +0 -22
  10. package/base/_fa-icons.scss +1 -2
  11. package/base/_fonts.scss +22 -27
  12. package/base/_globals.scss +92 -86
  13. package/base/_icons.scss +1 -28
  14. package/base/_svg-icons.scss +6 -0
  15. package/base/_variables.scss +4 -4
  16. package/base/patternfly-common.css +0 -10
  17. package/base/patternfly-fa-icons.css +1 -1
  18. package/base/patternfly-fonts.css +17 -17
  19. package/base/patternfly-globals.css +35 -41
  20. package/base/patternfly-icons.css +8 -22
  21. package/base/patternfly-pf-icons.css +6 -2
  22. package/base/patternfly-themes.css +0 -42
  23. package/base/patternfly-variables.css +3 -3
  24. package/base/themes/dark/_globals.scss +1 -1
  25. package/base/themes/dark/_variables.scss +1 -1
  26. package/components/AboutModalBox/about-modal-box.css +20 -50
  27. package/components/AboutModalBox/about-modal-box.scss +22 -14
  28. package/components/Accordion/accordion.css +2 -0
  29. package/components/Accordion/accordion.scss +2 -0
  30. package/components/Alert/alert.css +17 -8
  31. package/components/Alert/alert.scss +21 -7
  32. package/components/Alert/themes/dark/alert.scss +1 -1
  33. package/components/AppLauncher/app-launcher.css +2 -0
  34. package/components/AppLauncher/app-launcher.scss +2 -0
  35. package/components/Avatar/avatar.scss +2 -2
  36. package/components/BackgroundImage/background-image.css +8 -35
  37. package/components/BackgroundImage/background-image.scss +17 -43
  38. package/components/Banner/banner.css +14 -52
  39. package/components/Banner/banner.scss +9 -13
  40. package/components/Breadcrumb/breadcrumb.css +2 -0
  41. package/components/Breadcrumb/breadcrumb.scss +2 -0
  42. package/components/CalendarMonth/calendar-month.css +2 -2
  43. package/components/CalendarMonth/calendar-month.scss +3 -3
  44. package/components/Card/card.css +115 -50
  45. package/components/Card/card.scss +164 -63
  46. package/components/Chip/chip.css +33 -24
  47. package/components/Chip/chip.scss +40 -31
  48. package/components/ChipGroup/chip-group.css +27 -17
  49. package/components/ChipGroup/chip-group.scss +36 -22
  50. package/components/Content/content.css +11 -5
  51. package/components/Content/content.scss +17 -9
  52. package/components/ContextSelector/context-selector.css +13 -6
  53. package/components/ContextSelector/context-selector.scss +14 -7
  54. package/components/DataList/data-list-grid.css +7 -7
  55. package/components/DataList/data-list-grid.scss +1 -1
  56. package/components/DataList/data-list.css +46 -40
  57. package/components/DataList/data-list.scss +37 -28
  58. package/components/DatePicker/date-picker.css +0 -8
  59. package/components/DatePicker/date-picker.scss +0 -9
  60. package/components/DescriptionList/description-list.css +7 -7
  61. package/components/DescriptionList/description-list.scss +7 -7
  62. package/components/Divider/divider.css +2 -2
  63. package/components/Divider/divider.scss +3 -3
  64. package/components/Drawer/drawer.css +15 -16
  65. package/components/Drawer/drawer.scss +2 -3
  66. package/components/Dropdown/dropdown.css +26 -25
  67. package/components/Dropdown/dropdown.scss +17 -18
  68. package/components/DualListSelector/dual-list-selector.css +1 -1
  69. package/components/DualListSelector/dual-list-selector.scss +1 -1
  70. package/components/EmptyState/empty-state.css +46 -52
  71. package/components/EmptyState/empty-state.scss +58 -57
  72. package/components/ExpandableSection/expandable-section.css +2 -0
  73. package/components/ExpandableSection/expandable-section.scss +2 -0
  74. package/components/Form/form.css +14 -12
  75. package/components/Form/form.scss +9 -7
  76. package/components/FormControl/form-control.css +2 -5
  77. package/components/FormControl/themes/dark/form-control.scss +2 -6
  78. package/components/HelperText/helper-text.css +4 -0
  79. package/components/HelperText/helper-text.scss +5 -0
  80. package/components/Hint/hint.css +2 -2
  81. package/components/Hint/hint.scss +2 -2
  82. package/components/Icon/icon.css +3 -3
  83. package/components/Icon/icon.scss +3 -3
  84. package/components/InputGroup/input-group.css +61 -85
  85. package/components/InputGroup/input-group.scss +55 -61
  86. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  87. package/components/Label/label.css +49 -36
  88. package/components/Label/label.scss +53 -38
  89. package/components/Label/themes/dark/label.scss +2 -2
  90. package/components/LabelGroup/label-group.css +26 -22
  91. package/components/LabelGroup/label-group.scss +31 -26
  92. package/components/LogViewer/log-viewer.css +0 -38
  93. package/components/Login/login.css +20 -60
  94. package/components/Login/login.scss +16 -18
  95. package/components/Login/themes/dark/login.scss +4 -0
  96. package/components/Masthead/masthead.css +4 -42
  97. package/components/Masthead/masthead.scss +4 -4
  98. package/components/Menu/menu.css +9 -6
  99. package/components/Menu/menu.scss +34 -31
  100. package/components/MenuToggle/menu-toggle.css +3 -1
  101. package/components/MenuToggle/menu-toggle.scss +3 -1
  102. package/components/ModalBox/modal-box.css +12 -11
  103. package/components/ModalBox/modal-box.scss +14 -14
  104. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  105. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  106. package/components/Nav/nav.css +1 -1
  107. package/components/Nav/nav.scss +2 -2
  108. package/components/NotificationDrawer/notification-drawer.css +8 -8
  109. package/components/NotificationDrawer/notification-drawer.scss +8 -8
  110. package/components/OptionsMenu/options-menu.css +8 -10
  111. package/components/OptionsMenu/options-menu.scss +9 -11
  112. package/components/Page/page.css +101 -122
  113. package/components/Page/page.scss +49 -21
  114. package/components/Pagination/pagination.css +2 -110
  115. package/components/Pagination/pagination.scss +0 -6
  116. package/components/Popover/popover.css +31 -37
  117. package/components/Popover/popover.scss +32 -37
  118. package/components/Popover/themes/dark/popover.scss +3 -9
  119. package/components/Progress/progress.css +13 -10
  120. package/components/Progress/progress.scss +13 -10
  121. package/components/ProgressStepper/progress-stepper.css +5 -5
  122. package/components/ProgressStepper/progress-stepper.scss +5 -5
  123. package/components/SearchInput/search-input.css +4 -2
  124. package/components/SearchInput/search-input.scss +4 -2
  125. package/components/Select/select.css +1 -1
  126. package/components/Select/select.scss +1 -1
  127. package/components/Sidebar/sidebar.css +69 -26
  128. package/components/Sidebar/sidebar.scss +84 -27
  129. package/components/SimpleList/simple-list.css +1 -1
  130. package/components/SimpleList/simple-list.scss +2 -2
  131. package/components/Spinner/spinner.css +4 -133
  132. package/components/Spinner/spinner.scss +4 -173
  133. package/components/Table/table-grid.css +28 -28
  134. package/components/Table/table-scrollable.css +31 -26
  135. package/components/Table/table-scrollable.scss +33 -28
  136. package/components/Table/table-tree-view.css +14 -4
  137. package/components/Table/table-tree-view.scss +15 -0
  138. package/components/Table/table.css +67 -65
  139. package/components/Table/table.scss +65 -62
  140. package/components/Tabs/tabs.css +0 -4
  141. package/components/Tabs/tabs.scss +0 -7
  142. package/components/TextInputGroup/text-input-group.css +6 -4
  143. package/components/TextInputGroup/text-input-group.scss +6 -5
  144. package/components/Tile/tile.css +1 -1
  145. package/components/Tile/tile.scss +1 -1
  146. package/components/Timestamp/timestamp.css +3 -3
  147. package/components/Timestamp/timestamp.scss +3 -3
  148. package/components/Toolbar/toolbar.css +78 -43
  149. package/components/Toolbar/toolbar.scss +50 -10
  150. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  151. package/components/Tooltip/tooltip.css +7 -12
  152. package/components/Tooltip/tooltip.scss +6 -3
  153. package/components/TreeView/tree-view.css +7 -15
  154. package/components/TreeView/tree-view.scss +7 -18
  155. package/components/Wizard/wizard.css +16 -39
  156. package/components/Wizard/wizard.scss +20 -2
  157. package/docs/components/AboutModalBox/examples/AboutModalBox.md +20 -14
  158. package/docs/components/Accordion/examples/Accordion.md +12 -12
  159. package/docs/components/ActionList/examples/ActionList.md +6 -6
  160. package/docs/components/Alert/examples/Alert.md +29 -29
  161. package/docs/components/AlertGroup/examples/AlertGroup.md +15 -15
  162. package/docs/components/AppLauncher/examples/application-launcher.md +52 -46
  163. package/docs/components/Avatar/examples/Avatar.md +11 -11
  164. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  165. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  166. package/docs/components/BackgroundImage/examples/BackgroundImage.md +13 -29
  167. package/docs/components/Badge/examples/Badge.md +5 -5
  168. package/docs/components/Banner/examples/Banner.md +8 -8
  169. package/docs/components/Brand/examples/Brand.md +9 -9
  170. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  171. package/docs/components/Button/examples/Button.md +51 -55
  172. package/docs/components/CalendarMonth/examples/CalendarMonth.md +301 -284
  173. package/docs/components/Card/examples/Card.md +676 -116
  174. package/docs/components/Check/examples/Check.md +16 -19
  175. package/docs/components/Chip/examples/Chip.md +70 -52
  176. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  177. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  178. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  179. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  180. package/docs/components/Content/examples/Content.md +37 -9
  181. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  182. package/docs/components/ContextSelector/examples/context-selector.md +87 -80
  183. package/docs/components/DataList/examples/DataList.md +239 -202
  184. package/docs/components/DatePicker/examples/DatePicker.md +139 -104
  185. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  186. package/docs/components/Divider/examples/Divider.md +10 -10
  187. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  188. package/docs/components/Drawer/examples/Drawer.md +43 -43
  189. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  190. package/docs/components/Dropdown/examples/Dropdown.md +125 -100
  191. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  192. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  193. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  194. package/docs/components/FileUpload/examples/FileUpload.md +150 -110
  195. package/docs/components/Form/examples/Form.md +152 -130
  196. package/docs/components/FormControl/examples/FormControl.md +21 -20
  197. package/docs/components/HelperText/examples/HelperText.md +24 -35
  198. package/docs/components/Hint/examples/Hint.md +7 -7
  199. package/docs/components/Icon/examples/Icon.md +11 -12
  200. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  201. package/docs/components/InputGroup/examples/InputGroup.md +229 -179
  202. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  203. package/docs/components/Label/examples/Label.md +1427 -746
  204. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  205. package/docs/components/List/examples/List.md +18 -18
  206. package/docs/components/LogViewer/examples/LogViewer.md +79 -74
  207. package/docs/components/Login/examples/Login.md +103 -181
  208. package/docs/components/Masthead/examples/masthead.md +9 -9
  209. package/docs/components/Menu/examples/Menu.md +93 -85
  210. package/docs/components/MenuToggle/examples/MenuToggle.md +29 -28
  211. package/docs/components/ModalBox/examples/ModalBox.md +113 -92
  212. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +27 -26
  213. package/docs/components/Nav/examples/Navigation.md +69 -69
  214. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  215. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +64 -64
  216. package/docs/components/NumberInput/examples/NumberInput.md +311 -239
  217. package/docs/components/OptionsMenu/examples/options-menu.md +28 -28
  218. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  219. package/docs/components/Page/examples/Page.css +7 -1
  220. package/docs/components/Page/examples/Page.md +81 -54
  221. package/docs/components/Pagination/examples/Pagination.md +27 -27
  222. package/docs/components/Panel/examples/Panel.md +10 -10
  223. package/docs/components/Popover/examples/Popover.md +206 -149
  224. package/docs/components/Progress/examples/Progress.md +32 -61
  225. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -39
  226. package/docs/components/Radio/examples/Radio.md +12 -11
  227. package/docs/components/SearchInput/examples/SearchInput.md +185 -148
  228. package/docs/components/Select/examples/Select.md +372 -318
  229. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  230. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  231. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  232. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  233. package/docs/components/Slider/examples/Slider.md +84 -62
  234. package/docs/components/Spinner/examples/Spinner.md +18 -67
  235. package/docs/components/Switch/examples/Switch.md +19 -19
  236. package/docs/components/TabContent/examples/TabContent.md +13 -13
  237. package/docs/components/Table/examples/Table.css +4 -0
  238. package/docs/components/Table/examples/Table.md +5212 -5750
  239. package/docs/components/Tabs/examples/Tabs.md +155 -155
  240. package/docs/components/TextInputGroup/examples/TextInputGroup.md +523 -406
  241. package/docs/components/Tile/examples/Tile.md +16 -17
  242. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  243. package/docs/components/Title/examples/Title.md +17 -17
  244. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  245. package/docs/components/Toolbar/examples/Toolbar.md +848 -726
  246. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  247. package/docs/components/TreeView/examples/TreeView.md +34 -34
  248. package/docs/components/Truncate/examples/Truncate.md +4 -5
  249. package/docs/components/Wizard/examples/Wizard.md +119 -127
  250. package/docs/demos/AboutModal/examples/AboutModal.md +4 -5
  251. package/docs/demos/Alert/examples/Alert.md +118 -71
  252. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  253. package/docs/demos/Banner/examples/Banner.md +8 -9
  254. package/docs/demos/Button/examples/Button.md +10 -5
  255. package/docs/demos/Card/examples/Card.md +246 -168
  256. package/docs/demos/CardView/examples/CardView.md +57 -30
  257. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  258. package/docs/demos/Dashboard/examples/Dashboard.md +61 -38
  259. package/docs/demos/DataList/examples/DataList.md +312 -255
  260. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  261. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  262. package/docs/demos/Form/examples/BasicForms.md +220 -213
  263. package/docs/demos/HelperText/examples/HelperText.md +16 -14
  264. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  265. package/docs/demos/Masthead/examples/Masthead.md +302 -284
  266. package/docs/demos/Modal/examples/Modal.md +54 -66
  267. package/docs/demos/Nav/examples/Nav.md +47 -47
  268. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +70 -58
  269. package/docs/demos/Page/examples/Page.md +982 -51
  270. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +22 -18
  271. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +121 -106
  272. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +345 -311
  273. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  274. package/docs/demos/Table/examples/Table.md +3373 -1333
  275. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  276. package/docs/demos/Toolbar/examples/Toolbar.md +1994 -329
  277. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  278. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  279. package/docs/layouts/Flex/examples/Flex.md +98 -98
  280. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  281. package/docs/layouts/Grid/examples/Grid.md +9 -9
  282. package/docs/layouts/Level/examples/Level.md +5 -5
  283. package/docs/layouts/Split/examples/Split.md +7 -7
  284. package/docs/layouts/Stack/examples/Stack.md +6 -6
  285. package/docs/utilities/Accessibility/examples/Accessibility.md +5 -5
  286. package/docs/utilities/Alignment/examples/Alignment.md +7 -7
  287. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +13 -13
  288. package/docs/utilities/BoxShadow/examples/box-shadow.md +23 -23
  289. package/docs/utilities/Display/examples/Display.md +12 -12
  290. package/docs/utilities/Flex/examples/Flex.md +35 -35
  291. package/docs/utilities/Float/examples/Float.md +5 -5
  292. package/docs/utilities/Sizing/examples/Sizing.md +51 -51
  293. package/docs/utilities/Spacing/examples/Spacing.md +35 -35
  294. package/docs/utilities/Text/examples/Text.md +31 -31
  295. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  296. package/layouts/Gallery/gallery.css +1 -1
  297. package/layouts/Gallery/gallery.scss +1 -1
  298. package/layouts/Grid/grid.css +7 -7
  299. package/layouts/Grid/grid.scss +2 -2
  300. package/package.json +60 -66
  301. package/patternfly-addons.css +48 -48
  302. package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +28 -73
  303. package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
  304. package/patternfly-base.css +63 -114
  305. package/{patternfly-no-reset.css → patternfly-no-globals.css} +1206 -2449
  306. package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
  307. package/patternfly.css +1234 -2483
  308. package/patternfly.min.css +1 -1
  309. package/patternfly.min.css.map +1 -1
  310. package/sass-utilities/functions.scss +8 -24
  311. package/sass-utilities/mixins.scss +15 -39
  312. package/sass-utilities/placeholders.scss +0 -23
  313. package/sass-utilities/scss-variables.scss +5 -6
  314. package/sass-utilities/themes/dark/placeholders.scss +0 -22
  315. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  316. package/utilities/Spacing/spacing.scss +2 -2
  317. package/utilities/Text/text.css +48 -48
  318. package/utilities/Text/text.scss +6 -6
  319. package/utilities/Text/themes/dark/text.scss +2 -2
  320. package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
  321. package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
  322. package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
  323. package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
  324. package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
  325. package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
  326. package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
  327. package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
  328. package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
  329. package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
  330. package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
  331. package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
  332. package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
  333. package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
  334. package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
  335. package/assets/pficon/pficon.woff +0 -0
  336. package/base/_shield-inheritable.scss +0 -69
  337. package/base/_shield-noninheritable.scss +0 -13
  338. package/base/patternfly-shield-inheritable.css +0 -66
  339. package/base/patternfly-shield-inheritable.scss +0 -4
  340. package/base/patternfly-shield-noninheritable.css +0 -9
  341. package/base/patternfly-shield-noninheritable.scss +0 -4
  342. package/sass-utilities/bs-variables.scss +0 -709
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -96,7 +96,7 @@ wrapperTag: div
96
96
  </div>
97
97
  <section class="pf-c-app-launcher__group">
98
98
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
99
- <ul>
99
+ <ul role="list">
100
100
  <li
101
101
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
102
102
  >
@@ -148,7 +148,7 @@ wrapperTag: div
148
148
  <hr class="pf-c-divider" />
149
149
  <section class="pf-c-app-launcher__group">
150
150
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
151
- <ul>
151
+ <ul role="list">
152
152
  <li
153
153
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
154
154
  >
@@ -803,7 +803,7 @@ wrapperTag: div
803
803
  id="data-list-basic-example-primary-nav"
804
804
  aria-label="Global"
805
805
  >
806
- <ul class="pf-c-nav__list">
806
+ <ul class="pf-c-nav__list" role="list">
807
807
  <li class="pf-c-nav__item">
808
808
  <a href="#" class="pf-c-nav__link">System panel</a>
809
809
  </li>
@@ -835,7 +835,7 @@ wrapperTag: div
835
835
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
836
836
  <div class="pf-c-page__main-body">
837
837
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
838
- <ol class="pf-c-breadcrumb__list">
838
+ <ol class="pf-c-breadcrumb__list" role="list">
839
839
  <li class="pf-c-breadcrumb__item">
840
840
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
841
841
  </li>
@@ -888,11 +888,14 @@ wrapperTag: div
888
888
  class="pf-c-dropdown__toggle-check"
889
889
  for="-bulk-select-toggle-check"
890
890
  >
891
- <input
892
- type="checkbox"
893
- id="-bulk-select-toggle-check"
894
- aria-label="Select all"
895
- />
891
+ <div class="pf-c-check pf-m-standalone">
892
+ <input
893
+ class="pf-c-check__input"
894
+ type="checkbox"
895
+ id="-bulk-select-toggle-check"
896
+ aria-label="Select all"
897
+ />
898
+ </div>
896
899
  </label>
897
900
 
898
901
  <button
@@ -960,7 +963,7 @@ wrapperTag: div
960
963
  </div>
961
964
  </div>
962
965
  </div>
963
- <ul class="pf-c-context-selector__menu-list">
966
+ <ul class="pf-c-context-selector__menu-list" role="list">
964
967
  <li>My project</li>
965
968
  <li>OpenShift cluster</li>
966
969
  <li>Production Ansible</li>
@@ -1611,7 +1614,7 @@ wrapperTag: div
1611
1614
  </div>
1612
1615
  <section class="pf-c-app-launcher__group">
1613
1616
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
1614
- <ul>
1617
+ <ul role="list">
1615
1618
  <li
1616
1619
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1617
1620
  >
@@ -1663,7 +1666,7 @@ wrapperTag: div
1663
1666
  <hr class="pf-c-divider" />
1664
1667
  <section class="pf-c-app-launcher__group">
1665
1668
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
1666
- <ul>
1669
+ <ul role="list">
1667
1670
  <li
1668
1671
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
1669
1672
  >
@@ -2318,7 +2321,7 @@ wrapperTag: div
2318
2321
  id="data-list-actionable-example-primary-nav"
2319
2322
  aria-label="Global"
2320
2323
  >
2321
- <ul class="pf-c-nav__list">
2324
+ <ul class="pf-c-nav__list" role="list">
2322
2325
  <li class="pf-c-nav__item">
2323
2326
  <a href="#" class="pf-c-nav__link">System panel</a>
2324
2327
  </li>
@@ -2350,7 +2353,7 @@ wrapperTag: div
2350
2353
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
2351
2354
  <div class="pf-c-page__main-body">
2352
2355
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
2353
- <ol class="pf-c-breadcrumb__list">
2356
+ <ol class="pf-c-breadcrumb__list" role="list">
2354
2357
  <li class="pf-c-breadcrumb__item">
2355
2358
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
2356
2359
  </li>
@@ -2417,11 +2420,14 @@ wrapperTag: div
2417
2420
  class="pf-c-dropdown__toggle-check"
2418
2421
  for="-bulk-select-toggle-check"
2419
2422
  >
2420
- <input
2421
- type="checkbox"
2422
- id="-bulk-select-toggle-check"
2423
- aria-label="Select all"
2424
- />
2423
+ <div class="pf-c-check pf-m-standalone">
2424
+ <input
2425
+ class="pf-c-check__input"
2426
+ type="checkbox"
2427
+ id="-bulk-select-toggle-check"
2428
+ aria-label="Select all"
2429
+ />
2430
+ </div>
2425
2431
  </label>
2426
2432
 
2427
2433
  <button
@@ -2494,7 +2500,7 @@ wrapperTag: div
2494
2500
  </div>
2495
2501
  </div>
2496
2502
  </div>
2497
- <ul class="pf-c-context-selector__menu-list">
2503
+ <ul class="pf-c-context-selector__menu-list" role="list">
2498
2504
  <li>My project</li>
2499
2505
  <li>OpenShift cluster</li>
2500
2506
  <li>Production Ansible</li>
@@ -2651,11 +2657,14 @@ wrapperTag: div
2651
2657
  <div class="pf-c-data-list__item-row">
2652
2658
  <div class="pf-c-data-list__item-control">
2653
2659
  <div class="pf-c-data-list__check">
2654
- <input
2655
- type="checkbox"
2656
- name="check-action-check1"
2657
- aria-labelledby="data-list-actionable-example-data-list-item-1"
2658
- />
2660
+ <div class="pf-c-check pf-m-standalone">
2661
+ <input
2662
+ class="pf-c-check__input"
2663
+ type="checkbox"
2664
+ name="check-action-check1"
2665
+ aria-labelledby="data-list-actionable-example-data-list-item-1"
2666
+ />
2667
+ </div>
2659
2668
  </div>
2660
2669
  </div>
2661
2670
  <div class="pf-c-data-list__item-content">
@@ -2721,11 +2730,14 @@ wrapperTag: div
2721
2730
  <div class="pf-c-data-list__item-row">
2722
2731
  <div class="pf-c-data-list__item-control">
2723
2732
  <div class="pf-c-data-list__check">
2724
- <input
2725
- type="checkbox"
2726
- name="check-action-check2"
2727
- aria-labelledby="data-list-actionable-example-data-list-item-2"
2728
- />
2733
+ <div class="pf-c-check pf-m-standalone">
2734
+ <input
2735
+ class="pf-c-check__input"
2736
+ type="checkbox"
2737
+ name="check-action-check2"
2738
+ aria-labelledby="data-list-actionable-example-data-list-item-2"
2739
+ />
2740
+ </div>
2729
2741
  </div>
2730
2742
  </div>
2731
2743
  <div class="pf-c-data-list__item-content">
@@ -2815,11 +2827,14 @@ wrapperTag: div
2815
2827
  <div class="pf-c-data-list__item-row">
2816
2828
  <div class="pf-c-data-list__item-control">
2817
2829
  <div class="pf-c-data-list__check">
2818
- <input
2819
- type="checkbox"
2820
- name="check-action-check3"
2821
- aria-labelledby="data-list-actionable-example-data-list-item-3"
2822
- />
2830
+ <div class="pf-c-check pf-m-standalone">
2831
+ <input
2832
+ class="pf-c-check__input"
2833
+ type="checkbox"
2834
+ name="check-action-check3"
2835
+ aria-labelledby="data-list-actionable-example-data-list-item-3"
2836
+ />
2837
+ </div>
2823
2838
  </div>
2824
2839
  </div>
2825
2840
  <div class="pf-c-data-list__item-content">
@@ -2846,11 +2861,14 @@ wrapperTag: div
2846
2861
  <div class="pf-c-data-list__item-row">
2847
2862
  <div class="pf-c-data-list__item-control">
2848
2863
  <div class="pf-c-data-list__check">
2849
- <input
2850
- type="checkbox"
2851
- name="check-action-check4"
2852
- aria-labelledby="data-list-actionable-example-data-list-item-4"
2853
- />
2864
+ <div class="pf-c-check pf-m-standalone">
2865
+ <input
2866
+ class="pf-c-check__input"
2867
+ type="checkbox"
2868
+ name="check-action-check4"
2869
+ aria-labelledby="data-list-actionable-example-data-list-item-4"
2870
+ />
2871
+ </div>
2854
2872
  </div>
2855
2873
  </div>
2856
2874
  <div class="pf-c-data-list__item-content">
@@ -3104,7 +3122,7 @@ wrapperTag: div
3104
3122
  </div>
3105
3123
  <section class="pf-c-app-launcher__group">
3106
3124
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
3107
- <ul>
3125
+ <ul role="list">
3108
3126
  <li
3109
3127
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
3110
3128
  >
@@ -3156,7 +3174,7 @@ wrapperTag: div
3156
3174
  <hr class="pf-c-divider" />
3157
3175
  <section class="pf-c-app-launcher__group">
3158
3176
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
3159
- <ul>
3177
+ <ul role="list">
3160
3178
  <li
3161
3179
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
3162
3180
  >
@@ -3811,7 +3829,7 @@ wrapperTag: div
3811
3829
  id="data-list-expandable-example-primary-nav"
3812
3830
  aria-label="Global"
3813
3831
  >
3814
- <ul class="pf-c-nav__list">
3832
+ <ul class="pf-c-nav__list" role="list">
3815
3833
  <li class="pf-c-nav__item">
3816
3834
  <a href="#" class="pf-c-nav__link">System panel</a>
3817
3835
  </li>
@@ -3843,7 +3861,7 @@ wrapperTag: div
3843
3861
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
3844
3862
  <div class="pf-c-page__main-body">
3845
3863
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
3846
- <ol class="pf-c-breadcrumb__list">
3864
+ <ol class="pf-c-breadcrumb__list" role="list">
3847
3865
  <li class="pf-c-breadcrumb__item">
3848
3866
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
3849
3867
  </li>
@@ -3922,11 +3940,14 @@ wrapperTag: div
3922
3940
  class="pf-c-dropdown__toggle-check"
3923
3941
  for="-bulk-select-toggle-check"
3924
3942
  >
3925
- <input
3926
- type="checkbox"
3927
- id="-bulk-select-toggle-check"
3928
- aria-label="Select all"
3929
- />
3943
+ <div class="pf-c-check pf-m-standalone">
3944
+ <input
3945
+ class="pf-c-check__input"
3946
+ type="checkbox"
3947
+ id="-bulk-select-toggle-check"
3948
+ aria-label="Select all"
3949
+ />
3950
+ </div>
3930
3951
  </label>
3931
3952
 
3932
3953
  <button
@@ -3968,87 +3989,90 @@ wrapperTag: div
3968
3989
  aria-label="search filter"
3969
3990
  role="group"
3970
3991
  >
3971
- <div class="pf-c-select" style="width: 175px">
3972
- <span id="-select-name-label" hidden>Choose one</span>
3992
+ <div class="pf-c-input-group__item pf-m-fill">
3993
+ <div class="pf-c-select" style="width: 124px">
3994
+ <span id="-select-name-label" hidden>Choose one</span>
3973
3995
 
3974
- <button
3975
- class="pf-c-select__toggle"
3976
- type="button"
3977
- id="-select-name-toggle"
3978
- aria-haspopup="true"
3979
- aria-expanded="false"
3980
- aria-labelledby="-select-name-label -select-name-toggle"
3981
- >
3982
- <div class="pf-c-select__toggle-wrapper">
3983
- <span class="pf-c-select__toggle-icon">
3984
- <i class="fas fa-filter" aria-hidden="true"></i>
3996
+ <button
3997
+ class="pf-c-select__toggle"
3998
+ type="button"
3999
+ id="-select-name-toggle"
4000
+ aria-haspopup="true"
4001
+ aria-expanded="false"
4002
+ aria-labelledby="-select-name-label -select-name-toggle"
4003
+ >
4004
+ <div class="pf-c-select__toggle-wrapper">
4005
+ <span class="pf-c-select__toggle-icon">
4006
+ <i class="fas fa-filter" aria-hidden="true"></i>
4007
+ </span>
4008
+ <span class="pf-c-select__toggle-text">Name</span>
4009
+ </div>
4010
+ <span class="pf-c-select__toggle-arrow">
4011
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3985
4012
  </span>
3986
- <span class="pf-c-select__toggle-text">Name</span>
3987
- </div>
3988
- <span class="pf-c-select__toggle-arrow">
3989
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3990
- </span>
3991
- </button>
4013
+ </button>
3992
4014
 
3993
- <ul
3994
- class="pf-c-select__menu"
3995
- role="listbox"
3996
- aria-labelledby="-select-name-label"
3997
- hidden
3998
- style="width: 175px"
3999
- >
4000
- <li role="presentation">
4001
- <button
4002
- class="pf-c-select__menu-item"
4003
- role="option"
4004
- >Running</button>
4005
- </li>
4006
- <li role="presentation">
4007
- <button
4008
- class="pf-c-select__menu-item pf-m-selected"
4009
- role="option"
4010
- aria-selected="true"
4011
- >
4012
- Stopped
4013
- <span class="pf-c-select__menu-item-icon">
4014
- <i class="fas fa-check" aria-hidden="true"></i>
4015
- </span>
4016
- </button>
4017
- </li>
4018
- <li role="presentation">
4019
- <button
4020
- class="pf-c-select__menu-item"
4021
- role="option"
4022
- >Down</button>
4023
- </li>
4024
- <li role="presentation">
4025
- <button
4026
- class="pf-c-select__menu-item"
4027
- role="option"
4028
- >Degraded</button>
4029
- </li>
4030
- <li role="presentation">
4031
- <button
4032
- class="pf-c-select__menu-item"
4033
- role="option"
4034
- >Needs maintenance</button>
4035
- </li>
4036
- </ul>
4015
+ <ul
4016
+ class="pf-c-select__menu"
4017
+ role="listbox"
4018
+ aria-labelledby="-select-name-label"
4019
+ hidden
4020
+ >
4021
+ <li role="presentation">
4022
+ <button
4023
+ class="pf-c-select__menu-item"
4024
+ role="option"
4025
+ >Running</button>
4026
+ </li>
4027
+ <li role="presentation">
4028
+ <button
4029
+ class="pf-c-select__menu-item pf-m-selected"
4030
+ role="option"
4031
+ aria-selected="true"
4032
+ >
4033
+ Stopped
4034
+ <span class="pf-c-select__menu-item-icon">
4035
+ <i class="fas fa-check" aria-hidden="true"></i>
4036
+ </span>
4037
+ </button>
4038
+ </li>
4039
+ <li role="presentation">
4040
+ <button
4041
+ class="pf-c-select__menu-item"
4042
+ role="option"
4043
+ >Down</button>
4044
+ </li>
4045
+ <li role="presentation">
4046
+ <button
4047
+ class="pf-c-select__menu-item"
4048
+ role="option"
4049
+ >Degraded</button>
4050
+ </li>
4051
+ <li role="presentation">
4052
+ <button
4053
+ class="pf-c-select__menu-item"
4054
+ role="option"
4055
+ >Needs maintenance</button>
4056
+ </li>
4057
+ </ul>
4058
+ </div>
4037
4059
  </div>
4038
- <div class="pf-c-text-input-group">
4039
- <div class="pf-c-text-input-group__main pf-m-icon">
4040
- <span class="pf-c-text-input-group__text">
4041
- <span class="pf-c-text-input-group__icon">
4042
- <i class="fas fa-fw fa-search"></i>
4060
+ <div class="pf-c-input-group__item">
4061
+ <div class="pf-c-text-input-group" style="width: auto">
4062
+ <div class="pf-c-text-input-group__main pf-m-icon">
4063
+ <span class="pf-c-text-input-group__text">
4064
+ <span class="pf-c-text-input-group__icon">
4065
+ <i class="fas fa-fw fa-search"></i>
4066
+ </span>
4067
+ <input
4068
+ class="pf-c-text-input-group__text-input"
4069
+ type="search"
4070
+ placeholder="Filter by name"
4071
+ value
4072
+ aria-label="Type to filter"
4073
+ />
4043
4074
  </span>
4044
- <input
4045
- class="pf-c-text-input-group__text-input"
4046
- type="text"
4047
- value
4048
- placeholder="Filter by name"
4049
- aria-label="Type to filter"
4050
- />
4051
- </span>
4075
+ </div>
4052
4076
  </div>
4053
4077
  </div>
4054
4078
  </div>
@@ -4204,11 +4228,14 @@ wrapperTag: div
4204
4228
  </div>
4205
4229
 
4206
4230
  <div class="pf-c-data-list__check">
4207
- <input
4208
- type="checkbox"
4209
- name="check-expandable-check1"
4210
- aria-labelledby="data-list-expandable-example-data-list-item-1"
4211
- />
4231
+ <div class="pf-c-check pf-m-standalone">
4232
+ <input
4233
+ class="pf-c-check__input"
4234
+ type="checkbox"
4235
+ name="check-expandable-check1"
4236
+ aria-labelledby="data-list-expandable-example-data-list-item-1"
4237
+ />
4238
+ </div>
4212
4239
  </div>
4213
4240
  </div>
4214
4241
  <div class="pf-c-data-list__item-content">
@@ -4282,11 +4309,14 @@ wrapperTag: div
4282
4309
  <thead>
4283
4310
  <tr role="row">
4284
4311
  <td class="pf-c-table__check" role="cell">
4285
- <input
4286
- type="checkbox"
4287
- name="check-all"
4288
- aria-label="Select all rows"
4289
- />
4312
+ <div class="pf-c-check pf-m-standalone">
4313
+ <input
4314
+ class="pf-c-check__input"
4315
+ type="checkbox"
4316
+ name="check-all"
4317
+ aria-label="Select all rows"
4318
+ />
4319
+ </div>
4290
4320
  </td>
4291
4321
  <th role="columnheader" scope="col">Contributor</th>
4292
4322
  <th role="columnheader" scope="col">Position</th>
@@ -4305,11 +4335,14 @@ wrapperTag: div
4305
4335
  <tbody role="rowgroup">
4306
4336
  <tr role="row">
4307
4337
  <td class="pf-c-table__check" role="cell">
4308
- <input
4309
- type="checkbox"
4310
- name="checkrow1"
4311
- aria-labelledby="compact-table-demo-data-list-name1"
4312
- />
4338
+ <div class="pf-c-check pf-m-standalone">
4339
+ <input
4340
+ class="pf-c-check__input"
4341
+ type="checkbox"
4342
+ name="checkrow1"
4343
+ aria-labelledby="compact-table-demo-data-list-name1"
4344
+ />
4345
+ </div>
4313
4346
  </td>
4314
4347
  <td role="cell" data-label="Contributor">
4315
4348
  <span id="compact-table-demo-data-list-name1">Sam Jones</span>
@@ -4381,11 +4414,14 @@ wrapperTag: div
4381
4414
  </tr>
4382
4415
  <tr role="row">
4383
4416
  <td class="pf-c-table__check" role="cell">
4384
- <input
4385
- type="checkbox"
4386
- name="checkrow2"
4387
- aria-labelledby="compact-table-demo-data-list-name2"
4388
- />
4417
+ <div class="pf-c-check pf-m-standalone">
4418
+ <input
4419
+ class="pf-c-check__input"
4420
+ type="checkbox"
4421
+ name="checkrow2"
4422
+ aria-labelledby="compact-table-demo-data-list-name2"
4423
+ />
4424
+ </div>
4389
4425
  </td>
4390
4426
  <th role="columnheader" data-label="Contributor">
4391
4427
  <span id="compact-table-demo-data-list-name2">Amy Miller</span>
@@ -4457,11 +4493,14 @@ wrapperTag: div
4457
4493
  </tr>
4458
4494
  <tr role="row">
4459
4495
  <td class="pf-c-table__check" role="cell">
4460
- <input
4461
- type="checkbox"
4462
- name="checkrow3"
4463
- aria-labelledby="compact-table-demo-data-list-name3"
4464
- />
4496
+ <div class="pf-c-check pf-m-standalone">
4497
+ <input
4498
+ class="pf-c-check__input"
4499
+ type="checkbox"
4500
+ name="checkrow3"
4501
+ aria-labelledby="compact-table-demo-data-list-name3"
4502
+ />
4503
+ </div>
4465
4504
  </td>
4466
4505
  <th role="columnheader" data-label="Contributor">
4467
4506
  <span
@@ -4539,11 +4578,14 @@ wrapperTag: div
4539
4578
  </tr>
4540
4579
  <tr role="row">
4541
4580
  <td class="pf-c-table__check" role="cell">
4542
- <input
4543
- type="checkbox"
4544
- name="checkrow4"
4545
- aria-labelledby="compact-table-demo-data-list-name4"
4546
- />
4581
+ <div class="pf-c-check pf-m-standalone">
4582
+ <input
4583
+ class="pf-c-check__input"
4584
+ type="checkbox"
4585
+ name="checkrow4"
4586
+ aria-labelledby="compact-table-demo-data-list-name4"
4587
+ />
4588
+ </div>
4547
4589
  </td>
4548
4590
  <td role="cell" data-label="Contributor name">
4549
4591
  <span
@@ -4648,11 +4690,14 @@ wrapperTag: div
4648
4690
  </div>
4649
4691
 
4650
4692
  <div class="pf-c-data-list__check">
4651
- <input
4652
- type="checkbox"
4653
- name="check-expandable-check2"
4654
- aria-labelledby="data-list-expandable-example-data-list-item-2"
4655
- />
4693
+ <div class="pf-c-check pf-m-standalone">
4694
+ <input
4695
+ class="pf-c-check__input"
4696
+ type="checkbox"
4697
+ name="check-expandable-check2"
4698
+ aria-labelledby="data-list-expandable-example-data-list-item-2"
4699
+ />
4700
+ </div>
4656
4701
  </div>
4657
4702
  </div>
4658
4703
  <div class="pf-c-data-list__item-content">
@@ -4768,11 +4813,14 @@ wrapperTag: div
4768
4813
  </div>
4769
4814
 
4770
4815
  <div class="pf-c-data-list__check">
4771
- <input
4772
- type="checkbox"
4773
- name="check-expandable-check3"
4774
- aria-labelledby="data-list-expandable-example-data-list-item-3"
4775
- />
4816
+ <div class="pf-c-check pf-m-standalone">
4817
+ <input
4818
+ class="pf-c-check__input"
4819
+ type="checkbox"
4820
+ name="check-expandable-check3"
4821
+ aria-labelledby="data-list-expandable-example-data-list-item-3"
4822
+ />
4823
+ </div>
4776
4824
  </div>
4777
4825
  </div>
4778
4826
  <div class="pf-c-data-list__item-content">
@@ -4818,11 +4866,14 @@ wrapperTag: div
4818
4866
  </div>
4819
4867
 
4820
4868
  <div class="pf-c-data-list__check">
4821
- <input
4822
- type="checkbox"
4823
- name="check-expandable-check4"
4824
- aria-labelledby="data-list-expandable-example-data-list-item-4"
4825
- />
4869
+ <div class="pf-c-check pf-m-standalone">
4870
+ <input
4871
+ class="pf-c-check__input"
4872
+ type="checkbox"
4873
+ name="check-expandable-check4"
4874
+ aria-labelledby="data-list-expandable-example-data-list-item-4"
4875
+ />
4876
+ </div>
4826
4877
  </div>
4827
4878
  </div>
4828
4879
  <div class="pf-c-data-list__item-content">
@@ -4914,11 +4965,14 @@ wrapperTag: div
4914
4965
  </div>
4915
4966
 
4916
4967
  <div class="pf-c-data-list__check">
4917
- <input
4918
- type="checkbox"
4919
- name="check-expandable-check5"
4920
- aria-labelledby="data-list-expandable-example-data-list-item-5"
4921
- />
4968
+ <div class="pf-c-check pf-m-standalone">
4969
+ <input
4970
+ class="pf-c-check__input"
4971
+ type="checkbox"
4972
+ name="check-expandable-check5"
4973
+ aria-labelledby="data-list-expandable-example-data-list-item-5"
4974
+ />
4975
+ </div>
4922
4976
  </div>
4923
4977
  </div>
4924
4978
  <div class="pf-c-data-list__item-content">
@@ -5206,7 +5260,7 @@ wrapperTag: div
5206
5260
  </div>
5207
5261
  <section class="pf-c-app-launcher__group">
5208
5262
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
5209
- <ul>
5263
+ <ul role="list">
5210
5264
  <li
5211
5265
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
5212
5266
  >
@@ -5258,7 +5312,7 @@ wrapperTag: div
5258
5312
  <hr class="pf-c-divider" />
5259
5313
  <section class="pf-c-app-launcher__group">
5260
5314
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
5261
- <ul>
5315
+ <ul role="list">
5262
5316
  <li
5263
5317
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
5264
5318
  >
@@ -5913,7 +5967,7 @@ wrapperTag: div
5913
5967
  id="data-list-static-bottom-example-primary-nav"
5914
5968
  aria-label="Global"
5915
5969
  >
5916
- <ul class="pf-c-nav__list">
5970
+ <ul class="pf-c-nav__list" role="list">
5917
5971
  <li class="pf-c-nav__item">
5918
5972
  <a href="#" class="pf-c-nav__link">System panel</a>
5919
5973
  </li>
@@ -5945,7 +5999,7 @@ wrapperTag: div
5945
5999
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
5946
6000
  <div class="pf-c-page__main-body">
5947
6001
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
5948
- <ol class="pf-c-breadcrumb__list">
6002
+ <ol class="pf-c-breadcrumb__list" role="list">
5949
6003
  <li class="pf-c-breadcrumb__item">
5950
6004
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
5951
6005
  </li>
@@ -6012,87 +6066,90 @@ wrapperTag: div
6012
6066
  aria-label="search filter"
6013
6067
  role="group"
6014
6068
  >
6015
- <div class="pf-c-select" style="width: 175px">
6016
- <span id="-select-name-label" hidden>Choose one</span>
6069
+ <div class="pf-c-input-group__item pf-m-fill">
6070
+ <div class="pf-c-select" style="width: 124px">
6071
+ <span id="-select-name-label" hidden>Choose one</span>
6017
6072
 
6018
- <button
6019
- class="pf-c-select__toggle"
6020
- type="button"
6021
- id="-select-name-toggle"
6022
- aria-haspopup="true"
6023
- aria-expanded="false"
6024
- aria-labelledby="-select-name-label -select-name-toggle"
6025
- >
6026
- <div class="pf-c-select__toggle-wrapper">
6027
- <span class="pf-c-select__toggle-icon">
6028
- <i class="fas fa-filter" aria-hidden="true"></i>
6073
+ <button
6074
+ class="pf-c-select__toggle"
6075
+ type="button"
6076
+ id="-select-name-toggle"
6077
+ aria-haspopup="true"
6078
+ aria-expanded="false"
6079
+ aria-labelledby="-select-name-label -select-name-toggle"
6080
+ >
6081
+ <div class="pf-c-select__toggle-wrapper">
6082
+ <span class="pf-c-select__toggle-icon">
6083
+ <i class="fas fa-filter" aria-hidden="true"></i>
6084
+ </span>
6085
+ <span class="pf-c-select__toggle-text">Name</span>
6086
+ </div>
6087
+ <span class="pf-c-select__toggle-arrow">
6088
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
6029
6089
  </span>
6030
- <span class="pf-c-select__toggle-text">Name</span>
6031
- </div>
6032
- <span class="pf-c-select__toggle-arrow">
6033
- <i class="fas fa-caret-down" aria-hidden="true"></i>
6034
- </span>
6035
- </button>
6090
+ </button>
6036
6091
 
6037
- <ul
6038
- class="pf-c-select__menu"
6039
- role="listbox"
6040
- aria-labelledby="-select-name-label"
6041
- hidden
6042
- style="width: 175px"
6043
- >
6044
- <li role="presentation">
6045
- <button
6046
- class="pf-c-select__menu-item"
6047
- role="option"
6048
- >Running</button>
6049
- </li>
6050
- <li role="presentation">
6051
- <button
6052
- class="pf-c-select__menu-item pf-m-selected"
6053
- role="option"
6054
- aria-selected="true"
6055
- >
6056
- Stopped
6057
- <span class="pf-c-select__menu-item-icon">
6058
- <i class="fas fa-check" aria-hidden="true"></i>
6059
- </span>
6060
- </button>
6061
- </li>
6062
- <li role="presentation">
6063
- <button
6064
- class="pf-c-select__menu-item"
6065
- role="option"
6066
- >Down</button>
6067
- </li>
6068
- <li role="presentation">
6069
- <button
6070
- class="pf-c-select__menu-item"
6071
- role="option"
6072
- >Degraded</button>
6073
- </li>
6074
- <li role="presentation">
6075
- <button
6076
- class="pf-c-select__menu-item"
6077
- role="option"
6078
- >Needs maintenance</button>
6079
- </li>
6080
- </ul>
6092
+ <ul
6093
+ class="pf-c-select__menu"
6094
+ role="listbox"
6095
+ aria-labelledby="-select-name-label"
6096
+ hidden
6097
+ >
6098
+ <li role="presentation">
6099
+ <button
6100
+ class="pf-c-select__menu-item"
6101
+ role="option"
6102
+ >Running</button>
6103
+ </li>
6104
+ <li role="presentation">
6105
+ <button
6106
+ class="pf-c-select__menu-item pf-m-selected"
6107
+ role="option"
6108
+ aria-selected="true"
6109
+ >
6110
+ Stopped
6111
+ <span class="pf-c-select__menu-item-icon">
6112
+ <i class="fas fa-check" aria-hidden="true"></i>
6113
+ </span>
6114
+ </button>
6115
+ </li>
6116
+ <li role="presentation">
6117
+ <button
6118
+ class="pf-c-select__menu-item"
6119
+ role="option"
6120
+ >Down</button>
6121
+ </li>
6122
+ <li role="presentation">
6123
+ <button
6124
+ class="pf-c-select__menu-item"
6125
+ role="option"
6126
+ >Degraded</button>
6127
+ </li>
6128
+ <li role="presentation">
6129
+ <button
6130
+ class="pf-c-select__menu-item"
6131
+ role="option"
6132
+ >Needs maintenance</button>
6133
+ </li>
6134
+ </ul>
6135
+ </div>
6081
6136
  </div>
6082
- <div class="pf-c-text-input-group">
6083
- <div class="pf-c-text-input-group__main pf-m-icon">
6084
- <span class="pf-c-text-input-group__text">
6085
- <span class="pf-c-text-input-group__icon">
6086
- <i class="fas fa-fw fa-search"></i>
6137
+ <div class="pf-c-input-group__item">
6138
+ <div class="pf-c-text-input-group" style="width: auto">
6139
+ <div class="pf-c-text-input-group__main pf-m-icon">
6140
+ <span class="pf-c-text-input-group__text">
6141
+ <span class="pf-c-text-input-group__icon">
6142
+ <i class="fas fa-fw fa-search"></i>
6143
+ </span>
6144
+ <input
6145
+ class="pf-c-text-input-group__text-input"
6146
+ type="search"
6147
+ placeholder="Filter by name"
6148
+ value
6149
+ aria-label="Type to filter"
6150
+ />
6087
6151
  </span>
6088
- <input
6089
- class="pf-c-text-input-group__text-input"
6090
- type="text"
6091
- value
6092
- placeholder="Filter by name"
6093
- aria-label="Type to filter"
6094
- />
6095
- </span>
6152
+ </div>
6096
6153
  </div>
6097
6154
  </div>
6098
6155
  </div>