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

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 (31) hide show
  1. package/components/ClipboardCopy/clipboard-copy.css +7 -1
  2. package/components/ClipboardCopy/clipboard-copy.scss +10 -1
  3. package/components/_index.css +7 -1
  4. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +39 -38
  5. package/docs/components/Page/examples/Page.md +62 -15
  6. package/docs/demos/AboutModal/examples/AboutModal.md +8 -2
  7. package/docs/demos/Alert/examples/Alert.md +24 -6
  8. package/docs/demos/BackToTop/examples/BackToTop.md +8 -2
  9. package/docs/demos/Banner/examples/Banner.md +16 -4
  10. package/docs/demos/CardView/examples/CardView.md +8 -2
  11. package/docs/demos/Dashboard/examples/Dashboard.md +8 -2
  12. package/docs/demos/DataList/examples/DataList.md +32 -8
  13. package/docs/demos/DescriptionList/examples/DescriptionList.md +24 -6
  14. package/docs/demos/Drawer/examples/Drawer.md +24 -6
  15. package/docs/demos/JumpLinks/examples/JumpLinks.md +32 -8
  16. package/docs/demos/Masthead/examples/Masthead.md +72 -18
  17. package/docs/demos/Modal/examples/Modal.md +48 -12
  18. package/docs/demos/Nav/examples/Nav.md +80 -20
  19. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +40 -10
  20. package/docs/demos/Page/examples/Page.md +113 -28
  21. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +56 -14
  22. package/docs/demos/Skeleton/examples/Skeleton.md +8 -2
  23. package/docs/demos/Table/examples/Table.md +128 -32
  24. package/docs/demos/Tabs/examples/Tabs.md +48 -12
  25. package/docs/demos/Toolbar/examples/Toolbar.md +16 -4
  26. package/docs/demos/Wizard/examples/Wizard.md +72 -18
  27. package/package.json +1 -1
  28. package/patternfly-no-globals.css +7 -1
  29. package/patternfly.css +7 -1
  30. package/patternfly.min.css +1 -1
  31. package/patternfly.min.css.map +1 -1
@@ -58,26 +58,38 @@ wrapperTag: div
58
58
  </div>
59
59
  <div class="pf-v6-c-page__main-container" tabindex="-1">
60
60
  <main class="pf-v6-c-page__main" tabindex="-1">
61
- <section class="pf-v6-c-page__main-section">
61
+ <section
62
+ class="pf-v6-c-page__main-section"
63
+ aria-label="Default main section example 1"
64
+ >
62
65
  <div class="pf-v6-c-page__main-body">
63
66
  This is a default
64
67
  <code>.pf-v6-c-page__main-section</code>.
65
68
  </div>
66
69
  </section>
67
- <section class="pf-v6-c-page__main-section pf-m-secondary">
70
+ <section
71
+ class="pf-v6-c-page__main-section pf-m-secondary"
72
+ aria-label="Secondary main section example 1"
73
+ >
68
74
  <div class="pf-v6-c-page__main-body">
69
75
  This
70
76
  <code>.pf-v6-c-page__main-section</code> uses
71
77
  <code>.pf-m-secondary</code>.
72
78
  </div>
73
79
  </section>
74
- <section class="pf-v6-c-page__main-section">
80
+ <section
81
+ class="pf-v6-c-page__main-section"
82
+ aria-label="Default main section example 2"
83
+ >
75
84
  <div class="pf-v6-c-page__main-body">
76
85
  This is a default
77
86
  <code>.pf-v6-c-page__main-section</code>.
78
87
  </div>
79
88
  </section>
80
- <section class="pf-v6-c-page__main-section pf-m-secondary">
89
+ <section
90
+ class="pf-v6-c-page__main-section pf-m-secondary"
91
+ aria-label="Multiple main body section example"
92
+ >
81
93
  <div
82
94
  class="pf-v6-c-page__main-body"
83
95
  >This is a page__main-body, one of three within one page__main-section.</div>
@@ -140,20 +152,29 @@ wrapperTag: div
140
152
  </header>
141
153
  <div class="pf-v6-c-page__main-container" tabindex="-1">
142
154
  <main class="pf-v6-c-page__main" tabindex="-1">
143
- <section class="pf-v6-c-page__main-section">
155
+ <section
156
+ class="pf-v6-c-page__main-section"
157
+ aria-label="Horizontal nav default main section example 1"
158
+ >
144
159
  <div class="pf-v6-c-page__main-body">
145
160
  This is a default
146
161
  <code>.pf-v6-c-page__main-section</code>.
147
162
  </div>
148
163
  </section>
149
- <section class="pf-v6-c-page__main-section pf-m-secondary">
164
+ <section
165
+ class="pf-v6-c-page__main-section pf-m-secondary"
166
+ aria-label="Horizontal nav secondary main section example"
167
+ >
150
168
  <div class="pf-v6-c-page__main-body">
151
169
  This
152
170
  <code>.pf-v6-c-page__main-section</code> uses
153
171
  <code>.pf-m-secondary</code>.
154
172
  </div>
155
173
  </section>
156
- <section class="pf-v6-c-page__main-section">
174
+ <section
175
+ class="pf-v6-c-page__main-section"
176
+ aria-label="Horizontal nav default main section example 2"
177
+ >
157
178
  <div class="pf-v6-c-page__main-body">
158
179
  This is a default
159
180
  <code>.pf-v6-c-page__main-section</code>.
@@ -221,7 +242,10 @@ wrapperTag: div
221
242
  </div>
222
243
  <div class="pf-v6-c-page__main-container" tabindex="-1">
223
244
  <main class="pf-v6-c-page__main" tabindex="-1">
224
- <section class="pf-v6-c-page__main-section">
245
+ <section
246
+ class="pf-v6-c-page__main-section"
247
+ aria-label="Sidebar body layout section"
248
+ >
225
249
  <div class="pf-v6-c-page__main-body"></div>
226
250
  </section>
227
251
  </main>
@@ -276,10 +300,16 @@ wrapperTag: div
276
300
  </header>
277
301
  <div class="pf-v6-c-page__main-container pf-m-fill" tabindex="-1">
278
302
  <main class="pf-v6-c-page__main" tabindex="-1">
279
- <section class="pf-v6-c-page__main-section">
303
+ <section
304
+ class="pf-v6-c-page__main-section"
305
+ aria-label="Regular page section example"
306
+ >
280
307
  <div class="pf-v6-c-page__main-body">A regular page section.</div>
281
308
  </section>
282
- <section class="pf-v6-c-page__main-section pf-m-fill">
309
+ <section
310
+ class="pf-v6-c-page__main-section pf-m-fill"
311
+ aria-label="Fill page section example"
312
+ >
283
313
  <div class="pf-v6-c-page__main-body">
284
314
  This section uses
285
315
  <code>.pf-m-fill</code> to fill the available space. The
@@ -287,7 +317,10 @@ wrapperTag: div
287
317
  <code>.pf-m-fill</code> in order for the section to have space to stretch to full height.
288
318
  </div>
289
319
  </section>
290
- <section class="pf-v6-c-page__main-section pf-m-no-fill">
320
+ <section
321
+ class="pf-v6-c-page__main-section pf-m-no-fill"
322
+ aria-label="No fill page section example"
323
+ >
291
324
  <div class="pf-v6-c-page__main-body">
292
325
  This section uses
293
326
  <code>.pf-m-no-fill</code> and will not fill the available space.
@@ -350,13 +383,19 @@ wrapperTag: div
350
383
  </div>
351
384
  <div class="pf-v6-c-page__main-container" tabindex="-1">
352
385
  <main class="pf-v6-c-page__main" tabindex="-1">
353
- <section class="pf-v6-c-page__main-section">
386
+ <section
387
+ class="pf-v6-c-page__main-section"
388
+ aria-label="Default padding main section example"
389
+ >
354
390
  <div class="pf-v6-c-page__main-body">
355
391
  This
356
392
  <code>.pf-v6-c-page__main-section</code> has default padding.
357
393
  </div>
358
394
  </section>
359
- <section class="pf-v6-c-page__main-section pf-m-no-padding">
395
+ <section
396
+ class="pf-v6-c-page__main-section pf-m-no-padding"
397
+ aria-label="No padding main section example"
398
+ >
360
399
  <div class="pf-v6-c-page__main-body">
361
400
  This
362
401
  <code>.pf-v6-c-page__main-section</code> uses
@@ -365,6 +404,7 @@ wrapperTag: div
365
404
  </section>
366
405
  <section
367
406
  class="pf-v6-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
407
+ aria-label="Responsive padding main section example"
368
408
  >
369
409
  <div class="pf-v6-c-page__main-body">
370
410
  This
@@ -442,7 +482,10 @@ wrapperTag: div
442
482
  <section class="pf-v6-c-page__main-breadcrumb">
443
483
  <code>.pf-v6-c-page__main-breadcrumb</code> for breadcrumbs
444
484
  </section>
445
- <section class="pf-v6-c-page__main-section">
485
+ <section
486
+ class="pf-v6-c-page__main-section"
487
+ aria-label="Main section variations example"
488
+ >
446
489
  <div class="pf-v6-c-page__main-body">
447
490
  <code>.pf-v6-c-page__main-section</code> for main sections
448
491
  </div>
@@ -504,6 +547,7 @@ wrapperTag: div
504
547
  <main class="pf-v6-c-page__main" tabindex="-1">
505
548
  <section
506
549
  class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
550
+ aria-label="Centered section example"
507
551
  >
508
552
  <div class="pf-v6-c-page__main-body">
509
553
  <div class="pf-v6-c-card">
@@ -560,7 +604,10 @@ wrapperTag: div
560
604
  </div>
561
605
  <div class="pf-v6-c-page__main-container" tabindex="-1">
562
606
  <main class="pf-v6-c-page__main" tabindex="-1">
563
- <section class="pf-v6-c-page__main-section">
607
+ <section
608
+ class="pf-v6-c-page__main-section"
609
+ aria-label="Dock main section example"
610
+ >
564
611
  <div class="pf-v6-c-page__main-body">
565
612
  This is a default
566
613
  <code>.pf-v6-c-page__main-section</code>.
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>