@patternfly/patternfly 5.1.0-prerelease.3 → 5.1.0-prerelease.31

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 (274) hide show
  1. package/README.md +13 -3
  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 +21 -0
  6. package/base/_globals.scss +1 -1
  7. package/base/_variables.scss +7 -0
  8. package/base/patternfly-common.css +16 -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 +23 -12
  14. package/components/AboutModalBox/about-modal-box.scss +25 -12
  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 +19 -13
  22. package/components/Alert/alert.scss +18 -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 +6 -3
  30. package/components/BackgroundImage/background-image.scss +8 -3
  31. package/components/Badge/badge.css +2 -2
  32. package/components/Badge/badge.scss +2 -2
  33. package/components/Banner/banner.css +5 -5
  34. package/components/Banner/banner.scss +5 -2
  35. package/components/Breadcrumb/breadcrumb.css +9 -3
  36. package/components/Breadcrumb/breadcrumb.scss +8 -3
  37. package/components/Button/button.css +26 -17
  38. package/components/Button/button.scss +26 -16
  39. package/components/Button/themes/dark/button.scss +1 -1
  40. package/components/CalendarMonth/calendar-month.css +25 -15
  41. package/components/CalendarMonth/calendar-month.scss +23 -15
  42. package/components/Card/card.css +25 -17
  43. package/components/Card/card.scss +24 -17
  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 +19 -10
  51. package/components/ClipboardCopy/clipboard-copy.scss +16 -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 +69 -84
  66. package/components/DataList/data-list.scss +47 -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 +120 -61
  74. package/components/Drawer/drawer.scss +92 -43
  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 +53 -50
  86. package/components/Form/form.scss +46 -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 +27 -24
  101. package/components/JumpLinks/jump-links.scss +26 -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 +80 -66
  115. package/components/Menu/menu.scss +81 -69
  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 +120 -93
  123. package/components/Nav/nav.scss +120 -93
  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 +32 -19
  128. package/components/NotificationDrawer/notification-drawer.scss +30 -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 +123 -65
  136. package/components/Page/page.scss +69 -40
  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 +82 -31
  143. package/components/Popover/popover.scss +104 -45
  144. package/components/Progress/progress.css +9 -7
  145. package/components/Progress/progress.scss +12 -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 +6 -5
  157. package/components/Skeleton/skeleton.scss +4 -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 +47 -26
  161. package/components/Slider/slider.scss +56 -28
  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 +4 -4
  169. package/components/Table/table-scrollable.scss +6 -4
  170. package/components/Table/table-tree-view.css +112 -105
  171. package/components/Table/table-tree-view.scss +38 -33
  172. package/components/Table/table.css +91 -69
  173. package/components/Table/table.scss +89 -69
  174. package/components/Tabs/tabs.css +76 -48
  175. package/components/Tabs/tabs.scss +74 -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 +26 -21
  184. package/components/Tooltip/tooltip.css +76 -25
  185. package/components/Tooltip/tooltip.scss +100 -41
  186. package/components/TreeView/tree-view.css +48 -27
  187. package/components/TreeView/tree-view.scss +50 -28
  188. package/components/Truncate/truncate.css +9 -0
  189. package/components/Truncate/truncate.scss +16 -3
  190. package/components/Wizard/wizard.css +57 -36
  191. package/components/Wizard/wizard.scss +57 -36
  192. package/docs/components/AppLauncher/deprecated/application-launcher.md +155 -70
  193. package/docs/components/Breadcrumb/examples/Breadcrumb.md +11 -5
  194. package/docs/components/Button/examples/Button.css +2 -2
  195. package/docs/components/Button/examples/Button.md +16 -3
  196. package/docs/components/Card/examples/Card.md +154 -66
  197. package/docs/components/Chip/examples/Chip.md +1 -1
  198. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  199. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  200. package/docs/components/ContextSelector/deprecated/context-selector.md +198 -96
  201. package/docs/components/DataList/examples/DataList.md +391 -136
  202. package/docs/components/DragDrop/examples/DragDrop.css +2 -2
  203. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  204. package/docs/components/Dropdown/deprecated/Dropdown.md +881 -367
  205. package/docs/components/DualListSelector/examples/DualListSelector.md +432 -144
  206. package/docs/components/FormControl/examples/FormControl.md +2 -1
  207. package/docs/components/Hint/examples/Hint.md +57 -24
  208. package/docs/components/InlineEdit/examples/InlineEdit.md +46 -16
  209. package/docs/components/Label/examples/Label.md +1 -1
  210. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  211. package/docs/components/LogViewer/examples/LogViewer.md +40 -30
  212. package/docs/components/Menu/examples/Menu.css +8 -0
  213. package/docs/components/Menu/examples/Menu.md +111 -73
  214. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -1
  215. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  216. package/docs/components/Nav/examples/Navigation.css +3 -26
  217. package/docs/components/Nav/examples/Navigation.md +99 -0
  218. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +619 -240
  219. package/docs/components/OptionsMenu/deprecated/options-menu.md +415 -163
  220. package/docs/components/OverflowMenu/examples/overflow-menu.md +45 -34
  221. package/docs/components/Pagination/examples/Pagination.md +195 -65
  222. package/docs/components/Popover/examples/Popover.css +4 -9
  223. package/docs/components/Popover/examples/Popover.md +4 -4
  224. package/docs/components/ProgressStepper/examples/ProgressStepper.md +50 -0
  225. package/docs/components/Select/deprecated/Select.css +3 -3
  226. package/docs/components/Select/deprecated/Select.md +40 -52
  227. package/docs/components/Table/examples/Table.css +2 -2
  228. package/docs/components/Table/examples/Table.md +4548 -1670
  229. package/docs/components/Tabs/examples/Tabs.md +1094 -438
  230. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  231. package/docs/components/Tile/examples/Tile.css +1 -1
  232. package/docs/components/Toolbar/examples/Toolbar.md +218 -128
  233. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  234. package/docs/components/Tooltip/examples/Tooltip.md +8 -6
  235. package/docs/components/TreeView/examples/TreeView.md +23 -8
  236. package/docs/components/Truncate/examples/Truncate.md +2 -2
  237. package/docs/demos/Card/examples/Card.css +3 -3
  238. package/docs/demos/Card/examples/Card.md +72 -31
  239. package/docs/demos/CardView/examples/CardView.md +182 -74
  240. package/docs/demos/ContextSelector/examples/ContextSelector.md +95 -47
  241. package/docs/demos/Dashboard/examples/Dashboard.md +18 -9
  242. package/docs/demos/DataList/examples/DataList.md +171 -72
  243. package/docs/demos/DescriptionList/examples/DescriptionList.md +20 -9
  244. package/docs/demos/Drawer/examples/Drawer.md +20 -9
  245. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +803 -338
  246. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +257 -105
  247. package/docs/demos/Skeleton/examples/Skeleton.md +7 -35
  248. package/docs/demos/Table/examples/Table.md +1470 -619
  249. package/docs/demos/Tabs/examples/Tabs.md +117 -49
  250. package/docs/demos/Toolbar/examples/Toolbar.md +318 -123
  251. package/docs/layouts/Flex/examples/Flex.md +5 -5
  252. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  253. package/icons/pficons.mjs +1 -0
  254. package/layouts/Flex/flex.css +115 -43
  255. package/layouts/Flex/flex.scss +20 -8
  256. package/package.json +41 -37
  257. package/patternfly-addons.css +732 -972
  258. package/patternfly-base-no-globals-theme-dark-unversioned.css +26 -3
  259. package/patternfly-base-no-globals.css +26 -3
  260. package/patternfly-base-theme-dark-unversioned.css +27 -4
  261. package/patternfly-base.css +27 -4
  262. package/patternfly-no-globals.css +2695 -1897
  263. package/patternfly-theme-dark-unversioned.css +2696 -1898
  264. package/patternfly.css +2696 -1898
  265. package/patternfly.min.css +1 -1
  266. package/patternfly.min.css.map +1 -1
  267. package/sass-utilities/functions.scss +6 -0
  268. package/sass-utilities/mixins.scss +62 -2
  269. package/sass-utilities/placeholders.scss +1 -1
  270. package/sass-utilities/scss-variables.scss +8 -8
  271. package/sass-utilities/themes/dark/mixins.scss +3 -1
  272. package/utilities/Accessibility/accessibility.css +12 -12
  273. package/utilities/Spacing/spacing.css +720 -960
  274. 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
  ```
@@ -250,26 +314,42 @@ deprecated: true
250
314
  disabled
251
315
  aria-label="Sort by"
252
316
  >
253
- <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
317
+ <i
318
+ class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
319
+ aria-hidden="true"
320
+ ></i>
254
321
  </button>
255
322
  <ul
256
323
  class="pf-v5-c-options-menu__menu"
324
+ role="menu"
257
325
  aria-labelledby="options-menu-plain-disabled-example-toggle"
258
326
  hidden
259
327
  >
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">
328
+ <li role="none">
329
+ <button
330
+ class="pf-v5-c-options-menu__menu-item"
331
+ type="button"
332
+ role="menuitem"
333
+ >Option 1</button>
334
+ </li>
335
+ <li role="none">
336
+ <button
337
+ class="pf-v5-c-options-menu__menu-item"
338
+ type="button"
339
+ role="menuitem"
340
+ >
265
341
  Option 2
266
342
  <div class="pf-v5-c-options-menu__menu-item-icon">
267
343
  <i class="fas fa-check" aria-hidden="true"></i>
268
344
  </div>
269
345
  </button>
270
346
  </li>
271
- <li>
272
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 3</button>
347
+ <li role="none">
348
+ <button
349
+ class="pf-v5-c-options-menu__menu-item"
350
+ type="button"
351
+ role="menuitem"
352
+ >Option 3</button>
273
353
  </li>
274
354
  </ul>
275
355
  </div>
@@ -283,26 +363,42 @@ deprecated: true
283
363
  aria-expanded="false"
284
364
  aria-label="Sort by"
285
365
  >
286
- <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
366
+ <i
367
+ class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
368
+ aria-hidden="true"
369
+ ></i>
287
370
  </button>
288
371
  <ul
289
372
  class="pf-v5-c-options-menu__menu"
373
+ role="menu"
290
374
  aria-labelledby="options-menu-plain-example-toggle"
291
375
  hidden
292
376
  >
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">
377
+ <li role="none">
378
+ <button
379
+ class="pf-v5-c-options-menu__menu-item"
380
+ type="button"
381
+ role="menuitem"
382
+ >Option 1</button>
383
+ </li>
384
+ <li role="none">
385
+ <button
386
+ class="pf-v5-c-options-menu__menu-item"
387
+ type="button"
388
+ role="menuitem"
389
+ >
298
390
  Option 2
299
391
  <div class="pf-v5-c-options-menu__menu-item-icon">
300
392
  <i class="fas fa-check" aria-hidden="true"></i>
301
393
  </div>
302
394
  </button>
303
395
  </li>
304
- <li>
305
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 3</button>
396
+ <li role="none">
397
+ <button
398
+ class="pf-v5-c-options-menu__menu-item"
399
+ type="button"
400
+ role="menuitem"
401
+ >Option 3</button>
306
402
  </li>
307
403
  </ul>
308
404
  </div>
@@ -316,25 +412,41 @@ deprecated: true
316
412
  aria-expanded="true"
317
413
  aria-label="Sort by"
318
414
  >
319
- <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
415
+ <i
416
+ class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
417
+ aria-hidden="true"
418
+ ></i>
320
419
  </button>
321
420
  <ul
322
421
  class="pf-v5-c-options-menu__menu"
422
+ role="menu"
323
423
  aria-labelledby="options-menu-plain-expanded-example-toggle"
324
424
  >
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">
425
+ <li role="none">
426
+ <button
427
+ class="pf-v5-c-options-menu__menu-item"
428
+ type="button"
429
+ role="menuitem"
430
+ >Option 1</button>
431
+ </li>
432
+ <li role="none">
433
+ <button
434
+ class="pf-v5-c-options-menu__menu-item"
435
+ type="button"
436
+ role="menuitem"
437
+ >
330
438
  Option 2
331
439
  <div class="pf-v5-c-options-menu__menu-item-icon">
332
440
  <i class="fas fa-check" aria-hidden="true"></i>
333
441
  </div>
334
442
  </button>
335
443
  </li>
336
- <li>
337
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 3</button>
444
+ <li role="none">
445
+ <button
446
+ class="pf-v5-c-options-menu__menu-item"
447
+ type="button"
448
+ role="menuitem"
449
+ >Option 3</button>
338
450
  </li>
339
451
  </ul>
340
452
  </div>
@@ -359,21 +471,34 @@ deprecated: true
359
471
  </button>
360
472
  <ul
361
473
  class="pf-v5-c-options-menu__menu pf-m-top"
474
+ role="menu"
362
475
  aria-labelledby="options-menu-top-example-toggle"
363
476
  >
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">
477
+ <li role="none">
478
+ <button
479
+ class="pf-v5-c-options-menu__menu-item"
480
+ type="button"
481
+ role="menuitem"
482
+ >Option 1</button>
483
+ </li>
484
+ <li role="none">
485
+ <button
486
+ class="pf-v5-c-options-menu__menu-item"
487
+ type="button"
488
+ role="menuitem"
489
+ >
369
490
  Option 2
370
491
  <div class="pf-v5-c-options-menu__menu-item-icon">
371
492
  <i class="fas fa-check" aria-hidden="true"></i>
372
493
  </div>
373
494
  </button>
374
495
  </li>
375
- <li>
376
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 3</button>
496
+ <li role="none">
497
+ <button
498
+ class="pf-v5-c-options-menu__menu-item"
499
+ type="button"
500
+ role="menuitem"
501
+ >Option 3</button>
377
502
  </li>
378
503
  </ul>
379
504
  </div>
@@ -398,21 +523,34 @@ deprecated: true
398
523
  </button>
399
524
  <ul
400
525
  class="pf-v5-c-options-menu__menu pf-m-align-right"
526
+ role="menu"
401
527
  aria-labelledby="options-menu-align-right-example-toggle"
402
528
  >
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">
529
+ <li role="none">
530
+ <button
531
+ class="pf-v5-c-options-menu__menu-item"
532
+ type="button"
533
+ role="menuitem"
534
+ >Option 1</button>
535
+ </li>
536
+ <li role="none">
537
+ <button
538
+ class="pf-v5-c-options-menu__menu-item"
539
+ type="button"
540
+ role="menuitem"
541
+ >
408
542
  Option 2
409
543
  <div class="pf-v5-c-options-menu__menu-item-icon">
410
544
  <i class="fas fa-check" aria-hidden="true"></i>
411
545
  </div>
412
546
  </button>
413
547
  </li>
414
- <li>
415
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 3</button>
548
+ <li role="none">
549
+ <button
550
+ class="pf-v5-c-options-menu__menu-item"
551
+ type="button"
552
+ role="menuitem"
553
+ >Option 3</button>
416
554
  </li>
417
555
  </ul>
418
556
  </div>
@@ -438,22 +576,35 @@ deprecated: true
438
576
  </button>
439
577
  <ul
440
578
  class="pf-v5-c-options-menu__menu"
579
+ role="menu"
441
580
  aria-labelledby="options-menu-disabled-text-example-toggle"
442
581
  hidden
443
582
  >
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">
583
+ <li role="none">
584
+ <button
585
+ class="pf-v5-c-options-menu__menu-item"
586
+ type="button"
587
+ role="menuitem"
588
+ >Option 1</button>
589
+ </li>
590
+ <li role="none">
591
+ <button
592
+ class="pf-v5-c-options-menu__menu-item"
593
+ type="button"
594
+ role="menuitem"
595
+ >
449
596
  Option 2
450
597
  <div class="pf-v5-c-options-menu__menu-item-icon">
451
598
  <i class="fas fa-check" aria-hidden="true"></i>
452
599
  </div>
453
600
  </button>
454
601
  </li>
455
- <li>
456
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 3</button>
602
+ <li role="none">
603
+ <button
604
+ class="pf-v5-c-options-menu__menu-item"
605
+ type="button"
606
+ role="menuitem"
607
+ >Option 3</button>
457
608
  </li>
458
609
  </ul>
459
610
  </div>
@@ -473,22 +624,35 @@ deprecated: true
473
624
  </button>
474
625
  <ul
475
626
  class="pf-v5-c-options-menu__menu"
627
+ role="menu"
476
628
  aria-labelledby="options-menu-plain-text-example-toggle"
477
629
  hidden
478
630
  >
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">
631
+ <li role="none">
632
+ <button
633
+ class="pf-v5-c-options-menu__menu-item"
634
+ type="button"
635
+ role="menuitem"
636
+ >Option 1</button>
637
+ </li>
638
+ <li role="none">
639
+ <button
640
+ class="pf-v5-c-options-menu__menu-item"
641
+ type="button"
642
+ role="menuitem"
643
+ >
484
644
  Option 2
485
645
  <div class="pf-v5-c-options-menu__menu-item-icon">
486
646
  <i class="fas fa-check" aria-hidden="true"></i>
487
647
  </div>
488
648
  </button>
489
649
  </li>
490
- <li>
491
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 3</button>
650
+ <li role="none">
651
+ <button
652
+ class="pf-v5-c-options-menu__menu-item"
653
+ type="button"
654
+ role="menuitem"
655
+ >Option 3</button>
492
656
  </li>
493
657
  </ul>
494
658
  </div>
@@ -508,21 +672,34 @@ deprecated: true
508
672
  </button>
509
673
  <ul
510
674
  class="pf-v5-c-options-menu__menu"
675
+ role="menu"
511
676
  aria-labelledby="options-menu-plain-text-expanded-example-toggle"
512
677
  >
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">
678
+ <li role="none">
679
+ <button
680
+ class="pf-v5-c-options-menu__menu-item"
681
+ type="button"
682
+ role="menuitem"
683
+ >Option 1</button>
684
+ </li>
685
+ <li role="none">
686
+ <button
687
+ class="pf-v5-c-options-menu__menu-item"
688
+ type="button"
689
+ role="menuitem"
690
+ >
518
691
  Option 2
519
692
  <div class="pf-v5-c-options-menu__menu-item-icon">
520
693
  <i class="fas fa-check" aria-hidden="true"></i>
521
694
  </div>
522
695
  </button>
523
696
  </li>
524
- <li>
525
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 3</button>
697
+ <li role="none">
698
+ <button
699
+ class="pf-v5-c-options-menu__menu-item"
700
+ type="button"
701
+ role="menuitem"
702
+ >Option 3</button>
526
703
  </li>
527
704
  </ul>
528
705
  </div>
@@ -547,15 +724,24 @@ deprecated: true
547
724
  </button>
548
725
  <div
549
726
  class="pf-v5-c-options-menu__menu"
727
+ role="menu"
550
728
  aria-labelledby="options-menu-groups-toggle"
551
729
  >
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>
730
+ <section class="pf-v5-c-options-menu__group" role="none">
731
+ <ul role="group">
732
+ <li role="none">
733
+ <button
734
+ class="pf-v5-c-options-menu__menu-item"
735
+ type="button"
736
+ role="menuitem"
737
+ >Option 1</button>
556
738
  </li>
557
- <li>
558
- <button class="pf-v5-c-options-menu__menu-item" type="button">
739
+ <li role="none">
740
+ <button
741
+ class="pf-v5-c-options-menu__menu-item"
742
+ type="button"
743
+ role="menuitem"
744
+ >
559
745
  Option 2
560
746
  <div class="pf-v5-c-options-menu__menu-item-icon">
561
747
  <i class="fas fa-check" aria-hidden="true"></i>
@@ -564,27 +750,43 @@ deprecated: true
564
750
  </li>
565
751
  </ul>
566
752
  </section>
567
- <section class="pf-v5-c-options-menu__group">
753
+ <section class="pf-v5-c-options-menu__group" role="none">
568
754
  <h1 class="pf-v5-c-options-menu__group-title">Group 1</h1>
569
755
 
570
- <ul>
571
- <li>
572
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
756
+ <ul role="group">
757
+ <li role="none">
758
+ <button
759
+ class="pf-v5-c-options-menu__menu-item"
760
+ type="button"
761
+ role="menuitem"
762
+ >Option 1</button>
573
763
  </li>
574
- <li>
575
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 2</button>
764
+ <li role="none">
765
+ <button
766
+ class="pf-v5-c-options-menu__menu-item"
767
+ type="button"
768
+ role="menuitem"
769
+ >Option 2</button>
576
770
  </li>
577
771
  </ul>
578
772
  </section>
579
- <section class="pf-v5-c-options-menu__group">
773
+ <section class="pf-v5-c-options-menu__group" role="none">
580
774
  <h1 class="pf-v5-c-options-menu__group-title">Group 2</h1>
581
775
 
582
- <ul>
583
- <li>
584
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
776
+ <ul role="group">
777
+ <li role="none">
778
+ <button
779
+ class="pf-v5-c-options-menu__menu-item"
780
+ type="button"
781
+ role="menuitem"
782
+ >Option 1</button>
585
783
  </li>
586
- <li>
587
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 2</button>
784
+ <li role="none">
785
+ <button
786
+ class="pf-v5-c-options-menu__menu-item"
787
+ type="button"
788
+ role="menuitem"
789
+ >Option 2</button>
588
790
  </li>
589
791
  </ul>
590
792
  </section>
@@ -611,15 +813,24 @@ deprecated: true
611
813
  </button>
612
814
  <div
613
815
  class="pf-v5-c-options-menu__menu"
816
+ role="menu"
614
817
  aria-labelledby="options-menu-groups-and-dividers-between-groups-toggle"
615
818
  >
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>
819
+ <section class="pf-v5-c-options-menu__group" role="none">
820
+ <ul role="group">
821
+ <li role="none">
822
+ <button
823
+ class="pf-v5-c-options-menu__menu-item"
824
+ type="button"
825
+ role="menuitem"
826
+ >Option 1</button>
620
827
  </li>
621
- <li>
622
- <button class="pf-v5-c-options-menu__menu-item" type="button">
828
+ <li role="none">
829
+ <button
830
+ class="pf-v5-c-options-menu__menu-item"
831
+ type="button"
832
+ role="menuitem"
833
+ >
623
834
  Option 2
624
835
  <div class="pf-v5-c-options-menu__menu-item-icon">
625
836
  <i class="fas fa-check" aria-hidden="true"></i>
@@ -629,28 +840,44 @@ deprecated: true
629
840
  </ul>
630
841
  </section>
631
842
  <hr class="pf-v5-c-divider" />
632
- <section class="pf-v5-c-options-menu__group">
843
+ <section class="pf-v5-c-options-menu__group" role="none">
633
844
  <h1 class="pf-v5-c-options-menu__group-title">Group 1</h1>
634
845
 
635
- <ul>
636
- <li>
637
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
846
+ <ul role="group">
847
+ <li role="none">
848
+ <button
849
+ class="pf-v5-c-options-menu__menu-item"
850
+ type="button"
851
+ role="menuitem"
852
+ >Option 1</button>
638
853
  </li>
639
- <li>
640
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 2</button>
854
+ <li role="none">
855
+ <button
856
+ class="pf-v5-c-options-menu__menu-item"
857
+ type="button"
858
+ role="menuitem"
859
+ >Option 2</button>
641
860
  </li>
642
861
  </ul>
643
862
  </section>
644
863
  <hr class="pf-v5-c-divider" />
645
- <section class="pf-v5-c-options-menu__group">
864
+ <section class="pf-v5-c-options-menu__group" role="none">
646
865
  <h1 class="pf-v5-c-options-menu__group-title">Group 2</h1>
647
866
 
648
- <ul>
649
- <li>
650
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
867
+ <ul role="group">
868
+ <li role="none">
869
+ <button
870
+ class="pf-v5-c-options-menu__menu-item"
871
+ type="button"
872
+ role="menuitem"
873
+ >Option 1</button>
651
874
  </li>
652
- <li>
653
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 2</button>
875
+ <li role="none">
876
+ <button
877
+ class="pf-v5-c-options-menu__menu-item"
878
+ type="button"
879
+ role="menuitem"
880
+ >Option 2</button>
654
881
  </li>
655
882
  </ul>
656
883
  </section>
@@ -677,15 +904,24 @@ deprecated: true
677
904
  </button>
678
905
  <div
679
906
  class="pf-v5-c-options-menu__menu"
907
+ role="menu"
680
908
  aria-labelledby="options-menu-groups-and-dividers-between-items-toggle"
681
909
  >
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>
910
+ <section class="pf-v5-c-options-menu__group" role="none">
911
+ <ul role="group">
912
+ <li role="none">
913
+ <button
914
+ class="pf-v5-c-options-menu__menu-item"
915
+ type="button"
916
+ role="menuitem"
917
+ >Option 1</button>
686
918
  </li>
687
- <li>
688
- <button class="pf-v5-c-options-menu__menu-item" type="button">
919
+ <li role="none">
920
+ <button
921
+ class="pf-v5-c-options-menu__menu-item"
922
+ type="button"
923
+ role="menuitem"
924
+ >
689
925
  Option 2
690
926
  <div class="pf-v5-c-options-menu__menu-item-icon">
691
927
  <i class="fas fa-check" aria-hidden="true"></i>
@@ -695,28 +931,44 @@ deprecated: true
695
931
  <li class="pf-v5-c-divider" role="separator"></li>
696
932
  </ul>
697
933
  </section>
698
- <section class="pf-v5-c-options-menu__group">
934
+ <section class="pf-v5-c-options-menu__group" role="none">
699
935
  <h1 class="pf-v5-c-options-menu__group-title">Group 1</h1>
700
936
 
701
- <ul>
702
- <li>
703
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
937
+ <ul role="group">
938
+ <li role="none">
939
+ <button
940
+ class="pf-v5-c-options-menu__menu-item"
941
+ type="button"
942
+ role="menuitem"
943
+ >Option 1</button>
704
944
  </li>
705
- <li>
706
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 2</button>
945
+ <li role="none">
946
+ <button
947
+ class="pf-v5-c-options-menu__menu-item"
948
+ type="button"
949
+ role="menuitem"
950
+ >Option 2</button>
707
951
  </li>
708
952
  <li class="pf-v5-c-divider" role="separator"></li>
709
953
  </ul>
710
954
  </section>
711
- <section class="pf-v5-c-options-menu__group">
955
+ <section class="pf-v5-c-options-menu__group" role="none">
712
956
  <h1 class="pf-v5-c-options-menu__group-title">Group 2</h1>
713
957
 
714
- <ul>
715
- <li>
716
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 1</button>
958
+ <ul role="group">
959
+ <li role="none">
960
+ <button
961
+ class="pf-v5-c-options-menu__menu-item"
962
+ type="button"
963
+ role="menuitem"
964
+ >Option 1</button>
717
965
  </li>
718
- <li>
719
- <button class="pf-v5-c-options-menu__menu-item" type="button">Option 2</button>
966
+ <li role="none">
967
+ <button
968
+ class="pf-v5-c-options-menu__menu-item"
969
+ type="button"
970
+ role="menuitem"
971
+ >Option 2</button>
720
972
  </li>
721
973
  </ul>
722
974
  </section>