@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/OptionsMenu/deprecated/options-menu.md CHANGED
@@ -26,22 +26,35 @@ deprecated: true
26
26
  </button>
27
27
  <ul
28
28
  class="pf-v5-c-options-menu__menu"
29
+ role="menu"
29
30
  aria-labelledby="options-menu-single-example-toggle"
30
31
  hidden
31
32
  >
32
- <li>
33
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
34
- </li>
35
- <li>
36
- <button class="pf-v5-c-options-menu__menu-item" type="button">
33
+ <li role="none">
34
+ <button
35
+ class="pf-v5-c-options-menu__menu-item"
36
+ type="button"
37
+ role="menuitem"
38
+ >Option 1</button>
39
+ </li>
40
+ <li role="none">
41
+ <button
42
+ class="pf-v5-c-options-menu__menu-item"
43
+ type="button"
44
+ role="menuitem"
45
+ >
37
46
  Option 2
38
47
  <div class="pf-v5-c-options-menu__menu-item-icon">
39
48
  <i class="fas fa-check" aria-hidden="true"></i>
40
49
  </div>
41
50
  </button>
42
51
  </li>
43
- <li>
44
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 3</button>
52
+ <li role="none">
53
+ <button
54
+ class="pf-v5-c-options-menu__menu-item"
55
+ type="button"
56
+ role="menuitem"
57
+ >Option 3</button>
45
58
  </li>
46
59
  </ul>
47
60
  </div>
@@ -61,21 +74,34 @@ deprecated: true
61
74
  </button>
62
75
  <ul
63
76
  class="pf-v5-c-options-menu__menu"
77
+ role="menu"
64
78
  aria-labelledby="options-menu-single-expanded-example-toggle"
65
79
  >
66
- <li>
67
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
68
- </li>
69
- <li>
70
- <button class="pf-v5-c-options-menu__menu-item" type="button">
80
+ <li role="none">
81
+ <button
82
+ class="pf-v5-c-options-menu__menu-item"
83
+ type="button"
84
+ role="menuitem"
85
+ >Option 1</button>
86
+ </li>
87
+ <li role="none">
88
+ <button
89
+ class="pf-v5-c-options-menu__menu-item"
90
+ type="button"
91
+ role="menuitem"
92
+ >
71
93
  Option 2
72
94
  <div class="pf-v5-c-options-menu__menu-item-icon">
73
95
  <i class="fas fa-check" aria-hidden="true"></i>
74
96
  </div>
75
97
  </button>
76
98
  </li>
77
- <li>
78
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 3</button>
99
+ <li role="none">
100
+ <button
101
+ class="pf-v5-c-options-menu__menu-item"
102
+ type="button"
103
+ role="menuitem"
104
+ >Option 3</button>
79
105
  </li>
80
106
  </ul>
81
107
  </div>
@@ -119,56 +145,75 @@ deprecated: true
119
145
  <i class="fas fa-caret-down" aria-hidden="true"></i>
120
146
  </div>
121
147
  </button>
122
- <ul
148
+ <div
123
149
  class="pf-v5-c-options-menu__menu"
150
+ role="menu"
124
151
  aria-labelledby="options-menu-multiple-example-toggle"
125
152
  hidden
126
153
  >
127
- <li>
128
- <ul aria-label="Sort by">
129
- <li>
130
- <button class="pf-v5-c-options-menu__menu-item" type="button">Name</button>
154
+ <section class="pf-v5-c-options-menu__group" role="none">
155
+ <ul role="group" aria-label="Sort by">
156
+ <li role="none">
157
+ <button
158
+ class="pf-v5-c-options-menu__menu-item"
159
+ type="button"
160
+ role="menuitem"
161
+ >Name</button>
131
162
  </li>
132
- <li>
133
- <button class="pf-v5-c-options-menu__menu-item" type="button">
163
+ <li role="none">
164
+ <button
165
+ class="pf-v5-c-options-menu__menu-item"
166
+ type="button"
167
+ role="menuitem"
168
+ >
134
169
  Date
135
170
  <div class="pf-v5-c-options-menu__menu-item-icon">
136
171
  <i class="fas fa-check" aria-hidden="true"></i>
137
172
  </div>
138
173
  </button>
139
174
  </li>
140
- <li>
175
+ <li role="none">
141
176
  <button
142
177
  class="pf-v5-c-options-menu__menu-item"
143
178
  type="button"
179
+ role="menuitem"
144
180
  disabled
145
181
  >Disabled</button>
146
182
  </li>
147
- <li>
148
- <button class="pf-v5-c-options-menu__menu-item" type="button">Size</button>
183
+ <li role="none">
184
+ <button
185
+ class="pf-v5-c-options-menu__menu-item"
186
+ type="button"
187
+ role="menuitem"
188
+ >Size</button>
149
189
  </li>
150
190
  </ul>
151
- </li>
191
+ </section>
152
192
  <li class="pf-v5-c-divider" role="separator"></li>
153
- <li>
154
- <ul aria-label="Sort direction">
155
- <li>
156
- <button class="pf-v5-c-options-menu__menu-item" type="button">
193
+ <section class="pf-v5-c-options-menu__group" role="none">
194
+ <ul role="group" aria-label="Sort direction">
195
+ <li role="none">
196
+ <button
197
+ class="pf-v5-c-options-menu__menu-item"
198
+ type="button"
199
+ role="menuitem"
200
+ >
157
201
  Ascending
158
202
  <div class="pf-v5-c-options-menu__menu-item-icon">
159
203
  <i class="fas fa-check" aria-hidden="true"></i>
160
204
  </div>
161
205
  </button>
162
206
  </li>
163
- <li>
207
+ <li role="none">
164
208
  <button
165
209
  class="pf-v5-c-options-menu__menu-item"
166
210
  type="button"
211
+ role="menuitem"
167
212
  >Descending</button>
168
213
  </li>
169
214
  </ul>
170
- </li>
171
- </ul>
215
+ </section>
216
+ </div>
172
217
  </div>
173
218
 
174
219
  <div class="pf-v5-c-options-menu pf-m-expanded">
@@ -184,55 +229,74 @@ deprecated: true
184
229
  <i class="fas fa-caret-down" aria-hidden="true"></i>
185
230
  </div>
186
231
  </button>
187
- <ul
232
+ <div
188
233
  class="pf-v5-c-options-menu__menu"
234
+ role="menu"
189
235
  aria-labelledby="options-menu-multiple-expanded-example-toggle"
190
236
  >
191
- <li>
192
- <ul aria-label="Sort by">
193
- <li>
194
- <button class="pf-v5-c-options-menu__menu-item" type="button">Name</button>
237
+ <section class="pf-v5-c-options-menu__group" role="none">
238
+ <ul role="group" aria-label="Sort by">
239
+ <li role="none">
240
+ <button
241
+ class="pf-v5-c-options-menu__menu-item"
242
+ type="button"
243
+ role="menuitem"
244
+ >Name</button>
195
245
  </li>
196
- <li>
197
- <button class="pf-v5-c-options-menu__menu-item" type="button">
246
+ <li role="none">
247
+ <button
248
+ class="pf-v5-c-options-menu__menu-item"
249
+ type="button"
250
+ role="menuitem"
251
+ >
198
252
  Date
199
253
  <div class="pf-v5-c-options-menu__menu-item-icon">
200
254
  <i class="fas fa-check" aria-hidden="true"></i>
201
255
  </div>
202
256
  </button>
203
257
  </li>
204
- <li>
258
+ <li role="none">
205
259
  <button
206
260
  class="pf-v5-c-options-menu__menu-item"
207
261
  type="button"
262
+ role="menuitem"
208
263
  disabled
209
264
  >Disabled</button>
210
265
  </li>
211
- <li>
212
- <button class="pf-v5-c-options-menu__menu-item" type="button">Size</button>
266
+ <li role="none">
267
+ <button
268
+ class="pf-v5-c-options-menu__menu-item"
269
+ type="button"
270
+ role="menuitem"
271
+ >Size</button>
213
272
  </li>
214
273
  </ul>
215
- </li>
274
+ </section>
216
275
  <li class="pf-v5-c-divider" role="separator"></li>
217
- <li>
218
- <ul aria-label="Sort direction">
219
- <li>
220
- <button class="pf-v5-c-options-menu__menu-item" type="button">
276
+ <section class="pf-v5-c-options-menu__group" role="none">
277
+ <ul role="group" aria-label="Sort direction">
278
+ <li role="none">
279
+ <button
280
+ class="pf-v5-c-options-menu__menu-item"
281
+ type="button"
282
+ role="menuitem"
283
+ >
221
284
  Ascending
222
285
  <div class="pf-v5-c-options-menu__menu-item-icon">
223
286
  <i class="fas fa-check" aria-hidden="true"></i>
224
287
  </div>
225
288
  </button>
226
289
  </li>
227
- <li>
290
+ <li role="none">
228
291
  <button
229
292
  class="pf-v5-c-options-menu__menu-item"
230
293
  type="button"
294
+ role="menuitem"
231
295
  >Descending</button>
232
296
  </li>
233
297
  </ul>
234
- </li>
235
- </ul>
298
+ </section>
299
+ </div>
236
300
  </div>
237
301
 
238
302
  ```
@@ -254,22 +318,35 @@ deprecated: true
254
318
  </button>
255
319
  <ul
256
320
  class="pf-v5-c-options-menu__menu"
321
+ role="menu"
257
322
  aria-labelledby="options-menu-plain-disabled-example-toggle"
258
323
  hidden
259
324
  >
260
- <li>
261
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
262
- </li>
263
- <li>
264
- <button class="pf-v5-c-options-menu__menu-item" type="button">
325
+ <li role="none">
326
+ <button
327
+ class="pf-v5-c-options-menu__menu-item"
328
+ type="button"
329
+ role="menuitem"
330
+ >Option 1</button>
331
+ </li>
332
+ <li role="none">
333
+ <button
334
+ class="pf-v5-c-options-menu__menu-item"
335
+ type="button"
336
+ role="menuitem"
337
+ >
265
338
  Option 2
266
339
  <div class="pf-v5-c-options-menu__menu-item-icon">
267
340
  <i class="fas fa-check" aria-hidden="true"></i>
268
341
  </div>
269
342
  </button>
270
343
  </li>
271
- <li>
272
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 3</button>
344
+ <li role="none">
345
+ <button
346
+ class="pf-v5-c-options-menu__menu-item"
347
+ type="button"
348
+ role="menuitem"
349
+ >Option 3</button>
273
350
  </li>
274
351
  </ul>
275
352
  </div>
@@ -287,22 +364,35 @@ deprecated: true
287
364
  </button>
288
365
  <ul
289
366
  class="pf-v5-c-options-menu__menu"
367
+ role="menu"
290
368
  aria-labelledby="options-menu-plain-example-toggle"
291
369
  hidden
292
370
  >
293
- <li>
294
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
295
- </li>
296
- <li>
297
- <button class="pf-v5-c-options-menu__menu-item" type="button">
371
+ <li role="none">
372
+ <button
373
+ class="pf-v5-c-options-menu__menu-item"
374
+ type="button"
375
+ role="menuitem"
376
+ >Option 1</button>
377
+ </li>
378
+ <li role="none">
379
+ <button
380
+ class="pf-v5-c-options-menu__menu-item"
381
+ type="button"
382
+ role="menuitem"
383
+ >
298
384
  Option 2
299
385
  <div class="pf-v5-c-options-menu__menu-item-icon">
300
386
  <i class="fas fa-check" aria-hidden="true"></i>
301
387
  </div>
302
388
  </button>
303
389
  </li>
304
- <li>
305
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 3</button>
390
+ <li role="none">
391
+ <button
392
+ class="pf-v5-c-options-menu__menu-item"
393
+ type="button"
394
+ role="menuitem"
395
+ >Option 3</button>
306
396
  </li>
307
397
  </ul>
308
398
  </div>
@@ -320,21 +410,34 @@ deprecated: true
320
410
  </button>
321
411
  <ul
322
412
  class="pf-v5-c-options-menu__menu"
413
+ role="menu"
323
414
  aria-labelledby="options-menu-plain-expanded-example-toggle"
324
415
  >
325
- <li>
326
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
327
- </li>
328
- <li>
329
- <button class="pf-v5-c-options-menu__menu-item" type="button">
416
+ <li role="none">
417
+ <button
418
+ class="pf-v5-c-options-menu__menu-item"
419
+ type="button"
420
+ role="menuitem"
421
+ >Option 1</button>
422
+ </li>
423
+ <li role="none">
424
+ <button
425
+ class="pf-v5-c-options-menu__menu-item"
426
+ type="button"
427
+ role="menuitem"
428
+ >
330
429
  Option 2
331
430
  <div class="pf-v5-c-options-menu__menu-item-icon">
332
431
  <i class="fas fa-check" aria-hidden="true"></i>
333
432
  </div>
334
433
  </button>
335
434
  </li>
336
- <li>
337
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 3</button>
435
+ <li role="none">
436
+ <button
437
+ class="pf-v5-c-options-menu__menu-item"
438
+ type="button"
439
+ role="menuitem"
440
+ >Option 3</button>
338
441
  </li>
339
442
  </ul>
340
443
  </div>
@@ -359,21 +462,34 @@ deprecated: true
359
462
  </button>
360
463
  <ul
361
464
  class="pf-v5-c-options-menu__menu pf-m-top"
465
+ role="menu"
362
466
  aria-labelledby="options-menu-top-example-toggle"
363
467
  >
364
- <li>
365
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
366
- </li>
367
- <li>
368
- <button class="pf-v5-c-options-menu__menu-item" type="button">
468
+ <li role="none">
469
+ <button
470
+ class="pf-v5-c-options-menu__menu-item"
471
+ type="button"
472
+ role="menuitem"
473
+ >Option 1</button>
474
+ </li>
475
+ <li role="none">
476
+ <button
477
+ class="pf-v5-c-options-menu__menu-item"
478
+ type="button"
479
+ role="menuitem"
480
+ >
369
481
  Option 2
370
482
  <div class="pf-v5-c-options-menu__menu-item-icon">
371
483
  <i class="fas fa-check" aria-hidden="true"></i>
372
484
  </div>
373
485
  </button>
374
486
  </li>
375
- <li>
376
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 3</button>
487
+ <li role="none">
488
+ <button
489
+ class="pf-v5-c-options-menu__menu-item"
490
+ type="button"
491
+ role="menuitem"
492
+ >Option 3</button>
377
493
  </li>
378
494
  </ul>
379
495
  </div>
@@ -398,21 +514,34 @@ deprecated: true
398
514
  </button>
399
515
  <ul
400
516
  class="pf-v5-c-options-menu__menu pf-m-align-right"
517
+ role="menu"
401
518
  aria-labelledby="options-menu-align-right-example-toggle"
402
519
  >
403
- <li>
404
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
405
- </li>
406
- <li>
407
- <button class="pf-v5-c-options-menu__menu-item" type="button">
520
+ <li role="none">
521
+ <button
522
+ class="pf-v5-c-options-menu__menu-item"
523
+ type="button"
524
+ role="menuitem"
525
+ >Option 1</button>
526
+ </li>
527
+ <li role="none">
528
+ <button
529
+ class="pf-v5-c-options-menu__menu-item"
530
+ type="button"
531
+ role="menuitem"
532
+ >
408
533
  Option 2
409
534
  <div class="pf-v5-c-options-menu__menu-item-icon">
410
535
  <i class="fas fa-check" aria-hidden="true"></i>
411
536
  </div>
412
537
  </button>
413
538
  </li>
414
- <li>
415
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 3</button>
539
+ <li role="none">
540
+ <button
541
+ class="pf-v5-c-options-menu__menu-item"
542
+ type="button"
543
+ role="menuitem"
544
+ >Option 3</button>
416
545
  </li>
417
546
  </ul>
418
547
  </div>
@@ -438,22 +567,35 @@ deprecated: true
438
567
  </button>
439
568
  <ul
440
569
  class="pf-v5-c-options-menu__menu"
570
+ role="menu"
441
571
  aria-labelledby="options-menu-disabled-text-example-toggle"
442
572
  hidden
443
573
  >
444
- <li>
445
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
446
- </li>
447
- <li>
448
- <button class="pf-v5-c-options-menu__menu-item" type="button">
574
+ <li role="none">
575
+ <button
576
+ class="pf-v5-c-options-menu__menu-item"
577
+ type="button"
578
+ role="menuitem"
579
+ >Option 1</button>
580
+ </li>
581
+ <li role="none">
582
+ <button
583
+ class="pf-v5-c-options-menu__menu-item"
584
+ type="button"
585
+ role="menuitem"
586
+ >
449
587
  Option 2
450
588
  <div class="pf-v5-c-options-menu__menu-item-icon">
451
589
  <i class="fas fa-check" aria-hidden="true"></i>
452
590
  </div>
453
591
  </button>
454
592
  </li>
455
- <li>
456
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 3</button>
593
+ <li role="none">
594
+ <button
595
+ class="pf-v5-c-options-menu__menu-item"
596
+ type="button"
597
+ role="menuitem"
598
+ >Option 3</button>
457
599
  </li>
458
600
  </ul>
459
601
  </div>
@@ -473,22 +615,35 @@ deprecated: true
473
615
  </button>
474
616
  <ul
475
617
  class="pf-v5-c-options-menu__menu"
618
+ role="menu"
476
619
  aria-labelledby="options-menu-plain-text-example-toggle"
477
620
  hidden
478
621
  >
479
- <li>
480
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
481
- </li>
482
- <li>
483
- <button class="pf-v5-c-options-menu__menu-item" type="button">
622
+ <li role="none">
623
+ <button
624
+ class="pf-v5-c-options-menu__menu-item"
625
+ type="button"
626
+ role="menuitem"
627
+ >Option 1</button>
628
+ </li>
629
+ <li role="none">
630
+ <button
631
+ class="pf-v5-c-options-menu__menu-item"
632
+ type="button"
633
+ role="menuitem"
634
+ >
484
635
  Option 2
485
636
  <div class="pf-v5-c-options-menu__menu-item-icon">
486
637
  <i class="fas fa-check" aria-hidden="true"></i>
487
638
  </div>
488
639
  </button>
489
640
  </li>
490
- <li>
491
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 3</button>
641
+ <li role="none">
642
+ <button
643
+ class="pf-v5-c-options-menu__menu-item"
644
+ type="button"
645
+ role="menuitem"
646
+ >Option 3</button>
492
647
  </li>
493
648
  </ul>
494
649
  </div>
@@ -508,21 +663,34 @@ deprecated: true
508
663
  </button>
509
664
  <ul
510
665
  class="pf-v5-c-options-menu__menu"
666
+ role="menu"
511
667
  aria-labelledby="options-menu-plain-text-expanded-example-toggle"
512
668
  >
513
- <li>
514
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
515
- </li>
516
- <li>
517
- <button class="pf-v5-c-options-menu__menu-item" type="button">
669
+ <li role="none">
670
+ <button
671
+ class="pf-v5-c-options-menu__menu-item"
672
+ type="button"
673
+ role="menuitem"
674
+ >Option 1</button>
675
+ </li>
676
+ <li role="none">
677
+ <button
678
+ class="pf-v5-c-options-menu__menu-item"
679
+ type="button"
680
+ role="menuitem"
681
+ >
518
682
  Option 2
519
683
  <div class="pf-v5-c-options-menu__menu-item-icon">
520
684
  <i class="fas fa-check" aria-hidden="true"></i>
521
685
  </div>
522
686
  </button>
523
687
  </li>
524
- <li>
525
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 3</button>
688
+ <li role="none">
689
+ <button
690
+ class="pf-v5-c-options-menu__menu-item"
691
+ type="button"
692
+ role="menuitem"
693
+ >Option 3</button>
526
694
  </li>
527
695
  </ul>
528
696
  </div>
@@ -547,15 +715,24 @@ deprecated: true
547
715
  </button>
548
716
  <div
549
717
  class="pf-v5-c-options-menu__menu"
718
+ role="menu"
550
719
  aria-labelledby="options-menu-groups-toggle"
551
720
  >
552
- <section class="pf-v5-c-options-menu__group">
553
- <ul>
554
- <li>
555
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
721
+ <section class="pf-v5-c-options-menu__group" role="none">
722
+ <ul role="group">
723
+ <li role="none">
724
+ <button
725
+ class="pf-v5-c-options-menu__menu-item"
726
+ type="button"
727
+ role="menuitem"
728
+ >Option 1</button>
556
729
  </li>
557
- <li>
558
- <button class="pf-v5-c-options-menu__menu-item" type="button">
730
+ <li role="none">
731
+ <button
732
+ class="pf-v5-c-options-menu__menu-item"
733
+ type="button"
734
+ role="menuitem"
735
+ >
559
736
  Option 2
560
737
  <div class="pf-v5-c-options-menu__menu-item-icon">
561
738
  <i class="fas fa-check" aria-hidden="true"></i>
@@ -564,27 +741,43 @@ deprecated: true
564
741
  </li>
565
742
  </ul>
566
743
  </section>
567
- <section class="pf-v5-c-options-menu__group">
744
+ <section class="pf-v5-c-options-menu__group" role="none">
568
745
  <h1 class="pf-v5-c-options-menu__group-title">Group 1</h1>
569
746
 
570
- <ul>
571
- <li>
572
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
747
+ <ul role="group">
748
+ <li role="none">
749
+ <button
750
+ class="pf-v5-c-options-menu__menu-item"
751
+ type="button"
752
+ role="menuitem"
753
+ >Option 1</button>
573
754
  </li>
574
- <li>
575
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 2</button>
755
+ <li role="none">
756
+ <button
757
+ class="pf-v5-c-options-menu__menu-item"
758
+ type="button"
759
+ role="menuitem"
760
+ >Option 2</button>
576
761
  </li>
577
762
  </ul>
578
763
  </section>
579
- <section class="pf-v5-c-options-menu__group">
764
+ <section class="pf-v5-c-options-menu__group" role="none">
580
765
  <h1 class="pf-v5-c-options-menu__group-title">Group 2</h1>
581
766
 
582
- <ul>
583
- <li>
584
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
767
+ <ul role="group">
768
+ <li role="none">
769
+ <button
770
+ class="pf-v5-c-options-menu__menu-item"
771
+ type="button"
772
+ role="menuitem"
773
+ >Option 1</button>
585
774
  </li>
586
- <li>
587
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 2</button>
775
+ <li role="none">
776
+ <button
777
+ class="pf-v5-c-options-menu__menu-item"
778
+ type="button"
779
+ role="menuitem"
780
+ >Option 2</button>
588
781
  </li>
589
782
  </ul>
590
783
  </section>
@@ -611,15 +804,24 @@ deprecated: true
611
804
  </button>
612
805
  <div
613
806
  class="pf-v5-c-options-menu__menu"
807
+ role="menu"
614
808
  aria-labelledby="options-menu-groups-and-dividers-between-groups-toggle"
615
809
  >
616
- <section class="pf-v5-c-options-menu__group">
617
- <ul>
618
- <li>
619
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
810
+ <section class="pf-v5-c-options-menu__group" role="none">
811
+ <ul role="group">
812
+ <li role="none">
813
+ <button
814
+ class="pf-v5-c-options-menu__menu-item"
815
+ type="button"
816
+ role="menuitem"
817
+ >Option 1</button>
620
818
  </li>
621
- <li>
622
- <button class="pf-v5-c-options-menu__menu-item" type="button">
819
+ <li role="none">
820
+ <button
821
+ class="pf-v5-c-options-menu__menu-item"
822
+ type="button"
823
+ role="menuitem"
824
+ >
623
825
  Option 2
624
826
  <div class="pf-v5-c-options-menu__menu-item-icon">
625
827
  <i class="fas fa-check" aria-hidden="true"></i>
@@ -629,28 +831,44 @@ deprecated: true
629
831
  </ul>
630
832
  </section>
631
833
  <hr class="pf-v5-c-divider" />
632
- <section class="pf-v5-c-options-menu__group">
834
+ <section class="pf-v5-c-options-menu__group" role="none">
633
835
  <h1 class="pf-v5-c-options-menu__group-title">Group 1</h1>
634
836
 
635
- <ul>
636
- <li>
637
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
837
+ <ul role="group">
838
+ <li role="none">
839
+ <button
840
+ class="pf-v5-c-options-menu__menu-item"
841
+ type="button"
842
+ role="menuitem"
843
+ >Option 1</button>
638
844
  </li>
639
- <li>
640
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 2</button>
845
+ <li role="none">
846
+ <button
847
+ class="pf-v5-c-options-menu__menu-item"
848
+ type="button"
849
+ role="menuitem"
850
+ >Option 2</button>
641
851
  </li>
642
852
  </ul>
643
853
  </section>
644
854
  <hr class="pf-v5-c-divider" />
645
- <section class="pf-v5-c-options-menu__group">
855
+ <section class="pf-v5-c-options-menu__group" role="none">
646
856
  <h1 class="pf-v5-c-options-menu__group-title">Group 2</h1>
647
857
 
648
- <ul>
649
- <li>
650
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
858
+ <ul role="group">
859
+ <li role="none">
860
+ <button
861
+ class="pf-v5-c-options-menu__menu-item"
862
+ type="button"
863
+ role="menuitem"
864
+ >Option 1</button>
651
865
  </li>
652
- <li>
653
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 2</button>
866
+ <li role="none">
867
+ <button
868
+ class="pf-v5-c-options-menu__menu-item"
869
+ type="button"
870
+ role="menuitem"
871
+ >Option 2</button>
654
872
  </li>
655
873
  </ul>
656
874
  </section>
@@ -677,15 +895,24 @@ deprecated: true
677
895
  </button>
678
896
  <div
679
897
  class="pf-v5-c-options-menu__menu"
898
+ role="menu"
680
899
  aria-labelledby="options-menu-groups-and-dividers-between-items-toggle"
681
900
  >
682
- <section class="pf-v5-c-options-menu__group">
683
- <ul>
684
- <li>
685
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
901
+ <section class="pf-v5-c-options-menu__group" role="none">
902
+ <ul role="group">
903
+ <li role="none">
904
+ <button
905
+ class="pf-v5-c-options-menu__menu-item"
906
+ type="button"
907
+ role="menuitem"
908
+ >Option 1</button>
686
909
  </li>
687
- <li>
688
- <button class="pf-v5-c-options-menu__menu-item" type="button">
910
+ <li role="none">
911
+ <button
912
+ class="pf-v5-c-options-menu__menu-item"
913
+ type="button"
914
+ role="menuitem"
915
+ >
689
916
  Option 2
690
917
  <div class="pf-v5-c-options-menu__menu-item-icon">
691
918
  <i class="fas fa-check" aria-hidden="true"></i>
@@ -695,28 +922,44 @@ deprecated: true
695
922
  <li class="pf-v5-c-divider" role="separator"></li>
696
923
  </ul>
697
924
  </section>
698
- <section class="pf-v5-c-options-menu__group">
925
+ <section class="pf-v5-c-options-menu__group" role="none">
699
926
  <h1 class="pf-v5-c-options-menu__group-title">Group 1</h1>
700
927
 
701
- <ul>
702
- <li>
703
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
928
+ <ul role="group">
929
+ <li role="none">
930
+ <button
931
+ class="pf-v5-c-options-menu__menu-item"
932
+ type="button"
933
+ role="menuitem"
934
+ >Option 1</button>
704
935
  </li>
705
- <li>
706
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 2</button>
936
+ <li role="none">
937
+ <button
938
+ class="pf-v5-c-options-menu__menu-item"
939
+ type="button"
940
+ role="menuitem"
941
+ >Option 2</button>
707
942
  </li>
708
943
  <li class="pf-v5-c-divider" role="separator"></li>
709
944
  </ul>
710
945
  </section>
711
- <section class="pf-v5-c-options-menu__group">
946
+ <section class="pf-v5-c-options-menu__group" role="none">
712
947
  <h1 class="pf-v5-c-options-menu__group-title">Group 2</h1>
713
948
 
714
- <ul>
715
- <li>
716
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
949
+ <ul role="group">
950
+ <li role="none">
951
+ <button
952
+ class="pf-v5-c-options-menu__menu-item"
953
+ type="button"
954
+ role="menuitem"
955
+ >Option 1</button>
717
956
  </li>
718
- <li>
719
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 2</button>
957
+ <li role="none">
958
+ <button
959
+ class="pf-v5-c-options-menu__menu-item"
960
+ type="button"
961
+ role="menuitem"
962
+ >Option 2</button>
720
963
  </li>
721
964
  </ul>
722
965
  </section>