@patternfly/patternfly 6.0.0-alpha.8 → 6.0.0-alpha.81

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 (334) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-Backdrop.svg +1 -0
  3. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  4. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  5. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  6. package/assets/images/PF-IconLogo-color.svg +17 -0
  7. package/assets/images/PF-IconLogo.svg +17 -0
  8. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  9. package/assets/images/pf-background.svg +22 -0
  10. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  11. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  12. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  13. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  14. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  15. package/assets/images/pf_logo_white.hbs +35 -0
  16. package/assets/images/pf_logo_white.svg +38 -0
  17. package/base/_common.scss +8 -4
  18. package/base/_globals.scss +4 -6
  19. package/base/_variables.scss +2 -7
  20. package/base/patternfly-common.css +8 -4
  21. package/base/patternfly-globals.css +4 -3
  22. package/base/patternfly-variables.css +884 -871
  23. package/base/tokens/_tokens-charts.scss +159 -0
  24. package/base/tokens/_tokens-dark.scss +311 -287
  25. package/base/tokens/_tokens-default.scss +425 -329
  26. package/base/tokens/_tokens-font.scss +29 -36
  27. package/base/tokens/_tokens-palette.scss +71 -71
  28. package/base/tokens/_workspace-overrides.scss +7 -0
  29. package/components/AboutModalBox/about-modal-box.css +57 -94
  30. package/components/AboutModalBox/about-modal-box.scss +37 -62
  31. package/components/Accordion/accordion.css +85 -177
  32. package/components/Accordion/accordion.scss +96 -195
  33. package/components/ActionList/action-list.css +18 -17
  34. package/components/ActionList/action-list.scss +26 -16
  35. package/components/Alert/alert-group.css +20 -16
  36. package/components/Alert/alert-group.scss +20 -16
  37. package/components/Alert/alert.css +59 -84
  38. package/components/Alert/alert.scss +62 -78
  39. package/components/Avatar/avatar.css +10 -13
  40. package/components/Avatar/avatar.scss +10 -17
  41. package/components/BackToTop/back-to-top.css +17 -16
  42. package/components/BackToTop/back-to-top.scss +12 -12
  43. package/components/Backdrop/backdrop.css +6 -2
  44. package/components/Backdrop/backdrop.scss +5 -2
  45. package/components/BackgroundImage/background-image.css +5 -1
  46. package/components/BackgroundImage/background-image.scss +5 -1
  47. package/components/Badge/badge.css +23 -15
  48. package/components/Badge/badge.scss +25 -17
  49. package/components/Banner/banner.css +90 -64
  50. package/components/Banner/banner.scss +95 -32
  51. package/components/Breadcrumb/breadcrumb.css +19 -16
  52. package/components/Breadcrumb/breadcrumb.scss +18 -16
  53. package/components/Button/button.css +419 -353
  54. package/components/Button/button.scss +476 -476
  55. package/components/CalendarMonth/calendar-month.css +61 -92
  56. package/components/CalendarMonth/calendar-month.scss +68 -63
  57. package/components/Card/card.css +100 -194
  58. package/components/Card/card.scss +121 -237
  59. package/components/Check/check.css +24 -21
  60. package/components/Check/check.scss +25 -23
  61. package/components/ClipboardCopy/clipboard-copy.css +30 -33
  62. package/components/ClipboardCopy/clipboard-copy.scss +34 -26
  63. package/components/CodeBlock/code-block.css +22 -9
  64. package/components/CodeBlock/code-block.scss +22 -10
  65. package/components/CodeEditor/code-editor.css +94 -72
  66. package/components/CodeEditor/code-editor.scss +104 -82
  67. package/components/Content/content.css +7 -7
  68. package/components/Content/content.scss +7 -7
  69. package/components/DataList/data-list.css +101 -158
  70. package/components/DataList/data-list.scss +95 -154
  71. package/components/DatePicker/date-picker.css +13 -14
  72. package/components/DatePicker/date-picker.scss +12 -16
  73. package/components/DescriptionList/description-list.css +39 -34
  74. package/components/DescriptionList/description-list.scss +25 -25
  75. package/components/Divider/divider.css +91 -169
  76. package/components/Divider/divider.scss +60 -77
  77. package/components/DragDrop/drag-drop.css +18 -14
  78. package/components/DragDrop/drag-drop.scss +18 -17
  79. package/components/Drawer/drawer.css +112 -113
  80. package/components/Drawer/drawer.scss +134 -134
  81. package/components/Dropdown/dropdown.css +1 -3
  82. package/components/Dropdown/dropdown.scss +2 -6
  83. package/components/DualListSelector/dual-list-selector.css +56 -48
  84. package/components/DualListSelector/dual-list-selector.scss +57 -50
  85. package/components/EmptyState/empty-state.css +57 -34
  86. package/components/EmptyState/empty-state.scss +63 -34
  87. package/components/ExpandableSection/expandable-section.css +64 -62
  88. package/components/ExpandableSection/expandable-section.scss +73 -76
  89. package/components/FileUpload/file-upload.css +28 -34
  90. package/components/FileUpload/file-upload.scss +30 -42
  91. package/components/Form/form.css +68 -114
  92. package/components/Form/form.scss +65 -126
  93. package/components/FormControl/form-control.css +86 -111
  94. package/components/FormControl/form-control.scss +88 -92
  95. package/components/HelperText/helper-text.css +28 -34
  96. package/components/HelperText/helper-text.scss +30 -40
  97. package/components/Hint/hint.css +28 -21
  98. package/components/Hint/hint.scss +28 -24
  99. package/components/Icon/icon.css +154 -18
  100. package/components/Icon/icon.scss +187 -20
  101. package/components/InlineEdit/inline-edit.css +8 -7
  102. package/components/InlineEdit/inline-edit.scss +8 -7
  103. package/components/InputGroup/input-group.css +22 -38
  104. package/components/InputGroup/input-group.scss +21 -29
  105. package/components/JumpLinks/jump-links.css +34 -34
  106. package/components/JumpLinks/jump-links.scss +35 -36
  107. package/components/Label/label-group.css +39 -44
  108. package/components/Label/label-group.scss +39 -45
  109. package/components/Label/label.css +380 -355
  110. package/components/Label/label.scss +434 -348
  111. package/components/List/list.css +16 -16
  112. package/components/List/list.scss +17 -17
  113. package/components/Login/login.css +70 -97
  114. package/components/Login/login.scss +56 -64
  115. package/components/Masthead/masthead.css +261 -502
  116. package/components/Masthead/masthead.scss +123 -286
  117. package/components/Menu/menu.css +3 -0
  118. package/components/Menu/menu.scss +7 -3
  119. package/components/MenuToggle/menu-toggle.css +8 -8
  120. package/components/MenuToggle/menu-toggle.scss +8 -10
  121. package/components/ModalBox/modal-box.css +59 -52
  122. package/components/ModalBox/modal-box.scss +57 -53
  123. package/components/MultipleFileUpload/multiple-file-upload.css +77 -50
  124. package/components/MultipleFileUpload/multiple-file-upload.scss +82 -53
  125. package/components/Nav/nav.css +240 -918
  126. package/components/Nav/nav.scss +300 -1082
  127. package/components/NotificationBadge/notification-badge.css +56 -81
  128. package/components/NotificationBadge/notification-badge.scss +60 -97
  129. package/components/NotificationDrawer/notification-drawer.css +104 -115
  130. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  131. package/components/NumberInput/number-input.css +8 -8
  132. package/components/NumberInput/number-input.scss +7 -12
  133. package/components/OverflowMenu/overflow-menu.css +17 -47
  134. package/components/OverflowMenu/overflow-menu.scss +27 -65
  135. package/components/Page/page.css +56 -164
  136. package/components/Page/page.scss +60 -154
  137. package/components/Pagination/pagination.css +57 -124
  138. package/components/Pagination/pagination.scss +40 -128
  139. package/components/Panel/panel.css +27 -23
  140. package/components/Panel/panel.scss +29 -26
  141. package/components/Popover/popover.css +42 -53
  142. package/components/Popover/popover.scss +46 -55
  143. package/components/Progress/progress.css +31 -45
  144. package/components/Progress/progress.scss +36 -55
  145. package/components/ProgressStepper/progress-stepper.css +72 -69
  146. package/components/ProgressStepper/progress-stepper.scss +65 -65
  147. package/components/Radio/radio.css +27 -20
  148. package/components/Radio/radio.scss +28 -22
  149. package/components/Sidebar/sidebar.css +20 -9
  150. package/components/Sidebar/sidebar.scss +23 -11
  151. package/components/SimpleList/simple-list.css +35 -52
  152. package/components/SimpleList/simple-list.scss +41 -51
  153. package/components/Skeleton/skeleton.css +18 -20
  154. package/components/Skeleton/skeleton.scss +17 -21
  155. package/components/SkipToContent/skip-to-content.css +6 -3
  156. package/components/SkipToContent/skip-to-content.scss +8 -6
  157. package/components/Slider/slider.css +34 -30
  158. package/components/Slider/slider.scss +46 -43
  159. package/components/Spinner/spinner.css +17 -34
  160. package/components/Spinner/spinner.scss +19 -47
  161. package/components/Switch/switch.css +42 -38
  162. package/components/Switch/switch.scss +48 -43
  163. package/components/TabContent/tab-content.css +17 -11
  164. package/components/TabContent/tab-content.scss +18 -14
  165. package/components/Table/table-grid.css +29 -45
  166. package/components/Table/table-grid.scss +40 -53
  167. package/components/Table/table-scrollable.css +6 -6
  168. package/components/Table/table-scrollable.scss +8 -8
  169. package/components/Table/table-tree-view.css +76 -74
  170. package/components/Table/table-tree-view.scss +44 -39
  171. package/components/Table/table.css +67 -93
  172. package/components/Table/table.scss +83 -105
  173. package/components/Tabs/tabs.css +143 -175
  174. package/components/Tabs/tabs.scss +159 -217
  175. package/components/Tile/tile.css +40 -81
  176. package/components/Tile/tile.scss +38 -84
  177. package/components/Timestamp/timestamp.css +12 -9
  178. package/components/Timestamp/timestamp.scss +11 -10
  179. package/components/Title/title.css +70 -19
  180. package/components/Title/title.scss +90 -20
  181. package/components/ToggleGroup/toggle-group.css +54 -48
  182. package/components/ToggleGroup/toggle-group.scss +62 -50
  183. package/components/Toolbar/toolbar.css +2527 -1031
  184. package/components/Toolbar/toolbar.scss +233 -520
  185. package/components/Tooltip/tooltip.css +16 -18
  186. package/components/Tooltip/tooltip.scss +20 -24
  187. package/components/TreeView/tree-view.css +76 -97
  188. package/components/TreeView/tree-view.scss +82 -113
  189. package/components/Truncate/truncate.css +4 -0
  190. package/components/Truncate/truncate.scss +3 -0
  191. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  192. package/docs/components/Accordion/examples/Accordion.md +614 -416
  193. package/docs/components/ActionList/examples/ActionList.md +73 -22
  194. package/docs/components/Alert/examples/Alert.md +3 -3
  195. package/docs/components/Avatar/examples/Avatar.md +5 -19
  196. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  197. package/docs/components/Badge/examples/Badge.md +21 -0
  198. package/docs/components/Banner/examples/Banner.md +48 -25
  199. package/docs/components/Brand/examples/Brand.css +12 -0
  200. package/docs/components/Brand/examples/Brand.md +51 -32
  201. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  202. package/docs/components/Button/examples/Button.css +4 -0
  203. package/docs/components/Button/examples/Button.md +1419 -93
  204. package/docs/components/CalendarMonth/examples/CalendarMonth.md +48 -224
  205. package/docs/components/Card/examples/Card.md +550 -133
  206. package/docs/components/Check/examples/Check.md +1 -0
  207. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  208. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  209. package/docs/components/Content/examples/Content.md +5 -5
  210. package/docs/components/DatePicker/examples/DatePicker.md +5 -2
  211. package/docs/components/Divider/examples/Divider.css +3 -1
  212. package/docs/components/Divider/examples/Divider.md +30 -5
  213. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  214. package/docs/components/Drawer/examples/Drawer.md +294 -256
  215. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  216. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  217. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  218. package/docs/components/Form/examples/Form.md +134 -89
  219. package/docs/components/Icon/examples/Icon.md +82 -11
  220. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  221. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  222. package/docs/components/Label/examples/Label.css +4 -0
  223. package/docs/components/Label/examples/Label.md +3090 -703
  224. package/docs/components/LogViewer/examples/LogViewer.md +180 -180
  225. package/docs/components/Login/examples/Login.md +10 -5
  226. package/docs/components/Masthead/examples/masthead.md +443 -65
  227. package/docs/components/Menu/examples/Menu.md +507 -473
  228. package/docs/components/MenuToggle/examples/MenuToggle.md +106 -114
  229. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  230. package/docs/components/Nav/examples/Navigation.css +1 -23
  231. package/docs/components/Nav/examples/Navigation.md +209 -356
  232. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  233. package/docs/components/Page/examples/Page.css +0 -8
  234. package/docs/components/Page/examples/Page.md +22 -21
  235. package/docs/components/Pagination/examples/Pagination.md +663 -637
  236. package/docs/components/Panel/examples/Panel.md +12 -0
  237. package/docs/components/Popover/examples/Popover.md +1 -1
  238. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  239. package/docs/components/Radio/examples/Radio.md +1 -1
  240. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  241. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  242. package/docs/components/TabContent/examples/TabContent.md +10 -10
  243. package/docs/components/Table/examples/Table.md +8 -8
  244. package/docs/components/Tabs/examples/Tabs.css +1 -1
  245. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  246. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  247. package/docs/components/Tile/examples/Tile.md +264 -144
  248. package/docs/components/Title/examples/Title.md +18 -0
  249. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  250. package/docs/components/Toolbar/examples/Toolbar.md +985 -3355
  251. package/docs/components/TreeView/examples/TreeView.md +7 -57
  252. package/docs/components/Truncate/examples/Truncate.css +2 -2
  253. package/docs/demos/AboutModal/examples/AboutModal.md +104 -31
  254. package/docs/demos/Alert/examples/Alert.md +330 -87
  255. package/docs/demos/BackToTop/examples/BackToTop.md +102 -29
  256. package/docs/demos/Banner/examples/Banner.md +211 -60
  257. package/docs/demos/Card/examples/Card.md +2 -2
  258. package/docs/demos/CardView/examples/CardView.md +241 -187
  259. package/docs/demos/ContextSelector/examples/ContextSelector.md +377 -94
  260. package/docs/demos/Dashboard/examples/Dashboard.md +102 -29
  261. package/docs/demos/DataList/examples/DataList.md +999 -938
  262. package/docs/demos/DescriptionList/examples/DescriptionList.md +306 -87
  263. package/docs/demos/Drawer/examples/Drawer.md +640 -251
  264. package/docs/demos/Form/examples/BasicForms.md +138 -84
  265. package/docs/demos/JumpLinks/examples/JumpLinks.md +917 -385
  266. package/docs/demos/Masthead/examples/Masthead.md +786 -342
  267. package/docs/demos/Modal/examples/Modal.md +645 -198
  268. package/docs/demos/Nav/examples/Nav.md +691 -902
  269. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +515 -145
  270. package/docs/demos/Page/examples/Page.md +942 -273
  271. package/docs/demos/Page/examples/Penta.md +66 -26
  272. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  273. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  274. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1183 -832
  275. package/docs/demos/Skeleton/examples/Skeleton.md +102 -29
  276. package/docs/demos/Table/examples/Table.md +3811 -3456
  277. package/docs/demos/Tabs/examples/Tabs.md +636 -194
  278. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  279. package/docs/demos/Toolbar/examples/Toolbar.md +1316 -1478
  280. package/docs/demos/Wizard/examples/Wizard.md +918 -261
  281. package/docs/layouts/Flex/examples/Flex.md +11 -11
  282. package/package.json +32 -32
  283. package/patternfly-base-no-globals-theme-dark-unversioned.css +897 -880
  284. package/patternfly-base-no-globals.css +897 -880
  285. package/patternfly-base-theme-dark-unversioned.css +890 -872
  286. package/patternfly-base.css +890 -872
  287. package/patternfly-no-globals.css +8107 -8027
  288. package/patternfly-theme-dark-unversioned.css +8111 -8030
  289. package/patternfly.css +8111 -8030
  290. package/patternfly.min.css +1 -1
  291. package/patternfly.min.css.map +1 -1
  292. package/sass-utilities/mixins.scss +18 -0
  293. package/base/themes/dark/_variables.scss +0 -102
  294. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  295. package/components/Accordion/themes/dark/accordion.scss +0 -9
  296. package/components/Alert/themes/dark/alert.scss +0 -17
  297. package/components/Badge/themes/dark/badge.scss +0 -9
  298. package/components/Banner/themes/dark/banner.scss +0 -14
  299. package/components/Button/themes/dark/button.scss +0 -51
  300. package/components/CalendarMonth/themes/dark/calendar-month.scss +0 -37
  301. package/components/Card/themes/dark/card.scss +0 -20
  302. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  303. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
  304. package/components/DataList/themes/dark/data-list.scss +0 -10
  305. package/components/DatePicker/themes/dark/date-picker.scss +0 -8
  306. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  307. package/components/Drawer/themes/dark/drawer.scss +0 -13
  308. package/components/DualListSelector/themes/dark/dual-list-selector.scss +0 -9
  309. package/components/Form/themes/dark/form.scss +0 -7
  310. package/components/FormControl/themes/dark/form-control.scss +0 -24
  311. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  312. package/components/Hint/themes/dark/hint.scss +0 -8
  313. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  314. package/components/Label/themes/dark/label.scss +0 -53
  315. package/components/Login/themes/dark/login.scss +0 -12
  316. package/components/Masthead/themes/dark/masthead.scss +0 -14
  317. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  318. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  319. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  320. package/components/Page/themes/dark/page.scss +0 -69
  321. package/components/Pagination/themes/dark/pagination.scss +0 -7
  322. package/components/Panel/themes/dark/panel.scss +0 -7
  323. package/components/Popover/themes/dark/popover.scss +0 -11
  324. package/components/Progress/themes/dark/progress.scss +0 -9
  325. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  326. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  327. package/components/Switch/themes/dark/switch.scss +0 -11
  328. package/components/Tabs/themes/dark/tabs.scss +0 -10
  329. package/components/Tile/themes/dark/tile.scss +0 -10
  330. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  331. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  332. package/components/TreeView/themes/dark/tree-view.scss +0 -8
  333. package/docs/components/Avatar/examples/Avatar.css +0 -3
  334. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/docs/components/Nav/examples/Navigation.md CHANGED
@@ -50,6 +50,7 @@ cssPrefix: pf-v5-c-nav
50
50
  </li>
51
51
  </ul>
52
52
  </section>
53
+
53
54
  <section class="pf-v5-c-nav__section" aria-labelledby="grouped-title2">
54
55
  <h2 class="pf-v5-c-nav__section-title" id="grouped-title2">Section title 2</h2>
55
56
  <ul class="pf-v5-c-nav__list" role="list">
@@ -90,6 +91,7 @@ cssPrefix: pf-v5-c-nav
90
91
  </ul>
91
92
  </section>
92
93
  <hr class="pf-v5-c-divider" />
94
+
93
95
  <section class="pf-v5-c-nav__section" aria-label="Section two">
94
96
  <ul class="pf-v5-c-nav__list" role="list">
95
97
  <li class="pf-v5-c-nav__item">
@@ -116,11 +118,11 @@ cssPrefix: pf-v5-c-nav
116
118
  ```html
117
119
  <nav class="pf-v5-c-nav" aria-label="Global">
118
120
  <ul class="pf-v5-c-nav__list" role="list">
119
- <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
121
+ <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
120
122
  <button
121
123
  class="pf-v5-c-nav__link"
122
- id="expandable-example1"
123
124
  aria-expanded="true"
125
+ id="expandable-example1"
124
126
  >
125
127
  Link 1 (current and expanded example)
126
128
  <span class="pf-v5-c-nav__toggle">
@@ -137,7 +139,6 @@ cssPrefix: pf-v5-c-nav
137
139
  <li class="pf-v5-c-nav__item">
138
140
  <a href="#" class="pf-v5-c-nav__link">Current link</a>
139
141
  </li>
140
- <li class="pf-v5-c-divider" role="separator"></li>
141
142
  <li class="pf-v5-c-nav__item">
142
143
  <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
143
144
  </li>
@@ -154,8 +155,8 @@ cssPrefix: pf-v5-c-nav
154
155
  <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
155
156
  <button
156
157
  class="pf-v5-c-nav__link"
157
- id="expandable-example2"
158
158
  aria-expanded="true"
159
+ id="expandable-example2"
159
160
  >
160
161
  Link 2 (expanded, but not current example)
161
162
  <span
@@ -183,8 +184,8 @@ cssPrefix: pf-v5-c-nav
183
184
  <li class="pf-v5-c-nav__item pf-m-expandable">
184
185
  <button
185
186
  class="pf-v5-c-nav__link"
186
- id="expandable-example3"
187
187
  aria-expanded="false"
188
+ id="expandable-example3"
188
189
  >
189
190
  Link 3
190
191
  <span class="pf-v5-c-nav__toggle">
@@ -218,7 +219,7 @@ cssPrefix: pf-v5-c-nav
218
219
  ```html
219
220
  <nav class="pf-v5-c-nav" aria-label="Global">
220
221
  <ul class="pf-v5-c-nav__list" role="list">
221
- <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
222
+ <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
222
223
  <button class="pf-v5-c-nav__link" aria-expanded="true">
223
224
  Link 1
224
225
  <span class="pf-v5-c-nav__toggle">
@@ -228,10 +229,6 @@ cssPrefix: pf-v5-c-nav
228
229
  </span>
229
230
  </button>
230
231
  <section class="pf-v5-c-nav__subnav" aria-labelledby="subnav-title1">
231
- <h2
232
- class="pf-v5-c-nav__subnav-title pf-v5-screen-reader"
233
- id="subnav-title1"
234
- >Current and expanded example sub-navigation</h2>
235
232
  <ul class="pf-v5-c-nav__list" role="list">
236
233
  <li class="pf-v5-c-nav__item">
237
234
  <a href="#" class="pf-v5-c-nav__link">Current link</a>
@@ -259,10 +256,6 @@ cssPrefix: pf-v5-c-nav
259
256
  </span>
260
257
  </button>
261
258
  <section class="pf-v5-c-nav__subnav" aria-labelledby="subnav-title2">
262
- <h2
263
- class="pf-v5-c-nav__subnav-title pf-v5-screen-reader"
264
- id="subnav-title2"
265
- >Expanded, but not current example sub-navigation</h2>
266
259
  <ul class="pf-v5-c-nav__list" role="list">
267
260
  <li class="pf-v5-c-nav__item">
268
261
  <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
@@ -289,8 +282,8 @@ cssPrefix: pf-v5-c-nav
289
282
  <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
290
283
  <button
291
284
  class="pf-v5-c-nav__link"
292
- id="nav-mixed-link2"
293
285
  aria-expanded="true"
286
+ id="nav-mixed-link2"
294
287
  >
295
288
  Link 2 (expanded, but not current example)
296
289
  <span
@@ -312,11 +305,11 @@ cssPrefix: pf-v5-c-nav
312
305
  </ul>
313
306
  </section>
314
307
  </li>
315
- <li class="pf-v5-c-nav__item pf-m-expandable pf-m-current">
308
+ <li class="pf-v5-c-nav__item pf-m-expandable">
316
309
  <button
317
310
  class="pf-v5-c-nav__link"
318
- id="nav-mixed-link4"
319
311
  aria-expanded="false"
312
+ id="nav-mixed-link4"
320
313
  >
321
314
  Link 3 (current, but not expanded example)
322
315
  <span
@@ -362,7 +355,7 @@ cssPrefix: pf-v5-c-nav
362
355
  <li class="pf-v5-c-nav__item">
363
356
  <a href="#" class="pf-v5-c-nav__link">Clusters</a>
364
357
  </li>
365
- <li class="pf-v5-c-nav__item pf-m-current">
358
+ <li class="pf-v5-c-nav__item">
366
359
  <a href="#" class="pf-v5-c-nav__link">Overview</a>
367
360
  </li>
368
361
  <li class="pf-v5-c-nav__item">
@@ -371,8 +364,8 @@ cssPrefix: pf-v5-c-nav
371
364
  <li class="pf-v5-c-nav__item pf-m-expandable">
372
365
  <button
373
366
  class="pf-v5-c-nav__link"
374
- id="expandable-third-level-example-example-1"
375
367
  aria-expanded="false"
368
+ id="expandable-third-level-example-example-1"
376
369
  >
377
370
  Subscriptions
378
371
  <span class="pf-v5-c-nav__toggle">
@@ -399,8 +392,8 @@ cssPrefix: pf-v5-c-nav
399
392
  <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
400
393
  <button
401
394
  class="pf-v5-c-nav__link"
402
- id="expandable-third-level-example-example-2"
403
395
  aria-expanded="true"
396
+ id="expandable-third-level-example-example-2"
404
397
  >
405
398
  Cost management
406
399
  <span class="pf-v5-c-nav__toggle">
@@ -423,8 +416,8 @@ cssPrefix: pf-v5-c-nav
423
416
  <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
424
417
  <button
425
418
  class="pf-v5-c-nav__link"
426
- id="expandable-third-level-example-sub-example-1"
427
419
  aria-expanded="true"
420
+ id="-sub-example-1"
428
421
  >
429
422
  Public clouds
430
423
  <span class="pf-v5-c-nav__toggle">
@@ -435,7 +428,7 @@ cssPrefix: pf-v5-c-nav
435
428
  </button>
436
429
  <section
437
430
  class="pf-v5-c-nav__subnav"
438
- aria-labelledby="expandable-third-level-example-sub-example-1"
431
+ aria-labelledby="-sub-example-1"
439
432
  >
440
433
  <ul class="pf-v5-c-nav__list" role="list">
441
434
  <li class="pf-v5-c-nav__item">
@@ -471,9 +464,6 @@ cssPrefix: pf-v5-c-nav
471
464
 
472
465
  ```html
473
466
  <nav class="pf-v5-c-nav pf-m-horizontal" aria-label="Global">
474
- <button class="pf-v5-c-nav__scroll-button" disabled aria-label="Scroll left">
475
- <i class="fas fa-angle-left" aria-hidden="true"></i>
476
- </button>
477
467
  <ul class="pf-v5-c-nav__list" role="list">
478
468
  <li class="pf-v5-c-nav__item">
479
469
  <a
@@ -489,9 +479,6 @@ cssPrefix: pf-v5-c-nav
489
479
  <a href="#" class="pf-v5-c-nav__link">Item 3</a>
490
480
  </li>
491
481
  </ul>
492
- <button class="pf-v5-c-nav__scroll-button" disabled aria-label="Scroll right">
493
- <i class="fas fa-angle-right" aria-hidden="true"></i>
494
- </button>
495
482
  </nav>
496
483
 
497
484
  ```
@@ -499,10 +486,18 @@ cssPrefix: pf-v5-c-nav
499
486
  ### Horizontal overflow
500
487
 
501
488
  ```html
502
- <nav class="pf-v5-c-nav pf-m-horizontal pf-m-scrollable" aria-label="Global">
503
- <button class="pf-v5-c-nav__scroll-button" disabled aria-label="Scroll left">
504
- <i class="fas fa-angle-left" aria-hidden="true"></i>
505
- </button>
489
+ <nav class="pf-v5-c-nav pf-m-scrollable pf-m-horizontal" aria-label="Global">
490
+ <div class="pf-v5-c-nav__scroll-button">
491
+ <button
492
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
493
+ type="button"
494
+ aria-label="Scroll start"
495
+ >
496
+ <span class="pf-v5-c-button__icon">
497
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
498
+ </span>
499
+ </button>
500
+ </div>
506
501
  <ul class="pf-v5-c-nav__list" role="list">
507
502
  <li class="pf-v5-c-nav__item">
508
503
  <a href="#" class="pf-v5-c-nav__link">Horizontal nav item 1</a>
@@ -524,9 +519,17 @@ cssPrefix: pf-v5-c-nav
524
519
  >Horizontal nav item 5</a>
525
520
  </li>
526
521
  </ul>
527
- <button class="pf-v5-c-nav__scroll-button" aria-label="Scroll right">
528
- <i class="fas fa-angle-right" aria-hidden="true"></i>
529
- </button>
522
+ <div class="pf-v5-c-nav__scroll-button">
523
+ <button
524
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
525
+ type="button"
526
+ aria-label="Scroll end"
527
+ >
528
+ <span class="pf-v5-c-button__icon">
529
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
530
+ </span>
531
+ </button>
532
+ </div>
530
533
  </nav>
531
534
 
532
535
  ```
@@ -534,7 +537,7 @@ cssPrefix: pf-v5-c-nav
534
537
  ### Horizontal subnav
535
538
 
536
539
  ```html
537
- <nav class="pf-v5-c-nav pf-m-horizontal-subnav" aria-label="Local">
540
+ <nav class="pf-v5-c-nav pf-m-horizontal pf-m-subnav" aria-label="Local">
538
541
  <ul class="pf-v5-c-nav__list" role="list">
539
542
  <li class="pf-v5-c-nav__item">
540
543
  <a
@@ -558,12 +561,20 @@ cssPrefix: pf-v5-c-nav
558
561
 
559
562
  ```html
560
563
  <nav
561
- class="pf-v5-c-nav pf-m-horizontal-subnav pf-m-scrollable"
564
+ class="pf-v5-c-nav pf-m-scrollable pf-m-horizontal pf-m-subnav"
562
565
  aria-label="Global"
563
566
  >
564
- <button class="pf-v5-c-nav__scroll-button" disabled aria-label="Scroll left">
565
- <i class="fas fa-angle-left" aria-hidden="true"></i>
566
- </button>
567
+ <div class="pf-v5-c-nav__scroll-button">
568
+ <button
569
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
570
+ type="button"
571
+ aria-label="Scroll start"
572
+ >
573
+ <span class="pf-v5-c-button__icon">
574
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
575
+ </span>
576
+ </button>
577
+ </div>
567
578
  <ul class="pf-v5-c-nav__list" role="list">
568
579
  <li class="pf-v5-c-nav__item">
569
580
  <a href="#" class="pf-v5-c-nav__link">Horizontal nav item 1</a>
@@ -585,201 +596,17 @@ cssPrefix: pf-v5-c-nav
585
596
  >Horizontal nav item 5</a>
586
597
  </li>
587
598
  </ul>
588
- <button class="pf-v5-c-nav__scroll-button" aria-label="Scroll right">
589
- <i class="fas fa-angle-right" aria-hidden="true"></i>
590
- </button>
591
- </nav>
592
-
593
- ```
594
-
595
- ### Tertiary
596
-
597
- ```html isDeprecated
598
- <nav class="pf-v5-c-nav pf-m-tertiary" aria-label="Local">
599
- <button class="pf-v5-c-nav__scroll-button" disabled aria-label="Scroll left">
600
- <i class="fas fa-angle-left" aria-hidden="true"></i>
601
- </button>
602
- <ul class="pf-v5-c-nav__list" role="list">
603
- <li class="pf-v5-c-nav__item">
604
- <a
605
- href="#"
606
- class="pf-v5-c-nav__link pf-m-current"
607
- aria-current="page"
608
- >Item 1</a>
609
- </li>
610
- <li class="pf-v5-c-nav__item">
611
- <a href="#" class="pf-v5-c-nav__link">Item 2</a>
612
- </li>
613
- <li class="pf-v5-c-nav__item">
614
- <a href="#" class="pf-v5-c-nav__link">Item 3</a>
615
- </li>
616
- </ul>
617
- <button class="pf-v5-c-nav__scroll-button" disabled aria-label="Scroll right">
618
- <i class="fas fa-angle-right" aria-hidden="true"></i>
619
- </button>
620
- </nav>
621
-
622
- ```
623
-
624
- ### Tertiary overflow
625
-
626
- ```html isDeprecated
627
- <nav class="pf-v5-c-nav pf-m-tertiary pf-m-scrollable" aria-label="Local">
628
- <button class="pf-v5-c-nav__scroll-button" disabled aria-label="Scroll left">
629
- <i class="fas fa-angle-left" aria-hidden="true"></i>
630
- </button>
631
- <ul class="pf-v5-c-nav__list" role="list">
632
- <li class="pf-v5-c-nav__item">
633
- <a
634
- href="#"
635
- class="pf-v5-c-nav__link pf-m-current"
636
- aria-current="page"
637
- >Tertiary nav item 1</a>
638
- </li>
639
- <li class="pf-v5-c-nav__item">
640
- <a href="#" class="pf-v5-c-nav__link">Tertiary nav item 2</a>
641
- </li>
642
- <li class="pf-v5-c-nav__item">
643
- <a href="#" class="pf-v5-c-nav__link">Tertiary nav item 3</a>
644
- </li>
645
- <li class="pf-v5-c-nav__item">
646
- <a href="#" class="pf-v5-c-nav__link">Tertiary nav item 4</a>
647
- </li>
648
- <li class="pf-v5-c-nav__item">
649
- <a href="#" class="pf-v5-c-nav__link">Tertiary nav item 5</a>
650
- </li>
651
- </ul>
652
- <button class="pf-v5-c-nav__scroll-button" aria-label="Scroll right">
653
- <i class="fas fa-angle-right" aria-hidden="true"></i>
654
- </button>
655
- </nav>
656
-
657
- ```
658
-
659
- ### Default in light mode
660
-
661
- ```html isDeprecated
662
- <nav class="pf-v5-c-nav pf-m-light" aria-label="Global">
663
- <ul class="pf-v5-c-nav__list" role="list">
664
- <li class="pf-v5-c-nav__item">
665
- <a href="#" class="pf-v5-c-nav__link">Current link</a>
666
- </li>
667
- <li class="pf-v5-c-nav__item">
668
- <a
669
- href="#"
670
- class="pf-v5-c-nav__link pf-m-current"
671
- aria-current="page"
672
- >Link 2</a>
673
- </li>
674
- <li class="pf-v5-c-nav__item">
675
- <a href="#" class="pf-v5-c-nav__link">Link 3</a>
676
- </li>
677
- <li class="pf-v5-c-nav__item">
678
- <a href="#" class="pf-v5-c-nav__link">Link 4</a>
679
- </li>
680
- </ul>
681
- </nav>
682
-
683
- ```
684
-
685
- ### Expanded in light mode
686
-
687
- ```html isDeprecated
688
- <nav class="pf-v5-c-nav pf-m-light" aria-label="Global">
689
- <ul class="pf-v5-c-nav__list" role="list">
690
- <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
691
- <button
692
- class="pf-v5-c-nav__link"
693
- id="expandable-light-example1"
694
- aria-expanded="true"
695
- >
696
- Link 1 (current and expanded example)
697
- <span class="pf-v5-c-nav__toggle">
698
- <span class="pf-v5-c-nav__toggle-icon">
699
- <i class="fas fa-angle-right" aria-hidden="true"></i>
700
- </span>
701
- </span>
702
- </button>
703
- <section
704
- class="pf-v5-c-nav__subnav"
705
- aria-labelledby="expandable-light-example1"
706
- >
707
- <ul class="pf-v5-c-nav__list" role="list">
708
- <li class="pf-v5-c-nav__item">
709
- <a href="#" class="pf-v5-c-nav__link">Current link</a>
710
- </li>
711
- <li class="pf-v5-c-divider" role="separator"></li>
712
- <li class="pf-v5-c-nav__item">
713
- <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
714
- </li>
715
- <li class="pf-v5-c-nav__item">
716
- <a
717
- href="#"
718
- class="pf-v5-c-nav__link pf-m-current"
719
- aria-current="page"
720
- >Subnav link 3</a>
721
- </li>
722
- </ul>
723
- </section>
724
- </li>
725
- <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
726
- <button
727
- class="pf-v5-c-nav__link"
728
- id="expandable-light-example2"
729
- aria-expanded="true"
730
- >
731
- Link 2 (expanded, but not current example)
732
- <span
733
- class="pf-v5-c-nav__toggle"
734
- >
735
- <span class="pf-v5-c-nav__toggle-icon">
736
- <i class="fas fa-angle-right" aria-hidden="true"></i>
737
- </span>
738
- </span>
739
- </button>
740
- <section
741
- class="pf-v5-c-nav__subnav"
742
- aria-labelledby="expandable-light-example2"
743
- >
744
- <ul class="pf-v5-c-nav__list" role="list">
745
- <li class="pf-v5-c-nav__item">
746
- <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
747
- </li>
748
- <li class="pf-v5-c-nav__item">
749
- <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
750
- </li>
751
- </ul>
752
- </section>
753
- </li>
754
- <li class="pf-v5-c-nav__item pf-m-expandable">
755
- <button
756
- class="pf-v5-c-nav__link"
757
- id="expandable-light-example3"
758
- aria-expanded="false"
759
- >
760
- Link 3
761
- <span class="pf-v5-c-nav__toggle">
762
- <span class="pf-v5-c-nav__toggle-icon">
763
- <i class="fas fa-angle-right" aria-hidden="true"></i>
764
- </span>
765
- </span>
766
- </button>
767
- <section
768
- class="pf-v5-c-nav__subnav"
769
- aria-labelledby="expandable-light-example3"
770
- hidden
771
- >
772
- <ul class="pf-v5-c-nav__list" role="list">
773
- <li class="pf-v5-c-nav__item">
774
- <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
775
- </li>
776
- <li class="pf-v5-c-nav__item">
777
- <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
778
- </li>
779
- </ul>
780
- </section>
781
- </li>
782
- </ul>
599
+ <div class="pf-v5-c-nav__scroll-button">
600
+ <button
601
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
602
+ type="button"
603
+ aria-label="Scroll end"
604
+ >
605
+ <span class="pf-v5-c-button__icon">
606
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
607
+ </span>
608
+ </button>
609
+ </div>
783
610
  </nav>
784
611
 
785
612
  ```
@@ -801,7 +628,8 @@ cssPrefix: pf-v5-c-nav
801
628
  <li class="pf-v5-c-nav__item pf-m-flyout">
802
629
  <a
803
630
  href="#"
804
- class="pf-v5-c-nav__link pf-m-hover"
631
+ class="pf-v5-c-nav__link pf-m-current"
632
+ aria-current="page"
805
633
  aria-haspopup="true"
806
634
  aria-expanded="true"
807
635
  >
@@ -830,14 +658,14 @@ cssPrefix: pf-v5-c-nav
830
658
  <div class="pf-v5-c-menu pf-m-flyout pf-m-nav">
831
659
  <div class="pf-v5-c-menu__content">
832
660
  <ul class="pf-v5-c-menu__list" role="menu">
833
- <li class="pf-v5-c-menu__list-item" role="none">
661
+ <li class="pf-v5-c-menu__list-item" role="group">
834
662
  <a class="pf-v5-c-menu__item" href="#" role="menuitem">
835
663
  <span class="pf-v5-c-menu__item-main">
836
664
  <span class="pf-v5-c-menu__item-text">Container platform</span>
837
665
  </span>
838
666
  </a>
839
667
  </li>
840
- <li class="pf-v5-c-menu__list-item" role="none">
668
+ <li class="pf-v5-c-menu__list-item" role="group">
841
669
  <button
842
670
  class="pf-v5-c-menu__item"
843
671
  type="button"
@@ -854,21 +682,21 @@ cssPrefix: pf-v5-c-nav
854
682
  <div class="pf-v5-c-menu">
855
683
  <div class="pf-v5-c-menu__content">
856
684
  <ul class="pf-v5-c-menu__list" role="menu">
857
- <li class="pf-v5-c-menu__list-item" role="none">
685
+ <li class="pf-v5-c-menu__list-item" role="group">
858
686
  <a class="pf-v5-c-menu__item" href="#" role="menuitem">
859
687
  <span class="pf-v5-c-menu__item-main">
860
688
  <span class="pf-v5-c-menu__item-text">Dedicated (Annual)</span>
861
689
  </span>
862
690
  </a>
863
691
  </li>
864
- <li class="pf-v5-c-menu__list-item" role="none">
692
+ <li class="pf-v5-c-menu__list-item" role="group">
865
693
  <a class="pf-v5-c-menu__item" href="#" role="menuitem">
866
694
  <span class="pf-v5-c-menu__item-main">
867
695
  <span class="pf-v5-c-menu__item-text">Dedicated (On-Demand)</span>
868
696
  </span>
869
697
  </a>
870
698
  </li>
871
- <li class="pf-v5-c-menu__list-item" role="none">
699
+ <li class="pf-v5-c-menu__list-item" role="group">
872
700
  <a class="pf-v5-c-menu__item" href="#" role="menuitem">
873
701
  <span class="pf-v5-c-menu__item-main">
874
702
  <span
@@ -894,21 +722,21 @@ cssPrefix: pf-v5-c-nav
894
722
  <div class="pf-v5-c-menu pf-m-drilldown">
895
723
  <div class="pf-v5-c-menu__content">
896
724
  <ul class="pf-v5-c-menu__list" role="menu">
897
- <li class="pf-v5-c-menu__list-item" role="none">
725
+ <li class="pf-v5-c-menu__list-item" role="group">
898
726
  <button class="pf-v5-c-menu__item" type="button" role="menuitem">
899
727
  <span class="pf-v5-c-menu__item-main">
900
728
  <span class="pf-v5-c-menu__item-text">Start rollout</span>
901
729
  </span>
902
730
  </button>
903
731
  </li>
904
- <li class="pf-v5-c-menu__list-item" role="none">
732
+ <li class="pf-v5-c-menu__list-item" role="group">
905
733
  <button class="pf-v5-c-menu__item" type="button" role="menuitem">
906
734
  <span class="pf-v5-c-menu__item-main">
907
735
  <span class="pf-v5-c-menu__item-text">Pause rollout</span>
908
736
  </span>
909
737
  </button>
910
738
  </li>
911
- <li class="pf-v5-c-menu__list-item" role="none">
739
+ <li class="pf-v5-c-menu__list-item" role="group">
912
740
  <button
913
741
  class="pf-v5-c-menu__item pf-m-current"
914
742
  type="button"
@@ -919,14 +747,14 @@ cssPrefix: pf-v5-c-nav
919
747
  </span>
920
748
  </button>
921
749
  </li>
922
- <li class="pf-v5-c-menu__list-item" role="none">
750
+ <li class="pf-v5-c-menu__list-item" role="group">
923
751
  <button class="pf-v5-c-menu__item" type="button" role="menuitem">
924
752
  <span class="pf-v5-c-menu__item-main">
925
753
  <span class="pf-v5-c-menu__item-text">Add storage</span>
926
754
  </span>
927
755
  </button>
928
756
  </li>
929
- <li class="pf-v5-c-menu__list-item" role="none">
757
+ <li class="pf-v5-c-menu__list-item" role="group">
930
758
  <button
931
759
  class="pf-v5-c-menu__item"
932
760
  type="button"
@@ -943,7 +771,7 @@ cssPrefix: pf-v5-c-nav
943
771
  <div class="pf-v5-c-menu">
944
772
  <div class="pf-v5-c-menu__content">
945
773
  <ul class="pf-v5-c-menu__list" role="menu">
946
- <li class="pf-v5-c-menu__list-item pf-m-drill-up" role="none">
774
+ <li class="pf-v5-c-menu__list-item pf-m-drill-up" role="group">
947
775
  <button
948
776
  class="pf-v5-c-menu__item"
949
777
  type="button"
@@ -958,7 +786,7 @@ cssPrefix: pf-v5-c-nav
958
786
  </span>
959
787
  </button>
960
788
  </li>
961
- <li class="pf-v5-c-menu__list-item" role="none">
789
+ <li class="pf-v5-c-menu__list-item" role="group">
962
790
  <button
963
791
  class="pf-v5-c-menu__item"
964
792
  type="button"
@@ -977,7 +805,7 @@ cssPrefix: pf-v5-c-nav
977
805
  <ul class="pf-v5-c-menu__list" role="menu">
978
806
  <li
979
807
  class="pf-v5-c-menu__list-item pf-m-drill-up"
980
- role="none"
808
+ role="group"
981
809
  >
982
810
  <button
983
811
  class="pf-v5-c-menu__item"
@@ -993,7 +821,7 @@ cssPrefix: pf-v5-c-nav
993
821
  </span>
994
822
  </button>
995
823
  </li>
996
- <li class="pf-v5-c-menu__list-item" role="none">
824
+ <li class="pf-v5-c-menu__list-item" role="group">
997
825
  <button
998
826
  class="pf-v5-c-menu__item"
999
827
  type="button"
@@ -1004,7 +832,7 @@ cssPrefix: pf-v5-c-nav
1004
832
  </span>
1005
833
  </button>
1006
834
  </li>
1007
- <li class="pf-v5-c-menu__list-item" role="none">
835
+ <li class="pf-v5-c-menu__list-item" role="group">
1008
836
  <button
1009
837
  class="pf-v5-c-menu__item"
1010
838
  type="button"
@@ -1015,7 +843,7 @@ cssPrefix: pf-v5-c-nav
1015
843
  </span>
1016
844
  </button>
1017
845
  </li>
1018
- <li class="pf-v5-c-menu__list-item" role="none">
846
+ <li class="pf-v5-c-menu__list-item" role="group">
1019
847
  <button
1020
848
  class="pf-v5-c-menu__item"
1021
849
  type="button"
@@ -1026,7 +854,7 @@ cssPrefix: pf-v5-c-nav
1026
854
  </span>
1027
855
  </button>
1028
856
  </li>
1029
- <li class="pf-v5-c-menu__list-item" role="none">
857
+ <li class="pf-v5-c-menu__list-item" role="group">
1030
858
  <button
1031
859
  class="pf-v5-c-menu__item"
1032
860
  type="button"
@@ -1047,7 +875,7 @@ cssPrefix: pf-v5-c-nav
1047
875
  <ul class="pf-v5-c-menu__list" role="menu">
1048
876
  <li
1049
877
  class="pf-v5-c-menu__list-item pf-m-drill-up"
1050
- role="none"
878
+ role="group"
1051
879
  >
1052
880
  <button
1053
881
  class="pf-v5-c-menu__item"
@@ -1067,7 +895,10 @@ cssPrefix: pf-v5-c-nav
1067
895
  </span>
1068
896
  </button>
1069
897
  </li>
1070
- <li class="pf-v5-c-menu__list-item" role="none">
898
+ <li
899
+ class="pf-v5-c-menu__list-item"
900
+ role="group"
901
+ >
1071
902
  <button
1072
903
  class="pf-v5-c-menu__item"
1073
904
  type="button"
@@ -1080,7 +911,10 @@ cssPrefix: pf-v5-c-nav
1080
911
  </span>
1081
912
  </button>
1082
913
  </li>
1083
- <li class="pf-v5-c-menu__list-item" role="none">
914
+ <li
915
+ class="pf-v5-c-menu__list-item"
916
+ role="group"
917
+ >
1084
918
  <button
1085
919
  class="pf-v5-c-menu__item"
1086
920
  type="button"
@@ -1093,7 +927,10 @@ cssPrefix: pf-v5-c-nav
1093
927
  </span>
1094
928
  </button>
1095
929
  </li>
1096
- <li class="pf-v5-c-menu__list-item" role="none">
930
+ <li
931
+ class="pf-v5-c-menu__list-item"
932
+ role="group"
933
+ >
1097
934
  <button
1098
935
  class="pf-v5-c-menu__item"
1099
936
  type="button"
@@ -1114,7 +951,7 @@ cssPrefix: pf-v5-c-nav
1114
951
  </div>
1115
952
  </div>
1116
953
  </li>
1117
- <li class="pf-v5-c-menu__list-item" role="none">
954
+ <li class="pf-v5-c-menu__list-item" role="group">
1118
955
  <button
1119
956
  class="pf-v5-c-menu__item"
1120
957
  type="button"
@@ -1133,7 +970,7 @@ cssPrefix: pf-v5-c-nav
1133
970
  <ul class="pf-v5-c-menu__list" role="menu">
1134
971
  <li
1135
972
  class="pf-v5-c-menu__list-item pf-m-drill-up"
1136
- role="none"
973
+ role="group"
1137
974
  >
1138
975
  <button
1139
976
  class="pf-v5-c-menu__item"
@@ -1148,7 +985,7 @@ cssPrefix: pf-v5-c-nav
1148
985
  </span>
1149
986
  </button>
1150
987
  </li>
1151
- <li class="pf-v5-c-menu__list-item" role="none">
988
+ <li class="pf-v5-c-menu__list-item" role="group">
1152
989
  <button
1153
990
  class="pf-v5-c-menu__item"
1154
991
  type="button"
@@ -1159,7 +996,7 @@ cssPrefix: pf-v5-c-nav
1159
996
  </span>
1160
997
  </button>
1161
998
  </li>
1162
- <li class="pf-v5-c-menu__list-item" role="none">
999
+ <li class="pf-v5-c-menu__list-item" role="group">
1163
1000
  <button
1164
1001
  class="pf-v5-c-menu__item"
1165
1002
  type="button"
@@ -1170,7 +1007,7 @@ cssPrefix: pf-v5-c-nav
1170
1007
  </span>
1171
1008
  </button>
1172
1009
  </li>
1173
- <li class="pf-v5-c-menu__list-item" role="none">
1010
+ <li class="pf-v5-c-menu__list-item" role="group">
1174
1011
  <button
1175
1012
  class="pf-v5-c-menu__item"
1176
1013
  type="button"
@@ -1185,7 +1022,7 @@ cssPrefix: pf-v5-c-nav
1185
1022
  </div>
1186
1023
  </div>
1187
1024
  </li>
1188
- <li class="pf-v5-c-menu__list-item" role="none">
1025
+ <li class="pf-v5-c-menu__list-item" role="group">
1189
1026
  <button
1190
1027
  class="pf-v5-c-menu__item"
1191
1028
  type="button"
@@ -1202,7 +1039,7 @@ cssPrefix: pf-v5-c-nav
1202
1039
  </div>
1203
1040
  </div>
1204
1041
  </li>
1205
- <li class="pf-v5-c-menu__list-item" role="none">
1042
+ <li class="pf-v5-c-menu__list-item" role="group">
1206
1043
  <button
1207
1044
  class="pf-v5-c-menu__item"
1208
1045
  type="button"
@@ -1219,7 +1056,7 @@ cssPrefix: pf-v5-c-nav
1219
1056
  <div class="pf-v5-c-menu">
1220
1057
  <div class="pf-v5-c-menu__content">
1221
1058
  <ul class="pf-v5-c-menu__list" role="menu">
1222
- <li class="pf-v5-c-menu__list-item pf-m-drill-up" role="none">
1059
+ <li class="pf-v5-c-menu__list-item pf-m-drill-up" role="group">
1223
1060
  <button
1224
1061
  class="pf-v5-c-menu__item"
1225
1062
  type="button"
@@ -1233,7 +1070,7 @@ cssPrefix: pf-v5-c-nav
1233
1070
  </span>
1234
1071
  </button>
1235
1072
  </li>
1236
- <li class="pf-v5-c-menu__list-item" role="none">
1073
+ <li class="pf-v5-c-menu__list-item" role="group">
1237
1074
  <button
1238
1075
  class="pf-v5-c-menu__item"
1239
1076
  type="button"
@@ -1252,7 +1089,7 @@ cssPrefix: pf-v5-c-nav
1252
1089
  <ul class="pf-v5-c-menu__list" role="menu">
1253
1090
  <li
1254
1091
  class="pf-v5-c-menu__list-item pf-m-drill-up"
1255
- role="none"
1092
+ role="group"
1256
1093
  >
1257
1094
  <button
1258
1095
  class="pf-v5-c-menu__item"
@@ -1267,7 +1104,7 @@ cssPrefix: pf-v5-c-nav
1267
1104
  </span>
1268
1105
  </button>
1269
1106
  </li>
1270
- <li class="pf-v5-c-menu__list-item" role="none">
1107
+ <li class="pf-v5-c-menu__list-item" role="group">
1271
1108
  <button
1272
1109
  class="pf-v5-c-menu__item"
1273
1110
  type="button"
@@ -1278,7 +1115,7 @@ cssPrefix: pf-v5-c-nav
1278
1115
  </span>
1279
1116
  </button>
1280
1117
  </li>
1281
- <li class="pf-v5-c-menu__list-item" role="none">
1118
+ <li class="pf-v5-c-menu__list-item" role="group">
1282
1119
  <button
1283
1120
  class="pf-v5-c-menu__item"
1284
1121
  type="button"
@@ -1289,7 +1126,7 @@ cssPrefix: pf-v5-c-nav
1289
1126
  </span>
1290
1127
  </button>
1291
1128
  </li>
1292
- <li class="pf-v5-c-menu__list-item" role="none">
1129
+ <li class="pf-v5-c-menu__list-item" role="group">
1293
1130
  <button
1294
1131
  class="pf-v5-c-menu__item"
1295
1132
  type="button"
@@ -1304,7 +1141,7 @@ cssPrefix: pf-v5-c-nav
1304
1141
  </div>
1305
1142
  </div>
1306
1143
  </li>
1307
- <li class="pf-v5-c-menu__list-item" role="none">
1144
+ <li class="pf-v5-c-menu__list-item" role="group">
1308
1145
  <button
1309
1146
  class="pf-v5-c-menu__item"
1310
1147
  type="button"
@@ -1315,7 +1152,7 @@ cssPrefix: pf-v5-c-nav
1315
1152
  </span>
1316
1153
  </button>
1317
1154
  </li>
1318
- <li class="pf-v5-c-menu__list-item" role="none">
1155
+ <li class="pf-v5-c-menu__list-item" role="group">
1319
1156
  <button
1320
1157
  class="pf-v5-c-menu__item"
1321
1158
  type="button"
@@ -1326,7 +1163,7 @@ cssPrefix: pf-v5-c-nav
1326
1163
  </span>
1327
1164
  </button>
1328
1165
  </li>
1329
- <li class="pf-v5-c-menu__list-item" role="none">
1166
+ <li class="pf-v5-c-menu__list-item" role="group">
1330
1167
  <button
1331
1168
  class="pf-v5-c-menu__item"
1332
1169
  type="button"
@@ -1339,7 +1176,7 @@ cssPrefix: pf-v5-c-nav
1339
1176
  </span>
1340
1177
  </button>
1341
1178
  </li>
1342
- <li class="pf-v5-c-menu__list-item" role="none">
1179
+ <li class="pf-v5-c-menu__list-item" role="group">
1343
1180
  <button
1344
1181
  class="pf-v5-c-menu__item"
1345
1182
  type="button"
@@ -1358,7 +1195,7 @@ cssPrefix: pf-v5-c-nav
1358
1195
  <ul class="pf-v5-c-menu__list" role="menu">
1359
1196
  <li
1360
1197
  class="pf-v5-c-menu__list-item pf-m-drill-up"
1361
- role="none"
1198
+ role="group"
1362
1199
  >
1363
1200
  <button
1364
1201
  class="pf-v5-c-menu__item"
@@ -1375,7 +1212,7 @@ cssPrefix: pf-v5-c-nav
1375
1212
  </span>
1376
1213
  </button>
1377
1214
  </li>
1378
- <li class="pf-v5-c-menu__list-item" role="none">
1215
+ <li class="pf-v5-c-menu__list-item" role="group">
1379
1216
  <button
1380
1217
  class="pf-v5-c-menu__item"
1381
1218
  type="button"
@@ -1388,7 +1225,7 @@ cssPrefix: pf-v5-c-nav
1388
1225
  </span>
1389
1226
  </button>
1390
1227
  </li>
1391
- <li class="pf-v5-c-menu__list-item" role="none">
1228
+ <li class="pf-v5-c-menu__list-item" role="group">
1392
1229
  <button
1393
1230
  class="pf-v5-c-menu__item"
1394
1231
  type="button"
@@ -1426,21 +1263,21 @@ cssPrefix: pf-v5-c-nav
1426
1263
  style="--pf-v5-c-menu__content--Height: 228px;"
1427
1264
  >
1428
1265
  <ul class="pf-v5-c-menu__list" role="menu">
1429
- <li class="pf-v5-c-menu__list-item" role="none">
1266
+ <li class="pf-v5-c-menu__list-item" role="group">
1430
1267
  <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1431
1268
  <span class="pf-v5-c-menu__item-main">
1432
1269
  <span class="pf-v5-c-menu__item-text">Start rollout</span>
1433
1270
  </span>
1434
1271
  </button>
1435
1272
  </li>
1436
- <li class="pf-v5-c-menu__list-item" role="none">
1273
+ <li class="pf-v5-c-menu__list-item" role="group">
1437
1274
  <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1438
1275
  <span class="pf-v5-c-menu__item-main">
1439
1276
  <span class="pf-v5-c-menu__item-text">Pause rollout</span>
1440
1277
  </span>
1441
1278
  </button>
1442
1279
  </li>
1443
- <li class="pf-v5-c-menu__list-item" role="none">
1280
+ <li class="pf-v5-c-menu__list-item" role="group">
1444
1281
  <button
1445
1282
  class="pf-v5-c-menu__item pf-m-current"
1446
1283
  type="button"
@@ -1451,14 +1288,14 @@ cssPrefix: pf-v5-c-nav
1451
1288
  </span>
1452
1289
  </button>
1453
1290
  </li>
1454
- <li class="pf-v5-c-menu__list-item" role="none">
1291
+ <li class="pf-v5-c-menu__list-item" role="group">
1455
1292
  <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1456
1293
  <span class="pf-v5-c-menu__item-main">
1457
1294
  <span class="pf-v5-c-menu__item-text">Add storage</span>
1458
1295
  </span>
1459
1296
  </button>
1460
1297
  </li>
1461
- <li class="pf-v5-c-menu__list-item pf-m-current-path" role="none">
1298
+ <li class="pf-v5-c-menu__list-item pf-m-current-path" role="group">
1462
1299
  <button
1463
1300
  class="pf-v5-c-menu__item"
1464
1301
  type="button"
@@ -1475,7 +1312,7 @@ cssPrefix: pf-v5-c-nav
1475
1312
  <div class="pf-v5-c-menu">
1476
1313
  <div class="pf-v5-c-menu__content">
1477
1314
  <ul class="pf-v5-c-menu__list" role="menu">
1478
- <li class="pf-v5-c-menu__list-item pf-m-drill-up" role="none">
1315
+ <li class="pf-v5-c-menu__list-item pf-m-drill-up" role="group">
1479
1316
  <button
1480
1317
  class="pf-v5-c-menu__item"
1481
1318
  type="button"
@@ -1490,7 +1327,7 @@ cssPrefix: pf-v5-c-nav
1490
1327
  </span>
1491
1328
  </button>
1492
1329
  </li>
1493
- <li class="pf-v5-c-menu__list-item" role="none">
1330
+ <li class="pf-v5-c-menu__list-item" role="group">
1494
1331
  <button
1495
1332
  class="pf-v5-c-menu__item"
1496
1333
  type="button"
@@ -1509,7 +1346,7 @@ cssPrefix: pf-v5-c-nav
1509
1346
  <ul class="pf-v5-c-menu__list" role="menu">
1510
1347
  <li
1511
1348
  class="pf-v5-c-menu__list-item pf-m-drill-up"
1512
- role="none"
1349
+ role="group"
1513
1350
  >
1514
1351
  <button
1515
1352
  class="pf-v5-c-menu__item"
@@ -1525,7 +1362,7 @@ cssPrefix: pf-v5-c-nav
1525
1362
  </span>
1526
1363
  </button>
1527
1364
  </li>
1528
- <li class="pf-v5-c-menu__list-item" role="none">
1365
+ <li class="pf-v5-c-menu__list-item" role="group">
1529
1366
  <button
1530
1367
  class="pf-v5-c-menu__item"
1531
1368
  type="button"
@@ -1536,7 +1373,7 @@ cssPrefix: pf-v5-c-nav
1536
1373
  </span>
1537
1374
  </button>
1538
1375
  </li>
1539
- <li class="pf-v5-c-menu__list-item" role="none">
1376
+ <li class="pf-v5-c-menu__list-item" role="group">
1540
1377
  <button
1541
1378
  class="pf-v5-c-menu__item"
1542
1379
  type="button"
@@ -1547,7 +1384,7 @@ cssPrefix: pf-v5-c-nav
1547
1384
  </span>
1548
1385
  </button>
1549
1386
  </li>
1550
- <li class="pf-v5-c-menu__list-item" role="none">
1387
+ <li class="pf-v5-c-menu__list-item" role="group">
1551
1388
  <button
1552
1389
  class="pf-v5-c-menu__item"
1553
1390
  type="button"
@@ -1558,7 +1395,7 @@ cssPrefix: pf-v5-c-nav
1558
1395
  </span>
1559
1396
  </button>
1560
1397
  </li>
1561
- <li class="pf-v5-c-menu__list-item" role="none">
1398
+ <li class="pf-v5-c-menu__list-item" role="group">
1562
1399
  <button
1563
1400
  class="pf-v5-c-menu__item"
1564
1401
  type="button"
@@ -1579,7 +1416,7 @@ cssPrefix: pf-v5-c-nav
1579
1416
  <ul class="pf-v5-c-menu__list" role="menu">
1580
1417
  <li
1581
1418
  class="pf-v5-c-menu__list-item pf-m-drill-up"
1582
- role="none"
1419
+ role="group"
1583
1420
  >
1584
1421
  <button
1585
1422
  class="pf-v5-c-menu__item"
@@ -1599,7 +1436,10 @@ cssPrefix: pf-v5-c-nav
1599
1436
  </span>
1600
1437
  </button>
1601
1438
  </li>
1602
- <li class="pf-v5-c-menu__list-item" role="none">
1439
+ <li
1440
+ class="pf-v5-c-menu__list-item"
1441
+ role="group"
1442
+ >
1603
1443
  <button
1604
1444
  class="pf-v5-c-menu__item"
1605
1445
  type="button"
@@ -1612,7 +1452,10 @@ cssPrefix: pf-v5-c-nav
1612
1452
  </span>
1613
1453
  </button>
1614
1454
  </li>
1615
- <li class="pf-v5-c-menu__list-item" role="none">
1455
+ <li
1456
+ class="pf-v5-c-menu__list-item"
1457
+ role="group"
1458
+ >
1616
1459
  <button
1617
1460
  class="pf-v5-c-menu__item"
1618
1461
  type="button"
@@ -1625,7 +1468,10 @@ cssPrefix: pf-v5-c-nav
1625
1468
  </span>
1626
1469
  </button>
1627
1470
  </li>
1628
- <li class="pf-v5-c-menu__list-item" role="none">
1471
+ <li
1472
+ class="pf-v5-c-menu__list-item"
1473
+ role="group"
1474
+ >
1629
1475
  <button
1630
1476
  class="pf-v5-c-menu__item"
1631
1477
  type="button"
@@ -1646,7 +1492,7 @@ cssPrefix: pf-v5-c-nav
1646
1492
  </div>
1647
1493
  </div>
1648
1494
  </li>
1649
- <li class="pf-v5-c-menu__list-item" role="none">
1495
+ <li class="pf-v5-c-menu__list-item" role="group">
1650
1496
  <button
1651
1497
  class="pf-v5-c-menu__item"
1652
1498
  type="button"
@@ -1665,7 +1511,7 @@ cssPrefix: pf-v5-c-nav
1665
1511
  <ul class="pf-v5-c-menu__list" role="menu">
1666
1512
  <li
1667
1513
  class="pf-v5-c-menu__list-item pf-m-drill-up"
1668
- role="none"
1514
+ role="group"
1669
1515
  >
1670
1516
  <button
1671
1517
  class="pf-v5-c-menu__item"
@@ -1680,7 +1526,7 @@ cssPrefix: pf-v5-c-nav
1680
1526
  </span>
1681
1527
  </button>
1682
1528
  </li>
1683
- <li class="pf-v5-c-menu__list-item" role="none">
1529
+ <li class="pf-v5-c-menu__list-item" role="group">
1684
1530
  <button
1685
1531
  class="pf-v5-c-menu__item"
1686
1532
  type="button"
@@ -1691,7 +1537,7 @@ cssPrefix: pf-v5-c-nav
1691
1537
  </span>
1692
1538
  </button>
1693
1539
  </li>
1694
- <li class="pf-v5-c-menu__list-item" role="none">
1540
+ <li class="pf-v5-c-menu__list-item" role="group">
1695
1541
  <button
1696
1542
  class="pf-v5-c-menu__item"
1697
1543
  type="button"
@@ -1702,7 +1548,7 @@ cssPrefix: pf-v5-c-nav
1702
1548
  </span>
1703
1549
  </button>
1704
1550
  </li>
1705
- <li class="pf-v5-c-menu__list-item" role="none">
1551
+ <li class="pf-v5-c-menu__list-item" role="group">
1706
1552
  <button
1707
1553
  class="pf-v5-c-menu__item"
1708
1554
  type="button"
@@ -1717,7 +1563,7 @@ cssPrefix: pf-v5-c-nav
1717
1563
  </div>
1718
1564
  </div>
1719
1565
  </li>
1720
- <li class="pf-v5-c-menu__list-item" role="none">
1566
+ <li class="pf-v5-c-menu__list-item" role="group">
1721
1567
  <button
1722
1568
  class="pf-v5-c-menu__item"
1723
1569
  type="button"
@@ -1734,7 +1580,7 @@ cssPrefix: pf-v5-c-nav
1734
1580
  </div>
1735
1581
  </div>
1736
1582
  </li>
1737
- <li class="pf-v5-c-menu__list-item" role="none">
1583
+ <li class="pf-v5-c-menu__list-item" role="group">
1738
1584
  <button
1739
1585
  class="pf-v5-c-menu__item"
1740
1586
  type="button"
@@ -1751,7 +1597,7 @@ cssPrefix: pf-v5-c-nav
1751
1597
  <div class="pf-v5-c-menu">
1752
1598
  <div class="pf-v5-c-menu__content">
1753
1599
  <ul class="pf-v5-c-menu__list" role="menu">
1754
- <li class="pf-v5-c-menu__list-item pf-m-drill-up" role="none">
1600
+ <li class="pf-v5-c-menu__list-item pf-m-drill-up" role="group">
1755
1601
  <button
1756
1602
  class="pf-v5-c-menu__item"
1757
1603
  type="button"
@@ -1765,7 +1611,7 @@ cssPrefix: pf-v5-c-nav
1765
1611
  </span>
1766
1612
  </button>
1767
1613
  </li>
1768
- <li class="pf-v5-c-menu__list-item" role="none">
1614
+ <li class="pf-v5-c-menu__list-item" role="group">
1769
1615
  <button
1770
1616
  class="pf-v5-c-menu__item"
1771
1617
  type="button"
@@ -1784,7 +1630,7 @@ cssPrefix: pf-v5-c-nav
1784
1630
  <ul class="pf-v5-c-menu__list" role="menu">
1785
1631
  <li
1786
1632
  class="pf-v5-c-menu__list-item pf-m-drill-up"
1787
- role="none"
1633
+ role="group"
1788
1634
  >
1789
1635
  <button
1790
1636
  class="pf-v5-c-menu__item"
@@ -1799,7 +1645,7 @@ cssPrefix: pf-v5-c-nav
1799
1645
  </span>
1800
1646
  </button>
1801
1647
  </li>
1802
- <li class="pf-v5-c-menu__list-item" role="none">
1648
+ <li class="pf-v5-c-menu__list-item" role="group">
1803
1649
  <button
1804
1650
  class="pf-v5-c-menu__item"
1805
1651
  type="button"
@@ -1810,7 +1656,7 @@ cssPrefix: pf-v5-c-nav
1810
1656
  </span>
1811
1657
  </button>
1812
1658
  </li>
1813
- <li class="pf-v5-c-menu__list-item" role="none">
1659
+ <li class="pf-v5-c-menu__list-item" role="group">
1814
1660
  <button
1815
1661
  class="pf-v5-c-menu__item"
1816
1662
  type="button"
@@ -1821,7 +1667,7 @@ cssPrefix: pf-v5-c-nav
1821
1667
  </span>
1822
1668
  </button>
1823
1669
  </li>
1824
- <li class="pf-v5-c-menu__list-item" role="none">
1670
+ <li class="pf-v5-c-menu__list-item" role="group">
1825
1671
  <button
1826
1672
  class="pf-v5-c-menu__item"
1827
1673
  type="button"
@@ -1836,7 +1682,7 @@ cssPrefix: pf-v5-c-nav
1836
1682
  </div>
1837
1683
  </div>
1838
1684
  </li>
1839
- <li class="pf-v5-c-menu__list-item" role="none">
1685
+ <li class="pf-v5-c-menu__list-item" role="group">
1840
1686
  <button
1841
1687
  class="pf-v5-c-menu__item"
1842
1688
  type="button"
@@ -1847,7 +1693,7 @@ cssPrefix: pf-v5-c-nav
1847
1693
  </span>
1848
1694
  </button>
1849
1695
  </li>
1850
- <li class="pf-v5-c-menu__list-item" role="none">
1696
+ <li class="pf-v5-c-menu__list-item" role="group">
1851
1697
  <button
1852
1698
  class="pf-v5-c-menu__item"
1853
1699
  type="button"
@@ -1858,7 +1704,7 @@ cssPrefix: pf-v5-c-nav
1858
1704
  </span>
1859
1705
  </button>
1860
1706
  </li>
1861
- <li class="pf-v5-c-menu__list-item" role="none">
1707
+ <li class="pf-v5-c-menu__list-item" role="group">
1862
1708
  <button
1863
1709
  class="pf-v5-c-menu__item"
1864
1710
  type="button"
@@ -1871,7 +1717,7 @@ cssPrefix: pf-v5-c-nav
1871
1717
  </span>
1872
1718
  </button>
1873
1719
  </li>
1874
- <li class="pf-v5-c-menu__list-item" role="none">
1720
+ <li class="pf-v5-c-menu__list-item" role="group">
1875
1721
  <button
1876
1722
  class="pf-v5-c-menu__item"
1877
1723
  type="button"
@@ -1890,7 +1736,7 @@ cssPrefix: pf-v5-c-nav
1890
1736
  <ul class="pf-v5-c-menu__list" role="menu">
1891
1737
  <li
1892
1738
  class="pf-v5-c-menu__list-item pf-m-drill-up"
1893
- role="none"
1739
+ role="group"
1894
1740
  >
1895
1741
  <button
1896
1742
  class="pf-v5-c-menu__item"
@@ -1907,7 +1753,7 @@ cssPrefix: pf-v5-c-nav
1907
1753
  </span>
1908
1754
  </button>
1909
1755
  </li>
1910
- <li class="pf-v5-c-menu__list-item" role="none">
1756
+ <li class="pf-v5-c-menu__list-item" role="group">
1911
1757
  <button
1912
1758
  class="pf-v5-c-menu__item"
1913
1759
  type="button"
@@ -1920,7 +1766,7 @@ cssPrefix: pf-v5-c-nav
1920
1766
  </span>
1921
1767
  </button>
1922
1768
  </li>
1923
- <li class="pf-v5-c-menu__list-item" role="none">
1769
+ <li class="pf-v5-c-menu__list-item" role="group">
1924
1770
  <button
1925
1771
  class="pf-v5-c-menu__item"
1926
1772
  type="button"
@@ -1958,21 +1804,21 @@ cssPrefix: pf-v5-c-nav
1958
1804
  style="--pf-v5-c-menu__content--Height: 284px;"
1959
1805
  >
1960
1806
  <ul class="pf-v5-c-menu__list" role="menu">
1961
- <li class="pf-v5-c-menu__list-item" role="none">
1807
+ <li class="pf-v5-c-menu__list-item" role="group">
1962
1808
  <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1963
1809
  <span class="pf-v5-c-menu__item-main">
1964
1810
  <span class="pf-v5-c-menu__item-text">Start rollout</span>
1965
1811
  </span>
1966
1812
  </button>
1967
1813
  </li>
1968
- <li class="pf-v5-c-menu__list-item" role="none">
1814
+ <li class="pf-v5-c-menu__list-item" role="group">
1969
1815
  <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1970
1816
  <span class="pf-v5-c-menu__item-main">
1971
1817
  <span class="pf-v5-c-menu__item-text">Pause rollout</span>
1972
1818
  </span>
1973
1819
  </button>
1974
1820
  </li>
1975
- <li class="pf-v5-c-menu__list-item" role="none">
1821
+ <li class="pf-v5-c-menu__list-item" role="group">
1976
1822
  <button
1977
1823
  class="pf-v5-c-menu__item pf-m-current"
1978
1824
  type="button"
@@ -1983,14 +1829,14 @@ cssPrefix: pf-v5-c-nav
1983
1829
  </span>
1984
1830
  </button>
1985
1831
  </li>
1986
- <li class="pf-v5-c-menu__list-item" role="none">
1832
+ <li class="pf-v5-c-menu__list-item" role="group">
1987
1833
  <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1988
1834
  <span class="pf-v5-c-menu__item-main">
1989
1835
  <span class="pf-v5-c-menu__item-text">Add storage</span>
1990
1836
  </span>
1991
1837
  </button>
1992
1838
  </li>
1993
- <li class="pf-v5-c-menu__list-item pf-m-current-path" role="none">
1839
+ <li class="pf-v5-c-menu__list-item pf-m-current-path" role="group">
1994
1840
  <button
1995
1841
  class="pf-v5-c-menu__item"
1996
1842
  type="button"
@@ -2007,7 +1853,7 @@ cssPrefix: pf-v5-c-nav
2007
1853
  <div class="pf-v5-c-menu pf-m-drilled-in">
2008
1854
  <div class="pf-v5-c-menu__content">
2009
1855
  <ul class="pf-v5-c-menu__list" role="menu">
2010
- <li class="pf-v5-c-menu__list-item pf-m-drill-up" role="none">
1856
+ <li class="pf-v5-c-menu__list-item pf-m-drill-up" role="group">
2011
1857
  <button
2012
1858
  class="pf-v5-c-menu__item"
2013
1859
  type="button"
@@ -2024,7 +1870,7 @@ cssPrefix: pf-v5-c-nav
2024
1870
  </li>
2025
1871
  <li
2026
1872
  class="pf-v5-c-menu__list-item pf-m-current-path"
2027
- role="none"
1873
+ role="group"
2028
1874
  >
2029
1875
  <button
2030
1876
  class="pf-v5-c-menu__item"
@@ -2044,7 +1890,7 @@ cssPrefix: pf-v5-c-nav
2044
1890
  <ul class="pf-v5-c-menu__list" role="menu">
2045
1891
  <li
2046
1892
  class="pf-v5-c-menu__list-item pf-m-drill-up"
2047
- role="none"
1893
+ role="group"
2048
1894
  >
2049
1895
  <button
2050
1896
  class="pf-v5-c-menu__item"
@@ -2060,7 +1906,7 @@ cssPrefix: pf-v5-c-nav
2060
1906
  </span>
2061
1907
  </button>
2062
1908
  </li>
2063
- <li class="pf-v5-c-menu__list-item" role="none">
1909
+ <li class="pf-v5-c-menu__list-item" role="group">
2064
1910
  <button
2065
1911
  class="pf-v5-c-menu__item"
2066
1912
  type="button"
@@ -2071,7 +1917,7 @@ cssPrefix: pf-v5-c-nav
2071
1917
  </span>
2072
1918
  </button>
2073
1919
  </li>
2074
- <li class="pf-v5-c-menu__list-item" role="none">
1920
+ <li class="pf-v5-c-menu__list-item" role="group">
2075
1921
  <button
2076
1922
  class="pf-v5-c-menu__item"
2077
1923
  type="button"
@@ -2082,7 +1928,7 @@ cssPrefix: pf-v5-c-nav
2082
1928
  </span>
2083
1929
  </button>
2084
1930
  </li>
2085
- <li class="pf-v5-c-menu__list-item" role="none">
1931
+ <li class="pf-v5-c-menu__list-item" role="group">
2086
1932
  <button
2087
1933
  class="pf-v5-c-menu__item"
2088
1934
  type="button"
@@ -2093,7 +1939,7 @@ cssPrefix: pf-v5-c-nav
2093
1939
  </span>
2094
1940
  </button>
2095
1941
  </li>
2096
- <li class="pf-v5-c-menu__list-item" role="none">
1942
+ <li class="pf-v5-c-menu__list-item" role="group">
2097
1943
  <button
2098
1944
  class="pf-v5-c-menu__item"
2099
1945
  type="button"
@@ -2114,7 +1960,7 @@ cssPrefix: pf-v5-c-nav
2114
1960
  <ul class="pf-v5-c-menu__list" role="menu">
2115
1961
  <li
2116
1962
  class="pf-v5-c-menu__list-item pf-m-drill-up"
2117
- role="none"
1963
+ role="group"
2118
1964
  >
2119
1965
  <button
2120
1966
  class="pf-v5-c-menu__item"
@@ -2134,7 +1980,10 @@ cssPrefix: pf-v5-c-nav
2134
1980
  </span>
2135
1981
  </button>
2136
1982
  </li>
2137
- <li class="pf-v5-c-menu__list-item" role="none">
1983
+ <li
1984
+ class="pf-v5-c-menu__list-item"
1985
+ role="group"
1986
+ >
2138
1987
  <button
2139
1988
  class="pf-v5-c-menu__item"
2140
1989
  type="button"
@@ -2147,7 +1996,10 @@ cssPrefix: pf-v5-c-nav
2147
1996
  </span>
2148
1997
  </button>
2149
1998
  </li>
2150
- <li class="pf-v5-c-menu__list-item" role="none">
1999
+ <li
2000
+ class="pf-v5-c-menu__list-item"
2001
+ role="group"
2002
+ >
2151
2003
  <button
2152
2004
  class="pf-v5-c-menu__item"
2153
2005
  type="button"
@@ -2160,7 +2012,10 @@ cssPrefix: pf-v5-c-nav
2160
2012
  </span>
2161
2013
  </button>
2162
2014
  </li>
2163
- <li class="pf-v5-c-menu__list-item" role="none">
2015
+ <li
2016
+ class="pf-v5-c-menu__list-item"
2017
+ role="group"
2018
+ >
2164
2019
  <button
2165
2020
  class="pf-v5-c-menu__item"
2166
2021
  type="button"
@@ -2181,7 +2036,7 @@ cssPrefix: pf-v5-c-nav
2181
2036
  </div>
2182
2037
  </div>
2183
2038
  </li>
2184
- <li class="pf-v5-c-menu__list-item" role="none">
2039
+ <li class="pf-v5-c-menu__list-item" role="group">
2185
2040
  <button
2186
2041
  class="pf-v5-c-menu__item"
2187
2042
  type="button"
@@ -2200,7 +2055,7 @@ cssPrefix: pf-v5-c-nav
2200
2055
  <ul class="pf-v5-c-menu__list" role="menu">
2201
2056
  <li
2202
2057
  class="pf-v5-c-menu__list-item pf-m-drill-up"
2203
- role="none"
2058
+ role="group"
2204
2059
  >
2205
2060
  <button
2206
2061
  class="pf-v5-c-menu__item"
@@ -2215,7 +2070,7 @@ cssPrefix: pf-v5-c-nav
2215
2070
  </span>
2216
2071
  </button>
2217
2072
  </li>
2218
- <li class="pf-v5-c-menu__list-item" role="none">
2073
+ <li class="pf-v5-c-menu__list-item" role="group">
2219
2074
  <button
2220
2075
  class="pf-v5-c-menu__item"
2221
2076
  type="button"
@@ -2226,7 +2081,7 @@ cssPrefix: pf-v5-c-nav
2226
2081
  </span>
2227
2082
  </button>
2228
2083
  </li>
2229
- <li class="pf-v5-c-menu__list-item" role="none">
2084
+ <li class="pf-v5-c-menu__list-item" role="group">
2230
2085
  <button
2231
2086
  class="pf-v5-c-menu__item"
2232
2087
  type="button"
@@ -2237,7 +2092,7 @@ cssPrefix: pf-v5-c-nav
2237
2092
  </span>
2238
2093
  </button>
2239
2094
  </li>
2240
- <li class="pf-v5-c-menu__list-item" role="none">
2095
+ <li class="pf-v5-c-menu__list-item" role="group">
2241
2096
  <button
2242
2097
  class="pf-v5-c-menu__item"
2243
2098
  type="button"
@@ -2252,7 +2107,7 @@ cssPrefix: pf-v5-c-nav
2252
2107
  </div>
2253
2108
  </div>
2254
2109
  </li>
2255
- <li class="pf-v5-c-menu__list-item" role="none">
2110
+ <li class="pf-v5-c-menu__list-item" role="group">
2256
2111
  <button
2257
2112
  class="pf-v5-c-menu__item"
2258
2113
  type="button"
@@ -2269,7 +2124,7 @@ cssPrefix: pf-v5-c-nav
2269
2124
  </div>
2270
2125
  </div>
2271
2126
  </li>
2272
- <li class="pf-v5-c-menu__list-item" role="none">
2127
+ <li class="pf-v5-c-menu__list-item" role="group">
2273
2128
  <button
2274
2129
  class="pf-v5-c-menu__item"
2275
2130
  type="button"
@@ -2286,7 +2141,7 @@ cssPrefix: pf-v5-c-nav
2286
2141
  <div class="pf-v5-c-menu">
2287
2142
  <div class="pf-v5-c-menu__content">
2288
2143
  <ul class="pf-v5-c-menu__list" role="menu">
2289
- <li class="pf-v5-c-menu__list-item pf-m-drill-up" role="none">
2144
+ <li class="pf-v5-c-menu__list-item pf-m-drill-up" role="group">
2290
2145
  <button
2291
2146
  class="pf-v5-c-menu__item"
2292
2147
  type="button"
@@ -2300,7 +2155,7 @@ cssPrefix: pf-v5-c-nav
2300
2155
  </span>
2301
2156
  </button>
2302
2157
  </li>
2303
- <li class="pf-v5-c-menu__list-item" role="none">
2158
+ <li class="pf-v5-c-menu__list-item" role="group">
2304
2159
  <button
2305
2160
  class="pf-v5-c-menu__item"
2306
2161
  type="button"
@@ -2319,7 +2174,7 @@ cssPrefix: pf-v5-c-nav
2319
2174
  <ul class="pf-v5-c-menu__list" role="menu">
2320
2175
  <li
2321
2176
  class="pf-v5-c-menu__list-item pf-m-drill-up"
2322
- role="none"
2177
+ role="group"
2323
2178
  >
2324
2179
  <button
2325
2180
  class="pf-v5-c-menu__item"
@@ -2334,7 +2189,7 @@ cssPrefix: pf-v5-c-nav
2334
2189
  </span>
2335
2190
  </button>
2336
2191
  </li>
2337
- <li class="pf-v5-c-menu__list-item" role="none">
2192
+ <li class="pf-v5-c-menu__list-item" role="group">
2338
2193
  <button
2339
2194
  class="pf-v5-c-menu__item"
2340
2195
  type="button"
@@ -2345,7 +2200,7 @@ cssPrefix: pf-v5-c-nav
2345
2200
  </span>
2346
2201
  </button>
2347
2202
  </li>
2348
- <li class="pf-v5-c-menu__list-item" role="none">
2203
+ <li class="pf-v5-c-menu__list-item" role="group">
2349
2204
  <button
2350
2205
  class="pf-v5-c-menu__item"
2351
2206
  type="button"
@@ -2356,7 +2211,7 @@ cssPrefix: pf-v5-c-nav
2356
2211
  </span>
2357
2212
  </button>
2358
2213
  </li>
2359
- <li class="pf-v5-c-menu__list-item" role="none">
2214
+ <li class="pf-v5-c-menu__list-item" role="group">
2360
2215
  <button
2361
2216
  class="pf-v5-c-menu__item"
2362
2217
  type="button"
@@ -2371,7 +2226,7 @@ cssPrefix: pf-v5-c-nav
2371
2226
  </div>
2372
2227
  </div>
2373
2228
  </li>
2374
- <li class="pf-v5-c-menu__list-item" role="none">
2229
+ <li class="pf-v5-c-menu__list-item" role="group">
2375
2230
  <button
2376
2231
  class="pf-v5-c-menu__item"
2377
2232
  type="button"
@@ -2382,7 +2237,7 @@ cssPrefix: pf-v5-c-nav
2382
2237
  </span>
2383
2238
  </button>
2384
2239
  </li>
2385
- <li class="pf-v5-c-menu__list-item" role="none">
2240
+ <li class="pf-v5-c-menu__list-item" role="group">
2386
2241
  <button
2387
2242
  class="pf-v5-c-menu__item"
2388
2243
  type="button"
@@ -2393,7 +2248,7 @@ cssPrefix: pf-v5-c-nav
2393
2248
  </span>
2394
2249
  </button>
2395
2250
  </li>
2396
- <li class="pf-v5-c-menu__list-item" role="none">
2251
+ <li class="pf-v5-c-menu__list-item" role="group">
2397
2252
  <button
2398
2253
  class="pf-v5-c-menu__item"
2399
2254
  type="button"
@@ -2406,7 +2261,7 @@ cssPrefix: pf-v5-c-nav
2406
2261
  </span>
2407
2262
  </button>
2408
2263
  </li>
2409
- <li class="pf-v5-c-menu__list-item" role="none">
2264
+ <li class="pf-v5-c-menu__list-item" role="group">
2410
2265
  <button
2411
2266
  class="pf-v5-c-menu__item"
2412
2267
  type="button"
@@ -2425,7 +2280,7 @@ cssPrefix: pf-v5-c-nav
2425
2280
  <ul class="pf-v5-c-menu__list" role="menu">
2426
2281
  <li
2427
2282
  class="pf-v5-c-menu__list-item pf-m-drill-up"
2428
- role="none"
2283
+ role="group"
2429
2284
  >
2430
2285
  <button
2431
2286
  class="pf-v5-c-menu__item"
@@ -2442,7 +2297,7 @@ cssPrefix: pf-v5-c-nav
2442
2297
  </span>
2443
2298
  </button>
2444
2299
  </li>
2445
- <li class="pf-v5-c-menu__list-item" role="none">
2300
+ <li class="pf-v5-c-menu__list-item" role="group">
2446
2301
  <button
2447
2302
  class="pf-v5-c-menu__item"
2448
2303
  type="button"
@@ -2455,7 +2310,7 @@ cssPrefix: pf-v5-c-nav
2455
2310
  </span>
2456
2311
  </button>
2457
2312
  </li>
2458
- <li class="pf-v5-c-menu__list-item" role="none">
2313
+ <li class="pf-v5-c-menu__list-item" role="group">
2459
2314
  <button
2460
2315
  class="pf-v5-c-menu__item"
2461
2316
  type="button"
@@ -2501,8 +2356,8 @@ When using anything other than a text node for the link text, wrap the link text
2501
2356
  <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
2502
2357
  <button
2503
2358
  class="pf-v5-c-nav__link"
2504
- id="nav-link-text-link2"
2505
2359
  aria-expanded="true"
2360
+ id="nav-link-text-link2"
2506
2361
  >
2507
2362
  <span class="pf-v5-c-nav__link-text">
2508
2363
  Link 2
@@ -2538,11 +2393,11 @@ When using anything other than a text node for the link text, wrap the link text
2538
2393
  </ul>
2539
2394
  </section>
2540
2395
  </li>
2541
- <li class="pf-v5-c-nav__item pf-m-expandable pf-m-current">
2396
+ <li class="pf-v5-c-nav__item pf-m-expandable">
2542
2397
  <button
2543
2398
  class="pf-v5-c-nav__link"
2544
- id="nav-link-text-link4"
2545
2399
  aria-expanded="false"
2400
+ id="nav-link-text-link4"
2546
2401
  >
2547
2402
  <span class="pf-v5-c-nav__link-text">
2548
2403
  Link 3
@@ -2587,7 +2442,7 @@ When using anything other than a text node for the link text, wrap the link text
2587
2442
 
2588
2443
  The navigation system relies on several different sub-components:
2589
2444
 
2590
- * `.pf-v5-c-nav__list` - default navigation list. It is the basis for both default and expandable, vertical navigation.
2445
+ * `.pf-v5-c-nav__list` - default navigation list. It is the basis for both default and expandable, vertical navigation.
2591
2446
 
2592
2447
  ### Accessibility
2593
2448
 
@@ -2620,12 +2475,10 @@ The navigation system relies on several different sub-components:
2620
2475
  | `.pf-v5-c-nav__scroll-button` | `<button>` | Initiates a nav scroll button. **Required for horizontal navs** |
2621
2476
  | `.pf-m-horizontal` | `.pf-v5-c-nav` | Modifies nav for the horizontal variation. |
2622
2477
  | `.pf-m-horizontal-subnav` | `.pf-v5-c-nav` | Modifies nav for the horizontal subnav variation. |
2623
- | `.pf-m-tertiary` | `.pf-v5-c-nav` | Modifies nav for the tertiary variation. |
2624
- | `.pf-m-light` | `.pf-v5-c-nav` | Modifies nav for the light variation. **Note: only for use with vertical navs, and requires `.pf-m-light` on the page component's sidebar element (`.pf-v5-c-page__sidebar`)**. |
2478
+ | `.pf-m-full-width` | `.pf-v5-c-nav` | Modifies nav for to full width of parent. |
2625
2479
  | `.pf-m-flyout` | `.pf-v5-c-nav__item` | Modifies nav item for the flyout variation. |
2626
2480
  | `.pf-m-scrollable` | `.pf-v5-c-nav` | Modifies nav for the scrollable state. |
2627
2481
  | `.pf-m-expandable` | `.pf-v5-c-nav__item` | Modifies for the expandable state. |
2628
2482
  | `.pf-m-expanded` | `.pf-v5-c-nav__item` | Modifies for the expanded state. |
2629
2483
  | `.pf-m-current` | `.pf-v5-c-nav__link` | Modifies for the current state. |
2630
2484
  | `.pf-m-hover` | `.pf-v5-c-nav__link` | Modifies for the hover state. |
2631
- | `.pf-m-start` | `.pf-v5-c-nav__toggle` | Modifies nav toggle to align left. |