@patternfly/patternfly 4.183.2 → 4.184.2

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 (92) hide show
  1. package/components/Accordion/accordion.css +1 -0
  2. package/components/Accordion/accordion.scss +1 -0
  3. package/components/Menu/menu.css +1 -1
  4. package/components/Menu/menu.scss +2 -1
  5. package/components/MenuToggle/menu-toggle.css +18 -1
  6. package/components/MenuToggle/menu-toggle.scss +28 -1
  7. package/components/TextInputGroup/text-input-group.css +6 -0
  8. package/components/TextInputGroup/text-input-group.scss +11 -0
  9. package/docs/components/Accordion/examples/Accordion.md +16 -3
  10. package/docs/components/DescriptionList/examples/DescriptionList.md +19 -19
  11. package/docs/components/Form/examples/Form.md +118 -47
  12. package/docs/components/MenuToggle/examples/MenuToggle.md +68 -9
  13. package/docs/components/ModalBox/examples/ModalBox.md +1 -0
  14. package/docs/components/OptionsMenu/examples/options-menu.md +1 -1
  15. package/docs/components/Page/examples/Page.md +9 -8
  16. package/docs/components/Pagination/examples/Pagination.css +3 -0
  17. package/docs/components/Pagination/examples/Pagination.md +136 -158
  18. package/docs/components/Toolbar/examples/Toolbar.md +22 -26
  19. package/docs/components/Wizard/examples/Wizard.md +19 -18
  20. package/docs/demos/CardView/examples/CardView.md +22 -26
  21. package/docs/demos/DataList/examples/DataList.md +88 -104
  22. package/docs/demos/Form/examples/BasicForms.md +40 -8
  23. package/docs/demos/Modal/examples/Modal.md +7 -4
  24. package/docs/demos/Page/examples/Page.md +1 -0
  25. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +5 -1
  26. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +20 -4
  27. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +54 -89
  28. package/docs/demos/Table/examples/Table.md +227 -273
  29. package/docs/demos/Tabs/examples/Tabs.md +64 -88
  30. package/docs/demos/Toolbar/examples/Toolbar.md +88 -104
  31. package/docs/demos/Wizard/examples/Wizard.md +4 -4
  32. package/package.json +1 -1
  33. package/patternfly-no-reset.css +26 -2
  34. package/patternfly.css +26 -2
  35. package/patternfly.min.css +1 -1
  36. package/patternfly.min.css.map +1 -1
  37. package/themes/dark/_patternfly-theme-dark.scss +118 -0
  38. package/themes/dark/_variables.scss +94 -0
  39. package/themes/dark/colors.scss +16 -0
  40. package/themes/dark/globals.scss +7 -0
  41. package/themes/dark/mixins.scss +5 -0
  42. package/themes/dark/placeholders.scss +30 -0
  43. package/themes/dark/scss-variables.scss +85 -0
  44. package/components/AboutModalBox/themes/dark/about-modal-box.css +0 -0
  45. package/components/Accordion/themes/dark/accordion.css +0 -0
  46. package/components/Alert/themes/dark/alert.css +0 -0
  47. package/components/AppLauncher/themes/dark/app-launcher.css +0 -0
  48. package/components/Badge/themes/dark/badge.css +0 -0
  49. package/components/Banner/themes/dark/banner.css +0 -0
  50. package/components/Breadcrumb/themes/dark/breadcrumb.css +0 -0
  51. package/components/Button/themes/dark/button.css +0 -0
  52. package/components/CalendarMonth/themes/dark/calendar-month.css +0 -0
  53. package/components/Chip/themes/dark/chip.css +0 -0
  54. package/components/ClipboardCopy/themes/dark/clipboard-copy.css +0 -0
  55. package/components/CodeEditor/themes/dark/code-editor.css +0 -0
  56. package/components/ContextSelector/themes/dark/context-selector.css +0 -0
  57. package/components/DataList/themes/dark/data-list.css +0 -0
  58. package/components/DatePicker/themes/dark/date-picker.css +0 -0
  59. package/components/Drawer/themes/dark/drawer.css +0 -0
  60. package/components/Dropdown/themes/dark/dropdown.css +0 -0
  61. package/components/Form/themes/dark/form.css +0 -0
  62. package/components/FormControl/themes/dark/form-control.css +0 -0
  63. package/components/HelperText/themes/dark/helper-text.css +0 -0
  64. package/components/Hint/themes/dark/hint.css +0 -0
  65. package/components/InputGroup/themes/dark/input-group.css +0 -0
  66. package/components/Label/themes/dark/label.css +0 -0
  67. package/components/LogViewer/themes/dark/log-viewer.css +0 -0
  68. package/components/Login/themes/dark/login.css +0 -0
  69. package/components/Masthead/themes/dark/masthead.css +0 -0
  70. package/components/Menu/themes/dark/menu.css +0 -0
  71. package/components/MenuToggle/themes/dark/menu-toggle.css +0 -0
  72. package/components/ModalBox/themes/dark/modal-box.css +0 -0
  73. package/components/Nav/themes/dark/nav.css +0 -0
  74. package/components/NotificationBadge/themes/dark/notification-badge.css +0 -0
  75. package/components/NotificationDrawer/themes/dark/notification-drawer.css +0 -0
  76. package/components/OptionsMenu/themes/dark/options-menu.css +0 -0
  77. package/components/Page/themes/dark/page.css +0 -0
  78. package/components/Pagination/themes/dark/pagination.css +0 -0
  79. package/components/Popover/themes/dark/popover.css +0 -0
  80. package/components/Progress/themes/dark/progress.css +0 -0
  81. package/components/SearchInput/themes/dark/search-input.css +0 -0
  82. package/components/Select/themes/dark/select.css +0 -0
  83. package/components/SimpleList/themes/dark/simple-list.css +0 -0
  84. package/components/Skeleton/themes/dark/skeleton.css +0 -0
  85. package/components/Switch/themes/dark/switch.css +0 -0
  86. package/components/Table/themes/dark/table.css +0 -0
  87. package/components/Tabs/themes/dark/tabs.css +0 -0
  88. package/components/Tile/themes/dark/tile.css +0 -0
  89. package/components/ToggleGroup/themes/dark/toggle-group.css +0 -0
  90. package/components/Tooltip/themes/dark/tooltip.css +0 -0
  91. package/components/TreeView/themes/dark/tree-view.css +0 -0
  92. package/components/Wizard/themes/dark/wizard.css +0 -0
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -469,23 +469,21 @@ wrapperTag: div
469
469
  <div class="pf-c-toolbar__item pf-m-pagination">
470
470
  <div class="pf-c-pagination pf-m-compact">
471
471
  <div class="pf-c-options-menu">
472
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
472
+ <button
473
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
474
+ type="button"
475
+ id="-top-pagination-toggle"
476
+ aria-haspopup="listbox"
477
+ aria-expanded="false"
478
+ >
473
479
  <span class="pf-c-options-menu__toggle-text">
474
480
  <b>1 - 10</b>&nbsp;of&nbsp;
475
481
  <b>36</b>
476
482
  </span>
477
- <button
478
- class="pf-c-options-menu__toggle-button"
479
- id="-top-pagination-toggle"
480
- aria-haspopup="listbox"
481
- aria-expanded="false"
482
- aria-label="Items per page"
483
- >
484
- <span class="pf-c-options-menu__toggle-button-icon">
485
- <i class="fas fa-caret-down" aria-hidden="true"></i>
486
- </span>
487
- </button>
488
- </div>
483
+ <div class="pf-c-options-menu__toggle-icon">
484
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
485
+ </div>
486
+ </button>
489
487
  <ul
490
488
  class="pf-c-options-menu__menu"
491
489
  aria-labelledby="-top-pagination-toggle"
@@ -873,23 +871,21 @@ wrapperTag: div
873
871
  </ul>
874
872
  <div class="pf-c-pagination pf-m-bottom">
875
873
  <div class="pf-c-options-menu pf-m-top">
876
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
874
+ <button
875
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
876
+ type="button"
877
+ id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
878
+ aria-haspopup="listbox"
879
+ aria-expanded="false"
880
+ >
877
881
  <span class="pf-c-options-menu__toggle-text">
878
882
  <b>1 - 10</b>&nbsp;of&nbsp;
879
883
  <b>36</b>
880
884
  </span>
881
- <button
882
- class="pf-c-options-menu__toggle-button"
883
- id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
884
- aria-haspopup="listbox"
885
- aria-expanded="false"
886
- aria-label="Items per page"
887
- >
888
- <span class="pf-c-options-menu__toggle-button-icon">
889
- <i class="fas fa-caret-down" aria-hidden="true"></i>
890
- </span>
891
- </button>
892
- </div>
885
+ <div class="pf-c-options-menu__toggle-icon">
886
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
887
+ </div>
888
+ </button>
893
889
  <ul
894
890
  class="pf-c-options-menu__menu pf-m-top"
895
891
  aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
@@ -1468,23 +1464,21 @@ wrapperTag: div
1468
1464
  <div class="pf-c-toolbar__item pf-m-pagination">
1469
1465
  <div class="pf-c-pagination pf-m-compact">
1470
1466
  <div class="pf-c-options-menu">
1471
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
1467
+ <button
1468
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
1469
+ type="button"
1470
+ id="-top-pagination-toggle"
1471
+ aria-haspopup="listbox"
1472
+ aria-expanded="false"
1473
+ >
1472
1474
  <span class="pf-c-options-menu__toggle-text">
1473
1475
  <b>1 - 10</b>&nbsp;of&nbsp;
1474
1476
  <b>36</b>
1475
1477
  </span>
1476
- <button
1477
- class="pf-c-options-menu__toggle-button"
1478
- id="-top-pagination-toggle"
1479
- aria-haspopup="listbox"
1480
- aria-expanded="false"
1481
- aria-label="Items per page"
1482
- >
1483
- <span class="pf-c-options-menu__toggle-button-icon">
1484
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1485
- </span>
1486
- </button>
1487
- </div>
1478
+ <div class="pf-c-options-menu__toggle-icon">
1479
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1480
+ </div>
1481
+ </button>
1488
1482
  <ul
1489
1483
  class="pf-c-options-menu__menu"
1490
1484
  aria-labelledby="-top-pagination-toggle"
@@ -1823,23 +1817,21 @@ wrapperTag: div
1823
1817
  </ul>
1824
1818
  <div class="pf-c-pagination pf-m-bottom">
1825
1819
  <div class="pf-c-options-menu pf-m-top">
1826
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
1820
+ <button
1821
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
1822
+ type="button"
1823
+ id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
1824
+ aria-haspopup="listbox"
1825
+ aria-expanded="false"
1826
+ >
1827
1827
  <span class="pf-c-options-menu__toggle-text">
1828
1828
  <b>1 - 10</b>&nbsp;of&nbsp;
1829
1829
  <b>36</b>
1830
1830
  </span>
1831
- <button
1832
- class="pf-c-options-menu__toggle-button"
1833
- id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
1834
- aria-haspopup="listbox"
1835
- aria-expanded="false"
1836
- aria-label="Items per page"
1837
- >
1838
- <span class="pf-c-options-menu__toggle-button-icon">
1839
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1840
- </span>
1841
- </button>
1842
- </div>
1831
+ <div class="pf-c-options-menu__toggle-icon">
1832
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1833
+ </div>
1834
+ </button>
1843
1835
  <ul
1844
1836
  class="pf-c-options-menu__menu pf-m-top"
1845
1837
  aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
@@ -2449,23 +2441,21 @@ wrapperTag: div
2449
2441
  <div class="pf-c-toolbar__item pf-m-pagination">
2450
2442
  <div class="pf-c-pagination pf-m-compact">
2451
2443
  <div class="pf-c-options-menu">
2452
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
2444
+ <button
2445
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
2446
+ type="button"
2447
+ id="-top-pagination-toggle"
2448
+ aria-haspopup="listbox"
2449
+ aria-expanded="false"
2450
+ >
2453
2451
  <span class="pf-c-options-menu__toggle-text">
2454
2452
  <b>1 - 10</b>&nbsp;of&nbsp;
2455
2453
  <b>36</b>
2456
2454
  </span>
2457
- <button
2458
- class="pf-c-options-menu__toggle-button"
2459
- id="-top-pagination-toggle"
2460
- aria-haspopup="listbox"
2461
- aria-expanded="false"
2462
- aria-label="Items per page"
2463
- >
2464
- <span class="pf-c-options-menu__toggle-button-icon">
2465
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2466
- </span>
2467
- </button>
2468
- </div>
2455
+ <div class="pf-c-options-menu__toggle-icon">
2456
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2457
+ </div>
2458
+ </button>
2469
2459
  <ul
2470
2460
  class="pf-c-options-menu__menu"
2471
2461
  aria-labelledby="-top-pagination-toggle"
@@ -3369,23 +3359,21 @@ wrapperTag: div
3369
3359
  </ul>
3370
3360
  <div class="pf-c-pagination pf-m-bottom">
3371
3361
  <div class="pf-c-options-menu pf-m-top">
3372
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
3362
+ <button
3363
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
3364
+ type="button"
3365
+ id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
3366
+ aria-haspopup="listbox"
3367
+ aria-expanded="false"
3368
+ >
3373
3369
  <span class="pf-c-options-menu__toggle-text">
3374
3370
  <b>1 - 10</b>&nbsp;of&nbsp;
3375
3371
  <b>36</b>
3376
3372
  </span>
3377
- <button
3378
- class="pf-c-options-menu__toggle-button"
3379
- id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
3380
- aria-haspopup="listbox"
3381
- aria-expanded="false"
3382
- aria-label="Items per page"
3383
- >
3384
- <span class="pf-c-options-menu__toggle-button-icon">
3385
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3386
- </span>
3387
- </button>
3388
- </div>
3373
+ <div class="pf-c-options-menu__toggle-icon">
3374
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3375
+ </div>
3376
+ </button>
3389
3377
  <ul
3390
3378
  class="pf-c-options-menu__menu pf-m-top"
3391
3379
  aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
@@ -3956,23 +3944,21 @@ wrapperTag: div
3956
3944
  <div class="pf-c-toolbar__item pf-m-pagination">
3957
3945
  <div class="pf-c-pagination pf-m-compact">
3958
3946
  <div class="pf-c-options-menu">
3959
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
3947
+ <button
3948
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
3949
+ type="button"
3950
+ id="-top-pagination-toggle"
3951
+ aria-haspopup="listbox"
3952
+ aria-expanded="false"
3953
+ >
3960
3954
  <span class="pf-c-options-menu__toggle-text">
3961
3955
  <b>1 - 10</b>&nbsp;of&nbsp;
3962
3956
  <b>36</b>
3963
3957
  </span>
3964
- <button
3965
- class="pf-c-options-menu__toggle-button"
3966
- id="-top-pagination-toggle"
3967
- aria-haspopup="listbox"
3968
- aria-expanded="false"
3969
- aria-label="Items per page"
3970
- >
3971
- <span class="pf-c-options-menu__toggle-button-icon">
3972
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3973
- </span>
3974
- </button>
3975
- </div>
3958
+ <div class="pf-c-options-menu__toggle-icon">
3959
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3960
+ </div>
3961
+ </button>
3976
3962
  <ul
3977
3963
  class="pf-c-options-menu__menu"
3978
3964
  aria-labelledby="-top-pagination-toggle"
@@ -4360,23 +4346,21 @@ wrapperTag: div
4360
4346
  </ul>
4361
4347
  <div class="pf-c-pagination pf-m-bottom pf-m-static">
4362
4348
  <div class="pf-c-options-menu pf-m-top">
4363
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
4349
+ <button
4350
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
4351
+ type="button"
4352
+ id="{{page--id}}pagination-options-menu-bottom-example-static-toggle"
4353
+ aria-haspopup="listbox"
4354
+ aria-expanded="false"
4355
+ >
4364
4356
  <span class="pf-c-options-menu__toggle-text">
4365
4357
  <b>1 - 10</b>&nbsp;of&nbsp;
4366
4358
  <b>36</b>
4367
4359
  </span>
4368
- <button
4369
- class="pf-c-options-menu__toggle-button"
4370
- id="{{page--id}}pagination-options-menu-bottom-example-static-toggle"
4371
- aria-haspopup="listbox"
4372
- aria-expanded="false"
4373
- aria-label="Items per page"
4374
- >
4375
- <span class="pf-c-options-menu__toggle-button-icon">
4376
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4377
- </span>
4378
- </button>
4379
- </div>
4360
+ <div class="pf-c-options-menu__toggle-icon">
4361
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
4362
+ </div>
4363
+ </button>
4380
4364
  <ul
4381
4365
  class="pf-c-options-menu__menu pf-m-top"
4382
4366
  aria-labelledby="{{page--id}}pagination-options-menu-bottom-example-static-toggle"
package/docs/demos/Form/examples/BasicForms.md CHANGED
@@ -53,7 +53,11 @@ section: components
53
53
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
54
54
  </label>
55
55
 
56
- <button class="pf-c-form__group-label-help" aria-label="More info">
56
+ <button
57
+ class="pf-c-form__group-label-help"
58
+ aria-label="More information for phone number field"
59
+ aria-describedby="form-demo-basic-phone"
60
+ >
57
61
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
58
62
  </button>
59
63
  </div>
@@ -255,7 +259,11 @@ section: components
255
259
  <span class="pf-c-form__label-text">How can we contact you?</span>
256
260
  </span>
257
261
 
258
- <button class="pf-c-form__group-label-help" aria-label="More info">
262
+ <button
263
+ class="pf-c-form__group-label-help"
264
+ aria-label="More information for contact field"
265
+ aria-describedby="form-demo-horizontal-contact-legend"
266
+ >
259
267
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
260
268
  </button>
261
269
  </div>
@@ -524,7 +532,11 @@ section: components
524
532
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
525
533
  </label>
526
534
 
527
- <button class="pf-c-form__group-label-help" aria-label="More info">
535
+ <button
536
+ class="pf-c-form__group-label-help"
537
+ aria-label="More information for client id field"
538
+ aria-describedby="form-demo-sections-repeatable-fields-clientid"
539
+ >
528
540
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
529
541
  </button>
530
542
  </div>
@@ -548,7 +560,11 @@ section: components
548
560
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
549
561
  </label>
550
562
 
551
- <button class="pf-c-form__group-label-help" aria-label="More info">
563
+ <button
564
+ class="pf-c-form__group-label-help"
565
+ aria-label="More information for full name field"
566
+ aria-describedby="form-demo-sections-repeatable-fields-name"
567
+ >
552
568
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
553
569
  </button>
554
570
  </div>
@@ -572,7 +588,11 @@ section: components
572
588
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
573
589
  </label>
574
590
 
575
- <button class="pf-c-form__group-label-help" aria-label="More info">
591
+ <button
592
+ class="pf-c-form__group-label-help"
593
+ aria-label="More information for description field"
594
+ aria-describedby="form-demo-sections-repeatable-fields-description"
595
+ >
576
596
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
577
597
  </button>
578
598
  </div>
@@ -607,7 +627,11 @@ section: components
607
627
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
608
628
  </label>
609
629
 
610
- <button class="pf-c-form__group-label-help" aria-label="More info">
630
+ <button
631
+ class="pf-c-form__group-label-help"
632
+ aria-label="More information for root URL field"
633
+ aria-describedby="form-demo-sections-repeatable-fields-rooturl"
634
+ >
611
635
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
612
636
  </button>
613
637
  </div>
@@ -631,7 +655,11 @@ section: components
631
655
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
632
656
  </label>
633
657
 
634
- <button class="pf-c-form__group-label-help" aria-label="More info">
658
+ <button
659
+ class="pf-c-form__group-label-help"
660
+ aria-label="More information for valid redirect URIs field"
661
+ aria-describedby="form-demo-sections-repeatable-fields-uris"
662
+ >
635
663
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
636
664
  </button>
637
665
  </div>
@@ -708,7 +736,11 @@ section: components
708
736
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
709
737
  </label>
710
738
 
711
- <button class="pf-c-form__group-label-help" aria-label="More info">
739
+ <button
740
+ class="pf-c-form__group-label-help"
741
+ aria-label="More information for home URL field"
742
+ aria-describedby="form-demo-sections-repeatable-fields-home-url"
743
+ >
712
744
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
713
745
  </button>
714
746
  </div>
package/docs/demos/Modal/examples/Modal.md CHANGED
@@ -71,7 +71,7 @@ section: components
71
71
  id="modal-scroll-description"
72
72
  >This is a modal description. The description will not scroll with the body contents.</div>
73
73
  </header>
74
- <div class="pf-c-modal-box__body">
74
+ <div class="pf-c-modal-box__body" tabindex="0">
75
75
  <p>general_modal_final_finalfinal_v9_actualfinal.sketch</p>
76
76
  <p>A file with this name already exists, would you like to overwrite the existing file or save a new copy?</p>
77
77
  <p>Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Integer tincidunt. Integer tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
@@ -254,7 +254,8 @@ section: components
254
254
  </label>
255
255
  <button
256
256
  class="pf-c-form__group-label-help"
257
- aria-label="More info"
257
+ aria-label="More information for name field"
258
+ aria-describedby="modal-with-form-form-name"
258
259
  >
259
260
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
260
261
  </button>
@@ -277,7 +278,8 @@ section: components
277
278
  </label>
278
279
  <button
279
280
  class="pf-c-form__group-label-help"
280
- aria-label="More info"
281
+ aria-label="More information for email field"
282
+ aria-describedby="modal-with-form-form-email"
281
283
  >
282
284
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
283
285
  </button>
@@ -303,7 +305,8 @@ section: components
303
305
  </label>
304
306
  <button
305
307
  class="pf-c-form__group-label-help"
306
- aria-label="More info"
308
+ aria-label="More information for address field"
309
+ aria-describedby="modal-with-form-form-address"
307
310
  >
308
311
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
309
312
  </button>
package/docs/demos/Page/examples/Page.md CHANGED
@@ -6050,6 +6050,7 @@ wrapperTag: div
6050
6050
  </section>
6051
6051
  <section
6052
6052
  class="pf-c-page__main-section pf-m-limit-width pf-m-overflow-scroll"
6053
+ tabindex="0"
6053
6054
  >
6054
6055
  <div class="pf-c-page__main-body">
6055
6056
  <div class="pf-l-gallery pf-m-gutter">
package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md CHANGED
@@ -18,7 +18,11 @@ section: demos
18
18
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
19
19
  </label>
20
20
 
21
- <button class="pf-c-form__group-label-help" aria-label="More info">
21
+ <button
22
+ class="pf-c-form__group-label-help"
23
+ aria-label="More information for password field"
24
+ aria-describedby="password-generator-demo--initial-password"
25
+ >
22
26
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
23
27
  </button>
24
28
  </div>
package/docs/demos/PasswordStrength/examples/PasswordStrength.md CHANGED
@@ -19,7 +19,11 @@ section: demos
19
19
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
20
20
  </label>
21
21
 
22
- <button class="pf-c-form__group-label-help" aria-label="More info">
22
+ <button
23
+ class="pf-c-form__group-label-help"
24
+ aria-label="More information for password field"
25
+ aria-describedby="password-strength-demo--initial-password"
26
+ >
23
27
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
24
28
  </button>
25
29
  </div>
@@ -94,7 +98,11 @@ section: demos
94
98
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
95
99
  </label>
96
100
 
97
- <button class="pf-c-form__group-label-help" aria-label="More info">
101
+ <button
102
+ class="pf-c-form__group-label-help"
103
+ aria-label="More information for password field"
104
+ aria-describedby="password-strength-demo--invalid-password"
105
+ >
98
106
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
99
107
  </button>
100
108
  </div>
@@ -169,7 +177,11 @@ section: demos
169
177
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
170
178
  </label>
171
179
 
172
- <button class="pf-c-form__group-label-help" aria-label="More info">
180
+ <button
181
+ class="pf-c-form__group-label-help"
182
+ aria-label="More information for password field"
183
+ aria-describedby="password-strength-demo--weak-password"
184
+ >
173
185
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
174
186
  </button>
175
187
  </div>
@@ -253,7 +265,11 @@ section: demos
253
265
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
254
266
  </label>
255
267
 
256
- <button class="pf-c-form__group-label-help" aria-label="More info">
268
+ <button
269
+ class="pf-c-form__group-label-help"
270
+ aria-label="More information for password field"
271
+ aria-describedby="password-strength-demo--strong-password"
272
+ >
257
273
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
258
274
  </button>
259
275
  </div>