@patternfly/patternfly 6.5.0-prerelease.63 → 6.5.0-prerelease.65

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 (41) hide show
  1. package/base/patternfly-svg-icons.css +6 -0
  2. package/base/patternfly-svg-icons.scss +6 -0
  3. package/components/ClipboardCopy/clipboard-copy.css +7 -1
  4. package/components/ClipboardCopy/clipboard-copy.scss +10 -1
  5. package/components/Page/page.css +83 -34
  6. package/components/Page/page.scss +94 -39
  7. package/components/Table/table.css +2 -2
  8. package/components/Table/table.scss +2 -2
  9. package/components/_index.css +92 -37
  10. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +39 -38
  11. package/docs/components/Page/examples/Page.md +62 -15
  12. package/docs/components/Table/examples/Table.md +1879 -151
  13. package/docs/demos/AboutModal/examples/AboutModal.md +8 -2
  14. package/docs/demos/Alert/examples/Alert.md +24 -6
  15. package/docs/demos/BackToTop/examples/BackToTop.md +8 -2
  16. package/docs/demos/Banner/examples/Banner.md +16 -4
  17. package/docs/demos/CardView/examples/CardView.md +8 -2
  18. package/docs/demos/Dashboard/examples/Dashboard.md +8 -2
  19. package/docs/demos/DataList/examples/DataList.md +32 -8
  20. package/docs/demos/DescriptionList/examples/DescriptionList.md +24 -6
  21. package/docs/demos/Drawer/examples/Drawer.md +24 -6
  22. package/docs/demos/JumpLinks/examples/JumpLinks.md +32 -8
  23. package/docs/demos/Masthead/examples/Masthead.md +72 -18
  24. package/docs/demos/Modal/examples/Modal.md +48 -12
  25. package/docs/demos/Nav/examples/Nav.md +80 -20
  26. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +40 -10
  27. package/docs/demos/Page/examples/Page.md +113 -28
  28. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +56 -14
  29. package/docs/demos/Skeleton/examples/Skeleton.md +8 -2
  30. package/docs/demos/Table/examples/Table.md +496 -64
  31. package/docs/demos/Tabs/examples/Tabs.md +48 -12
  32. package/docs/demos/Toolbar/examples/Toolbar.md +16 -4
  33. package/docs/demos/Wizard/examples/Wizard.md +72 -18
  34. package/package.json +21 -1
  35. package/patternfly-base-no-globals.css +6 -0
  36. package/patternfly-base.css +6 -0
  37. package/patternfly-no-globals.css +99 -38
  38. package/patternfly.css +99 -38
  39. package/patternfly.min.css +1 -1
  40. package/patternfly.min.css.map +1 -1
  41. package/patternfly.scss +3 -1
@@ -339,9 +339,15 @@ section: components
339
339
  </nav>
340
340
  </div>
341
341
  </section>
342
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
342
+ <section
343
+ class="pf-v6-c-page__main-section pf-m-limit-width"
344
+ aria-labelledby="main-title"
345
+ >
343
346
  <div class="pf-v6-c-page__main-body">
344
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
347
+ <h1
348
+ class="pf-v6-c-content--h1 pf-m-page-title"
349
+ id="main-title"
350
+ >Main title</h1>
345
351
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
346
352
  </div>
347
353
  </section>
@@ -781,9 +787,15 @@ section: components
781
787
  </nav>
782
788
  </div>
783
789
  </section>
784
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
790
+ <section
791
+ class="pf-v6-c-page__main-section pf-m-limit-width"
792
+ aria-labelledby="main-title"
793
+ >
785
794
  <div class="pf-v6-c-page__main-body">
786
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
795
+ <h1
796
+ class="pf-v6-c-content--h1 pf-m-page-title"
797
+ id="main-title"
798
+ >Main title</h1>
787
799
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
788
800
  </div>
789
801
  </section>
@@ -1232,9 +1244,15 @@ section: components
1232
1244
  </nav>
1233
1245
  </div>
1234
1246
  </section>
1235
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1247
+ <section
1248
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1249
+ aria-labelledby="main-title"
1250
+ >
1236
1251
  <div class="pf-v6-c-page__main-body">
1237
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1252
+ <h1
1253
+ class="pf-v6-c-content--h1 pf-m-page-title"
1254
+ id="main-title"
1255
+ >Main title</h1>
1238
1256
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1239
1257
  </div>
1240
1258
  </section>
@@ -1673,9 +1691,15 @@ section: components
1673
1691
  </nav>
1674
1692
  </div>
1675
1693
  </section>
1676
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1694
+ <section
1695
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1696
+ aria-labelledby="main-title"
1697
+ >
1677
1698
  <div class="pf-v6-c-page__main-body">
1678
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1699
+ <h1
1700
+ class="pf-v6-c-content--h1 pf-m-page-title"
1701
+ id="main-title"
1702
+ >Main title</h1>
1679
1703
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1680
1704
  </div>
1681
1705
  </section>
@@ -2114,9 +2138,15 @@ section: components
2114
2138
  </nav>
2115
2139
  </div>
2116
2140
  </section>
2117
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2141
+ <section
2142
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2143
+ aria-labelledby="main-title"
2144
+ >
2118
2145
  <div class="pf-v6-c-page__main-body">
2119
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2146
+ <h1
2147
+ class="pf-v6-c-content--h1 pf-m-page-title"
2148
+ id="main-title"
2149
+ >Main title</h1>
2120
2150
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2121
2151
  </div>
2122
2152
  </section>
@@ -2555,9 +2585,15 @@ section: components
2555
2585
  </nav>
2556
2586
  </div>
2557
2587
  </section>
2558
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2588
+ <section
2589
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2590
+ aria-labelledby="main-title"
2591
+ >
2559
2592
  <div class="pf-v6-c-page__main-body">
2560
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2593
+ <h1
2594
+ class="pf-v6-c-content--h1 pf-m-page-title"
2595
+ id="main-title"
2596
+ >Main title</h1>
2561
2597
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2562
2598
  </div>
2563
2599
  </section>
@@ -339,9 +339,15 @@ section: components
339
339
  </nav>
340
340
  </div>
341
341
  </section>
342
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
342
+ <section
343
+ class="pf-v6-c-page__main-section pf-m-limit-width"
344
+ aria-labelledby="main-title"
345
+ >
343
346
  <div class="pf-v6-c-page__main-body">
344
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
347
+ <h1
348
+ class="pf-v6-c-content--h1 pf-m-page-title"
349
+ id="main-title"
350
+ >Main title</h1>
345
351
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
346
352
  </div>
347
353
  </section>
@@ -761,9 +767,15 @@ section: components
761
767
  </nav>
762
768
  </div>
763
769
  </section>
764
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
770
+ <section
771
+ class="pf-v6-c-page__main-section pf-m-limit-width"
772
+ aria-labelledby="main-title"
773
+ >
765
774
  <div class="pf-v6-c-page__main-body">
766
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
775
+ <h1
776
+ class="pf-v6-c-content--h1 pf-m-page-title"
777
+ id="main-title"
778
+ >Main title</h1>
767
779
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
768
780
  </div>
769
781
  </section>
@@ -1273,9 +1285,15 @@ section: components
1273
1285
  </nav>
1274
1286
  </div>
1275
1287
  </section>
1276
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1288
+ <section
1289
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1290
+ aria-labelledby="main-title"
1291
+ >
1277
1292
  <div class="pf-v6-c-page__main-body">
1278
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1293
+ <h1
1294
+ class="pf-v6-c-content--h1 pf-m-page-title"
1295
+ id="main-title"
1296
+ >Main title</h1>
1279
1297
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1280
1298
  </div>
1281
1299
  </section>
@@ -1591,9 +1609,15 @@ section: components
1591
1609
  </nav>
1592
1610
  </div>
1593
1611
  </section>
1594
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1612
+ <section
1613
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1614
+ aria-labelledby="main-title"
1615
+ >
1595
1616
  <div class="pf-v6-c-page__main-body">
1596
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1617
+ <h1
1618
+ class="pf-v6-c-content--h1 pf-m-page-title"
1619
+ id="main-title"
1620
+ >Main title</h1>
1597
1621
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1598
1622
  </div>
1599
1623
  </section>
@@ -2000,9 +2024,15 @@ section: components
2000
2024
  </nav>
2001
2025
  </div>
2002
2026
  </section>
2003
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2027
+ <section
2028
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2029
+ aria-labelledby="main-title"
2030
+ >
2004
2031
  <div class="pf-v6-c-page__main-body">
2005
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2032
+ <h1
2033
+ class="pf-v6-c-content--h1 pf-m-page-title"
2034
+ id="main-title"
2035
+ >Main title</h1>
2006
2036
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2007
2037
  </div>
2008
2038
  </section>
@@ -2346,9 +2376,15 @@ section: components
2346
2376
  </nav>
2347
2377
  </div>
2348
2378
  </section>
2349
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2379
+ <section
2380
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2381
+ aria-labelledby="main-title"
2382
+ >
2350
2383
  <div class="pf-v6-c-page__main-body">
2351
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2384
+ <h1
2385
+ class="pf-v6-c-content--h1 pf-m-page-title"
2386
+ id="main-title"
2387
+ >Main title</h1>
2352
2388
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2353
2389
  </div>
2354
2390
  </section>
@@ -2906,9 +2942,15 @@ section: components
2906
2942
  </nav>
2907
2943
  </div>
2908
2944
  </section>
2909
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2945
+ <section
2946
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2947
+ aria-labelledby="main-title"
2948
+ >
2910
2949
  <div class="pf-v6-c-page__main-body">
2911
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2950
+ <h1
2951
+ class="pf-v6-c-content--h1 pf-m-page-title"
2952
+ id="main-title"
2953
+ >Main title</h1>
2912
2954
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2913
2955
  </div>
2914
2956
  </section>
@@ -3469,9 +3511,15 @@ section: components
3469
3511
  </nav>
3470
3512
  </div>
3471
3513
  </section>
3472
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
3514
+ <section
3515
+ class="pf-v6-c-page__main-section pf-m-limit-width"
3516
+ aria-labelledby="main-title"
3517
+ >
3473
3518
  <div class="pf-v6-c-page__main-body">
3474
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3519
+ <h1
3520
+ class="pf-v6-c-content--h1 pf-m-page-title"
3521
+ id="main-title"
3522
+ >Main title</h1>
3475
3523
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
3476
3524
  </div>
3477
3525
  </section>
@@ -4029,9 +4077,15 @@ section: components
4029
4077
  </nav>
4030
4078
  </div>
4031
4079
  </section>
4032
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
4080
+ <section
4081
+ class="pf-v6-c-page__main-section pf-m-limit-width"
4082
+ aria-labelledby="main-title"
4083
+ >
4033
4084
  <div class="pf-v6-c-page__main-body">
4034
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
4085
+ <h1
4086
+ class="pf-v6-c-content--h1 pf-m-page-title"
4087
+ id="main-title"
4088
+ >Main title</h1>
4035
4089
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
4036
4090
  </div>
4037
4091
  </section>
@@ -4592,9 +4646,15 @@ section: components
4592
4646
  </nav>
4593
4647
  </div>
4594
4648
  </section>
4595
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
4649
+ <section
4650
+ class="pf-v6-c-page__main-section pf-m-limit-width"
4651
+ aria-labelledby="main-title"
4652
+ >
4596
4653
  <div class="pf-v6-c-page__main-body">
4597
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
4654
+ <h1
4655
+ class="pf-v6-c-content--h1 pf-m-page-title"
4656
+ id="main-title"
4657
+ >Main title</h1>
4598
4658
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
4599
4659
  </div>
4600
4660
  </section>
@@ -363,9 +363,15 @@ section: components
363
363
  </nav>
364
364
  </div>
365
365
  </section>
366
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
366
+ <section
367
+ class="pf-v6-c-page__main-section pf-m-limit-width"
368
+ aria-labelledby="main-title"
369
+ >
367
370
  <div class="pf-v6-c-page__main-body">
368
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
371
+ <h1
372
+ class="pf-v6-c-content--h1 pf-m-page-title"
373
+ id="main-title"
374
+ >Main title</h1>
369
375
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
370
376
  </div>
371
377
  </section>
@@ -1286,9 +1292,15 @@ section: components
1286
1292
  </nav>
1287
1293
  </div>
1288
1294
  </section>
1289
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1295
+ <section
1296
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1297
+ aria-labelledby="main-title"
1298
+ >
1290
1299
  <div class="pf-v6-c-page__main-body">
1291
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1300
+ <h1
1301
+ class="pf-v6-c-content--h1 pf-m-page-title"
1302
+ id="main-title"
1303
+ >Main title</h1>
1292
1304
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1293
1305
  </div>
1294
1306
  </section>
@@ -2209,9 +2221,15 @@ section: components
2209
2221
  </nav>
2210
2222
  </div>
2211
2223
  </section>
2212
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2224
+ <section
2225
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2226
+ aria-labelledby="main-title"
2227
+ >
2213
2228
  <div class="pf-v6-c-page__main-body">
2214
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2229
+ <h1
2230
+ class="pf-v6-c-content--h1 pf-m-page-title"
2231
+ id="main-title"
2232
+ >Main title</h1>
2215
2233
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2216
2234
  </div>
2217
2235
  </section>
@@ -3135,9 +3153,15 @@ section: components
3135
3153
  </nav>
3136
3154
  </div>
3137
3155
  </section>
3138
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
3156
+ <section
3157
+ class="pf-v6-c-page__main-section pf-m-limit-width"
3158
+ aria-labelledby="main-title"
3159
+ >
3139
3160
  <div class="pf-v6-c-page__main-body">
3140
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3161
+ <h1
3162
+ class="pf-v6-c-content--h1 pf-m-page-title"
3163
+ id="main-title"
3164
+ >Main title</h1>
3141
3165
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
3142
3166
  </div>
3143
3167
  </section>
@@ -4044,9 +4068,15 @@ section: components
4044
4068
  </nav>
4045
4069
  </div>
4046
4070
  </section>
4047
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
4071
+ <section
4072
+ class="pf-v6-c-page__main-section pf-m-limit-width"
4073
+ aria-labelledby="main-title"
4074
+ >
4048
4075
  <div class="pf-v6-c-page__main-body">
4049
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
4076
+ <h1
4077
+ class="pf-v6-c-content--h1 pf-m-page-title"
4078
+ id="main-title"
4079
+ >Main title</h1>
4050
4080
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
4051
4081
  </div>
4052
4082
  </section>
@@ -339,9 +339,15 @@ wrapperTag: div
339
339
  </nav>
340
340
  </div>
341
341
  </section>
342
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
342
+ <section
343
+ class="pf-v6-c-page__main-section pf-m-limit-width"
344
+ aria-labelledby="main-title"
345
+ >
343
346
  <div class="pf-v6-c-page__main-body">
344
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
347
+ <h1
348
+ class="pf-v6-c-content--h1 pf-m-page-title"
349
+ id="main-title"
350
+ >Main title</h1>
345
351
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
346
352
  </div>
347
353
  </section>
@@ -741,9 +747,15 @@ wrapperTag: div
741
747
  </nav>
742
748
  </div>
743
749
  </section>
744
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
750
+ <section
751
+ class="pf-v6-c-page__main-section pf-m-limit-width"
752
+ aria-labelledby="main-title"
753
+ >
745
754
  <div class="pf-v6-c-page__main-body">
746
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
755
+ <h1
756
+ class="pf-v6-c-content--h1 pf-m-page-title"
757
+ id="main-title"
758
+ >Main title</h1>
747
759
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
748
760
  </div>
749
761
  </section>
@@ -1155,9 +1167,15 @@ wrapperTag: div
1155
1167
  </nav>
1156
1168
  </div>
1157
1169
  </section>
1158
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1170
+ <section
1171
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1172
+ aria-labelledby="main-title"
1173
+ >
1159
1174
  <div class="pf-v6-c-page__main-body">
1160
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1175
+ <h1
1176
+ class="pf-v6-c-content--h1 pf-m-page-title"
1177
+ id="main-title"
1178
+ >Main title</h1>
1161
1179
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1162
1180
  </div>
1163
1181
  </section>
@@ -1661,9 +1679,15 @@ wrapperTag: div
1661
1679
  </nav>
1662
1680
  </div>
1663
1681
  </section>
1664
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1682
+ <section
1683
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1684
+ aria-labelledby="main-title"
1685
+ >
1665
1686
  <div class="pf-v6-c-page__main-body">
1666
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1687
+ <h1
1688
+ class="pf-v6-c-content--h1 pf-m-page-title"
1689
+ id="main-title"
1690
+ >Main title</h1>
1667
1691
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1668
1692
  </div>
1669
1693
  </section>
@@ -2167,9 +2191,15 @@ wrapperTag: div
2167
2191
  </nav>
2168
2192
  </div>
2169
2193
  </section>
2170
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2194
+ <section
2195
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2196
+ aria-labelledby="main-title"
2197
+ >
2171
2198
  <div class="pf-v6-c-page__main-body">
2172
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2199
+ <h1
2200
+ class="pf-v6-c-content--h1 pf-m-page-title"
2201
+ id="main-title"
2202
+ >Main title</h1>
2173
2203
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2174
2204
  </div>
2175
2205
  </section>
@@ -2675,9 +2705,15 @@ wrapperTag: div
2675
2705
  </nav>
2676
2706
  </div>
2677
2707
  </section>
2678
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2708
+ <section
2709
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2710
+ aria-labelledby="main-title"
2711
+ >
2679
2712
  <div class="pf-v6-c-page__main-body">
2680
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2713
+ <h1
2714
+ class="pf-v6-c-content--h1 pf-m-page-title"
2715
+ id="main-title"
2716
+ >Main title</h1>
2681
2717
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2682
2718
  </div>
2683
2719
  </section>
@@ -3180,9 +3216,15 @@ wrapperTag: div
3180
3216
  </nav>
3181
3217
  </div>
3182
3218
  </section>
3183
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
3219
+ <section
3220
+ class="pf-v6-c-page__main-section pf-m-limit-width"
3221
+ aria-labelledby="main-title"
3222
+ >
3184
3223
  <div class="pf-v6-c-page__main-body">
3185
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3224
+ <h1
3225
+ class="pf-v6-c-content--h1 pf-m-page-title"
3226
+ id="main-title"
3227
+ >Main title</h1>
3186
3228
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
3187
3229
  </div>
3188
3230
  </section>
@@ -3693,9 +3735,13 @@ wrapperTag: div
3693
3735
  </section>
3694
3736
  <section
3695
3737
  class="pf-v6-c-page__main-section pf-m-limit-width pf-m-shadow-bottom"
3738
+ aria-labelledby="main-title"
3696
3739
  >
3697
3740
  <div class="pf-v6-c-page__main-body">
3698
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3741
+ <h1
3742
+ class="pf-v6-c-content--h1 pf-m-page-title"
3743
+ id="main-title"
3744
+ >Main title</h1>
3699
3745
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
3700
3746
  </div>
3701
3747
  </section>
@@ -4137,10 +4183,11 @@ wrapperTag: div
4137
4183
  >
4138
4184
  <section
4139
4185
  class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
4186
+ aria-labelledby="centered-page-sections-title"
4140
4187
  >
4141
4188
  <div class="pf-v6-c-page__main-body">
4142
4189
  <div class="pf-v6-c-content">
4143
- <h1>Centering page sections</h1>
4190
+ <h1 id="centered-page-sections-title">Centering page sections</h1>
4144
4191
  <p>
4145
4192
  When a width limited page section is wider than the value of
4146
4193
  <code>--pf-v6-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
@@ -4152,6 +4199,7 @@ wrapperTag: div
4152
4199
  <hr class="pf-v6-c-divider" />
4153
4200
  <section
4154
4201
  class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
4202
+ aria-label="Gallery cards section"
4155
4203
  >
4156
4204
  <div class="pf-v6-c-page__main-body">
4157
4205
  <div class="pf-v6-l-gallery pf-m-gutter">
@@ -4191,6 +4239,7 @@ wrapperTag: div
4191
4239
  <hr class="pf-v6-c-divider" />
4192
4240
  <section
4193
4241
  class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center pf-v6-u-text-align-center"
4242
+ aria-label="Centered text section"
4194
4243
  >
4195
4244
  <div class="pf-v6-c-page__main-body">
4196
4245
  <div class="pf-v6-c-card">
@@ -4574,9 +4623,15 @@ wrapperTag: div
4574
4623
  </nav>
4575
4624
  </div>
4576
4625
  </section>
4577
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
4626
+ <section
4627
+ class="pf-v6-c-page__main-section pf-m-limit-width"
4628
+ aria-labelledby="main-title"
4629
+ >
4578
4630
  <div class="pf-v6-c-page__main-body">
4579
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
4631
+ <h1
4632
+ class="pf-v6-c-content--h1 pf-m-page-title"
4633
+ id="main-title"
4634
+ >Main title</h1>
4580
4635
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
4581
4636
  </div>
4582
4637
  </section>
@@ -5035,9 +5090,15 @@ wrapperTag: div
5035
5090
  </nav>
5036
5091
  </div>
5037
5092
  </section>
5038
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
5093
+ <section
5094
+ class="pf-v6-c-page__main-section pf-m-limit-width"
5095
+ aria-labelledby="main-title"
5096
+ >
5039
5097
  <div class="pf-v6-c-page__main-body">
5040
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
5098
+ <h1
5099
+ class="pf-v6-c-content--h1 pf-m-page-title"
5100
+ id="main-title"
5101
+ >Main title</h1>
5041
5102
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
5042
5103
  </div>
5043
5104
  </section>
@@ -5419,9 +5480,15 @@ wrapperTag: div
5419
5480
  </nav>
5420
5481
  </div>
5421
5482
  </section>
5422
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
5483
+ <section
5484
+ class="pf-v6-c-page__main-section pf-m-limit-width"
5485
+ aria-labelledby="main-title"
5486
+ >
5423
5487
  <div class="pf-v6-c-page__main-body">
5424
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
5488
+ <h1
5489
+ class="pf-v6-c-content--h1 pf-m-page-title"
5490
+ id="main-title"
5491
+ >Main title</h1>
5425
5492
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
5426
5493
  </div>
5427
5494
  </section>
@@ -5803,9 +5870,15 @@ wrapperTag: div
5803
5870
  </nav>
5804
5871
  </div>
5805
5872
  </section>
5806
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
5873
+ <section
5874
+ class="pf-v6-c-page__main-section pf-m-limit-width"
5875
+ aria-labelledby="main-title"
5876
+ >
5807
5877
  <div class="pf-v6-c-page__main-body">
5808
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
5878
+ <h1
5879
+ class="pf-v6-c-content--h1 pf-m-page-title"
5880
+ id="main-title"
5881
+ >Main title</h1>
5809
5882
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
5810
5883
  </div>
5811
5884
  </section>
@@ -6144,9 +6217,15 @@ wrapperTag: div
6144
6217
  </nav>
6145
6218
  </div>
6146
6219
  </section>
6147
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
6220
+ <section
6221
+ class="pf-v6-c-page__main-section pf-m-limit-width"
6222
+ aria-labelledby="main-title"
6223
+ >
6148
6224
  <div class="pf-v6-c-page__main-body">
6149
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
6225
+ <h1
6226
+ class="pf-v6-c-content--h1 pf-m-page-title"
6227
+ id="main-title"
6228
+ >Main title</h1>
6150
6229
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
6151
6230
  </div>
6152
6231
  </section>
@@ -6274,9 +6353,15 @@ wrapperTag: div
6274
6353
  </nav>
6275
6354
  </div>
6276
6355
  </section>
6277
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
6356
+ <section
6357
+ class="pf-v6-c-page__main-section pf-m-limit-width"
6358
+ aria-labelledby="main-title"
6359
+ >
6278
6360
  <div class="pf-v6-c-page__main-body">
6279
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
6361
+ <h1
6362
+ class="pf-v6-c-content--h1 pf-m-page-title"
6363
+ id="main-title"
6364
+ >Main title</h1>
6280
6365
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
6281
6366
  </div>
6282
6367
  </section>