@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
package/docs/demos/AboutModal/examples/AboutModal.md CHANGED
@@ -341,9 +341,15 @@ This demo implements the about modal, including the backdrop.
341
341
  </nav>
342
342
  </div>
343
343
  </section>
344
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
344
+ <section
345
+ class="pf-v6-c-page__main-section pf-m-limit-width"
346
+ aria-labelledby="main-title"
347
+ >
345
348
  <div class="pf-v6-c-page__main-body">
346
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
349
+ <h1
350
+ class="pf-v6-c-content--h1 pf-m-page-title"
351
+ id="main-title"
352
+ >Main title</h1>
347
353
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
348
354
  </div>
349
355
  </section>
package/docs/demos/Alert/examples/Alert.md CHANGED
@@ -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>
@@ -872,9 +878,15 @@ section: components
872
878
  </nav>
873
879
  </div>
874
880
  </section>
875
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
881
+ <section
882
+ class="pf-v6-c-page__main-section pf-m-limit-width"
883
+ aria-labelledby="main-title"
884
+ >
876
885
  <div class="pf-v6-c-page__main-body">
877
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
886
+ <h1
887
+ class="pf-v6-c-content--h1 pf-m-page-title"
888
+ id="main-title"
889
+ >Main title</h1>
878
890
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
879
891
  </div>
880
892
  </section>
@@ -1448,9 +1460,15 @@ section: components
1448
1460
  </nav>
1449
1461
  </div>
1450
1462
  </section>
1451
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1463
+ <section
1464
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1465
+ aria-labelledby="main-title"
1466
+ >
1452
1467
  <div class="pf-v6-c-page__main-body">
1453
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1468
+ <h1
1469
+ class="pf-v6-c-content--h1 pf-m-page-title"
1470
+ id="main-title"
1471
+ >Main title</h1>
1454
1472
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1455
1473
  </div>
1456
1474
  </section>
package/docs/demos/BackToTop/examples/BackToTop.md CHANGED
@@ -340,9 +340,15 @@ cssPrefix: pf-d-back-to-top
340
340
  </nav>
341
341
  </div>
342
342
  </section>
343
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
343
+ <section
344
+ class="pf-v6-c-page__main-section pf-m-limit-width"
345
+ aria-labelledby="main-title"
346
+ >
344
347
  <div class="pf-v6-c-page__main-body">
345
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
348
+ <h1
349
+ class="pf-v6-c-content--h1 pf-m-page-title"
350
+ id="main-title"
351
+ >Main title</h1>
346
352
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
347
353
  </div>
348
354
  </section>
package/docs/demos/Banner/examples/Banner.md CHANGED
@@ -359,9 +359,15 @@ wrapperTag: div
359
359
  </nav>
360
360
  </div>
361
361
  </section>
362
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
362
+ <section
363
+ class="pf-v6-c-page__main-section pf-m-limit-width"
364
+ aria-labelledby="main-title"
365
+ >
363
366
  <div class="pf-v6-c-page__main-body">
364
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
367
+ <h1
368
+ class="pf-v6-c-content--h1 pf-m-page-title"
369
+ id="main-title"
370
+ >Main title</h1>
365
371
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
366
372
  </div>
367
373
  </section>
@@ -891,9 +897,15 @@ wrapperTag: div
891
897
  </nav>
892
898
  </div>
893
899
  </section>
894
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
900
+ <section
901
+ class="pf-v6-c-page__main-section pf-m-limit-width"
902
+ aria-labelledby="main-title"
903
+ >
895
904
  <div class="pf-v6-c-page__main-body">
896
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
905
+ <h1
906
+ class="pf-v6-c-content--h1 pf-m-page-title"
907
+ id="main-title"
908
+ >Main title</h1>
897
909
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
898
910
  </div>
899
911
  </section>
package/docs/demos/CardView/examples/CardView.md CHANGED
@@ -467,9 +467,15 @@ section: patterns
467
467
  </nav>
468
468
  </div>
469
469
  </section>
470
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
470
+ <section
471
+ class="pf-v6-c-page__main-section pf-m-limit-width"
472
+ aria-labelledby="main-title"
473
+ >
471
474
  <div class="pf-v6-c-page__main-body">
472
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
475
+ <h1
476
+ class="pf-v6-c-content--h1 pf-m-page-title"
477
+ id="main-title"
478
+ >Main title</h1>
473
479
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
474
480
  </div>
475
481
  </section>
package/docs/demos/Dashboard/examples/Dashboard.md CHANGED
@@ -337,9 +337,15 @@ cssPrefix: pf-d-dashboard
337
337
  </nav>
338
338
  </div>
339
339
  </section>
340
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
340
+ <section
341
+ class="pf-v6-c-page__main-section pf-m-limit-width"
342
+ aria-labelledby="main-title"
343
+ >
341
344
  <div class="pf-v6-c-page__main-body">
342
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
345
+ <h1
346
+ class="pf-v6-c-content--h1 pf-m-page-title"
347
+ id="main-title"
348
+ >Main title</h1>
343
349
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
344
350
  </div>
345
351
  </section>
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -340,9 +340,15 @@ wrapperTag: div
340
340
  </nav>
341
341
  </div>
342
342
  </section>
343
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
343
+ <section
344
+ class="pf-v6-c-page__main-section pf-m-limit-width"
345
+ aria-labelledby="main-title"
346
+ >
344
347
  <div class="pf-v6-c-page__main-body">
345
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
348
+ <h1
349
+ class="pf-v6-c-content--h1 pf-m-page-title"
350
+ id="main-title"
351
+ >Main title</h1>
346
352
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
347
353
  </div>
348
354
  </section>
@@ -1463,9 +1469,15 @@ wrapperTag: div
1463
1469
  </nav>
1464
1470
  </div>
1465
1471
  </section>
1466
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1472
+ <section
1473
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1474
+ aria-labelledby="main-title"
1475
+ >
1467
1476
  <div class="pf-v6-c-page__main-body">
1468
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1477
+ <h1
1478
+ class="pf-v6-c-content--h1 pf-m-page-title"
1479
+ id="main-title"
1480
+ >Main title</h1>
1469
1481
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1470
1482
  </div>
1471
1483
  </section>
@@ -2557,9 +2569,15 @@ wrapperTag: div
2557
2569
  </nav>
2558
2570
  </div>
2559
2571
  </section>
2560
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2572
+ <section
2573
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2574
+ aria-labelledby="main-title"
2575
+ >
2561
2576
  <div class="pf-v6-c-page__main-body">
2562
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2577
+ <h1
2578
+ class="pf-v6-c-content--h1 pf-m-page-title"
2579
+ id="main-title"
2580
+ >Main title</h1>
2563
2581
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2564
2582
  </div>
2565
2583
  </section>
@@ -4498,9 +4516,15 @@ wrapperTag: div
4498
4516
  </nav>
4499
4517
  </div>
4500
4518
  </section>
4501
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
4519
+ <section
4520
+ class="pf-v6-c-page__main-section pf-m-limit-width"
4521
+ aria-labelledby="main-title"
4522
+ >
4502
4523
  <div class="pf-v6-c-page__main-body">
4503
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
4524
+ <h1
4525
+ class="pf-v6-c-content--h1 pf-m-page-title"
4526
+ id="main-title"
4527
+ >Main title</h1>
4504
4528
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
4505
4529
  </div>
4506
4530
  </section>
package/docs/demos/DescriptionList/examples/DescriptionList.md CHANGED
@@ -340,9 +340,15 @@ cssPrefix: pf-d-description-list
340
340
  </nav>
341
341
  </div>
342
342
  </section>
343
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
343
+ <section
344
+ class="pf-v6-c-page__main-section pf-m-limit-width"
345
+ aria-labelledby="main-title"
346
+ >
344
347
  <div class="pf-v6-c-page__main-body">
345
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
348
+ <h1
349
+ class="pf-v6-c-content--h1 pf-m-page-title"
350
+ id="main-title"
351
+ >Main title</h1>
346
352
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
347
353
  </div>
348
354
  </section>
@@ -806,9 +812,15 @@ cssPrefix: pf-d-description-list
806
812
  </nav>
807
813
  </div>
808
814
  </section>
809
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
815
+ <section
816
+ class="pf-v6-c-page__main-section pf-m-limit-width"
817
+ aria-labelledby="main-title"
818
+ >
810
819
  <div class="pf-v6-c-page__main-body">
811
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
820
+ <h1
821
+ class="pf-v6-c-content--h1 pf-m-page-title"
822
+ id="main-title"
823
+ >Main title</h1>
812
824
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
813
825
  </div>
814
826
  </section>
@@ -1542,9 +1554,15 @@ cssPrefix: pf-d-description-list
1542
1554
  </nav>
1543
1555
  </div>
1544
1556
  </section>
1545
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1557
+ <section
1558
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1559
+ aria-labelledby="main-title"
1560
+ >
1546
1561
  <div class="pf-v6-c-page__main-body">
1547
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1562
+ <h1
1563
+ class="pf-v6-c-content--h1 pf-m-page-title"
1564
+ id="main-title"
1565
+ >Main title</h1>
1548
1566
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1549
1567
  </div>
1550
1568
  </section>
package/docs/demos/Drawer/examples/Drawer.md CHANGED
@@ -354,9 +354,15 @@ wrapperTag: div
354
354
  </nav>
355
355
  </div>
356
356
  </section>
357
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
357
+ <section
358
+ class="pf-v6-c-page__main-section pf-m-limit-width"
359
+ aria-labelledby="main-title"
360
+ >
358
361
  <div class="pf-v6-c-page__main-body">
359
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
362
+ <h1
363
+ class="pf-v6-c-content--h1 pf-m-page-title"
364
+ id="main-title"
365
+ >Main title</h1>
360
366
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
361
367
  </div>
362
368
  </section>
@@ -936,9 +942,15 @@ wrapperTag: div
936
942
  </nav>
937
943
  </div>
938
944
  </section>
939
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
945
+ <section
946
+ class="pf-v6-c-page__main-section pf-m-limit-width"
947
+ aria-labelledby="main-title"
948
+ >
940
949
  <div class="pf-v6-c-page__main-body">
941
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
950
+ <h1
951
+ class="pf-v6-c-content--h1 pf-m-page-title"
952
+ id="main-title"
953
+ >Main title</h1>
942
954
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
943
955
  </div>
944
956
  </section>
@@ -1342,9 +1354,15 @@ wrapperTag: div
1342
1354
  </nav>
1343
1355
  </div>
1344
1356
  </section>
1345
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1357
+ <section
1358
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1359
+ aria-labelledby="main-title"
1360
+ >
1346
1361
  <div class="pf-v6-c-page__main-body">
1347
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1362
+ <h1
1363
+ class="pf-v6-c-content--h1 pf-m-page-title"
1364
+ id="main-title"
1365
+ >Main title</h1>
1348
1366
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1349
1367
  </div>
1350
1368
  </section>
package/docs/demos/JumpLinks/examples/JumpLinks.md CHANGED
@@ -342,9 +342,15 @@ section: components
342
342
  </nav>
343
343
  </div>
344
344
  </section>
345
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
345
+ <section
346
+ class="pf-v6-c-page__main-section pf-m-limit-width"
347
+ aria-labelledby="main-title"
348
+ >
346
349
  <div class="pf-v6-c-page__main-body">
347
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
350
+ <h1
351
+ class="pf-v6-c-content--h1 pf-m-page-title"
352
+ id="main-title"
353
+ >Main title</h1>
348
354
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
349
355
  </div>
350
356
  </section>
@@ -848,9 +854,15 @@ section: components
848
854
  </nav>
849
855
  </div>
850
856
  </section>
851
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
857
+ <section
858
+ class="pf-v6-c-page__main-section pf-m-limit-width"
859
+ aria-labelledby="main-title"
860
+ >
852
861
  <div class="pf-v6-c-page__main-body">
853
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
862
+ <h1
863
+ class="pf-v6-c-content--h1 pf-m-page-title"
864
+ id="main-title"
865
+ >Main title</h1>
854
866
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
855
867
  </div>
856
868
  </section>
@@ -1354,9 +1366,15 @@ section: components
1354
1366
  </nav>
1355
1367
  </div>
1356
1368
  </section>
1357
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1369
+ <section
1370
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1371
+ aria-labelledby="main-title"
1372
+ >
1358
1373
  <div class="pf-v6-c-page__main-body">
1359
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1374
+ <h1
1375
+ class="pf-v6-c-content--h1 pf-m-page-title"
1376
+ id="main-title"
1377
+ >Main title</h1>
1360
1378
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1361
1379
  </div>
1362
1380
  </section>
@@ -1857,9 +1875,15 @@ section: components
1857
1875
  </nav>
1858
1876
  </div>
1859
1877
  </section>
1860
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1878
+ <section
1879
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1880
+ aria-labelledby="main-title"
1881
+ >
1861
1882
  <div class="pf-v6-c-page__main-body">
1862
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1883
+ <h1
1884
+ class="pf-v6-c-content--h1 pf-m-page-title"
1885
+ id="main-title"
1886
+ >Main title</h1>
1863
1887
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1864
1888
  </div>
1865
1889
  </section>
package/docs/demos/Masthead/examples/Masthead.md CHANGED
@@ -285,9 +285,15 @@ wrapperTag: div
285
285
  </nav>
286
286
  </div>
287
287
  </section>
288
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
288
+ <section
289
+ class="pf-v6-c-page__main-section pf-m-limit-width"
290
+ aria-labelledby="main-title"
291
+ >
289
292
  <div class="pf-v6-c-page__main-body">
290
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
293
+ <h1
294
+ class="pf-v6-c-content--h1 pf-m-page-title"
295
+ id="main-title"
296
+ >Main title</h1>
291
297
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
292
298
  </div>
293
299
  </section>
@@ -670,9 +676,15 @@ wrapperTag: div
670
676
  </nav>
671
677
  </div>
672
678
  </section>
673
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
679
+ <section
680
+ class="pf-v6-c-page__main-section pf-m-limit-width"
681
+ aria-labelledby="main-title"
682
+ >
674
683
  <div class="pf-v6-c-page__main-body">
675
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
684
+ <h1
685
+ class="pf-v6-c-content--h1 pf-m-page-title"
686
+ id="main-title"
687
+ >Main title</h1>
676
688
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
677
689
  </div>
678
690
  </section>
@@ -1077,9 +1089,15 @@ wrapperTag: div
1077
1089
  </nav>
1078
1090
  </div>
1079
1091
  </section>
1080
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1092
+ <section
1093
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1094
+ aria-labelledby="main-title"
1095
+ >
1081
1096
  <div class="pf-v6-c-page__main-body">
1082
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1097
+ <h1
1098
+ class="pf-v6-c-content--h1 pf-m-page-title"
1099
+ id="main-title"
1100
+ >Main title</h1>
1083
1101
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1084
1102
  </div>
1085
1103
  </section>
@@ -1487,9 +1505,15 @@ wrapperTag: div
1487
1505
  </nav>
1488
1506
  </div>
1489
1507
  </section>
1490
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1508
+ <section
1509
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1510
+ aria-labelledby="main-title"
1511
+ >
1491
1512
  <div class="pf-v6-c-page__main-body">
1492
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1513
+ <h1
1514
+ class="pf-v6-c-content--h1 pf-m-page-title"
1515
+ id="main-title"
1516
+ >Main title</h1>
1493
1517
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1494
1518
  </div>
1495
1519
  </section>
@@ -1822,9 +1846,15 @@ wrapperTag: div
1822
1846
  </nav>
1823
1847
  </div>
1824
1848
  </section>
1825
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1849
+ <section
1850
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1851
+ aria-labelledby="main-title"
1852
+ >
1826
1853
  <div class="pf-v6-c-page__main-body">
1827
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1854
+ <h1
1855
+ class="pf-v6-c-content--h1 pf-m-page-title"
1856
+ id="main-title"
1857
+ >Main title</h1>
1828
1858
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1829
1859
  </div>
1830
1860
  </section>
@@ -2175,9 +2205,15 @@ wrapperTag: div
2175
2205
  </nav>
2176
2206
  </div>
2177
2207
  </section>
2178
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2208
+ <section
2209
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2210
+ aria-labelledby="main-title"
2211
+ >
2179
2212
  <div class="pf-v6-c-page__main-body">
2180
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2213
+ <h1
2214
+ class="pf-v6-c-content--h1 pf-m-page-title"
2215
+ id="main-title"
2216
+ >Main title</h1>
2181
2217
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2182
2218
  </div>
2183
2219
  </section>
@@ -2562,9 +2598,15 @@ wrapperTag: div
2562
2598
  </nav>
2563
2599
  </div>
2564
2600
  </section>
2565
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2601
+ <section
2602
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2603
+ aria-labelledby="main-title"
2604
+ >
2566
2605
  <div class="pf-v6-c-page__main-body">
2567
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2606
+ <h1
2607
+ class="pf-v6-c-content--h1 pf-m-page-title"
2608
+ id="main-title"
2609
+ >Main title</h1>
2568
2610
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2569
2611
  </div>
2570
2612
  </section>
@@ -2880,9 +2922,15 @@ wrapperTag: div
2880
2922
  </nav>
2881
2923
  </div>
2882
2924
  </section>
2883
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2925
+ <section
2926
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2927
+ aria-labelledby="main-title"
2928
+ >
2884
2929
  <div class="pf-v6-c-page__main-body">
2885
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2930
+ <h1
2931
+ class="pf-v6-c-content--h1 pf-m-page-title"
2932
+ id="main-title"
2933
+ >Main title</h1>
2886
2934
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2887
2935
  </div>
2888
2936
  </section>
@@ -3295,9 +3343,15 @@ wrapperTag: div
3295
3343
  </nav>
3296
3344
  </div>
3297
3345
  </section>
3298
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
3346
+ <section
3347
+ class="pf-v6-c-page__main-section pf-m-limit-width"
3348
+ aria-labelledby="main-title"
3349
+ >
3299
3350
  <div class="pf-v6-c-page__main-body">
3300
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3351
+ <h1
3352
+ class="pf-v6-c-content--h1 pf-m-page-title"
3353
+ id="main-title"
3354
+ >Main title</h1>
3301
3355
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
3302
3356
  </div>
3303
3357
  </section>