@patternfly/patternfly 6.3.0-prerelease.6 → 6.3.0-prerelease.61

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 (168) hide show
  1. package/README.md +22 -14
  2. package/assets/images/icon-help.hbs +3 -0
  3. package/assets/images/icon-outlined-star.hbs +3 -0
  4. package/assets/images/icon-star.hbs +3 -0
  5. package/base/normalize.scss +4 -0
  6. package/base/patternfly-common.css +46 -11
  7. package/base/patternfly-common.scss +58 -13
  8. package/base/patternfly-variables.css +1172 -1
  9. package/base/patternfly-variables.scss +10 -0
  10. package/base/tokens/tokens-charts-dark.scss +1 -1
  11. package/base/tokens/tokens-charts.scss +1 -1
  12. package/base/tokens/tokens-dark.scss +13 -1
  13. package/base/tokens/tokens-default.scss +60 -2
  14. package/base/tokens/tokens-highcontrast-dark.scss +396 -0
  15. package/base/tokens/tokens-highcontrast.scss +703 -0
  16. package/base/tokens/tokens-local.scss +1 -0
  17. package/base/tokens/tokens-palette.scss +9 -1
  18. package/components/Accordion/accordion.css +102 -6
  19. package/components/Accordion/accordion.scss +112 -10
  20. package/components/Alert/alert-group.css +67 -33
  21. package/components/Alert/alert-group.scss +95 -48
  22. package/components/Badge/badge.css +2 -0
  23. package/components/Badge/badge.scss +2 -0
  24. package/components/Banner/banner.css +4 -0
  25. package/components/Banner/banner.scss +4 -0
  26. package/components/Button/button.css +187 -9
  27. package/components/Button/button.scss +195 -13
  28. package/components/CalendarMonth/calendar-month.css +16 -0
  29. package/components/CalendarMonth/calendar-month.scss +16 -0
  30. package/components/Card/card.css +5 -4
  31. package/components/Card/card.scss +5 -4
  32. package/components/CodeBlock/code-block.css +3 -0
  33. package/components/CodeBlock/code-block.scss +3 -0
  34. package/components/CodeEditor/code-editor.css +8 -3
  35. package/components/CodeEditor/code-editor.scss +11 -6
  36. package/components/DataList/data-list.css +2 -2
  37. package/components/DataList/data-list.scss +2 -2
  38. package/components/DatePicker/date-picker.css +3 -0
  39. package/components/DatePicker/date-picker.scss +4 -0
  40. package/components/Drawer/drawer.css +44 -41
  41. package/components/Drawer/drawer.scss +42 -36
  42. package/components/DualListSelector/dual-list-selector.css +55 -1
  43. package/components/DualListSelector/dual-list-selector.scss +63 -1
  44. package/components/ExpandableSection/expandable-section.css +63 -1
  45. package/components/ExpandableSection/expandable-section.scss +76 -2
  46. package/components/FileUpload/file-upload.css +3 -3
  47. package/components/FileUpload/file-upload.scss +3 -3
  48. package/components/Form/form.css +40 -1
  49. package/components/Form/form.scss +47 -1
  50. package/components/FormControl/form-control.css +16 -0
  51. package/components/FormControl/form-control.scss +9 -0
  52. package/components/InputGroup/input-group.css +80 -0
  53. package/components/InputGroup/input-group.scss +95 -0
  54. package/components/Label/label.css +20 -11
  55. package/components/Label/label.scss +21 -11
  56. package/components/Login/login.css +3 -0
  57. package/components/Login/login.scss +3 -0
  58. package/components/Menu/menu.css +42 -4
  59. package/components/Menu/menu.scss +39 -6
  60. package/components/MenuToggle/menu-toggle.css +51 -10
  61. package/components/MenuToggle/menu-toggle.scss +61 -9
  62. package/components/ModalBox/modal-box.css +3 -0
  63. package/components/ModalBox/modal-box.scss +3 -0
  64. package/components/Nav/nav.css +39 -8
  65. package/components/Nav/nav.scss +42 -9
  66. package/components/Page/page.css +124 -26
  67. package/components/Page/page.scss +86 -16
  68. package/components/Pagination/pagination.css +14 -1
  69. package/components/Pagination/pagination.scss +14 -1
  70. package/components/Panel/panel.css +14 -1
  71. package/components/Panel/panel.scss +14 -1
  72. package/components/Popover/popover.css +4 -0
  73. package/components/Popover/popover.scss +4 -0
  74. package/components/Progress/progress.css +26 -0
  75. package/components/Progress/progress.scss +22 -1
  76. package/components/ProgressStepper/progress-stepper.scss +1 -0
  77. package/components/SimpleList/simple-list.css +15 -0
  78. package/components/SimpleList/simple-list.scss +17 -1
  79. package/components/Skeleton/skeleton.css +22 -2
  80. package/components/Skeleton/skeleton.scss +25 -3
  81. package/components/Spinner/spinner.css +5 -0
  82. package/components/Spinner/spinner.scss +6 -0
  83. package/components/Table/table-grid.css +51 -5
  84. package/components/Table/table-grid.scss +22 -1
  85. package/components/Table/table.css +124 -2
  86. package/components/Table/table.scss +171 -3
  87. package/components/Tabs/tabs.css +32 -15
  88. package/components/Tabs/tabs.scss +34 -14
  89. package/components/TextInputGroup/text-input-group.css +23 -0
  90. package/components/TextInputGroup/text-input-group.scss +16 -1
  91. package/components/Timestamp/timestamp.css +4 -0
  92. package/components/Timestamp/timestamp.scss +7 -0
  93. package/components/TreeView/tree-view.css +54 -0
  94. package/components/TreeView/tree-view.scss +59 -2
  95. package/components/Truncate/truncate.css +1 -0
  96. package/components/Truncate/truncate.scss +3 -0
  97. package/components/Wizard/wizard.css +33 -6
  98. package/components/Wizard/wizard.scss +38 -8
  99. package/components/_index.css +1404 -195
  100. package/docs/components/Alert/examples/Alert.md +2 -2
  101. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  102. package/docs/components/Button/examples/Button.md +159 -6
  103. package/docs/components/Card/examples/Card.md +8 -8
  104. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +24 -32
  105. package/docs/components/CodeBlock/examples/CodeBlock.md +10 -10
  106. package/docs/components/CodeEditor/examples/CodeEditor.md +29 -5
  107. package/docs/components/DataList/examples/DataList.md +83 -207
  108. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  109. package/docs/components/DualListSelector/examples/DualListSelector.md +642 -319
  110. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  111. package/docs/components/ExpandableSection/examples/ExpandableSection.md +26 -15
  112. package/docs/components/Form/examples/Form.md +1178 -113
  113. package/docs/components/Hint/examples/Hint.md +3 -3
  114. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -6
  115. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  116. package/docs/components/Label/examples/Label.md +2 -2
  117. package/docs/components/Login/examples/Login.md +22 -22
  118. package/docs/components/Masthead/examples/masthead.md +90 -12
  119. package/docs/components/Menu/examples/Menu.md +122 -6
  120. package/docs/components/MenuToggle/examples/MenuToggle.md +93 -55
  121. package/docs/components/ModalBox/examples/ModalBox.md +13 -1
  122. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  123. package/docs/components/Page/examples/Page.md +147 -14
  124. package/docs/components/Pagination/examples/Pagination.md +123 -12
  125. package/docs/components/Popover/examples/Popover.md +0 -4
  126. package/docs/components/Progress/examples/Progress.md +222 -210
  127. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  128. package/docs/components/Skeleton/examples/Skeleton.md +21 -7
  129. package/docs/components/Slider/examples/Slider.md +2 -2
  130. package/docs/components/Spinner/examples/Spinner.md +10 -0
  131. package/docs/components/Table/examples/Table.md +7699 -4896
  132. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  133. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -49
  134. package/docs/components/Title/examples/Title.md +8 -8
  135. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  136. package/docs/components/Wizard/examples/Wizard.md +583 -0
  137. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  138. package/docs/demos/Alert/examples/Alert.md +66 -9
  139. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  140. package/docs/demos/Banner/examples/Banner.md +47 -6
  141. package/docs/demos/Card/examples/Card.md +13 -67
  142. package/docs/demos/CardView/examples/CardView.md +24 -5
  143. package/docs/demos/Dashboard/examples/Dashboard.md +34 -27
  144. package/docs/demos/DataList/examples/DataList.md +628 -192
  145. package/docs/demos/DescriptionList/examples/DescriptionList.md +79 -50
  146. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  147. package/docs/demos/Form/examples/BasicForms.md +146 -26
  148. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  149. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  150. package/docs/demos/Modal/examples/Modal.md +171 -21
  151. package/docs/demos/Nav/examples/Nav.md +111 -16
  152. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +114 -19
  153. package/docs/demos/Page/examples/Page.md +309 -43
  154. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  155. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +886 -415
  156. package/docs/demos/Skeleton/examples/Skeleton.md +25 -4
  157. package/docs/demos/Table/examples/Table.md +480 -177
  158. package/docs/demos/Tabs/examples/Tabs.md +139 -594
  159. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  160. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  161. package/package.json +12 -7
  162. package/patternfly-base-no-globals.css +1217 -12
  163. package/patternfly-base.css +1221 -12
  164. package/patternfly-no-globals.css +2851 -437
  165. package/patternfly.css +2853 -435
  166. package/patternfly.min.css +1 -1
  167. package/patternfly.min.css.map +1 -1
  168. package/sass-utilities/mixins.scss +54 -0
package/docs/components/DataList/examples/DataList.md CHANGED
@@ -13,7 +13,7 @@ cssPrefix: pf-v6-c-data-list
13
13
  aria-label="Basic data list example"
14
14
  id="data-list-basic"
15
15
  >
16
- <li class="pf-v6-c-data-list__item" aria-labelledby="data-list-basic-item-1">
16
+ <li class="pf-v6-c-data-list__item">
17
17
  <div class="pf-v6-c-data-list__item-row">
18
18
  <div class="pf-v6-c-data-list__item-content">
19
19
  <div class="pf-v6-c-data-list__cell">
@@ -24,7 +24,7 @@ cssPrefix: pf-v6-c-data-list
24
24
  </div>
25
25
  </li>
26
26
 
27
- <li class="pf-v6-c-data-list__item" aria-labelledby="data-list-basic-item-2">
27
+ <li class="pf-v6-c-data-list__item">
28
28
  <div class="pf-v6-c-data-list__item-row">
29
29
  <div class="pf-v6-c-data-list__item-content">
30
30
  <div class="pf-v6-c-data-list__cell pf-m-no-fill">
@@ -72,10 +72,7 @@ cssPrefix: pf-v6-c-data-list
72
72
  aria-label="With headings data list example"
73
73
  id="data-list-with-headings"
74
74
  >
75
- <li
76
- class="pf-v6-c-data-list__item"
77
- aria-labelledby="data-list-with-headings-item-1"
78
- >
75
+ <li class="pf-v6-c-data-list__item">
79
76
  <div class="pf-v6-c-data-list__item-row">
80
77
  <div class="pf-v6-c-data-list__item-content">
81
78
  <div class="pf-v6-c-data-list__cell">
@@ -86,10 +83,7 @@ cssPrefix: pf-v6-c-data-list
86
83
  </div>
87
84
  </li>
88
85
 
89
- <li
90
- class="pf-v6-c-data-list__item"
91
- aria-labelledby="data-list-with-headings-item-2"
92
- >
86
+ <li class="pf-v6-c-data-list__item">
93
87
  <div class="pf-v6-c-data-list__item-row">
94
88
  <div class="pf-v6-c-data-list__item-content">
95
89
  <div class="pf-v6-c-data-list__cell pf-m-no-fill">
@@ -120,10 +114,7 @@ When a list item includes more than one block of content, it can be difficult fo
120
114
  aria-label="Checkbox and action data list example"
121
115
  id="data-list-checkboxes-actions-addl-cells"
122
116
  >
123
- <li
124
- class="pf-v6-c-data-list__item"
125
- aria-labelledby="data-list-checkboxes-actions-addl-cells-item-1"
126
- >
117
+ <li class="pf-v6-c-data-list__item">
127
118
  <div class="pf-v6-c-data-list__item-row">
128
119
  <div class="pf-v6-c-data-list__item-control">
129
120
  <div class="pf-v6-c-data-list__check">
@@ -165,7 +156,7 @@ When a list item includes more than one block of content, it can be difficult fo
165
156
  class="pf-v6-c-menu-toggle pf-m-plain"
166
157
  type="button"
167
158
  aria-expanded="false"
168
- aria-label="Menu toggle"
159
+ aria-label="Data list item menu toggle"
169
160
  id="data-list-checkboxes-actions-addl-cells-item-1-menu-toggle"
170
161
  >
171
162
  <span class="pf-v6-c-menu-toggle__icon">
@@ -176,10 +167,7 @@ When a list item includes more than one block of content, it can be difficult fo
176
167
  </div>
177
168
  </li>
178
169
 
179
- <li
180
- class="pf-v6-c-data-list__item"
181
- aria-labelledby="data-list-checkboxes-actions-addl-cells-item-2"
182
- >
170
+ <li class="pf-v6-c-data-list__item">
183
171
  <div class="pf-v6-c-data-list__item-row">
184
172
  <div class="pf-v6-c-data-list__item-control">
185
173
  <div class="pf-v6-c-data-list__check">
@@ -212,7 +200,7 @@ When a list item includes more than one block of content, it can be difficult fo
212
200
  class="pf-v6-c-menu-toggle pf-m-plain"
213
201
  type="button"
214
202
  aria-expanded="false"
215
- aria-label="Menu toggle"
203
+ aria-label="Data list item menu toggle"
216
204
  id="data-list-checkboxes-actions-addl-cells-item-2-menu-toggle"
217
205
  >
218
206
  <span class="pf-v6-c-menu-toggle__icon">
@@ -233,10 +221,7 @@ When a list item includes more than one block of content, it can be difficult fo
233
221
  </div>
234
222
  </li>
235
223
 
236
- <li
237
- class="pf-v6-c-data-list__item"
238
- aria-labelledby="data-list-checkboxes-actions-addl-cells-item-3"
239
- >
224
+ <li class="pf-v6-c-data-list__item">
240
225
  <div class="pf-v6-c-data-list__item-row">
241
226
  <div class="pf-v6-c-data-list__item-control">
242
227
  <div class="pf-v6-c-data-list__check">
@@ -269,7 +254,7 @@ When a list item includes more than one block of content, it can be difficult fo
269
254
  class="pf-v6-c-menu-toggle pf-m-plain"
270
255
  type="button"
271
256
  aria-expanded="false"
272
- aria-label="Menu toggle"
257
+ aria-label="Data list item menu toggle"
273
258
  id="data-list-checkboxes-actions-addl-cells-item-3-menu-toggle"
274
259
  >
275
260
  <span class="pf-v6-c-menu-toggle__icon">
@@ -328,17 +313,14 @@ When a list item includes more than one block of content, it can be difficult fo
328
313
  aria-label="Expandable data list example"
329
314
  id="data-list-expandable"
330
315
  >
331
- <li
332
- class="pf-v6-c-data-list__item pf-m-expanded"
333
- aria-labelledby="data-list-expandable-item-1"
334
- >
316
+ <li class="pf-v6-c-data-list__item pf-m-expanded">
335
317
  <div class="pf-v6-c-data-list__item-row">
336
318
  <div class="pf-v6-c-data-list__item-control">
337
319
  <div class="pf-v6-c-data-list__toggle">
338
320
  <button
339
321
  class="pf-v6-c-button pf-m-plain"
340
322
  type="button"
341
- aria-labelledby="data-list-expandable-toggle1 data-list-expandable-item1"
323
+ aria-labelledby="data-list-expandable-toggle1 data-list-expandable-item-1"
342
324
  id="data-list-expandable-toggle1"
343
325
  aria-label="Toggle details for"
344
326
  aria-expanded="true"
@@ -373,7 +355,7 @@ When a list item includes more than one block of content, it can be difficult fo
373
355
  class="pf-v6-c-menu-toggle pf-m-plain"
374
356
  type="button"
375
357
  aria-expanded="false"
376
- aria-label="Menu toggle"
358
+ aria-label="Data list item menu toggle"
377
359
  id="data-list-expandable-item-1-menu-toggle"
378
360
  >
379
361
  <span class="pf-v6-c-menu-toggle__icon">
@@ -393,17 +375,14 @@ When a list item includes more than one block of content, it can be difficult fo
393
375
  </section>
394
376
  </li>
395
377
 
396
- <li
397
- class="pf-v6-c-data-list__item"
398
- aria-labelledby="data-list-expandable-item-2"
399
- >
378
+ <li class="pf-v6-c-data-list__item">
400
379
  <div class="pf-v6-c-data-list__item-row">
401
380
  <div class="pf-v6-c-data-list__item-control">
402
381
  <div class="pf-v6-c-data-list__toggle">
403
382
  <button
404
383
  class="pf-v6-c-button pf-m-plain"
405
384
  type="button"
406
- aria-labelledby="data-list-expandable-toggle2 data-list-expandable-item2"
385
+ aria-labelledby="data-list-expandable-toggle2 data-list-expandable-item-2"
407
386
  id="data-list-expandable-toggle2"
408
387
  aria-label="Toggle details for"
409
388
  aria-expanded="false"
@@ -434,7 +413,7 @@ When a list item includes more than one block of content, it can be difficult fo
434
413
  class="pf-v6-c-menu-toggle pf-m-plain"
435
414
  type="button"
436
415
  aria-expanded="false"
437
- aria-label="Menu toggle"
416
+ aria-label="Data list item menu toggle"
438
417
  id="data-list-expandable-item-2-menu-toggle"
439
418
  >
440
419
  <span class="pf-v6-c-menu-toggle__icon">
@@ -455,17 +434,14 @@ When a list item includes more than one block of content, it can be difficult fo
455
434
  </section>
456
435
  </li>
457
436
 
458
- <li
459
- class="pf-v6-c-data-list__item pf-m-expanded"
460
- aria-labelledby="data-list-expandable-item-3"
461
- >
437
+ <li class="pf-v6-c-data-list__item pf-m-expanded">
462
438
  <div class="pf-v6-c-data-list__item-row">
463
439
  <div class="pf-v6-c-data-list__item-control">
464
440
  <div class="pf-v6-c-data-list__toggle">
465
441
  <button
466
442
  class="pf-v6-c-button pf-m-plain"
467
443
  type="button"
468
- aria-labelledby="data-list-expandable-toggle3 data-list-expandable-item3"
444
+ aria-labelledby="data-list-expandable-toggle3 data-list-expandable-item-3"
469
445
  id="data-list-expandable-toggle3"
470
446
  aria-label="Toggle details for"
471
447
  aria-expanded="true"
@@ -499,7 +475,7 @@ When a list item includes more than one block of content, it can be difficult fo
499
475
  class="pf-v6-c-menu-toggle pf-m-plain"
500
476
  type="button"
501
477
  aria-expanded="false"
502
- aria-label="Menu toggle"
478
+ aria-label="Data list item menu toggle"
503
479
  id="data-list-expandable-item-3-menu-toggle"
504
480
  >
505
481
  <span class="pf-v6-c-menu-toggle__icon">
@@ -531,17 +507,14 @@ When a list item includes more than one block of content, it can be difficult fo
531
507
  aria-label="Expandable data list example"
532
508
  id="data-list-expandable-compact"
533
509
  >
534
- <li
535
- class="pf-v6-c-data-list__item pf-m-expanded"
536
- aria-labelledby="data-list-expandable-compact-item-1"
537
- >
510
+ <li class="pf-v6-c-data-list__item pf-m-expanded">
538
511
  <div class="pf-v6-c-data-list__item-row">
539
512
  <div class="pf-v6-c-data-list__item-control">
540
513
  <div class="pf-v6-c-data-list__toggle">
541
514
  <button
542
515
  class="pf-v6-c-button pf-m-plain"
543
516
  type="button"
544
- aria-labelledby="data-list-expandable-compact-toggle1 data-list-expandable-compact-item1"
517
+ aria-labelledby="data-list-expandable-compact-toggle1 data-list-expandable-compact-item-1"
545
518
  id="data-list-expandable-compact-toggle1"
546
519
  aria-label="Toggle details for"
547
520
  aria-expanded="true"
@@ -573,10 +546,10 @@ When a list item includes more than one block of content, it can be difficult fo
573
546
  </div>
574
547
  <div class="pf-v6-c-data-list__item-action">
575
548
  <button
576
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
549
+ class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
577
550
  type="button"
578
551
  aria-expanded="false"
579
- aria-label="Menu toggle"
552
+ aria-label="Data list item menu toggle"
580
553
  id="data-list-expandable-compact-item-1-menu-toggle"
581
554
  >
582
555
  <span class="pf-v6-c-menu-toggle__icon">
@@ -596,17 +569,14 @@ When a list item includes more than one block of content, it can be difficult fo
596
569
  </section>
597
570
  </li>
598
571
 
599
- <li
600
- class="pf-v6-c-data-list__item"
601
- aria-labelledby="data-list-expandable-compact-item-2"
602
- >
572
+ <li class="pf-v6-c-data-list__item">
603
573
  <div class="pf-v6-c-data-list__item-row">
604
574
  <div class="pf-v6-c-data-list__item-control">
605
575
  <div class="pf-v6-c-data-list__toggle">
606
576
  <button
607
577
  class="pf-v6-c-button pf-m-plain"
608
578
  type="button"
609
- aria-labelledby="data-list-expandable-compact-toggle2 data-list-expandable-compact-item2"
579
+ aria-labelledby="data-list-expandable-compact-toggle2 data-list-expandable-compact-item-2"
610
580
  id="data-list-expandable-compact-toggle2"
611
581
  aria-label="Toggle details for"
612
582
  aria-expanded="false"
@@ -637,10 +607,10 @@ When a list item includes more than one block of content, it can be difficult fo
637
607
  </div>
638
608
  <div class="pf-v6-c-data-list__item-action">
639
609
  <button
640
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
610
+ class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
641
611
  type="button"
642
612
  aria-expanded="false"
643
- aria-label="Menu toggle"
613
+ aria-label="Data list item menu toggle"
644
614
  id="data-list-expandable-compact-item-2-menu-toggle"
645
615
  >
646
616
  <span class="pf-v6-c-menu-toggle__icon">
@@ -661,17 +631,14 @@ When a list item includes more than one block of content, it can be difficult fo
661
631
  </section>
662
632
  </li>
663
633
 
664
- <li
665
- class="pf-v6-c-data-list__item pf-m-expanded"
666
- aria-labelledby="data-list-expandable-compact-item-3"
667
- >
634
+ <li class="pf-v6-c-data-list__item pf-m-expanded">
668
635
  <div class="pf-v6-c-data-list__item-row">
669
636
  <div class="pf-v6-c-data-list__item-control">
670
637
  <div class="pf-v6-c-data-list__toggle">
671
638
  <button
672
639
  class="pf-v6-c-button pf-m-plain"
673
640
  type="button"
674
- aria-labelledby="data-list-expandable-compact-toggle3 data-list-expandable-compact-item3"
641
+ aria-labelledby="data-list-expandable-compact-toggle3 data-list-expandable-compact-item-3"
675
642
  id="data-list-expandable-compact-toggle3"
676
643
  aria-label="Toggle details for"
677
644
  aria-expanded="true"
@@ -702,10 +669,10 @@ When a list item includes more than one block of content, it can be difficult fo
702
669
  </div>
703
670
  <div class="pf-v6-c-data-list__item-action">
704
671
  <button
705
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
672
+ class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
706
673
  type="button"
707
674
  aria-expanded="false"
708
- aria-label="Menu toggle"
675
+ aria-label="Data list item menu toggle"
709
676
  id="data-list-expandable-compact-item-3-menu-toggle"
710
677
  >
711
678
  <span class="pf-v6-c-menu-toggle__icon">
@@ -737,17 +704,14 @@ When a list item includes more than one block of content, it can be difficult fo
737
704
  aria-label="Expandable nested data list example"
738
705
  id="data-list-expandable-nested"
739
706
  >
740
- <li
741
- class="pf-v6-c-data-list__item pf-m-expanded"
742
- aria-labelledby="data-list-expandable-nested-item-1"
743
- >
707
+ <li class="pf-v6-c-data-list__item pf-m-expanded">
744
708
  <div class="pf-v6-c-data-list__item-row">
745
709
  <div class="pf-v6-c-data-list__item-control">
746
710
  <div class="pf-v6-c-data-list__toggle">
747
711
  <button
748
712
  class="pf-v6-c-button pf-m-plain"
749
713
  type="button"
750
- aria-labelledby="data-list-expandable-nested-toggle1 data-list-expandable-nested-item1"
714
+ aria-labelledby="data-list-expandable-nested-toggle1 data-list-expandable-nested-item-1"
751
715
  id="data-list-expandable-nested-toggle1"
752
716
  aria-label="Toggle details for"
753
717
  aria-expanded="true"
@@ -782,7 +746,7 @@ When a list item includes more than one block of content, it can be difficult fo
782
746
  class="pf-v6-c-menu-toggle pf-m-plain"
783
747
  type="button"
784
748
  aria-expanded="false"
785
- aria-label="Menu toggle"
749
+ aria-label="Data list item menu toggle"
786
750
  id="data-list-expandable-nested-item-1-menu-toggle"
787
751
  >
788
752
  <span class="pf-v6-c-menu-toggle__icon">
@@ -803,17 +767,14 @@ When a list item includes more than one block of content, it can be difficult fo
803
767
  aria-label="Expandable nested nested data list example"
804
768
  id="data-list-expandable-nested-nested"
805
769
  >
806
- <li
807
- class="pf-v6-c-data-list__item pf-m-expanded"
808
- aria-labelledby="data-list-expandable-nested-nested-item-1"
809
- >
770
+ <li class="pf-v6-c-data-list__item pf-m-expanded">
810
771
  <div class="pf-v6-c-data-list__item-row">
811
772
  <div class="pf-v6-c-data-list__item-control">
812
773
  <div class="pf-v6-c-data-list__toggle">
813
774
  <button
814
775
  class="pf-v6-c-button pf-m-plain"
815
776
  type="button"
816
- aria-labelledby="data-list-expandable-nested-nested-toggle1 data-list-expandable-nested-nested-item1"
777
+ aria-labelledby="data-list-expandable-nested-nested-toggle1 data-list-expandable-nested-nested-item-1"
817
778
  id="data-list-expandable-nested-nested-toggle1"
818
779
  aria-label="Toggle details for"
819
780
  aria-expanded="true"
@@ -846,17 +807,14 @@ When a list item includes more than one block of content, it can be difficult fo
846
807
  </section>
847
808
  </li>
848
809
 
849
- <li
850
- class="pf-v6-c-data-list__item"
851
- aria-labelledby="data-list-expandable-nested-nested-item-2"
852
- >
810
+ <li class="pf-v6-c-data-list__item">
853
811
  <div class="pf-v6-c-data-list__item-row">
854
812
  <div class="pf-v6-c-data-list__item-control">
855
813
  <div class="pf-v6-c-data-list__toggle">
856
814
  <button
857
815
  class="pf-v6-c-button pf-m-plain"
858
816
  type="button"
859
- aria-labelledby="data-list-expandable-nested-nested-toggle2 data-list-expandable-nested-nested-item2"
817
+ aria-labelledby="data-list-expandable-nested-nested-toggle2 data-list-expandable-nested-nested-item-2"
860
818
  id="data-list-expandable-nested-nested-toggle2"
861
819
  aria-label="Toggle details for"
862
820
  aria-expanded="false"
@@ -890,17 +848,14 @@ When a list item includes more than one block of content, it can be difficult fo
890
848
  </section>
891
849
  </li>
892
850
 
893
- <li
894
- class="pf-v6-c-data-list__item pf-m-expanded"
895
- aria-labelledby="data-list-expandable-nested-nested-item-3"
896
- >
851
+ <li class="pf-v6-c-data-list__item pf-m-expanded">
897
852
  <div class="pf-v6-c-data-list__item-row">
898
853
  <div class="pf-v6-c-data-list__item-control">
899
854
  <div class="pf-v6-c-data-list__toggle">
900
855
  <button
901
856
  class="pf-v6-c-button pf-m-plain"
902
857
  type="button"
903
- aria-labelledby="data-list-expandable-nested-nested-toggle3 data-list-expandable-nested-nested-item3"
858
+ aria-labelledby="data-list-expandable-nested-nested-toggle3 data-list-expandable-nested-nested-item-3"
904
859
  id="data-list-expandable-nested-nested-toggle3"
905
860
  aria-label="Toggle details for"
906
861
  aria-expanded="true"
@@ -937,17 +892,14 @@ When a list item includes more than one block of content, it can be difficult fo
937
892
  </section>
938
893
  </li>
939
894
 
940
- <li
941
- class="pf-v6-c-data-list__item"
942
- aria-labelledby="data-list-expandable-nested-item-2"
943
- >
895
+ <li class="pf-v6-c-data-list__item">
944
896
  <div class="pf-v6-c-data-list__item-row">
945
897
  <div class="pf-v6-c-data-list__item-control">
946
898
  <div class="pf-v6-c-data-list__toggle">
947
899
  <button
948
900
  class="pf-v6-c-button pf-m-plain"
949
901
  type="button"
950
- aria-labelledby="data-list-expandable-nested-toggle2 data-list-expandable-nested-item2"
902
+ aria-labelledby="data-list-expandable-nested-toggle2 data-list-expandable-nested-item-2"
951
903
  id="data-list-expandable-nested-toggle2"
952
904
  aria-label="Toggle details for"
953
905
  aria-expanded="false"
@@ -978,7 +930,7 @@ When a list item includes more than one block of content, it can be difficult fo
978
930
  class="pf-v6-c-menu-toggle pf-m-plain"
979
931
  type="button"
980
932
  aria-expanded="false"
981
- aria-label="Menu toggle"
933
+ aria-label="Data list item menu toggle"
982
934
  id="data-list-expandable-nested-item-2-menu-toggle"
983
935
  >
984
936
  <span class="pf-v6-c-menu-toggle__icon">
@@ -999,17 +951,14 @@ When a list item includes more than one block of content, it can be difficult fo
999
951
  </section>
1000
952
  </li>
1001
953
 
1002
- <li
1003
- class="pf-v6-c-data-list__item pf-m-expanded"
1004
- aria-labelledby="data-list-expandable-nested-item-3"
1005
- >
954
+ <li class="pf-v6-c-data-list__item pf-m-expanded">
1006
955
  <div class="pf-v6-c-data-list__item-row">
1007
956
  <div class="pf-v6-c-data-list__item-control">
1008
957
  <div class="pf-v6-c-data-list__toggle">
1009
958
  <button
1010
959
  class="pf-v6-c-button pf-m-plain"
1011
960
  type="button"
1012
- aria-labelledby="data-list-expandable-nested-toggle3 data-list-expandable-nested-item3"
961
+ aria-labelledby="data-list-expandable-nested-toggle3 data-list-expandable-nested-item-3"
1013
962
  id="data-list-expandable-nested-toggle3"
1014
963
  aria-label="Toggle details for"
1015
964
  aria-expanded="true"
@@ -1043,7 +992,7 @@ When a list item includes more than one block of content, it can be difficult fo
1043
992
  class="pf-v6-c-menu-toggle pf-m-plain"
1044
993
  type="button"
1045
994
  aria-expanded="false"
1046
- aria-label="Menu toggle"
995
+ aria-label="Data list item menu toggle"
1047
996
  id="data-list-expandable-nested-item-3-menu-toggle"
1048
997
  >
1049
998
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1075,10 +1024,7 @@ When a list item includes more than one block of content, it can be difficult fo
1075
1024
  aria-label="Compact data list example"
1076
1025
  id="data-list-compact"
1077
1026
  >
1078
- <li
1079
- class="pf-v6-c-data-list__item"
1080
- aria-labelledby="data-list-compact-item-1"
1081
- >
1027
+ <li class="pf-v6-c-data-list__item">
1082
1028
  <div class="pf-v6-c-data-list__item-row">
1083
1029
  <div class="pf-v6-c-data-list__item-control">
1084
1030
  <div class="pf-v6-c-data-list__check">
@@ -1115,10 +1061,10 @@ When a list item includes more than one block of content, it can be difficult fo
1115
1061
  </div>
1116
1062
  <div class="pf-v6-c-data-list__item-action">
1117
1063
  <button
1118
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
1064
+ class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
1119
1065
  type="button"
1120
1066
  aria-expanded="false"
1121
- aria-label="Menu toggle"
1067
+ aria-label="Data list item menu toggle"
1122
1068
  id="data-list-compact-item-1-menu-toggle"
1123
1069
  >
1124
1070
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1129,10 +1075,7 @@ When a list item includes more than one block of content, it can be difficult fo
1129
1075
  </div>
1130
1076
  </li>
1131
1077
 
1132
- <li
1133
- class="pf-v6-c-data-list__item"
1134
- aria-labelledby="data-list-compact-item-2"
1135
- >
1078
+ <li class="pf-v6-c-data-list__item">
1136
1079
  <div class="pf-v6-c-data-list__item-row">
1137
1080
  <div class="pf-v6-c-data-list__item-control">
1138
1081
  <div class="pf-v6-c-data-list__check">
@@ -1160,10 +1103,10 @@ When a list item includes more than one block of content, it can be difficult fo
1160
1103
  </div>
1161
1104
  <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-lg">
1162
1105
  <button
1163
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
1106
+ class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
1164
1107
  type="button"
1165
1108
  aria-expanded="false"
1166
- aria-label="Menu toggle"
1109
+ aria-label="Data list item menu toggle"
1167
1110
  id="data-list-compact-item-2-menu-toggle"
1168
1111
  >
1169
1112
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1184,10 +1127,7 @@ When a list item includes more than one block of content, it can be difficult fo
1184
1127
  </div>
1185
1128
  </li>
1186
1129
 
1187
- <li
1188
- class="pf-v6-c-data-list__item"
1189
- aria-labelledby="data-list-compact-item-3"
1190
- >
1130
+ <li class="pf-v6-c-data-list__item">
1191
1131
  <div class="pf-v6-c-data-list__item-row">
1192
1132
  <div class="pf-v6-c-data-list__item-control">
1193
1133
  <div class="pf-v6-c-data-list__check">
@@ -1215,10 +1155,10 @@ When a list item includes more than one block of content, it can be difficult fo
1215
1155
  </div>
1216
1156
  <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-xl">
1217
1157
  <button
1218
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
1158
+ class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
1219
1159
  type="button"
1220
1160
  aria-expanded="false"
1221
- aria-label="Menu toggle"
1161
+ aria-label="Data list item menu toggle"
1222
1162
  id="data-list-compact-item-3-menu-toggle"
1223
1163
  >
1224
1164
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1283,10 +1223,7 @@ When a list item includes more than one block of content, it can be difficult fo
1283
1223
  aria-label="Width modifier data list example 1"
1284
1224
  id="data-list-default-fitting"
1285
1225
  >
1286
- <li
1287
- class="pf-v6-c-data-list__item"
1288
- aria-labelledby="data-list-default-fitting-item-1"
1289
- >
1226
+ <li class="pf-v6-c-data-list__item">
1290
1227
  <div class="pf-v6-c-data-list__item-row">
1291
1228
  <div class="pf-v6-c-data-list__item-control">
1292
1229
  <div class="pf-v6-c-data-list__check">
@@ -1329,10 +1266,7 @@ When a list item includes more than one block of content, it can be difficult fo
1329
1266
  aria-label="Width modifier data list example 2"
1330
1267
  id="data-list-flex-modifiers"
1331
1268
  >
1332
- <li
1333
- class="pf-v6-c-data-list__item"
1334
- aria-labelledby="data-list-flex-modifiers-item-1"
1335
- >
1269
+ <li class="pf-v6-c-data-list__item">
1336
1270
  <div class="pf-v6-c-data-list__item-row">
1337
1271
  <div class="pf-v6-c-data-list__item-control">
1338
1272
  <div class="pf-v6-c-data-list__check">
@@ -1369,7 +1303,7 @@ When a list item includes more than one block of content, it can be difficult fo
1369
1303
  class="pf-v6-c-menu-toggle pf-m-plain"
1370
1304
  type="button"
1371
1305
  aria-expanded="false"
1372
- aria-label="Menu toggle"
1306
+ aria-label="Data list item menu toggle"
1373
1307
  id="data-list-flex-modifiers-item-1-menu-toggle"
1374
1308
  >
1375
1309
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1388,17 +1322,14 @@ When a list item includes more than one block of content, it can be difficult fo
1388
1322
  aria-label="Width modifier data list example 3"
1389
1323
  id="data-list-flex-modifiers-2"
1390
1324
  >
1391
- <li
1392
- class="pf-v6-c-data-list__item pf-m-expanded"
1393
- aria-labelledby="data-list-flex-modifiers-2-item-1"
1394
- >
1325
+ <li class="pf-v6-c-data-list__item pf-m-expanded">
1395
1326
  <div class="pf-v6-c-data-list__item-row">
1396
1327
  <div class="pf-v6-c-data-list__item-control">
1397
1328
  <div class="pf-v6-c-data-list__toggle">
1398
1329
  <button
1399
1330
  class="pf-v6-c-button pf-m-plain"
1400
1331
  type="button"
1401
- aria-labelledby="data-list-flex-modifiers-2-toggle1 data-list-flex-modifiers-2-item1"
1332
+ aria-labelledby="data-list-flex-modifiers-2-toggle1 data-list-flex-modifiers-2-item-1"
1402
1333
  id="data-list-flex-modifiers-2-toggle1"
1403
1334
  aria-label="Toggle details for"
1404
1335
  aria-expanded="true"
@@ -1458,7 +1389,7 @@ When a list item includes more than one block of content, it can be difficult fo
1458
1389
  class="pf-v6-c-menu-toggle pf-m-plain"
1459
1390
  type="button"
1460
1391
  aria-expanded="false"
1461
- aria-label="Menu toggle"
1392
+ aria-label="Data list item menu toggle"
1462
1393
  id="data-list-flex-modifiers-2-item-1-menu-toggle"
1463
1394
  >
1464
1395
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1502,11 +1433,7 @@ When a list item includes more than one block of content, it can be difficult fo
1502
1433
  aria-label="Clickable rows data list example"
1503
1434
  id="data-list-clickable-rows"
1504
1435
  >
1505
- <li
1506
- class="pf-v6-c-data-list__item pf-m-clickable pf-m-selected"
1507
- aria-labelledby="data-list-clickable-rows-item-1"
1508
- tabindex="0"
1509
- >
1436
+ <li class="pf-v6-c-data-list__item pf-m-clickable pf-m-selected" tabindex="0">
1510
1437
  <div class="pf-v6-c-data-list__item-row">
1511
1438
  <div class="pf-v6-c-data-list__item-content">
1512
1439
  <div class="pf-v6-c-data-list__cell">
@@ -1516,11 +1443,7 @@ When a list item includes more than one block of content, it can be difficult fo
1516
1443
  </div>
1517
1444
  </li>
1518
1445
 
1519
- <li
1520
- class="pf-v6-c-data-list__item pf-m-clickable"
1521
- aria-labelledby="data-list-clickable-rows-item-2"
1522
- tabindex="0"
1523
- >
1446
+ <li class="pf-v6-c-data-list__item pf-m-clickable" tabindex="0">
1524
1447
  <div class="pf-v6-c-data-list__item-row">
1525
1448
  <div class="pf-v6-c-data-list__item-content">
1526
1449
  <div class="pf-v6-c-data-list__cell">
@@ -1530,11 +1453,7 @@ When a list item includes more than one block of content, it can be difficult fo
1530
1453
  </div>
1531
1454
  </li>
1532
1455
 
1533
- <li
1534
- class="pf-v6-c-data-list__item pf-m-clickable"
1535
- aria-labelledby="data-list-clickable-rows-item-3"
1536
- tabindex="0"
1537
- >
1456
+ <li class="pf-v6-c-data-list__item pf-m-clickable" tabindex="0">
1538
1457
  <div class="pf-v6-c-data-list__item-row">
1539
1458
  <div class="pf-v6-c-data-list__item-content">
1540
1459
  <div class="pf-v6-c-data-list__cell">
@@ -1571,7 +1490,6 @@ When a list item includes more than one block of content, it can be difficult fo
1571
1490
  >
1572
1491
  <li
1573
1492
  class="pf-v6-c-data-list__item pf-m-expanded pf-m-clickable pf-m-selected"
1574
- aria-labelledby="data-list-clickable-expandable-rows-item-1"
1575
1493
  tabindex="0"
1576
1494
  >
1577
1495
  <div class="pf-v6-c-data-list__item-row">
@@ -1580,7 +1498,7 @@ When a list item includes more than one block of content, it can be difficult fo
1580
1498
  <button
1581
1499
  class="pf-v6-c-button pf-m-plain"
1582
1500
  type="button"
1583
- aria-labelledby="data-list-clickable-expandable-rows-toggle1 data-list-clickable-expandable-rows-item1"
1501
+ aria-labelledby="data-list-clickable-expandable-rows-toggle1 data-list-clickable-expandable-rows-item-1"
1584
1502
  id="data-list-clickable-expandable-rows-toggle1"
1585
1503
  aria-label="Toggle details for"
1586
1504
  aria-expanded="true"
@@ -1613,18 +1531,14 @@ When a list item includes more than one block of content, it can be difficult fo
1613
1531
  </section>
1614
1532
  </li>
1615
1533
 
1616
- <li
1617
- class="pf-v6-c-data-list__item pf-m-clickable"
1618
- aria-labelledby="data-list-clickable-expandable-rows-item-2"
1619
- tabindex="0"
1620
- >
1534
+ <li class="pf-v6-c-data-list__item pf-m-clickable" tabindex="0">
1621
1535
  <div class="pf-v6-c-data-list__item-row">
1622
1536
  <div class="pf-v6-c-data-list__item-control">
1623
1537
  <div class="pf-v6-c-data-list__toggle">
1624
1538
  <button
1625
1539
  class="pf-v6-c-button pf-m-plain"
1626
1540
  type="button"
1627
- aria-labelledby="data-list-clickable-expandable-rows-toggle2 data-list-clickable-expandable-rows-item2"
1541
+ aria-labelledby="data-list-clickable-expandable-rows-toggle2 data-list-clickable-expandable-rows-item-2"
1628
1542
  id="data-list-clickable-expandable-rows-toggle2"
1629
1543
  aria-label="Toggle details for"
1630
1544
  aria-expanded="false"
@@ -1658,18 +1572,14 @@ When a list item includes more than one block of content, it can be difficult fo
1658
1572
  </section>
1659
1573
  </li>
1660
1574
 
1661
- <li
1662
- class="pf-v6-c-data-list__item pf-m-expanded pf-m-clickable"
1663
- aria-labelledby="data-list-clickable-expandable-rows-item-3"
1664
- tabindex="0"
1665
- >
1575
+ <li class="pf-v6-c-data-list__item pf-m-expanded pf-m-clickable" tabindex="0">
1666
1576
  <div class="pf-v6-c-data-list__item-row">
1667
1577
  <div class="pf-v6-c-data-list__item-control">
1668
1578
  <div class="pf-v6-c-data-list__toggle">
1669
1579
  <button
1670
1580
  class="pf-v6-c-button pf-m-plain"
1671
1581
  type="button"
1672
- aria-labelledby="data-list-clickable-expandable-rows-toggle3 data-list-clickable-expandable-rows-item3"
1582
+ aria-labelledby="data-list-clickable-expandable-rows-toggle3 data-list-clickable-expandable-rows-item-3"
1673
1583
  id="data-list-clickable-expandable-rows-toggle3"
1674
1584
  aria-label="Toggle details for"
1675
1585
  aria-expanded="true"
@@ -1702,18 +1612,14 @@ When a list item includes more than one block of content, it can be difficult fo
1702
1612
  </section>
1703
1613
  </li>
1704
1614
 
1705
- <li
1706
- class="pf-v6-c-data-list__item pf-m-clickable"
1707
- aria-labelledby="data-list-clickable-expandable-rows-item-4"
1708
- tabindex="0"
1709
- >
1615
+ <li class="pf-v6-c-data-list__item pf-m-clickable" tabindex="0">
1710
1616
  <div class="pf-v6-c-data-list__item-row">
1711
1617
  <div class="pf-v6-c-data-list__item-control">
1712
1618
  <div class="pf-v6-c-data-list__toggle">
1713
1619
  <button
1714
1620
  class="pf-v6-c-button pf-m-plain"
1715
1621
  type="button"
1716
- aria-labelledby="data-list-clickable-expandable-rows-toggle4 data-list-clickable-expandable-rows-item4"
1622
+ aria-labelledby="data-list-clickable-expandable-rows-toggle4 data-list-clickable-expandable-rows-item-4"
1717
1623
  id="data-list-clickable-expandable-rows-toggle4"
1718
1624
  aria-label="Toggle details for"
1719
1625
  aria-expanded="false"
@@ -1762,10 +1668,7 @@ When a list item includes more than one block of content, it can be difficult fo
1762
1668
  aria-label="Draggable data list rows"
1763
1669
  id="data-list-draggable"
1764
1670
  >
1765
- <li
1766
- class="pf-v6-c-data-list__item"
1767
- aria-labelledby="data-list-draggable-item-1"
1768
- >
1671
+ <li class="pf-v6-c-data-list__item">
1769
1672
  <div class="pf-v6-c-data-list__item-row">
1770
1673
  <div class="pf-v6-c-data-list__item-control">
1771
1674
  <button
@@ -1808,10 +1711,7 @@ When a list item includes more than one block of content, it can be difficult fo
1808
1711
  </div>
1809
1712
  </li>
1810
1713
 
1811
- <li
1812
- class="pf-v6-c-data-list__item"
1813
- aria-labelledby="data-list-draggable-item-2"
1814
- >
1714
+ <li class="pf-v6-c-data-list__item">
1815
1715
  <div class="pf-v6-c-data-list__item-row">
1816
1716
  <div class="pf-v6-c-data-list__item-control">
1817
1717
  <button
@@ -1853,10 +1753,7 @@ When a list item includes more than one block of content, it can be difficult fo
1853
1753
  </div>
1854
1754
  </li>
1855
1755
 
1856
- <li
1857
- class="pf-v6-c-data-list__item pf-m-ghost-row"
1858
- aria-labelledby="data-list-draggable-item-3"
1859
- >
1756
+ <li class="pf-v6-c-data-list__item pf-m-ghost-row">
1860
1757
  <div class="pf-v6-c-data-list__item-row">
1861
1758
  <div class="pf-v6-c-data-list__item-control">
1862
1759
  <button
@@ -1899,10 +1796,7 @@ When a list item includes more than one block of content, it can be difficult fo
1899
1796
  </div>
1900
1797
  </li>
1901
1798
 
1902
- <li
1903
- class="pf-v6-c-data-list__item"
1904
- aria-labelledby="data-list-draggable-item-4"
1905
- >
1799
+ <li class="pf-v6-c-data-list__item">
1906
1800
  <div class="pf-v6-c-data-list__item-row">
1907
1801
  <div class="pf-v6-c-data-list__item-control">
1908
1802
  <button
@@ -1981,10 +1875,7 @@ When a list item includes more than one block of content, it can be difficult fo
1981
1875
  aria-label="Data list with text modifiers"
1982
1876
  id="data-list-with-text-modifiers"
1983
1877
  >
1984
- <li
1985
- class="pf-v6-c-data-list__item"
1986
- aria-labelledby="data-list-with-text-modifiers-item"
1987
- >
1878
+ <li class="pf-v6-c-data-list__item">
1988
1879
  <div class="pf-v6-c-data-list__item-row">
1989
1880
  <div class="pf-v6-c-data-list__item-content">
1990
1881
  <div class="pf-v6-c-data-list__cell">
@@ -2057,10 +1948,7 @@ When a list item includes more than one block of content, it can be difficult fo
2057
1948
  aria-label="Data list with modifiers and text"
2058
1949
  id="data-list-with-text-modifiers-and-text"
2059
1950
  >
2060
- <li
2061
- class="pf-v6-c-data-list__item"
2062
- aria-labelledby="data-list-with-text-modifiers-and-text-item-1"
2063
- >
1951
+ <li class="pf-v6-c-data-list__item">
2064
1952
  <div class="pf-v6-c-data-list__item-row">
2065
1953
  <div class="pf-v6-c-data-list__item-content">
2066
1954
  <div class="pf-v6-c-data-list__cell">
@@ -2114,7 +2002,7 @@ The DataList component provides a flexible alternative to the Table component, w
2114
2002
  aria-label="Grid data list example"
2115
2003
  id="data-list-grid"
2116
2004
  >
2117
- <li class="pf-v6-c-data-list__item" aria-labelledby="data-list-grid-item-1">
2005
+ <li class="pf-v6-c-data-list__item">
2118
2006
  <div class="pf-v6-c-data-list__item-row">
2119
2007
  <div class="pf-v6-c-data-list__item-content">
2120
2008
  <div class="pf-v6-c-data-list__cell">
@@ -2128,7 +2016,7 @@ The DataList component provides a flexible alternative to the Table component, w
2128
2016
  </div>
2129
2017
  </div>
2130
2018
  </li>
2131
- <li class="pf-v6-c-data-list__item" aria-labelledby="data-list-grid-item-2">
2019
+ <li class="pf-v6-c-data-list__item">
2132
2020
  <div class="pf-v6-c-data-list__item-row">
2133
2021
  <div class="pf-v6-c-data-list__item-content">
2134
2022
  <div class="pf-v6-c-data-list__cell">
@@ -2155,10 +2043,7 @@ The DataList component provides a flexible alternative to the Table component, w
2155
2043
  aria-label="Grid small data list example"
2156
2044
  id="data-list-grid-small"
2157
2045
  >
2158
- <li
2159
- class="pf-v6-c-data-list__item"
2160
- aria-labelledby="data-list-grid-small-item-1"
2161
- >
2046
+ <li class="pf-v6-c-data-list__item">
2162
2047
  <div class="pf-v6-c-data-list__item-row">
2163
2048
  <div class="pf-v6-c-data-list__item-content">
2164
2049
  <div class="pf-v6-c-data-list__cell">
@@ -2172,10 +2057,7 @@ The DataList component provides a flexible alternative to the Table component, w
2172
2057
  </div>
2173
2058
  </div>
2174
2059
  </li>
2175
- <li
2176
- class="pf-v6-c-data-list__item"
2177
- aria-labelledby="data-list-grid-small-item-2"
2178
- >
2060
+ <li class="pf-v6-c-data-list__item">
2179
2061
  <div class="pf-v6-c-data-list__item-row">
2180
2062
  <div class="pf-v6-c-data-list__item-content">
2181
2063
  <div class="pf-v6-c-data-list__cell">
@@ -2202,10 +2084,7 @@ The DataList component provides a flexible alternative to the Table component, w
2202
2084
  aria-label="Grid none data list example"
2203
2085
  id="data-list-grid-none"
2204
2086
  >
2205
- <li
2206
- class="pf-v6-c-data-list__item"
2207
- aria-labelledby="data-list-grid-none-item-1"
2208
- >
2087
+ <li class="pf-v6-c-data-list__item">
2209
2088
  <div class="pf-v6-c-data-list__item-row">
2210
2089
  <div class="pf-v6-c-data-list__item-content">
2211
2090
  <div class="pf-v6-c-data-list__cell">
@@ -2219,10 +2098,7 @@ The DataList component provides a flexible alternative to the Table component, w
2219
2098
  </div>
2220
2099
  </div>
2221
2100
  </li>
2222
- <li
2223
- class="pf-v6-c-data-list__item"
2224
- aria-labelledby="data-list-grid-none-item-2"
2225
- >
2101
+ <li class="pf-v6-c-data-list__item">
2226
2102
  <div class="pf-v6-c-data-list__item-row">
2227
2103
  <div class="pf-v6-c-data-list__item-content">
2228
2104
  <div class="pf-v6-c-data-list__cell">