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

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 (257) 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 +16 -0
  13. package/base/tokens/_tokens-font.scss +16 -14
  14. package/components/AboutModalBox/about-modal-box.css +23 -12
  15. package/components/AboutModalBox/about-modal-box.scss +25 -12
  16. package/components/Accordion/accordion.css +33 -20
  17. package/components/Accordion/accordion.scss +32 -20
  18. package/components/ActionList/action-list.css +2 -2
  19. package/components/ActionList/action-list.scss +2 -2
  20. package/components/Alert/alert-group.css +7 -4
  21. package/components/Alert/alert-group.scss +7 -4
  22. package/components/Alert/alert.css +19 -13
  23. package/components/Alert/alert.scss +18 -13
  24. package/components/AppLauncher/app-launcher.css +32 -23
  25. package/components/AppLauncher/app-launcher.scss +32 -23
  26. package/components/BackToTop/back-to-top.css +2 -2
  27. package/components/BackToTop/back-to-top.scss +2 -2
  28. package/components/Backdrop/backdrop.css +2 -2
  29. package/components/Backdrop/backdrop.scss +2 -2
  30. package/components/BackgroundImage/background-image.css +6 -3
  31. package/components/BackgroundImage/background-image.scss +8 -3
  32. package/components/Badge/badge.css +2 -2
  33. package/components/Badge/badge.scss +2 -2
  34. package/components/Banner/banner.css +5 -5
  35. package/components/Banner/banner.scss +5 -2
  36. package/components/Breadcrumb/breadcrumb.css +9 -3
  37. package/components/Breadcrumb/breadcrumb.scss +8 -3
  38. package/components/Button/button.css +33 -21
  39. package/components/Button/button.scss +35 -23
  40. package/components/Button/themes/dark/button.scss +1 -1
  41. package/components/CalendarMonth/calendar-month.css +25 -15
  42. package/components/CalendarMonth/calendar-month.scss +23 -15
  43. package/components/Card/card.css +25 -17
  44. package/components/Card/card.scss +24 -17
  45. package/components/Check/check.css +2 -2
  46. package/components/Check/check.scss +2 -2
  47. package/components/Chip/chip-group.css +6 -6
  48. package/components/Chip/chip-group.scss +6 -6
  49. package/components/Chip/chip.css +16 -9
  50. package/components/Chip/chip.scss +17 -9
  51. package/components/ClipboardCopy/clipboard-copy.css +19 -10
  52. package/components/ClipboardCopy/clipboard-copy.scss +16 -8
  53. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +2 -2
  54. package/components/CodeBlock/code-block.css +6 -3
  55. package/components/CodeBlock/code-block.scss +6 -3
  56. package/components/CodeEditor/code-editor.css +31 -22
  57. package/components/CodeEditor/code-editor.scss +30 -21
  58. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  59. package/components/Content/content.css +33 -30
  60. package/components/Content/content.scss +33 -30
  61. package/components/ContextSelector/context-selector.css +41 -26
  62. package/components/ContextSelector/context-selector.scss +40 -25
  63. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  64. package/components/DataList/data-list-grid.css +21 -21
  65. package/components/DataList/data-list-grid.scss +3 -3
  66. package/components/DataList/data-list.css +69 -56
  67. package/components/DataList/data-list.scss +47 -35
  68. package/components/DatePicker/date-picker.css +8 -8
  69. package/components/DatePicker/date-picker.scss +8 -8
  70. package/components/DescriptionList/description-list.css +8 -5
  71. package/components/DescriptionList/description-list.scss +8 -5
  72. package/components/DragDrop/drag-drop.css +8 -8
  73. package/components/DragDrop/drag-drop.scss +8 -8
  74. package/components/Drawer/drawer.css +120 -61
  75. package/components/Drawer/drawer.scss +92 -43
  76. package/components/Dropdown/dropdown.css +75 -66
  77. package/components/Dropdown/dropdown.scss +65 -56
  78. package/components/DualListSelector/dual-list-selector.css +29 -15
  79. package/components/DualListSelector/dual-list-selector.scss +30 -15
  80. package/components/EmptyState/empty-state.css +7 -4
  81. package/components/EmptyState/empty-state.scss +7 -4
  82. package/components/ExpandableSection/expandable-section.css +17 -10
  83. package/components/ExpandableSection/expandable-section.scss +15 -10
  84. package/components/FileUpload/file-upload.css +9 -15
  85. package/components/FileUpload/file-upload.scss +9 -15
  86. package/components/Form/form.css +53 -50
  87. package/components/Form/form.scss +46 -44
  88. package/components/FormControl/form-control.css +18 -9
  89. package/components/FormControl/form-control.scss +18 -9
  90. package/components/HelperText/helper-text.css +1 -1
  91. package/components/HelperText/helper-text.scss +1 -1
  92. package/components/Hint/hint.css +9 -6
  93. package/components/Hint/hint.scss +9 -6
  94. package/components/Icon/icon.css +1 -1
  95. package/components/Icon/icon.scss +1 -1
  96. package/components/InlineEdit/inline-edit.css +4 -4
  97. package/components/InlineEdit/inline-edit.scss +4 -4
  98. package/components/InputGroup/input-group.css +12 -6
  99. package/components/InputGroup/input-group.scss +11 -5
  100. package/components/InputGroup/themes/dark/input-group.scss +1 -1
  101. package/components/JumpLinks/jump-links.css +27 -24
  102. package/components/JumpLinks/jump-links.scss +26 -24
  103. package/components/Label/label-group.css +13 -10
  104. package/components/Label/label-group.scss +13 -10
  105. package/components/Label/label.css +9 -9
  106. package/components/Label/label.scss +9 -9
  107. package/components/List/list.css +9 -9
  108. package/components/List/list.scss +9 -9
  109. package/components/LogViewer/log-viewer.css +14 -14
  110. package/components/LogViewer/log-viewer.scss +14 -14
  111. package/components/Login/login.css +36 -27
  112. package/components/Login/login.scss +36 -27
  113. package/components/Masthead/masthead.css +19 -22
  114. package/components/Masthead/masthead.scss +19 -22
  115. package/components/Menu/menu.css +79 -65
  116. package/components/Menu/menu.scss +80 -68
  117. package/components/MenuToggle/menu-toggle.css +33 -27
  118. package/components/MenuToggle/menu-toggle.scss +33 -27
  119. package/components/ModalBox/modal-box.css +19 -19
  120. package/components/ModalBox/modal-box.scss +20 -20
  121. package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  122. package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
  123. package/components/Nav/nav.css +120 -93
  124. package/components/Nav/nav.scss +120 -93
  125. package/components/Nav/themes/dark/nav.scss +2 -2
  126. package/components/NotificationBadge/notification-badge.css +13 -7
  127. package/components/NotificationBadge/notification-badge.scss +13 -7
  128. package/components/NotificationDrawer/notification-drawer.css +32 -19
  129. package/components/NotificationDrawer/notification-drawer.scss +30 -19
  130. package/components/NumberInput/number-input.css +2 -2
  131. package/components/NumberInput/number-input.scss +2 -2
  132. package/components/OptionsMenu/options-menu.css +43 -31
  133. package/components/OptionsMenu/options-menu.scss +43 -31
  134. package/components/OverflowMenu/overflow-menu.css +2 -2
  135. package/components/OverflowMenu/overflow-menu.scss +2 -2
  136. package/components/Page/page.css +135 -77
  137. package/components/Page/page.scss +81 -52
  138. package/components/Page/themes/dark/page.scss +1 -1
  139. package/components/Pagination/pagination.css +27 -17
  140. package/components/Pagination/pagination.scss +25 -17
  141. package/components/Panel/panel.css +13 -7
  142. package/components/Panel/panel.scss +13 -7
  143. package/components/Popover/popover.css +72 -40
  144. package/components/Popover/popover.scss +95 -75
  145. package/components/Progress/progress.css +9 -7
  146. package/components/Progress/progress.scss +12 -7
  147. package/components/ProgressStepper/progress-stepper.css +26 -20
  148. package/components/ProgressStepper/progress-stepper.scss +25 -19
  149. package/components/Radio/radio.css +3 -3
  150. package/components/Radio/radio.scss +3 -3
  151. package/components/Select/select.css +56 -47
  152. package/components/Select/select.scss +56 -47
  153. package/components/Sidebar/sidebar.css +11 -5
  154. package/components/Sidebar/sidebar.scss +11 -5
  155. package/components/SimpleList/simple-list.css +10 -4
  156. package/components/SimpleList/simple-list.scss +10 -4
  157. package/components/Skeleton/skeleton.css +6 -5
  158. package/components/Skeleton/skeleton.scss +4 -5
  159. package/components/SkipToContent/skip-to-content.css +3 -3
  160. package/components/SkipToContent/skip-to-content.scss +3 -3
  161. package/components/Slider/slider.css +47 -26
  162. package/components/Slider/slider.scss +56 -28
  163. package/components/Switch/switch.css +9 -5
  164. package/components/Switch/switch.scss +10 -6
  165. package/components/TabContent/tab-content.css +4 -1
  166. package/components/TabContent/tab-content.scss +4 -1
  167. package/components/Table/table-grid.css +256 -195
  168. package/components/Table/table-grid.scss +53 -39
  169. package/components/Table/table-scrollable.css +4 -4
  170. package/components/Table/table-scrollable.scss +6 -4
  171. package/components/Table/table-tree-view.css +112 -105
  172. package/components/Table/table-tree-view.scss +38 -33
  173. package/components/Table/table.css +92 -70
  174. package/components/Table/table.scss +90 -70
  175. package/components/Tabs/tabs.css +76 -48
  176. package/components/Tabs/tabs.scss +74 -48
  177. package/components/TextInputGroup/text-input-group.css +15 -15
  178. package/components/TextInputGroup/text-input-group.scss +15 -15
  179. package/components/Tile/tile.css +10 -10
  180. package/components/Tile/tile.scss +10 -10
  181. package/components/ToggleGroup/toggle-group.css +14 -11
  182. package/components/ToggleGroup/toggle-group.scss +14 -11
  183. package/components/Toolbar/toolbar.css +44 -41
  184. package/components/Toolbar/toolbar.scss +26 -21
  185. package/components/Tooltip/tooltip.css +60 -28
  186. package/components/Tooltip/tooltip.scss +76 -56
  187. package/components/TreeView/tree-view.css +48 -27
  188. package/components/TreeView/tree-view.scss +50 -28
  189. package/components/Truncate/truncate.css +9 -0
  190. package/components/Truncate/truncate.scss +16 -3
  191. package/components/Wizard/wizard.css +57 -36
  192. package/components/Wizard/wizard.scss +57 -36
  193. package/docs/components/Button/examples/Button.css +2 -2
  194. package/docs/components/Button/examples/Button.md +15 -3
  195. package/docs/components/Card/examples/Card.md +15 -15
  196. package/docs/components/Check/examples/Check.md +71 -59
  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/DragDrop/examples/DragDrop.css +2 -2
  201. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  202. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  203. package/docs/components/Label/examples/Label.md +1 -1
  204. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  205. package/docs/components/LogViewer/examples/LogViewer.md +120 -30
  206. package/docs/components/Menu/examples/Menu.css +8 -0
  207. package/docs/components/Menu/examples/Menu.md +90 -73
  208. package/docs/components/MenuToggle/examples/MenuToggle.md +60 -39
  209. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  210. package/docs/components/Nav/examples/Navigation.css +4 -21
  211. package/docs/components/Nav/examples/Navigation.md +99 -0
  212. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  213. package/docs/components/Popover/examples/Popover.css +4 -9
  214. package/docs/components/Radio/examples/Radio.md +63 -55
  215. package/docs/components/Select/deprecated/Select.md +184 -177
  216. package/docs/components/Table/examples/Table.css +2 -2
  217. package/docs/components/Table/examples/Table.md +2 -2
  218. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  219. package/docs/components/Tile/examples/Tile.css +1 -1
  220. package/docs/components/Toolbar/examples/Toolbar.md +525 -431
  221. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  222. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  223. package/docs/components/Truncate/examples/Truncate.md +2 -2
  224. package/docs/demos/Card/examples/Card.css +3 -3
  225. package/docs/demos/Card/examples/Card.md +26 -10
  226. package/docs/demos/CardView/examples/CardView.md +24 -20
  227. package/docs/demos/Dashboard/examples/Dashboard.md +3 -3
  228. package/docs/demos/DataList/examples/DataList.md +8 -2
  229. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -124
  230. package/docs/demos/Skeleton/examples/Skeleton.md +7 -35
  231. package/docs/demos/Table/examples/Table.md +336 -252
  232. package/docs/demos/Tabs/examples/Tabs.md +28 -21
  233. package/docs/demos/Toolbar/examples/Toolbar.css +5 -0
  234. package/docs/demos/Toolbar/examples/Toolbar.md +44 -44
  235. package/docs/layouts/Flex/examples/Flex.md +5 -5
  236. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  237. package/icons/pficons.mjs +1 -0
  238. package/layouts/Flex/flex.css +115 -43
  239. package/layouts/Flex/flex.scss +20 -8
  240. package/package.json +9 -5
  241. package/patternfly-addons.css +732 -972
  242. package/patternfly-base-no-globals-theme-dark-unversioned.css +37 -3
  243. package/patternfly-base-no-globals.css +37 -3
  244. package/patternfly-base-theme-dark-unversioned.css +38 -4
  245. package/patternfly-base.css +38 -4
  246. package/patternfly-no-globals.css +2695 -1875
  247. package/patternfly-theme-dark-unversioned.css +2696 -1876
  248. package/patternfly.css +2696 -1876
  249. package/patternfly.min.css +1 -1
  250. package/patternfly.min.css.map +1 -1
  251. package/sass-utilities/functions.scss +6 -0
  252. package/sass-utilities/mixins.scss +62 -2
  253. package/sass-utilities/scss-variables.scss +8 -8
  254. package/sass-utilities/themes/dark/mixins.scss +3 -1
  255. package/utilities/Accessibility/accessibility.css +12 -12
  256. package/utilities/Spacing/spacing.css +720 -960
  257. package/utilities/Spacing/spacing.scss +4 -8
package/docs/components/Select/deprecated/Select.md CHANGED
@@ -1595,71 +1595,77 @@ The multiselect should be used when the user is selecting multiple items from a
1595
1595
  <fieldset class="pf-v5-c-select__menu-fieldset" aria-label="Select input">
1596
1596
  <label
1597
1597
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1598
- for="select-checkbox-active"
1598
+ id="select-checkbox-active"
1599
+ for="select-checkbox-active-input"
1599
1600
  >
1600
1601
  <input
1601
1602
  class="pf-v5-c-check__input"
1602
1603
  type="checkbox"
1603
- id="select-checkbox-active"
1604
- name="select-checkbox-active"
1604
+ aria-describedby="select-checkbox-active-description"
1605
+ id="select-checkbox-active-input"
1606
+ name="select-checkbox-active-input"
1605
1607
  />
1606
-
1607
1608
  <span class="pf-v5-c-check__label">Active</span>
1608
- <span class="pf-v5-c-check__description">This is a description</span>
1609
+ <span
1610
+ class="pf-v5-c-check__description"
1611
+ id="select-checkbox-active-description"
1612
+ >This is a description</span>
1609
1613
  </label>
1610
1614
  <label
1611
1615
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1612
- for="select-checkbox-canceled"
1616
+ id="select-checkbox-canceled"
1617
+ for="select-checkbox-canceled-input"
1613
1618
  >
1614
1619
  <input
1615
1620
  class="pf-v5-c-check__input"
1616
1621
  type="checkbox"
1617
- id="select-checkbox-canceled"
1618
- name="select-checkbox-canceled"
1622
+ aria-describedby="select-checkbox-canceled-description"
1623
+ id="select-checkbox-canceled-input"
1624
+ name="select-checkbox-canceled-input"
1619
1625
  />
1620
-
1621
1626
  <span class="pf-v5-c-check__label">Canceled</span>
1622
1627
  <span
1623
1628
  class="pf-v5-c-check__description"
1629
+ id="select-checkbox-canceled-description"
1624
1630
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
1625
1631
  </label>
1626
1632
  <label
1627
1633
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1628
- for="select-checkbox-paused"
1634
+ id="select-checkbox-paused"
1635
+ for="select-checkbox-paused-input"
1629
1636
  >
1630
1637
  <input
1631
1638
  class="pf-v5-c-check__input"
1632
1639
  type="checkbox"
1633
- id="select-checkbox-paused"
1634
- name="select-checkbox-paused"
1640
+ id="select-checkbox-paused-input"
1641
+ name="select-checkbox-paused-input"
1635
1642
  />
1636
-
1637
1643
  <span class="pf-v5-c-check__label">Paused</span>
1638
1644
  </label>
1639
1645
  <label
1640
1646
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1641
- for="select-checkbox-warning"
1647
+ id="select-checkbox-warning"
1648
+ for="select-checkbox-warning-input"
1642
1649
  >
1643
1650
  <input
1644
1651
  class="pf-v5-c-check__input"
1645
1652
  type="checkbox"
1646
- id="select-checkbox-warning"
1647
- name="select-checkbox-warning"
1653
+ id="select-checkbox-warning-input"
1654
+ name="select-checkbox-warning-input"
1648
1655
  />
1649
-
1650
1656
  <span class="pf-v5-c-check__label">Warning</span>
1651
1657
  </label>
1652
1658
  <label
1653
1659
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1654
- for="select-checkbox-restarted"
1660
+ id="select-checkbox-restarted"
1661
+ for="select-checkbox-restarted-input"
1655
1662
  >
1656
1663
  <input
1657
1664
  class="pf-v5-c-check__input"
1658
1665
  type="checkbox"
1659
- id="select-checkbox-restarted"
1660
- name="select-checkbox-restarted"
1666
+ id="select-checkbox-restarted-input"
1667
+ name="select-checkbox-restarted-input"
1661
1668
  />
1662
-
1663
1669
  <span class="pf-v5-c-check__label">Restarted</span>
1664
1670
  </label>
1665
1671
  </fieldset>
@@ -1694,70 +1700,70 @@ The multiselect should be used when the user is selecting multiple items from a
1694
1700
  <fieldset class="pf-v5-c-select__menu-fieldset" aria-label="Select input">
1695
1701
  <label
1696
1702
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1697
- for="select-checkbox-expanded-active"
1703
+ id="select-checkbox-expanded-check-active"
1704
+ for="select-checkbox-expanded-check-active-input"
1698
1705
  >
1699
1706
  <input
1700
1707
  class="pf-v5-c-check__input"
1701
1708
  type="checkbox"
1702
- id="select-checkbox-expanded-active"
1703
- name="select-checkbox-expanded-active"
1709
+ id="select-checkbox-expanded-check-active-input"
1710
+ name="select-checkbox-expanded-check-active-input"
1711
+ checked
1704
1712
  />
1705
-
1706
1713
  <span class="pf-v5-c-check__label">Active</span>
1707
1714
  </label>
1708
1715
  <label
1709
1716
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1710
- for="select-checkbox-expanded-canceled"
1717
+ id="select-checkbox-expanded-check-canceled"
1718
+ for="select-checkbox-expanded-check-canceled-input"
1711
1719
  >
1712
1720
  <input
1713
1721
  class="pf-v5-c-check__input"
1714
1722
  type="checkbox"
1715
- id="select-checkbox-expanded-canceled"
1716
- name="select-checkbox-expanded-canceled"
1723
+ id="select-checkbox-expanded-check-canceled-input"
1724
+ name="select-checkbox-expanded-check-canceled-input"
1717
1725
  checked
1718
1726
  />
1719
-
1720
1727
  <span class="pf-v5-c-check__label">Canceled</span>
1721
1728
  </label>
1722
1729
  <label
1723
1730
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1724
- for="select-checkbox-expanded-paused"
1731
+ id="select-checkbox-expanded-check-paused"
1732
+ for="select-checkbox-expanded-check-paused-input"
1725
1733
  >
1726
1734
  <input
1727
1735
  class="pf-v5-c-check__input"
1728
1736
  type="checkbox"
1729
- id="select-checkbox-expanded-paused"
1730
- name="select-checkbox-expanded-paused"
1731
- checked
1737
+ id="select-checkbox-expanded-check-paused-input"
1738
+ name="select-checkbox-expanded-check-paused-input"
1732
1739
  />
1733
-
1734
1740
  <span class="pf-v5-c-check__label">Paused</span>
1735
1741
  </label>
1736
1742
  <label
1737
1743
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1738
- for="select-checkbox-expanded-warning"
1744
+ id="select-checkbox-expanded-check-warning"
1745
+ for="select-checkbox-expanded-check-warning-input"
1739
1746
  >
1740
1747
  <input
1741
1748
  class="pf-v5-c-check__input"
1742
1749
  type="checkbox"
1743
- id="select-checkbox-expanded-warning"
1744
- name="select-checkbox-expanded-warning"
1750
+ id="select-checkbox-expanded-check-warning-input"
1751
+ name="select-checkbox-expanded-check-warning-input"
1752
+ checked
1745
1753
  />
1746
-
1747
1754
  <span class="pf-v5-c-check__label">Warning</span>
1748
1755
  </label>
1749
1756
  <label
1750
1757
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1751
- for="select-checkbox-expanded-restarted"
1758
+ id="select-checkbox-expanded-check-restarted"
1759
+ for="select-checkbox-expanded-check-restarted-input"
1752
1760
  >
1753
1761
  <input
1754
1762
  class="pf-v5-c-check__input"
1755
1763
  type="checkbox"
1756
- id="select-checkbox-expanded-restarted"
1757
- name="select-checkbox-expanded-restarted"
1758
- checked
1764
+ id="select-checkbox-expanded-check-restarted-input"
1765
+ name="select-checkbox-expanded-check-restarted-input"
1759
1766
  />
1760
-
1761
1767
  <span class="pf-v5-c-check__label">Restarted</span>
1762
1768
  </label>
1763
1769
  </fieldset>
@@ -1801,70 +1807,68 @@ The multiselect should be used when the user is selecting multiple items from a
1801
1807
  >
1802
1808
  <label
1803
1809
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1804
- for="select-checkbox-expanded-selected-running"
1810
+ id="select-checkbox-expanded-selected-check-running"
1811
+ for="select-checkbox-expanded-selected-check-running-input"
1805
1812
  >
1806
1813
  <input
1807
1814
  class="pf-v5-c-check__input"
1808
1815
  type="checkbox"
1809
- id="select-checkbox-expanded-selected-running"
1810
- name="running"
1816
+ id="select-checkbox-expanded-selected-check-running-input"
1817
+ name="select-checkbox-expanded-selected-check-running-input"
1811
1818
  />
1812
-
1813
1819
  <span class="pf-v5-c-check__label">Running</span>
1814
1820
  </label>
1815
1821
  <label
1816
1822
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1817
- for="select-checkbox-expanded-selected-stopped"
1823
+ id="select-checkbox-expanded-selected-check-stopped"
1824
+ for="select-checkbox-expanded-selected-check-stopped-input"
1818
1825
  >
1819
1826
  <input
1820
1827
  class="pf-v5-c-check__input"
1821
1828
  type="checkbox"
1822
- id="select-checkbox-expanded-selected-stopped"
1823
- name="stopped"
1824
- checked
1829
+ id="select-checkbox-expanded-selected-check-stopped-input"
1830
+ name="select-checkbox-expanded-selected-check-stopped-input"
1825
1831
  />
1826
-
1827
1832
  <span class="pf-v5-c-check__label">Stopped</span>
1828
1833
  </label>
1829
1834
  <label
1830
1835
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1831
- for="select-checkbox-expanded-selected-down"
1836
+ id="select-checkbox-expanded-selected-check-down"
1837
+ for="select-checkbox-expanded-selected-check-down-input"
1832
1838
  >
1833
1839
  <input
1834
1840
  class="pf-v5-c-check__input"
1835
1841
  type="checkbox"
1836
- id="select-checkbox-expanded-selected-down"
1837
- name="down"
1838
- checked
1842
+ id="select-checkbox-expanded-selected-check-down-input"
1843
+ name="select-checkbox-expanded-selected-check-down-input"
1839
1844
  />
1840
-
1841
1845
  <span class="pf-v5-c-check__label">Down</span>
1842
1846
  </label>
1843
1847
  <label
1844
1848
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1845
- for="select-checkbox-expanded-selected-degraded"
1849
+ id="select-checkbox-expanded-selected-check-degraded"
1850
+ for="select-checkbox-expanded-selected-check-degraded-input"
1846
1851
  >
1847
1852
  <input
1848
1853
  class="pf-v5-c-check__input"
1849
1854
  type="checkbox"
1850
- id="select-checkbox-expanded-selected-degraded"
1851
- name="degraded"
1855
+ id="select-checkbox-expanded-selected-check-degraded-input"
1856
+ name="select-checkbox-expanded-selected-check-degraded-input"
1852
1857
  />
1853
-
1854
1858
  <span class="pf-v5-c-check__label">Degraded</span>
1855
1859
  </label>
1856
1860
  <label
1857
1861
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1858
- for="select-checkbox-expanded-selected-needsMaintenance"
1862
+ id="select-checkbox-expanded-selected-check-needs-maintenance"
1863
+ for="select-checkbox-expanded-selected-check-needs-maintenance-input"
1859
1864
  >
1860
1865
  <input
1861
1866
  class="pf-v5-c-check__input"
1862
1867
  type="checkbox"
1863
- id="select-checkbox-expanded-selected-needsMaintenance"
1864
- name="needsMaintenance"
1868
+ id="select-checkbox-expanded-selected-check-needs-maintenance-input"
1869
+ name="select-checkbox-expanded-selected-check-needs-maintenance-input"
1865
1870
  checked
1866
1871
  />
1867
-
1868
1872
  <span class="pf-v5-c-check__label">Needs maintenance</span>
1869
1873
  </label>
1870
1874
  </fieldset>
@@ -1881,42 +1885,42 @@ The multiselect should be used when the user is selecting multiple items from a
1881
1885
  >
1882
1886
  <label
1883
1887
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1884
- for="select-checkbox-expanded-selected-dell"
1888
+ id="select-checkbox-expanded-selected-check-dell"
1889
+ for="select-checkbox-expanded-selected-check-dell-input"
1885
1890
  >
1886
1891
  <input
1887
1892
  class="pf-v5-c-check__input"
1888
1893
  type="checkbox"
1889
- id="select-checkbox-expanded-selected-dell"
1890
- name="dell"
1894
+ id="select-checkbox-expanded-selected-check-dell-input"
1895
+ name="select-checkbox-expanded-selected-check-dell-input"
1891
1896
  />
1892
-
1893
1897
  <span class="pf-v5-c-check__label">Dell</span>
1894
1898
  </label>
1895
1899
  <label
1896
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-disabled"
1897
- for="select-checkbox-expanded-selected-samsung"
1900
+ class="pf-v5-c-check pf-v5-c-select__menu-item"
1901
+ id="select-checkbox-expanded-selected-check-Samsung"
1902
+ for="select-checkbox-expanded-selected-check-Samsung-input"
1898
1903
  >
1899
1904
  <input
1900
1905
  class="pf-v5-c-check__input"
1901
1906
  type="checkbox"
1902
- id="select-checkbox-expanded-selected-samsung"
1903
- name="samsung"
1907
+ id="select-checkbox-expanded-selected-check-Samsung-input"
1908
+ name="select-checkbox-expanded-selected-check-Samsung-input"
1904
1909
  disabled
1905
1910
  />
1906
-
1907
1911
  <span class="pf-v5-c-check__label pf-m-disabled">Samsung</span>
1908
1912
  </label>
1909
1913
  <label
1910
1914
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1911
- for="select-checkbox-expanded-selected-hp"
1915
+ id="select-checkbox-expanded-selected-check-Hp"
1916
+ for="select-checkbox-expanded-selected-check-Hp-input"
1912
1917
  >
1913
1918
  <input
1914
1919
  class="pf-v5-c-check__input"
1915
1920
  type="checkbox"
1916
- id="select-checkbox-expanded-selected-hp"
1917
- name="hp"
1921
+ id="select-checkbox-expanded-selected-check-Hp-input"
1922
+ name="select-checkbox-expanded-selected-check-Hp-input"
1918
1923
  />
1919
-
1920
1924
  <span class="pf-v5-c-check__label">Hewlett-Packard</span>
1921
1925
  </label>
1922
1926
  </fieldset>
@@ -1983,70 +1987,68 @@ The multiselect should be used when the user is selecting multiple items from a
1983
1987
  >
1984
1988
  <label
1985
1989
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1986
- for="select-checkbox-expanded-selected-filter-example-running"
1990
+ id="select-checkbox-expanded-selected-filter-example-check-running"
1991
+ for="select-checkbox-expanded-selected-filter-example-check-running-input"
1987
1992
  >
1988
1993
  <input
1989
1994
  class="pf-v5-c-check__input"
1990
1995
  type="checkbox"
1991
- id="select-checkbox-expanded-selected-filter-example-running"
1992
- name="running"
1996
+ id="select-checkbox-expanded-selected-filter-example-check-running-input"
1997
+ name="select-checkbox-expanded-selected-filter-example-check-running-input"
1993
1998
  />
1994
-
1995
1999
  <span class="pf-v5-c-check__label">Running</span>
1996
2000
  </label>
1997
2001
  <label
1998
2002
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1999
- for="select-checkbox-expanded-selected-filter-example-stopped"
2003
+ id="select-checkbox-expanded-selected-filter-example-check-stopped"
2004
+ for="select-checkbox-expanded-selected-filter-example-check-stopped-input"
2000
2005
  >
2001
2006
  <input
2002
2007
  class="pf-v5-c-check__input"
2003
2008
  type="checkbox"
2004
- id="select-checkbox-expanded-selected-filter-example-stopped"
2005
- name="stopped"
2006
- checked
2009
+ id="select-checkbox-expanded-selected-filter-example-check-stopped-input"
2010
+ name="select-checkbox-expanded-selected-filter-example-check-stopped-input"
2007
2011
  />
2008
-
2009
2012
  <span class="pf-v5-c-check__label">Stopped</span>
2010
2013
  </label>
2011
2014
  <label
2012
2015
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2013
- for="select-checkbox-expanded-selected-filter-example-down"
2016
+ id="select-checkbox-expanded-selected-filter-example-check-down"
2017
+ for="select-checkbox-expanded-selected-filter-example-check-down-input"
2014
2018
  >
2015
2019
  <input
2016
2020
  class="pf-v5-c-check__input"
2017
2021
  type="checkbox"
2018
- id="select-checkbox-expanded-selected-filter-example-down"
2019
- name="down"
2020
- checked
2022
+ id="select-checkbox-expanded-selected-filter-example-check-down-input"
2023
+ name="select-checkbox-expanded-selected-filter-example-check-down-input"
2021
2024
  />
2022
-
2023
2025
  <span class="pf-v5-c-check__label">Down</span>
2024
2026
  </label>
2025
2027
  <label
2026
2028
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2027
- for="select-checkbox-expanded-selected-filter-example-degraded"
2029
+ id="select-checkbox-expanded-selected-filter-example-check-degraded"
2030
+ for="select-checkbox-expanded-selected-filter-example-check-degraded-input"
2028
2031
  >
2029
2032
  <input
2030
2033
  class="pf-v5-c-check__input"
2031
2034
  type="checkbox"
2032
- id="select-checkbox-expanded-selected-filter-example-degraded"
2033
- name="degraded"
2035
+ id="select-checkbox-expanded-selected-filter-example-check-degraded-input"
2036
+ name="select-checkbox-expanded-selected-filter-example-check-degraded-input"
2034
2037
  />
2035
-
2036
2038
  <span class="pf-v5-c-check__label">Degraded</span>
2037
2039
  </label>
2038
2040
  <label
2039
2041
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2040
- for="select-checkbox-expanded-selected-filter-example-needsMaintenance"
2042
+ id="select-checkbox-expanded-selected-filter-example-check-needs-maintenance"
2043
+ for="select-checkbox-expanded-selected-filter-example-check-needs-maintenance-input"
2041
2044
  >
2042
2045
  <input
2043
2046
  class="pf-v5-c-check__input"
2044
2047
  type="checkbox"
2045
- id="select-checkbox-expanded-selected-filter-example-needsMaintenance"
2046
- name="needsMaintenance"
2048
+ id="select-checkbox-expanded-selected-filter-example-check-needs-maintenance-input"
2049
+ name="select-checkbox-expanded-selected-filter-example-check-needs-maintenance-input"
2047
2050
  checked
2048
2051
  />
2049
-
2050
2052
  <span class="pf-v5-c-check__label">Needs maintenance</span>
2051
2053
  </label>
2052
2054
  </fieldset>
@@ -2063,42 +2065,42 @@ The multiselect should be used when the user is selecting multiple items from a
2063
2065
  >
2064
2066
  <label
2065
2067
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2066
- for="select-checkbox-expanded-selected-filter-example-dell"
2068
+ id="select-checkbox-expanded-selected-filter-example-check-dell"
2069
+ for="select-checkbox-expanded-selected-filter-example-check-dell-input"
2067
2070
  >
2068
2071
  <input
2069
2072
  class="pf-v5-c-check__input"
2070
2073
  type="checkbox"
2071
- id="select-checkbox-expanded-selected-filter-example-dell"
2072
- name="dell"
2074
+ id="select-checkbox-expanded-selected-filter-example-check-dell-input"
2075
+ name="select-checkbox-expanded-selected-filter-example-check-dell-input"
2073
2076
  />
2074
-
2075
2077
  <span class="pf-v5-c-check__label">Dell</span>
2076
2078
  </label>
2077
2079
  <label
2078
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-disabled"
2079
- for="select-checkbox-expanded-selected-filter-example-samsung"
2080
+ class="pf-v5-c-check pf-v5-c-select__menu-item"
2081
+ id="select-checkbox-expanded-selected-filter-example-check-Samsung"
2082
+ for="select-checkbox-expanded-selected-filter-example-check-Samsung-input"
2080
2083
  >
2081
2084
  <input
2082
2085
  class="pf-v5-c-check__input"
2083
2086
  type="checkbox"
2084
- id="select-checkbox-expanded-selected-filter-example-samsung"
2085
- name="samsung"
2087
+ id="select-checkbox-expanded-selected-filter-example-check-Samsung-input"
2088
+ name="select-checkbox-expanded-selected-filter-example-check-Samsung-input"
2086
2089
  disabled
2087
2090
  />
2088
-
2089
2091
  <span class="pf-v5-c-check__label pf-m-disabled">Samsung</span>
2090
2092
  </label>
2091
2093
  <label
2092
2094
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2093
- for="select-checkbox-expanded-selected-filter-example-hp"
2095
+ id="select-checkbox-expanded-selected-filter-example-check-Hp"
2096
+ for="select-checkbox-expanded-selected-filter-example-check-Hp-input"
2094
2097
  >
2095
2098
  <input
2096
2099
  class="pf-v5-c-check__input"
2097
2100
  type="checkbox"
2098
- id="select-checkbox-expanded-selected-filter-example-hp"
2099
- name="hp"
2101
+ id="select-checkbox-expanded-selected-filter-example-check-Hp-input"
2102
+ name="select-checkbox-expanded-selected-filter-example-check-Hp-input"
2100
2103
  />
2101
-
2102
2104
  <span class="pf-v5-c-check__label">Hewlett-Packard</span>
2103
2105
  </label>
2104
2106
  </fieldset>
@@ -2134,70 +2136,70 @@ The multiselect should be used when the user is selecting multiple items from a
2134
2136
  <fieldset class="pf-v5-c-select__menu-fieldset" aria-label="Select input">
2135
2137
  <label
2136
2138
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2137
- for="select-checkbox-without-badge-active"
2139
+ id="select-checkbox-without-badge-check-active"
2140
+ for="select-checkbox-without-badge-check-active-input"
2138
2141
  >
2139
2142
  <input
2140
2143
  class="pf-v5-c-check__input"
2141
2144
  type="checkbox"
2142
- id="select-checkbox-without-badge-active"
2143
- name="select-checkbox-without-badge-active"
2145
+ id="select-checkbox-without-badge-check-active-input"
2146
+ name="select-checkbox-without-badge-check-active-input"
2147
+ checked
2144
2148
  />
2145
-
2146
2149
  <span class="pf-v5-c-check__label">Active</span>
2147
2150
  </label>
2148
2151
  <label
2149
2152
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2150
- for="select-checkbox-without-badge-canceled"
2153
+ id="select-checkbox-without-badge-check-canceled"
2154
+ for="select-checkbox-without-badge-check-canceled-input"
2151
2155
  >
2152
2156
  <input
2153
2157
  class="pf-v5-c-check__input"
2154
2158
  type="checkbox"
2155
- id="select-checkbox-without-badge-canceled"
2156
- name="select-checkbox-without-badge-canceled"
2159
+ id="select-checkbox-without-badge-check-canceled-input"
2160
+ name="select-checkbox-without-badge-check-canceled-input"
2157
2161
  checked
2158
2162
  />
2159
-
2160
2163
  <span class="pf-v5-c-check__label">Canceled</span>
2161
2164
  </label>
2162
2165
  <label
2163
2166
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2164
- for="select-checkbox-without-badge-paused"
2167
+ id="select-checkbox-without-badge-check-paused"
2168
+ for="select-checkbox-without-badge-check-paused-input"
2165
2169
  >
2166
2170
  <input
2167
2171
  class="pf-v5-c-check__input"
2168
2172
  type="checkbox"
2169
- id="select-checkbox-without-badge-paused"
2170
- name="select-checkbox-without-badge-paused"
2171
- checked
2173
+ id="select-checkbox-without-badge-check-paused-input"
2174
+ name="select-checkbox-without-badge-check-paused-input"
2172
2175
  />
2173
-
2174
2176
  <span class="pf-v5-c-check__label">Paused</span>
2175
2177
  </label>
2176
2178
  <label
2177
2179
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2178
- for="select-checkbox-without-badge-warning"
2180
+ id="select-checkbox-without-badge-check-warning"
2181
+ for="select-checkbox-without-badge-check-warning-input"
2179
2182
  >
2180
2183
  <input
2181
2184
  class="pf-v5-c-check__input"
2182
2185
  type="checkbox"
2183
- id="select-checkbox-without-badge-warning"
2184
- name="select-checkbox-without-badge-warning"
2186
+ id="select-checkbox-without-badge-check-warning-input"
2187
+ name="select-checkbox-without-badge-check-warning-input"
2188
+ checked
2185
2189
  />
2186
-
2187
2190
  <span class="pf-v5-c-check__label">Warning</span>
2188
2191
  </label>
2189
2192
  <label
2190
2193
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2191
- for="select-checkbox-without-badge-restarted"
2194
+ id="select-checkbox-without-badge-check-restarted"
2195
+ for="select-checkbox-without-badge-check-restarted-input"
2192
2196
  >
2193
2197
  <input
2194
2198
  class="pf-v5-c-check__input"
2195
2199
  type="checkbox"
2196
- id="select-checkbox-without-badge-restarted"
2197
- name="select-checkbox-without-badge-restarted"
2198
- checked
2200
+ id="select-checkbox-without-badge-check-restarted-input"
2201
+ name="select-checkbox-without-badge-check-restarted-input"
2199
2202
  />
2200
-
2201
2203
  <span class="pf-v5-c-check__label">Restarted</span>
2202
2204
  </label>
2203
2205
  </fieldset>
@@ -2232,16 +2234,15 @@ The multiselect should be used when the user is selecting multiple items from a
2232
2234
  <fieldset class="pf-v5-c-select__menu-fieldset" aria-label="Select input">
2233
2235
  <label
2234
2236
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2235
- for="select-checkbox-counts-active"
2237
+ id="select-checkbox-counts-active"
2238
+ for="select-checkbox-counts-active-input"
2236
2239
  >
2237
2240
  <input
2238
2241
  class="pf-v5-c-check__input"
2239
2242
  type="checkbox"
2240
- id="select-checkbox-counts-active"
2241
- name="select-checkbox-counts-active"
2242
- checked
2243
+ id="select-checkbox-counts-active-input"
2244
+ name="select-checkbox-counts-active-input"
2243
2245
  />
2244
-
2245
2246
  <span class="pf-v5-c-check__label">
2246
2247
  <span class="pf-v5-c-select__menu-item-row">
2247
2248
  <span class="pf-v5-c-select__menu-item-text">Active</span>
@@ -2251,16 +2252,16 @@ The multiselect should be used when the user is selecting multiple items from a
2251
2252
  </label>
2252
2253
  <label
2253
2254
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2254
- for="select-checkbox-counts-canceled"
2255
+ id="select-checkbox-counts-canceled"
2256
+ for="select-checkbox-counts-canceled-input"
2255
2257
  >
2256
2258
  <input
2257
2259
  class="pf-v5-c-check__input"
2258
2260
  type="checkbox"
2259
- id="select-checkbox-counts-canceled"
2260
- name="select-checkbox-counts-canceled"
2261
+ id="select-checkbox-counts-canceled-input"
2262
+ name="select-checkbox-counts-canceled-input"
2261
2263
  checked
2262
2264
  />
2263
-
2264
2265
  <span class="pf-v5-c-check__label">
2265
2266
  <span class="pf-v5-c-select__menu-item-row">
2266
2267
  <span class="pf-v5-c-select__menu-item-text">Canceled</span>
@@ -2270,15 +2271,15 @@ The multiselect should be used when the user is selecting multiple items from a
2270
2271
  </label>
2271
2272
  <label
2272
2273
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2273
- for="select-checkbox-counts-paused"
2274
+ id="select-checkbox-counts-paused"
2275
+ for="select-checkbox-counts-paused-input"
2274
2276
  >
2275
2277
  <input
2276
2278
  class="pf-v5-c-check__input"
2277
2279
  type="checkbox"
2278
- id="select-checkbox-counts-paused"
2279
- name="select-checkbox-counts-paused"
2280
+ id="select-checkbox-counts-paused-input"
2281
+ name="select-checkbox-counts-paused-input"
2280
2282
  />
2281
-
2282
2283
  <span class="pf-v5-c-check__label">
2283
2284
  <span class="pf-v5-c-select__menu-item-row">
2284
2285
  <span class="pf-v5-c-select__menu-item-text">Paused</span>
@@ -2288,16 +2289,16 @@ The multiselect should be used when the user is selecting multiple items from a
2288
2289
  </label>
2289
2290
  <label
2290
2291
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2291
- for="select-checkbox-counts-warning"
2292
+ id="select-checkbox-counts-warning"
2293
+ for="select-checkbox-counts-warning-input"
2292
2294
  >
2293
2295
  <input
2294
2296
  class="pf-v5-c-check__input"
2295
2297
  type="checkbox"
2296
- id="select-checkbox-counts-warning"
2297
- name="select-checkbox-counts-warning"
2298
+ id="select-checkbox-counts-warning-input"
2299
+ name="select-checkbox-counts-warning-input"
2298
2300
  checked
2299
2301
  />
2300
-
2301
2302
  <span class="pf-v5-c-check__label">
2302
2303
  <span class="pf-v5-c-select__menu-item-row">
2303
2304
  <span class="pf-v5-c-select__menu-item-text">Warning</span>
@@ -2307,15 +2308,15 @@ The multiselect should be used when the user is selecting multiple items from a
2307
2308
  </label>
2308
2309
  <label
2309
2310
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2310
- for="select-checkbox-counts-restarted"
2311
+ id="select-checkbox-counts-restarted"
2312
+ for="select-checkbox-counts-restarted-input"
2311
2313
  >
2312
2314
  <input
2313
2315
  class="pf-v5-c-check__input"
2314
2316
  type="checkbox"
2315
- id="select-checkbox-counts-restarted"
2316
- name="select-checkbox-counts-restarted"
2317
+ id="select-checkbox-counts-restarted-input"
2318
+ name="select-checkbox-counts-restarted-input"
2317
2319
  />
2318
-
2319
2320
  <span class="pf-v5-c-check__label">
2320
2321
  <span class="pf-v5-c-select__menu-item-row">
2321
2322
  <span class="pf-v5-c-select__menu-item-text">Restarted</span>
@@ -2721,71 +2722,77 @@ The plain select variation should be used when you do not want a border applied
2721
2722
  <fieldset class="pf-v5-c-select__menu-fieldset" aria-label="Select input">
2722
2723
  <label
2723
2724
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2724
- for="select-checkbox-description-active"
2725
+ id="select-checkbox-description-active"
2726
+ for="select-checkbox-description-active-input"
2725
2727
  >
2726
2728
  <input
2727
2729
  class="pf-v5-c-check__input"
2728
2730
  type="checkbox"
2729
- id="select-checkbox-description-active"
2730
- name="select-checkbox-description-active"
2731
+ aria-describedby="select-checkbox-description-active-description"
2732
+ id="select-checkbox-description-active-input"
2733
+ name="select-checkbox-description-active-input"
2731
2734
  />
2732
-
2733
2735
  <span class="pf-v5-c-check__label">Active</span>
2734
- <span class="pf-v5-c-check__description">This is a description</span>
2736
+ <span
2737
+ class="pf-v5-c-check__description"
2738
+ id="select-checkbox-description-active-description"
2739
+ >This is a description</span>
2735
2740
  </label>
2736
2741
  <label
2737
2742
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2738
- for="select-checkbox-description-canceled"
2743
+ id="select-checkbox-description-canceled"
2744
+ for="select-checkbox-description-canceled-input"
2739
2745
  >
2740
2746
  <input
2741
2747
  class="pf-v5-c-check__input"
2742
2748
  type="checkbox"
2743
- id="select-checkbox-description-canceled"
2744
- name="select-checkbox-description-canceled"
2749
+ aria-describedby="select-checkbox-description-canceled-description"
2750
+ id="select-checkbox-description-canceled-input"
2751
+ name="select-checkbox-description-canceled-input"
2745
2752
  />
2746
-
2747
2753
  <span class="pf-v5-c-check__label">Canceled</span>
2748
2754
  <span
2749
2755
  class="pf-v5-c-check__description"
2756
+ id="select-checkbox-description-canceled-description"
2750
2757
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
2751
2758
  </label>
2752
2759
  <label
2753
2760
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2754
- for="select-checkbox-description-paused"
2761
+ id="select-checkbox-description-paused"
2762
+ for="select-checkbox-description-paused-input"
2755
2763
  >
2756
2764
  <input
2757
2765
  class="pf-v5-c-check__input"
2758
2766
  type="checkbox"
2759
- id="select-checkbox-description-paused"
2760
- name="select-checkbox-description-paused"
2767
+ id="select-checkbox-description-paused-input"
2768
+ name="select-checkbox-description-paused-input"
2761
2769
  />
2762
-
2763
2770
  <span class="pf-v5-c-check__label">Paused</span>
2764
2771
  </label>
2765
2772
  <label
2766
2773
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2767
- for="select-checkbox-description-warning"
2774
+ id="select-checkbox-description-warning"
2775
+ for="select-checkbox-description-warning-input"
2768
2776
  >
2769
2777
  <input
2770
2778
  class="pf-v5-c-check__input"
2771
2779
  type="checkbox"
2772
- id="select-checkbox-description-warning"
2773
- name="select-checkbox-description-warning"
2780
+ id="select-checkbox-description-warning-input"
2781
+ name="select-checkbox-description-warning-input"
2774
2782
  />
2775
-
2776
2783
  <span class="pf-v5-c-check__label">Warning</span>
2777
2784
  </label>
2778
2785
  <label
2779
2786
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2780
- for="select-checkbox-description-restarted"
2787
+ id="select-checkbox-description-restarted"
2788
+ for="select-checkbox-description-restarted-input"
2781
2789
  >
2782
2790
  <input
2783
2791
  class="pf-v5-c-check__input"
2784
2792
  type="checkbox"
2785
- id="select-checkbox-description-restarted"
2786
- name="select-checkbox-description-restarted"
2793
+ id="select-checkbox-description-restarted-input"
2794
+ name="select-checkbox-description-restarted-input"
2787
2795
  />
2788
-
2789
2796
  <span class="pf-v5-c-check__label">Restarted</span>
2790
2797
  </label>
2791
2798
  </fieldset>