@patternfly/patternfly 5.1.0-prerelease.1 → 5.1.0-prerelease.11

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 (267) hide show
  1. package/README.md +10 -0
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  4. package/assets/pficon/pficon.scss +6 -129
  5. package/base/_common.scss +22 -0
  6. package/base/_globals.scss +1 -1
  7. package/base/_variables.scss +7 -0
  8. package/base/patternfly-common.css +17 -2
  9. package/base/patternfly-globals.css +1 -1
  10. package/base/patternfly-icons.css +5 -1
  11. package/base/patternfly-pf-icons.css +5 -1
  12. package/base/patternfly-variables.css +5 -0
  13. package/components/AboutModalBox/about-modal-box.css +20 -13
  14. package/components/AboutModalBox/about-modal-box.scss +20 -13
  15. package/components/Accordion/accordion.css +33 -20
  16. package/components/Accordion/accordion.scss +32 -20
  17. package/components/ActionList/action-list.css +2 -2
  18. package/components/ActionList/action-list.scss +2 -2
  19. package/components/Alert/alert-group.css +7 -4
  20. package/components/Alert/alert-group.scss +7 -4
  21. package/components/Alert/alert.css +16 -13
  22. package/components/Alert/alert.scss +16 -13
  23. package/components/AppLauncher/app-launcher.css +32 -23
  24. package/components/AppLauncher/app-launcher.scss +32 -23
  25. package/components/BackToTop/back-to-top.css +2 -2
  26. package/components/BackToTop/back-to-top.scss +2 -2
  27. package/components/Backdrop/backdrop.css +2 -2
  28. package/components/Backdrop/backdrop.scss +2 -2
  29. package/components/BackgroundImage/background-image.css +2 -2
  30. package/components/BackgroundImage/background-image.scss +2 -2
  31. package/components/Badge/badge.css +2 -2
  32. package/components/Badge/badge.scss +2 -2
  33. package/components/Banner/banner.css +5 -2
  34. package/components/Banner/banner.scss +5 -2
  35. package/components/Breadcrumb/breadcrumb.css +6 -3
  36. package/components/Breadcrumb/breadcrumb.scss +6 -3
  37. package/components/Button/button.css +23 -17
  38. package/components/Button/button.scss +22 -16
  39. package/components/Button/themes/dark/button.scss +1 -1
  40. package/components/CalendarMonth/calendar-month.css +21 -15
  41. package/components/CalendarMonth/calendar-month.scss +21 -15
  42. package/components/Card/card.css +21 -16
  43. package/components/Card/card.scss +21 -16
  44. package/components/Check/check.css +2 -2
  45. package/components/Check/check.scss +2 -2
  46. package/components/Chip/chip-group.css +6 -6
  47. package/components/Chip/chip-group.scss +6 -6
  48. package/components/Chip/chip.css +16 -9
  49. package/components/Chip/chip.scss +17 -9
  50. package/components/ClipboardCopy/clipboard-copy.css +16 -10
  51. package/components/ClipboardCopy/clipboard-copy.scss +14 -8
  52. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +2 -2
  53. package/components/CodeBlock/code-block.css +6 -3
  54. package/components/CodeBlock/code-block.scss +6 -3
  55. package/components/CodeEditor/code-editor.css +31 -22
  56. package/components/CodeEditor/code-editor.scss +30 -21
  57. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  58. package/components/Content/content.css +33 -30
  59. package/components/Content/content.scss +33 -30
  60. package/components/ContextSelector/context-selector.css +41 -26
  61. package/components/ContextSelector/context-selector.scss +40 -25
  62. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  63. package/components/DataList/data-list-grid.css +21 -49
  64. package/components/DataList/data-list-grid.scss +3 -3
  65. package/components/DataList/data-list.css +66 -84
  66. package/components/DataList/data-list.scss +45 -35
  67. package/components/DatePicker/date-picker.css +8 -8
  68. package/components/DatePicker/date-picker.scss +8 -8
  69. package/components/DescriptionList/description-list.css +8 -5
  70. package/components/DescriptionList/description-list.scss +8 -5
  71. package/components/DragDrop/drag-drop.css +8 -8
  72. package/components/DragDrop/drag-drop.scss +8 -8
  73. package/components/Drawer/drawer.css +75 -60
  74. package/components/Drawer/drawer.scss +51 -36
  75. package/components/Dropdown/dropdown.css +75 -66
  76. package/components/Dropdown/dropdown.scss +65 -56
  77. package/components/DualListSelector/dual-list-selector.css +29 -15
  78. package/components/DualListSelector/dual-list-selector.scss +30 -15
  79. package/components/EmptyState/empty-state.css +7 -4
  80. package/components/EmptyState/empty-state.scss +7 -4
  81. package/components/ExpandableSection/expandable-section.css +17 -10
  82. package/components/ExpandableSection/expandable-section.scss +15 -10
  83. package/components/FileUpload/file-upload.css +9 -15
  84. package/components/FileUpload/file-upload.scss +9 -15
  85. package/components/Form/form.css +50 -50
  86. package/components/Form/form.scss +44 -44
  87. package/components/FormControl/form-control.css +21 -11
  88. package/components/FormControl/form-control.scss +21 -11
  89. package/components/HelperText/helper-text.css +1 -1
  90. package/components/HelperText/helper-text.scss +1 -1
  91. package/components/Hint/hint.css +9 -6
  92. package/components/Hint/hint.scss +9 -6
  93. package/components/Icon/icon.css +1 -1
  94. package/components/Icon/icon.scss +1 -1
  95. package/components/InlineEdit/inline-edit.css +4 -4
  96. package/components/InlineEdit/inline-edit.scss +4 -4
  97. package/components/InputGroup/input-group.css +12 -6
  98. package/components/InputGroup/input-group.scss +11 -5
  99. package/components/InputGroup/themes/dark/input-group.scss +1 -1
  100. package/components/JumpLinks/jump-links.css +24 -24
  101. package/components/JumpLinks/jump-links.scss +24 -24
  102. package/components/Label/label-group.css +13 -10
  103. package/components/Label/label-group.scss +13 -10
  104. package/components/Label/label.css +9 -9
  105. package/components/Label/label.scss +9 -9
  106. package/components/List/list.css +9 -9
  107. package/components/List/list.scss +9 -9
  108. package/components/LogViewer/log-viewer.css +14 -14
  109. package/components/LogViewer/log-viewer.scss +14 -14
  110. package/components/Login/login.css +36 -27
  111. package/components/Login/login.scss +36 -27
  112. package/components/Masthead/masthead.css +19 -22
  113. package/components/Masthead/masthead.scss +19 -22
  114. package/components/Menu/menu.css +69 -66
  115. package/components/Menu/menu.scss +69 -67
  116. package/components/MenuToggle/menu-toggle.css +41 -29
  117. package/components/MenuToggle/menu-toggle.scss +41 -29
  118. package/components/ModalBox/modal-box.css +19 -19
  119. package/components/ModalBox/modal-box.scss +20 -20
  120. package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  121. package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
  122. package/components/Nav/nav.css +100 -93
  123. package/components/Nav/nav.scss +98 -91
  124. package/components/Nav/themes/dark/nav.scss +2 -2
  125. package/components/NotificationBadge/notification-badge.css +13 -7
  126. package/components/NotificationBadge/notification-badge.scss +13 -7
  127. package/components/NotificationDrawer/notification-drawer.css +28 -19
  128. package/components/NotificationDrawer/notification-drawer.scss +28 -19
  129. package/components/NumberInput/number-input.css +3 -3
  130. package/components/NumberInput/number-input.scss +2 -2
  131. package/components/OptionsMenu/options-menu.css +43 -31
  132. package/components/OptionsMenu/options-menu.scss +43 -31
  133. package/components/OverflowMenu/overflow-menu.css +2 -2
  134. package/components/OverflowMenu/overflow-menu.scss +2 -2
  135. package/components/Page/page.css +119 -65
  136. package/components/Page/page.scss +63 -39
  137. package/components/Page/themes/dark/page.scss +1 -1
  138. package/components/Pagination/pagination.css +28 -18
  139. package/components/Pagination/pagination.scss +25 -17
  140. package/components/Panel/panel.css +13 -7
  141. package/components/Panel/panel.scss +13 -7
  142. package/components/Popover/popover.css +24 -21
  143. package/components/Popover/popover.scss +24 -21
  144. package/components/Progress/progress.css +7 -7
  145. package/components/Progress/progress.scss +7 -7
  146. package/components/ProgressStepper/progress-stepper.css +26 -20
  147. package/components/ProgressStepper/progress-stepper.scss +25 -19
  148. package/components/Radio/radio.css +4 -5
  149. package/components/Radio/radio.scss +4 -5
  150. package/components/Select/select.css +56 -47
  151. package/components/Select/select.scss +56 -47
  152. package/components/Sidebar/sidebar.css +11 -5
  153. package/components/Sidebar/sidebar.scss +11 -5
  154. package/components/SimpleList/simple-list.css +10 -4
  155. package/components/SimpleList/simple-list.scss +10 -4
  156. package/components/Skeleton/skeleton.css +2 -5
  157. package/components/Skeleton/skeleton.scss +2 -5
  158. package/components/SkipToContent/skip-to-content.css +3 -3
  159. package/components/SkipToContent/skip-to-content.scss +3 -3
  160. package/components/Slider/slider.css +46 -26
  161. package/components/Slider/slider.scss +54 -26
  162. package/components/Switch/switch.css +9 -5
  163. package/components/Switch/switch.scss +10 -6
  164. package/components/TabContent/tab-content.css +4 -1
  165. package/components/TabContent/tab-content.scss +4 -1
  166. package/components/Table/table-grid.css +256 -219
  167. package/components/Table/table-grid.scss +53 -39
  168. package/components/Table/table-scrollable.css +2 -2
  169. package/components/Table/table-scrollable.scss +2 -2
  170. package/components/Table/table-tree-view.css +107 -104
  171. package/components/Table/table-tree-view.scss +32 -32
  172. package/components/Table/table.css +87 -69
  173. package/components/Table/table.scss +87 -69
  174. package/components/Tabs/tabs.css +66 -48
  175. package/components/Tabs/tabs.scss +66 -48
  176. package/components/TextInputGroup/text-input-group.css +15 -15
  177. package/components/TextInputGroup/text-input-group.scss +15 -15
  178. package/components/Tile/tile.css +10 -10
  179. package/components/Tile/tile.scss +10 -10
  180. package/components/ToggleGroup/toggle-group.css +14 -11
  181. package/components/ToggleGroup/toggle-group.scss +14 -11
  182. package/components/Toolbar/toolbar.css +44 -41
  183. package/components/Toolbar/toolbar.scss +24 -21
  184. package/components/Tooltip/tooltip.css +19 -16
  185. package/components/Tooltip/tooltip.scss +19 -16
  186. package/components/TreeView/tree-view.css +42 -27
  187. package/components/TreeView/tree-view.scss +43 -28
  188. package/components/Wizard/wizard.css +57 -36
  189. package/components/Wizard/wizard.scss +57 -36
  190. package/docs/components/AppLauncher/deprecated/application-launcher.md +155 -70
  191. package/docs/components/Badge/examples/Badge.md +16 -4
  192. package/docs/components/Breadcrumb/examples/Breadcrumb.md +11 -5
  193. package/docs/components/Button/examples/Button.css +2 -2
  194. package/docs/components/Button/examples/Button.md +1 -0
  195. package/docs/components/Card/examples/Card.md +152 -64
  196. package/docs/components/Chip/examples/Chip.md +31 -11
  197. package/docs/components/ContextSelector/deprecated/context-selector.md +198 -96
  198. package/docs/components/DataList/examples/DataList.md +391 -136
  199. package/docs/components/DragDrop/examples/DragDrop.css +2 -2
  200. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  201. package/docs/components/Dropdown/deprecated/Dropdown.md +881 -367
  202. package/docs/components/DualListSelector/examples/DualListSelector.md +368 -128
  203. package/docs/components/FormControl/examples/FormControl.md +2 -1
  204. package/docs/components/Hint/examples/Hint.md +57 -24
  205. package/docs/components/InlineEdit/examples/InlineEdit.md +46 -16
  206. package/docs/components/Label/examples/Label.md +1 -1
  207. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  208. package/docs/components/LogViewer/examples/LogViewer.md +40 -30
  209. package/docs/components/Menu/examples/Menu.md +41 -20
  210. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -1
  211. package/docs/components/ModalBox/examples/ModalBox.css +2 -2
  212. package/docs/components/Nav/examples/Navigation.css +3 -26
  213. package/docs/components/Nav/examples/Navigation.md +99 -0
  214. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +619 -240
  215. package/docs/components/OptionsMenu/deprecated/options-menu.md +403 -160
  216. package/docs/components/OverflowMenu/examples/overflow-menu.md +45 -34
  217. package/docs/components/Pagination/examples/Pagination.md +195 -65
  218. package/docs/components/Popover/examples/Popover.css +2 -2
  219. package/docs/components/ProgressStepper/examples/ProgressStepper.md +50 -0
  220. package/docs/components/Select/deprecated/Select.css +3 -3
  221. package/docs/components/Select/deprecated/Select.md +43 -55
  222. package/docs/components/Table/examples/Table.css +2 -2
  223. package/docs/components/Table/examples/Table.md +4546 -1668
  224. package/docs/components/Tabs/examples/Tabs.md +1094 -438
  225. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  226. package/docs/components/TextInputGroup/examples/TextInputGroup.md +2 -2
  227. package/docs/components/Tile/examples/Tile.css +1 -1
  228. package/docs/components/Toolbar/examples/Toolbar.md +148 -80
  229. package/docs/components/TreeView/examples/TreeView.md +23 -8
  230. package/docs/components/Wizard/examples/Wizard.md +75 -36
  231. package/docs/demos/Card/examples/Card.css +3 -3
  232. package/docs/demos/Card/examples/Card.md +49 -24
  233. package/docs/demos/CardView/examples/CardView.md +182 -74
  234. package/docs/demos/ContextSelector/examples/ContextSelector.md +95 -47
  235. package/docs/demos/Dashboard/examples/Dashboard.md +18 -9
  236. package/docs/demos/DataList/examples/DataList.md +163 -70
  237. package/docs/demos/DescriptionList/examples/DescriptionList.md +20 -9
  238. package/docs/demos/Drawer/examples/Drawer.md +20 -9
  239. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +803 -338
  240. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +241 -101
  241. package/docs/demos/Table/examples/Table.md +1422 -607
  242. package/docs/demos/Tabs/examples/Tabs.md +113 -48
  243. package/docs/demos/Toolbar/examples/Toolbar.md +320 -127
  244. package/docs/demos/Wizard/examples/Wizard.md +191 -41
  245. package/docs/layouts/Flex/examples/Flex.md +5 -5
  246. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  247. package/icons/pficons.mjs +1 -0
  248. package/layouts/Flex/flex.css +115 -43
  249. package/layouts/Flex/flex.scss +20 -8
  250. package/package.json +40 -37
  251. package/patternfly-addons.css +732 -972
  252. package/patternfly-base-no-globals-theme-dark-unversioned.css +27 -3
  253. package/patternfly-base-no-globals.css +27 -3
  254. package/patternfly-base-theme-dark-unversioned.css +28 -4
  255. package/patternfly-base.css +28 -4
  256. package/patternfly-no-globals.css +2420 -1872
  257. package/patternfly-theme-dark-unversioned.css +2421 -1873
  258. package/patternfly.css +2421 -1873
  259. package/patternfly.min.css +1 -1
  260. package/patternfly.min.css.map +1 -1
  261. package/sass-utilities/functions.scss +6 -0
  262. package/sass-utilities/mixins.scss +62 -2
  263. package/sass-utilities/placeholders.scss +1 -1
  264. package/sass-utilities/scss-variables.scss +8 -8
  265. package/utilities/Accessibility/accessibility.css +12 -12
  266. package/utilities/Spacing/spacing.css +720 -960
  267. package/utilities/Spacing/spacing.scss +4 -8
package/docs/components/TextInputGroup/examples/TextInputGroup.css CHANGED
@@ -5,7 +5,7 @@
5
5
  .ws-example-wrapper .pf-v5-c-menu,
6
6
  .ws-example-wrapper .pf-v5-c-panel {
7
7
  position: absolute;
8
- top: 40px;
8
+ inset-block-start: 40px;
9
9
  width: 100%;
10
10
  }
11
11
 
package/docs/components/TextInputGroup/examples/TextInputGroup.md CHANGED
@@ -79,7 +79,7 @@ cssPrefix: pf-v5-c-text-input-group
79
79
  ```html
80
80
  <div class="pf-v5-c-text-input-group">
81
81
  <div class="pf-v5-c-text-input-group__main">
82
- <div class="pf-v5-c-chip-group">
82
+ <div class="pf-v5-c-chip-group" role="group">
83
83
  <div class="pf-v5-c-chip-group__main">
84
84
  <ul
85
85
  class="pf-v5-c-chip-group__list"
@@ -249,7 +249,7 @@ cssPrefix: pf-v5-c-text-input-group
249
249
  ```html
250
250
  <div class="pf-v5-c-text-input-group">
251
251
  <div class="pf-v5-c-text-input-group__main">
252
- <div class="pf-v5-c-chip-group">
252
+ <div class="pf-v5-c-chip-group" role="group">
253
253
  <div class="pf-v5-c-chip-group__main">
254
254
  <ul
255
255
  class="pf-v5-c-chip-group__list"
package/docs/components/Tile/examples/Tile.css CHANGED
@@ -2,7 +2,7 @@
2
2
  #ws-core-c-tile-extra-content .ws-preview-html .pf-v5-c-tile,
3
3
  #ws-core-c-tile-stacked-tiles .ws-preview-html .pf-v5-c-tile,
4
4
  #ws-core-c-tile-stacked-tiles-large .ws-preview-html .pf-v5-c-tile {
5
- margin-right: 8px;
5
+ margin-inline-end: 8px;
6
6
  }
7
7
 
8
8
  #ws-core-c-tile-extra-content .ws-preview-html {
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -563,7 +563,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
563
563
  <span
564
564
  id="toolbar-toggle-group-example-select-checkbox-status-label"
565
565
  hidden
566
- >Choose one</span>
566
+ >Choose many</span>
567
567
 
568
568
  <button
569
569
  class="pf-v5-c-select__toggle"
@@ -666,7 +666,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
666
666
  <span
667
667
  id="toolbar-toggle-group-example-select-checkbox-risk-label"
668
668
  hidden
669
- >Choose one</span>
669
+ >Choose many</span>
670
670
 
671
671
  <button
672
672
  class="pf-v5-c-select__toggle"
@@ -901,7 +901,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
901
901
  <span
902
902
  id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-label"
903
903
  hidden
904
- >Choose one</span>
904
+ >Choose many</span>
905
905
 
906
906
  <button
907
907
  class="pf-v5-c-select__toggle"
@@ -1002,7 +1002,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
1002
1002
  <span
1003
1003
  id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-label"
1004
1004
  hidden
1005
- >Choose one</span>
1005
+ >Choose many</span>
1006
1006
 
1007
1007
  <button
1008
1008
  class="pf-v5-c-select__toggle"
@@ -1171,22 +1171,25 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1171
1171
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1172
1172
  </button>
1173
1173
  </div>
1174
- <ul class="pf-v5-c-dropdown__menu" hidden>
1175
- <li>
1174
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1175
+ <li role="none">
1176
1176
  <button
1177
1177
  class="pf-v5-c-dropdown__menu-item"
1178
+ role="menuitem"
1178
1179
  type="button"
1179
1180
  >Select all</button>
1180
1181
  </li>
1181
- <li>
1182
+ <li role="none">
1182
1183
  <button
1183
1184
  class="pf-v5-c-dropdown__menu-item"
1185
+ role="menuitem"
1184
1186
  type="button"
1185
1187
  >Select none</button>
1186
1188
  </li>
1187
- <li>
1189
+ <li role="none">
1188
1190
  <button
1189
1191
  class="pf-v5-c-dropdown__menu-item"
1192
+ role="menuitem"
1190
1193
  type="button"
1191
1194
  >Other action</button>
1192
1195
  </li>
@@ -1305,7 +1308,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1305
1308
  <span
1306
1309
  id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-label"
1307
1310
  hidden
1308
- >Choose one</span>
1311
+ >Choose many</span>
1309
1312
 
1310
1313
  <button
1311
1314
  class="pf-v5-c-select__toggle"
@@ -1408,7 +1411,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1408
1411
  <span
1409
1412
  id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-label"
1410
1413
  hidden
1411
- >Choose one</span>
1414
+ >Choose many</span>
1412
1415
 
1413
1416
  <button
1414
1417
  class="pf-v5-c-select__toggle"
@@ -1526,17 +1529,27 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1526
1529
  </button>
1527
1530
  <ul
1528
1531
  class="pf-v5-c-dropdown__menu"
1532
+ role="menu"
1529
1533
  aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-icon-button-overflow-menu-dropdown-toggle"
1530
1534
  hidden
1531
1535
  >
1532
- <li>
1533
- <button class="pf-v5-c-dropdown__menu-item">Edit</button>
1536
+ <li role="none">
1537
+ <button
1538
+ role="menuitem"
1539
+ class="pf-v5-c-dropdown__menu-item"
1540
+ >Edit</button>
1534
1541
  </li>
1535
- <li>
1536
- <button class="pf-v5-c-dropdown__menu-item">Clone</button>
1542
+ <li role="none">
1543
+ <button
1544
+ role="menuitem"
1545
+ class="pf-v5-c-dropdown__menu-item"
1546
+ >Clone</button>
1537
1547
  </li>
1538
- <li>
1539
- <button class="pf-v5-c-dropdown__menu-item">Sync</button>
1548
+ <li role="none">
1549
+ <button
1550
+ role="menuitem"
1551
+ class="pf-v5-c-dropdown__menu-item"
1552
+ >Sync</button>
1540
1553
  </li>
1541
1554
  </ul>
1542
1555
  </div>
@@ -1551,11 +1564,10 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1551
1564
  >
1552
1565
  <div class="pf-v5-c-toolbar__group pf-m-chip-container">
1553
1566
  <div class="pf-v5-c-toolbar__item pf-m-chip-group">
1554
- <div class="pf-v5-c-chip-group pf-m-category">
1567
+ <div class="pf-v5-c-chip-group pf-m-category" role="group">
1555
1568
  <div class="pf-v5-c-chip-group__main">
1556
1569
  <span
1557
1570
  class="pf-v5-c-chip-group__label"
1558
- aria-hidden="true"
1559
1571
  id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-status-chip-group-label"
1560
1572
  >Status</span>
1561
1573
  <ul
@@ -1631,11 +1643,10 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1631
1643
  </div>
1632
1644
  </div>
1633
1645
  <div class="pf-v5-c-toolbar__item pf-m-chip-group">
1634
- <div class="pf-v5-c-chip-group pf-m-category">
1646
+ <div class="pf-v5-c-chip-group pf-m-category" role="group">
1635
1647
  <div class="pf-v5-c-chip-group__main">
1636
1648
  <span
1637
1649
  class="pf-v5-c-chip-group__label"
1638
- aria-hidden="true"
1639
1650
  id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-risk-chip-group-label"
1640
1651
  >Risk</span>
1641
1652
  <ul
@@ -1762,22 +1773,25 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1762
1773
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1763
1774
  </button>
1764
1775
  </div>
1765
- <ul class="pf-v5-c-dropdown__menu" hidden>
1766
- <li>
1776
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1777
+ <li role="none">
1767
1778
  <button
1768
1779
  class="pf-v5-c-dropdown__menu-item"
1780
+ role="menuitem"
1769
1781
  type="button"
1770
1782
  >Select all</button>
1771
1783
  </li>
1772
- <li>
1784
+ <li role="none">
1773
1785
  <button
1774
1786
  class="pf-v5-c-dropdown__menu-item"
1787
+ role="menuitem"
1775
1788
  type="button"
1776
1789
  >Select none</button>
1777
1790
  </li>
1778
- <li>
1791
+ <li role="none">
1779
1792
  <button
1780
1793
  class="pf-v5-c-dropdown__menu-item"
1794
+ role="menuitem"
1781
1795
  type="button"
1782
1796
  >Other action</button>
1783
1797
  </li>
@@ -1815,17 +1829,27 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1815
1829
  </button>
1816
1830
  <ul
1817
1831
  class="pf-v5-c-dropdown__menu"
1832
+ role="menu"
1818
1833
  aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-icon-button-overflow-menu-dropdown-toggle"
1819
1834
  hidden
1820
1835
  >
1821
- <li>
1822
- <button class="pf-v5-c-dropdown__menu-item">Edit</button>
1836
+ <li role="none">
1837
+ <button
1838
+ role="menuitem"
1839
+ class="pf-v5-c-dropdown__menu-item"
1840
+ >Edit</button>
1823
1841
  </li>
1824
- <li>
1825
- <button class="pf-v5-c-dropdown__menu-item">Clone</button>
1842
+ <li role="none">
1843
+ <button
1844
+ role="menuitem"
1845
+ class="pf-v5-c-dropdown__menu-item"
1846
+ >Clone</button>
1826
1847
  </li>
1827
- <li>
1828
- <button class="pf-v5-c-dropdown__menu-item">Sync</button>
1848
+ <li role="none">
1849
+ <button
1850
+ role="menuitem"
1851
+ class="pf-v5-c-dropdown__menu-item"
1852
+ >Sync</button>
1829
1853
  </li>
1830
1854
  </ul>
1831
1855
  </div>
@@ -1937,7 +1961,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1937
1961
  <span
1938
1962
  id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-label"
1939
1963
  hidden
1940
- >Choose one</span>
1964
+ >Choose many</span>
1941
1965
 
1942
1966
  <button
1943
1967
  class="pf-v5-c-select__toggle"
@@ -2038,7 +2062,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2038
2062
  <span
2039
2063
  id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-label"
2040
2064
  hidden
2041
- >Choose one</span>
2065
+ >Choose many</span>
2042
2066
 
2043
2067
  <button
2044
2068
  class="pf-v5-c-select__toggle"
@@ -2138,11 +2162,10 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2138
2162
  <div class="pf-v5-c-toolbar__group pf-m-chip-container">
2139
2163
  <div class="pf-v5-c-toolbar__group">
2140
2164
  <div class="pf-v5-c-toolbar__item pf-m-chip-group">
2141
- <div class="pf-v5-c-chip-group pf-m-category">
2165
+ <div class="pf-v5-c-chip-group pf-m-category" role="group">
2142
2166
  <div class="pf-v5-c-chip-group__main">
2143
2167
  <span
2144
2168
  class="pf-v5-c-chip-group__label"
2145
- aria-hidden="true"
2146
2169
  id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-status-chip-group-label"
2147
2170
  >Status</span>
2148
2171
  <ul
@@ -2218,11 +2241,10 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2218
2241
  </div>
2219
2242
  </div>
2220
2243
  <div class="pf-v5-c-toolbar__item pf-m-chip-group">
2221
- <div class="pf-v5-c-chip-group pf-m-category">
2244
+ <div class="pf-v5-c-chip-group pf-m-category" role="group">
2222
2245
  <div class="pf-v5-c-chip-group__main">
2223
2246
  <span
2224
2247
  class="pf-v5-c-chip-group__label"
2225
- aria-hidden="true"
2226
2248
  id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-risk-chip-group-label"
2227
2249
  >Risk</span>
2228
2250
  <ul
@@ -2344,22 +2366,25 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2344
2366
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2345
2367
  </button>
2346
2368
  </div>
2347
- <ul class="pf-v5-c-dropdown__menu" hidden>
2348
- <li>
2369
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
2370
+ <li role="none">
2349
2371
  <button
2350
2372
  class="pf-v5-c-dropdown__menu-item"
2373
+ role="menuitem"
2351
2374
  type="button"
2352
2375
  >Select all</button>
2353
2376
  </li>
2354
- <li>
2377
+ <li role="none">
2355
2378
  <button
2356
2379
  class="pf-v5-c-dropdown__menu-item"
2380
+ role="menuitem"
2357
2381
  type="button"
2358
2382
  >Select none</button>
2359
2383
  </li>
2360
- <li>
2384
+ <li role="none">
2361
2385
  <button
2362
2386
  class="pf-v5-c-dropdown__menu-item"
2387
+ role="menuitem"
2363
2388
  type="button"
2364
2389
  >Other action</button>
2365
2390
  </li>
@@ -2384,7 +2409,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2384
2409
  <span
2385
2410
  id="toolbar-selected-filters-example-select-checkbox-status-label"
2386
2411
  hidden
2387
- >Choose one</span>
2412
+ >Choose many</span>
2388
2413
 
2389
2414
  <button
2390
2415
  class="pf-v5-c-select__toggle"
@@ -2487,7 +2512,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2487
2512
  <span
2488
2513
  id="toolbar-selected-filters-example-select-checkbox-risk-label"
2489
2514
  hidden
2490
- >Choose one</span>
2515
+ >Choose many</span>
2491
2516
 
2492
2517
  <button
2493
2518
  class="pf-v5-c-select__toggle"
@@ -2660,11 +2685,15 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2660
2685
  </button>
2661
2686
  <ul
2662
2687
  class="pf-v5-c-dropdown__menu"
2688
+ role="menu"
2663
2689
  aria-labelledby="toolbar-selected-filters-example-overflow-menu-dropdown-toggle"
2664
2690
  hidden
2665
2691
  >
2666
- <li>
2667
- <button class="pf-v5-c-dropdown__menu-item">Tertiary</button>
2692
+ <li role="none">
2693
+ <button
2694
+ role="menuitem"
2695
+ class="pf-v5-c-dropdown__menu-item"
2696
+ >Tertiary</button>
2668
2697
  </li>
2669
2698
  </ul>
2670
2699
  </div>
@@ -2676,11 +2705,10 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2676
2705
  <div class="pf-v5-c-toolbar__content pf-m-chip-container">
2677
2706
  <div class="pf-v5-c-toolbar__group">
2678
2707
  <div class="pf-v5-c-toolbar__item pf-m-chip-group">
2679
- <div class="pf-v5-c-chip-group pf-m-category">
2708
+ <div class="pf-v5-c-chip-group pf-m-category" role="group">
2680
2709
  <div class="pf-v5-c-chip-group__main">
2681
2710
  <span
2682
2711
  class="pf-v5-c-chip-group__label"
2683
- aria-hidden="true"
2684
2712
  id="toolbar-selected-filters-example-chip-group-status-chip-group-label"
2685
2713
  >Status</span>
2686
2714
  <ul
@@ -2756,11 +2784,10 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2756
2784
  </div>
2757
2785
  </div>
2758
2786
  <div class="pf-v5-c-toolbar__item pf-m-chip-group">
2759
- <div class="pf-v5-c-chip-group pf-m-category">
2787
+ <div class="pf-v5-c-chip-group pf-m-category" role="group">
2760
2788
  <div class="pf-v5-c-chip-group__main">
2761
2789
  <span
2762
2790
  class="pf-v5-c-chip-group__label"
2763
- aria-hidden="true"
2764
2791
  id="toolbar-selected-filters-example-chip-group-risk-chip-group-label"
2765
2792
  >Risk</span>
2766
2793
  <ul
@@ -3256,11 +3283,15 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3256
3283
  </button>
3257
3284
  <ul
3258
3285
  class="pf-v5-c-dropdown__menu"
3286
+ role="menu"
3259
3287
  aria-labelledby="toolbar-stacked-example-overflow-menu-dropdown-toggle"
3260
3288
  hidden
3261
3289
  >
3262
- <li>
3263
- <button class="pf-v5-c-dropdown__menu-item">Tertiary</button>
3290
+ <li role="none">
3291
+ <button
3292
+ role="menuitem"
3293
+ class="pf-v5-c-dropdown__menu-item"
3294
+ >Tertiary</button>
3264
3295
  </li>
3265
3296
  </ul>
3266
3297
  </div>
@@ -3305,22 +3336,25 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3305
3336
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3306
3337
  </button>
3307
3338
  </div>
3308
- <ul class="pf-v5-c-dropdown__menu" hidden>
3309
- <li>
3339
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
3340
+ <li role="none">
3310
3341
  <button
3311
3342
  class="pf-v5-c-dropdown__menu-item"
3343
+ role="menuitem"
3312
3344
  type="button"
3313
3345
  >Select all</button>
3314
3346
  </li>
3315
- <li>
3347
+ <li role="none">
3316
3348
  <button
3317
3349
  class="pf-v5-c-dropdown__menu-item"
3350
+ role="menuitem"
3318
3351
  type="button"
3319
3352
  >Select none</button>
3320
3353
  </li>
3321
- <li>
3354
+ <li role="none">
3322
3355
  <button
3323
3356
  class="pf-v5-c-dropdown__menu-item"
3357
+ role="menuitem"
3324
3358
  type="button"
3325
3359
  >Other action</button>
3326
3360
  </li>
@@ -3348,27 +3382,34 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3348
3382
  </button>
3349
3383
  <ul
3350
3384
  class="pf-v5-c-options-menu__menu"
3385
+ role="menu"
3351
3386
  aria-labelledby="toolbar-stacked-example-pagination-options-menu-toggle"
3352
3387
  hidden
3353
3388
  >
3354
- <li>
3389
+ <li role="none">
3355
3390
  <button
3356
3391
  class="pf-v5-c-options-menu__menu-item"
3357
3392
  type="button"
3393
+ role="menuitem"
3358
3394
  >5 per page</button>
3359
3395
  </li>
3360
- <li>
3361
- <button class="pf-v5-c-options-menu__menu-item" type="button">
3396
+ <li role="none">
3397
+ <button
3398
+ class="pf-v5-c-options-menu__menu-item"
3399
+ type="button"
3400
+ role="menuitem"
3401
+ >
3362
3402
  10 per page
3363
3403
  <div class="pf-v5-c-options-menu__menu-item-icon">
3364
3404
  <i class="fas fa-check" aria-hidden="true"></i>
3365
3405
  </div>
3366
3406
  </button>
3367
3407
  </li>
3368
- <li>
3408
+ <li role="none">
3369
3409
  <button
3370
3410
  class="pf-v5-c-options-menu__menu-item"
3371
3411
  type="button"
3412
+ role="menuitem"
3372
3413
  >20 per page</button>
3373
3414
  </li>
3374
3415
  </ul>
@@ -3467,17 +3508,27 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3467
3508
  </button>
3468
3509
  <ul
3469
3510
  class="pf-v5-c-dropdown__menu"
3511
+ role="menu"
3470
3512
  aria-labelledby="toolbar-stacked-collapsed-example-icon-button-overflow-menu-dropdown-toggle"
3471
3513
  hidden
3472
3514
  >
3473
- <li>
3474
- <button class="pf-v5-c-dropdown__menu-item">Edit</button>
3515
+ <li role="none">
3516
+ <button
3517
+ role="menuitem"
3518
+ class="pf-v5-c-dropdown__menu-item"
3519
+ >Edit</button>
3475
3520
  </li>
3476
- <li>
3477
- <button class="pf-v5-c-dropdown__menu-item">Clone</button>
3521
+ <li role="none">
3522
+ <button
3523
+ role="menuitem"
3524
+ class="pf-v5-c-dropdown__menu-item"
3525
+ >Clone</button>
3478
3526
  </li>
3479
- <li>
3480
- <button class="pf-v5-c-dropdown__menu-item">Sync</button>
3527
+ <li role="none">
3528
+ <button
3529
+ role="menuitem"
3530
+ class="pf-v5-c-dropdown__menu-item"
3531
+ >Sync</button>
3481
3532
  </li>
3482
3533
  </ul>
3483
3534
  </div>
@@ -3828,22 +3879,25 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3828
3879
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3829
3880
  </button>
3830
3881
  </div>
3831
- <ul class="pf-v5-c-dropdown__menu" hidden>
3832
- <li>
3882
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
3883
+ <li role="none">
3833
3884
  <button
3834
3885
  class="pf-v5-c-dropdown__menu-item"
3886
+ role="menuitem"
3835
3887
  type="button"
3836
3888
  >Select all</button>
3837
3889
  </li>
3838
- <li>
3890
+ <li role="none">
3839
3891
  <button
3840
3892
  class="pf-v5-c-dropdown__menu-item"
3893
+ role="menuitem"
3841
3894
  type="button"
3842
3895
  >Select none</button>
3843
3896
  </li>
3844
- <li>
3897
+ <li role="none">
3845
3898
  <button
3846
3899
  class="pf-v5-c-dropdown__menu-item"
3900
+ role="menuitem"
3847
3901
  type="button"
3848
3902
  >Other action</button>
3849
3903
  </li>
@@ -3871,27 +3925,34 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3871
3925
  </button>
3872
3926
  <ul
3873
3927
  class="pf-v5-c-options-menu__menu"
3928
+ role="menu"
3874
3929
  aria-labelledby="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"
3875
3930
  hidden
3876
3931
  >
3877
- <li>
3932
+ <li role="none">
3878
3933
  <button
3879
3934
  class="pf-v5-c-options-menu__menu-item"
3880
3935
  type="button"
3936
+ role="menuitem"
3881
3937
  >5 per page</button>
3882
3938
  </li>
3883
- <li>
3884
- <button class="pf-v5-c-options-menu__menu-item" type="button">
3939
+ <li role="none">
3940
+ <button
3941
+ class="pf-v5-c-options-menu__menu-item"
3942
+ type="button"
3943
+ role="menuitem"
3944
+ >
3885
3945
  10 per page
3886
3946
  <div class="pf-v5-c-options-menu__menu-item-icon">
3887
3947
  <i class="fas fa-check" aria-hidden="true"></i>
3888
3948
  </div>
3889
3949
  </button>
3890
3950
  </li>
3891
- <li>
3951
+ <li role="none">
3892
3952
  <button
3893
3953
  class="pf-v5-c-options-menu__menu-item"
3894
3954
  type="button"
3955
+ role="menuitem"
3895
3956
  >20 per page</button>
3896
3957
  </li>
3897
3958
  </ul>
@@ -3986,22 +4047,25 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3986
4047
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3987
4048
  </button>
3988
4049
  </div>
3989
- <ul class="pf-v5-c-dropdown__menu" hidden>
3990
- <li>
4050
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
4051
+ <li role="none">
3991
4052
  <button
3992
4053
  class="pf-v5-c-dropdown__menu-item"
4054
+ role="menuitem"
3993
4055
  type="button"
3994
4056
  >Select all</button>
3995
4057
  </li>
3996
- <li>
4058
+ <li role="none">
3997
4059
  <button
3998
4060
  class="pf-v5-c-dropdown__menu-item"
4061
+ role="menuitem"
3999
4062
  type="button"
4000
4063
  >Select none</button>
4001
4064
  </li>
4002
- <li>
4065
+ <li role="none">
4003
4066
  <button
4004
4067
  class="pf-v5-c-dropdown__menu-item"
4068
+ role="menuitem"
4005
4069
  type="button"
4006
4070
  >Other action</button>
4007
4071
  </li>
@@ -4120,7 +4184,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
4120
4184
  <span
4121
4185
  id="toolbar-expanded-elements-example-select-checkbox-status-label"
4122
4186
  hidden
4123
- >Choose one</span>
4187
+ >Choose many</span>
4124
4188
 
4125
4189
  <button
4126
4190
  class="pf-v5-c-select__toggle"
@@ -4220,7 +4284,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
4220
4284
  <span
4221
4285
  id="toolbar-expanded-elements-example-select-checkbox-risk-label"
4222
4286
  hidden
4223
- >Choose one</span>
4287
+ >Choose many</span>
4224
4288
 
4225
4289
  <button
4226
4290
  class="pf-v5-c-select__toggle"
@@ -4390,10 +4454,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
4390
4454
  </button>
4391
4455
  <ul
4392
4456
  class="pf-v5-c-dropdown__menu"
4457
+ role="menu"
4393
4458
  aria-labelledby="toolbar-expanded-elements-example-overflow-menu-dropdown-toggle"
4394
4459
  >
4395
- <li>
4396
- <button class="pf-v5-c-dropdown__menu-item">Tertiary</button>
4460
+ <li role="none">
4461
+ <button
4462
+ role="menuitem"
4463
+ class="pf-v5-c-dropdown__menu-item"
4464
+ >Tertiary</button>
4397
4465
  </li>
4398
4466
  </ul>
4399
4467
  </div>