@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.
- package/components/Accordion/accordion.css +1 -0
- package/components/Accordion/accordion.scss +1 -0
- package/components/Menu/menu.css +1 -1
- package/components/Menu/menu.scss +2 -1
- package/components/MenuToggle/menu-toggle.css +18 -1
- package/components/MenuToggle/menu-toggle.scss +28 -1
- package/components/TextInputGroup/text-input-group.css +6 -0
- package/components/TextInputGroup/text-input-group.scss +11 -0
- package/docs/components/Accordion/examples/Accordion.md +16 -3
- package/docs/components/DescriptionList/examples/DescriptionList.md +19 -19
- package/docs/components/Form/examples/Form.md +118 -47
- package/docs/components/MenuToggle/examples/MenuToggle.md +68 -9
- package/docs/components/ModalBox/examples/ModalBox.md +1 -0
- package/docs/components/OptionsMenu/examples/options-menu.md +1 -1
- package/docs/components/Page/examples/Page.md +9 -8
- package/docs/components/Pagination/examples/Pagination.css +3 -0
- package/docs/components/Pagination/examples/Pagination.md +136 -158
- package/docs/components/Toolbar/examples/Toolbar.md +22 -26
- package/docs/components/Wizard/examples/Wizard.md +19 -18
- package/docs/demos/CardView/examples/CardView.md +22 -26
- package/docs/demos/DataList/examples/DataList.md +88 -104
- package/docs/demos/Form/examples/BasicForms.md +40 -8
- package/docs/demos/Modal/examples/Modal.md +7 -4
- package/docs/demos/Page/examples/Page.md +1 -0
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +5 -1
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +20 -4
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +54 -89
- package/docs/demos/Table/examples/Table.md +227 -273
- package/docs/demos/Tabs/examples/Tabs.md +64 -88
- package/docs/demos/Toolbar/examples/Toolbar.md +88 -104
- package/docs/demos/Wizard/examples/Wizard.md +4 -4
- package/package.json +1 -1
- package/patternfly-no-reset.css +26 -2
- package/patternfly.css +26 -2
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/themes/dark/_patternfly-theme-dark.scss +118 -0
- package/themes/dark/_variables.scss +94 -0
- package/themes/dark/colors.scss +16 -0
- package/themes/dark/globals.scss +7 -0
- package/themes/dark/mixins.scss +5 -0
- package/themes/dark/placeholders.scss +30 -0
- package/themes/dark/scss-variables.scss +85 -0
- package/components/AboutModalBox/themes/dark/about-modal-box.css +0 -0
- package/components/Accordion/themes/dark/accordion.css +0 -0
- package/components/Alert/themes/dark/alert.css +0 -0
- package/components/AppLauncher/themes/dark/app-launcher.css +0 -0
- package/components/Badge/themes/dark/badge.css +0 -0
- package/components/Banner/themes/dark/banner.css +0 -0
- package/components/Breadcrumb/themes/dark/breadcrumb.css +0 -0
- package/components/Button/themes/dark/button.css +0 -0
- package/components/CalendarMonth/themes/dark/calendar-month.css +0 -0
- package/components/Chip/themes/dark/chip.css +0 -0
- package/components/ClipboardCopy/themes/dark/clipboard-copy.css +0 -0
- package/components/CodeEditor/themes/dark/code-editor.css +0 -0
- package/components/ContextSelector/themes/dark/context-selector.css +0 -0
- package/components/DataList/themes/dark/data-list.css +0 -0
- package/components/DatePicker/themes/dark/date-picker.css +0 -0
- package/components/Drawer/themes/dark/drawer.css +0 -0
- package/components/Dropdown/themes/dark/dropdown.css +0 -0
- package/components/Form/themes/dark/form.css +0 -0
- package/components/FormControl/themes/dark/form-control.css +0 -0
- package/components/HelperText/themes/dark/helper-text.css +0 -0
- package/components/Hint/themes/dark/hint.css +0 -0
- package/components/InputGroup/themes/dark/input-group.css +0 -0
- package/components/Label/themes/dark/label.css +0 -0
- package/components/LogViewer/themes/dark/log-viewer.css +0 -0
- package/components/Login/themes/dark/login.css +0 -0
- package/components/Masthead/themes/dark/masthead.css +0 -0
- package/components/Menu/themes/dark/menu.css +0 -0
- package/components/MenuToggle/themes/dark/menu-toggle.css +0 -0
- package/components/ModalBox/themes/dark/modal-box.css +0 -0
- package/components/Nav/themes/dark/nav.css +0 -0
- package/components/NotificationBadge/themes/dark/notification-badge.css +0 -0
- package/components/NotificationDrawer/themes/dark/notification-drawer.css +0 -0
- package/components/OptionsMenu/themes/dark/options-menu.css +0 -0
- package/components/Page/themes/dark/page.css +0 -0
- package/components/Pagination/themes/dark/pagination.css +0 -0
- package/components/Popover/themes/dark/popover.css +0 -0
- package/components/Progress/themes/dark/progress.css +0 -0
- package/components/SearchInput/themes/dark/search-input.css +0 -0
- package/components/Select/themes/dark/select.css +0 -0
- package/components/SimpleList/themes/dark/simple-list.css +0 -0
- package/components/Skeleton/themes/dark/skeleton.css +0 -0
- package/components/Switch/themes/dark/switch.css +0 -0
- package/components/Table/themes/dark/table.css +0 -0
- package/components/Tabs/themes/dark/tabs.css +0 -0
- package/components/Tile/themes/dark/tile.css +0 -0
- package/components/ToggleGroup/themes/dark/toggle-group.css +0 -0
- package/components/Tooltip/themes/dark/tooltip.css +0 -0
- package/components/TreeView/themes/dark/tree-view.css +0 -0
- package/components/Wizard/themes/dark/wizard.css +0 -0
|
@@ -14,7 +14,11 @@ cssPrefix: pf-c-form
|
|
|
14
14
|
<span class="pf-c-form__label-text">Name</span>
|
|
15
15
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
16
16
|
</label>
|
|
17
|
-
<button
|
|
17
|
+
<button
|
|
18
|
+
class="pf-c-form__group-label-help"
|
|
19
|
+
aria-label="More information for name field"
|
|
20
|
+
aria-describedby="form-vertical-name"
|
|
21
|
+
>
|
|
18
22
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
19
23
|
</button>
|
|
20
24
|
</div>
|
|
@@ -58,7 +62,11 @@ cssPrefix: pf-c-form
|
|
|
58
62
|
<label class="pf-c-form__label" for="form-horizontal-info">
|
|
59
63
|
<span class="pf-c-form__label-text">Information</span>
|
|
60
64
|
</label>
|
|
61
|
-
<button
|
|
65
|
+
<button
|
|
66
|
+
class="pf-c-form__group-label-help"
|
|
67
|
+
aria-label="More information for information field"
|
|
68
|
+
aria-describedby="form-horizontal-info"
|
|
69
|
+
>
|
|
62
70
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
63
71
|
</button>
|
|
64
72
|
</div>
|
|
@@ -84,7 +92,11 @@ cssPrefix: pf-c-form
|
|
|
84
92
|
<span class="pf-c-form__label">
|
|
85
93
|
<span class="pf-c-form__label-text">Label (no top padding)</span>
|
|
86
94
|
</span>
|
|
87
|
-
<button
|
|
95
|
+
<button
|
|
96
|
+
class="pf-c-form__group-label-help"
|
|
97
|
+
aria-label="More information for label field"
|
|
98
|
+
aria-describedby="form-horizontal-checkbox-legend"
|
|
99
|
+
>
|
|
88
100
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
89
101
|
</button>
|
|
90
102
|
</div>
|
|
@@ -124,11 +136,18 @@ cssPrefix: pf-c-form
|
|
|
124
136
|
<form novalidate class="pf-c-form pf-m-horizontal-on-sm">
|
|
125
137
|
<div class="pf-c-form__group">
|
|
126
138
|
<div class="pf-c-form__group-label">
|
|
127
|
-
<label
|
|
139
|
+
<label
|
|
140
|
+
class="pf-c-form__label"
|
|
141
|
+
for="form-horizontal-custom-breakpoint-name"
|
|
142
|
+
>
|
|
128
143
|
<span class="pf-c-form__label-text">Name</span>
|
|
129
144
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
130
145
|
</label>
|
|
131
|
-
<button
|
|
146
|
+
<button
|
|
147
|
+
class="pf-c-form__group-label-help"
|
|
148
|
+
aria-label="More information for name field"
|
|
149
|
+
aria-describedby="form-horizontal-custom-breakpoint-name"
|
|
150
|
+
>
|
|
132
151
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
133
152
|
</button>
|
|
134
153
|
</div>
|
|
@@ -136,8 +155,8 @@ cssPrefix: pf-c-form
|
|
|
136
155
|
<input
|
|
137
156
|
class="pf-c-form-control"
|
|
138
157
|
type="text"
|
|
139
|
-
id="form-horizontal-name"
|
|
140
|
-
name="form-horizontal-name"
|
|
158
|
+
id="form-horizontal-custom-breakpoint-name"
|
|
159
|
+
name="form-horizontal-custom-breakpoint-name"
|
|
141
160
|
required
|
|
142
161
|
/>
|
|
143
162
|
</div>
|
|
@@ -341,20 +360,20 @@ cssPrefix: pf-c-form
|
|
|
341
360
|
</div>
|
|
342
361
|
<div class="pf-c-form__group">
|
|
343
362
|
<div class="pf-c-form__group-label">
|
|
344
|
-
<label class="pf-c-form__label" for="form-help-
|
|
363
|
+
<label class="pf-c-form__label" for="form-help-text-info">
|
|
345
364
|
<span class="pf-c-form__label-text">Information</span>
|
|
346
365
|
</label>
|
|
347
366
|
</div>
|
|
348
367
|
<textarea
|
|
349
368
|
class="pf-c-form-control"
|
|
350
|
-
id="form-help-
|
|
351
|
-
name="form-help-
|
|
369
|
+
id="form-help-text-info"
|
|
370
|
+
name="form-help-text-info"
|
|
352
371
|
aria-invalid="true"
|
|
353
|
-
aria-describedby="form-help-
|
|
372
|
+
aria-describedby="form-help-text-info-helper"
|
|
354
373
|
></textarea>
|
|
355
374
|
<p
|
|
356
375
|
class="pf-c-form__helper-text pf-m-error"
|
|
357
|
-
id="form-help-
|
|
376
|
+
id="form-help-text-info-helper"
|
|
358
377
|
aria-live="polite"
|
|
359
378
|
>
|
|
360
379
|
<span class="pf-c-form__helper-text-icon">
|
|
@@ -378,7 +397,11 @@ cssPrefix: pf-c-form
|
|
|
378
397
|
<span class="pf-c-form__label-text">Name</span>
|
|
379
398
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
380
399
|
</label>
|
|
381
|
-
<button
|
|
400
|
+
<button
|
|
401
|
+
class="pf-c-form__group-label-help"
|
|
402
|
+
aria-label="More information for name field"
|
|
403
|
+
aria-describedby="form-additional-info-name"
|
|
404
|
+
>
|
|
382
405
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
383
406
|
</button>
|
|
384
407
|
</div>
|
|
@@ -423,7 +446,11 @@ cssPrefix: pf-c-form
|
|
|
423
446
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
424
447
|
</label>
|
|
425
448
|
|
|
426
|
-
<button
|
|
449
|
+
<button
|
|
450
|
+
class="pf-c-form__group-label-help"
|
|
451
|
+
aria-label="More information for label 1 field"
|
|
452
|
+
aria-describedby="form-expandable-field-groups-label1"
|
|
453
|
+
>
|
|
427
454
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
428
455
|
</button>
|
|
429
456
|
</div>
|
|
@@ -444,7 +471,11 @@ cssPrefix: pf-c-form
|
|
|
444
471
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
445
472
|
</label>
|
|
446
473
|
|
|
447
|
-
<button
|
|
474
|
+
<button
|
|
475
|
+
class="pf-c-form__group-label-help"
|
|
476
|
+
aria-label="More information for label 2 field"
|
|
477
|
+
aria-describedby="form-expandable-field-groups-label2"
|
|
478
|
+
>
|
|
448
479
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
449
480
|
</button>
|
|
450
481
|
</div>
|
|
@@ -553,7 +584,8 @@ cssPrefix: pf-c-form
|
|
|
553
584
|
|
|
554
585
|
<button
|
|
555
586
|
class="pf-c-form__group-label-help"
|
|
556
|
-
aria-label="More
|
|
587
|
+
aria-label="More information for label 1 field"
|
|
588
|
+
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group2-label1"
|
|
557
589
|
>
|
|
558
590
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
559
591
|
</button>
|
|
@@ -580,7 +612,8 @@ cssPrefix: pf-c-form
|
|
|
580
612
|
|
|
581
613
|
<button
|
|
582
614
|
class="pf-c-form__group-label-help"
|
|
583
|
-
aria-label="More
|
|
615
|
+
aria-label="More information for label 2 field"
|
|
616
|
+
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group2-label2"
|
|
584
617
|
>
|
|
585
618
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
586
619
|
</button>
|
|
@@ -692,7 +725,11 @@ cssPrefix: pf-c-form
|
|
|
692
725
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
693
726
|
</label>
|
|
694
727
|
|
|
695
|
-
<button
|
|
728
|
+
<button
|
|
729
|
+
class="pf-c-form__group-label-help"
|
|
730
|
+
aria-label="More information for label 1 field"
|
|
731
|
+
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group1-label1"
|
|
732
|
+
>
|
|
696
733
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
697
734
|
</button>
|
|
698
735
|
</div>
|
|
@@ -716,7 +753,11 @@ cssPrefix: pf-c-form
|
|
|
716
753
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
717
754
|
</label>
|
|
718
755
|
|
|
719
|
-
<button
|
|
756
|
+
<button
|
|
757
|
+
class="pf-c-form__group-label-help"
|
|
758
|
+
aria-label="More information for label 2 field"
|
|
759
|
+
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group1-label2"
|
|
760
|
+
>
|
|
720
761
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
721
762
|
</button>
|
|
722
763
|
</div>
|
|
@@ -816,7 +857,11 @@ cssPrefix: pf-c-form
|
|
|
816
857
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
817
858
|
</label>
|
|
818
859
|
|
|
819
|
-
<button
|
|
860
|
+
<button
|
|
861
|
+
class="pf-c-form__group-label-help"
|
|
862
|
+
aria-label="More information for label 1 field"
|
|
863
|
+
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group6-label1"
|
|
864
|
+
>
|
|
820
865
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
821
866
|
</button>
|
|
822
867
|
</div>
|
|
@@ -840,7 +885,11 @@ cssPrefix: pf-c-form
|
|
|
840
885
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
841
886
|
</label>
|
|
842
887
|
|
|
843
|
-
<button
|
|
888
|
+
<button
|
|
889
|
+
class="pf-c-form__group-label-help"
|
|
890
|
+
aria-label="More information for label 2 field"
|
|
891
|
+
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group6-label2"
|
|
892
|
+
>
|
|
844
893
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
845
894
|
</button>
|
|
846
895
|
</div>
|
|
@@ -882,7 +931,8 @@ cssPrefix: pf-c-form
|
|
|
882
931
|
|
|
883
932
|
<button
|
|
884
933
|
class="pf-c-form__group-label-help"
|
|
885
|
-
aria-label="More
|
|
934
|
+
aria-label="More information for label 1 field"
|
|
935
|
+
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group7-label1"
|
|
886
936
|
>
|
|
887
937
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
888
938
|
</button>
|
|
@@ -909,7 +959,8 @@ cssPrefix: pf-c-form
|
|
|
909
959
|
|
|
910
960
|
<button
|
|
911
961
|
class="pf-c-form__group-label-help"
|
|
912
|
-
aria-label="More
|
|
962
|
+
aria-label="More information for label 2 field"
|
|
963
|
+
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group7-label2"
|
|
913
964
|
>
|
|
914
965
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
915
966
|
</button>
|
|
@@ -957,7 +1008,8 @@ cssPrefix: pf-c-form
|
|
|
957
1008
|
|
|
958
1009
|
<button
|
|
959
1010
|
class="pf-c-form__group-label-help"
|
|
960
|
-
aria-label="More
|
|
1011
|
+
aria-label="More information for label 1 field"
|
|
1012
|
+
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group8-label1"
|
|
961
1013
|
>
|
|
962
1014
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
963
1015
|
</button>
|
|
@@ -984,7 +1036,8 @@ cssPrefix: pf-c-form
|
|
|
984
1036
|
|
|
985
1037
|
<button
|
|
986
1038
|
class="pf-c-form__group-label-help"
|
|
987
|
-
aria-label="More
|
|
1039
|
+
aria-label="More information for label 2 field"
|
|
1040
|
+
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group8-label2"
|
|
988
1041
|
>
|
|
989
1042
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
990
1043
|
</button>
|
|
@@ -1036,7 +1089,11 @@ cssPrefix: pf-c-form
|
|
|
1036
1089
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
1037
1090
|
</label>
|
|
1038
1091
|
|
|
1039
|
-
<button
|
|
1092
|
+
<button
|
|
1093
|
+
class="pf-c-form__group-label-help"
|
|
1094
|
+
aria-label="More information for label 1 field"
|
|
1095
|
+
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group9-label1"
|
|
1096
|
+
>
|
|
1040
1097
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
1041
1098
|
</button>
|
|
1042
1099
|
</div>
|
|
@@ -1060,7 +1117,11 @@ cssPrefix: pf-c-form
|
|
|
1060
1117
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
1061
1118
|
</label>
|
|
1062
1119
|
|
|
1063
|
-
<button
|
|
1120
|
+
<button
|
|
1121
|
+
class="pf-c-form__group-label-help"
|
|
1122
|
+
aria-label="More information for label 2 field"
|
|
1123
|
+
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group9-label2"
|
|
1124
|
+
>
|
|
1064
1125
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
1065
1126
|
</button>
|
|
1066
1127
|
</div>
|
|
@@ -1083,7 +1144,11 @@ cssPrefix: pf-c-form
|
|
|
1083
1144
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
1084
1145
|
</label>
|
|
1085
1146
|
|
|
1086
|
-
<button
|
|
1147
|
+
<button
|
|
1148
|
+
class="pf-c-form__group-label-help"
|
|
1149
|
+
aria-label="More information for label 3 field"
|
|
1150
|
+
aria-describedby="form-expandable-field-groups-label3"
|
|
1151
|
+
>
|
|
1087
1152
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
1088
1153
|
</button>
|
|
1089
1154
|
</div>
|
|
@@ -1104,7 +1169,11 @@ cssPrefix: pf-c-form
|
|
|
1104
1169
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
1105
1170
|
</label>
|
|
1106
1171
|
|
|
1107
|
-
<button
|
|
1172
|
+
<button
|
|
1173
|
+
class="pf-c-form__group-label-help"
|
|
1174
|
+
aria-label="More information for label 4 field"
|
|
1175
|
+
aria-describedby="form-expandable-field-groups-label4"
|
|
1176
|
+
>
|
|
1108
1177
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
1109
1178
|
</button>
|
|
1110
1179
|
</div>
|
|
@@ -1126,24 +1195,26 @@ cssPrefix: pf-c-form
|
|
|
1126
1195
|
|
|
1127
1196
|
### Accessibility
|
|
1128
1197
|
|
|
1129
|
-
| Attribute
|
|
1130
|
-
|
|
|
1131
|
-
| `for`
|
|
1132
|
-
| `id`
|
|
1133
|
-
| `required`
|
|
1134
|
-
| `id="{helper_text_id}"`
|
|
1135
|
-
| `aria-describedby="{helper_text_id}"`
|
|
1136
|
-
| `aria-invalid="true" aria-describedby="{helper_text_id}"`
|
|
1137
|
-
| `aria-hidden="true"`
|
|
1138
|
-
| `role="group"`
|
|
1139
|
-
| `role="radiogroup"`
|
|
1140
|
-
| `id`
|
|
1141
|
-
| `id`
|
|
1142
|
-
| `id`
|
|
1143
|
-
| `aria-labelledby="{label id}"`
|
|
1144
|
-
| `aria-label`
|
|
1145
|
-
| `aria-labelledby="{title id} {toggle button id}"`
|
|
1146
|
-
| `aria-expanded="true/false"`
|
|
1198
|
+
| Attribute | Applied to | Outcome |
|
|
1199
|
+
| -------------------------------------------------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1200
|
+
| `for` | `<label>` | Each `<label>` must have a `for` attribute that matches its form field id. **Required** |
|
|
1201
|
+
| `id` | `<input type="radio/checkbox/text">`, `<select>`, `<textarea>` | Each `<form>` field must have an `id` attribute that matches its label's `for` value. **Required** |
|
|
1202
|
+
| `required` | `<input>`, `<select>`, `<textarea>` | Required fields must include these attributes. |
|
|
1203
|
+
| `id="{helper_text_id}"` | `.pf-c-form__helper-text` | Form fields with related `.pf-c-form__helper-text` require this attribute. Usage `<p class="pf-c-form__helper-text" id="{helper_text_id}">`. |
|
|
1204
|
+
| `aria-describedby="{helper_text_id}"` | `<input>`, `<select>`, `<textarea>` | Form fields with related `.pf-c-form__helper-text` require this attribute. Usage `<input aria-describedby="{helper_text_id}">`. |
|
|
1205
|
+
| `aria-invalid="true" aria-describedby="{helper_text_id}"` | `<input>`, `<select>`, `<textarea>` | When form validation fails `aria-describedby` is used to communicate the error to the user. These attributes need to be handled with Javascript so that `aria-describedby` only references help text that explains the error, and so that `aria-invalid="true"` is only present when validation fails. For proper styling of errors `aria-invalid="true"` is required. |
|
|
1206
|
+
| `aria-hidden="true"` | `.pf-c-form__label-required` | Hides the required indicator from assistive technologies. |
|
|
1207
|
+
| `role="group"` | `.pf-c-form__group`, `.pf-c-form__section`, `.pf-c-form__field-group` | Provides group role for form groups, form sections, and form field groups. **Required for checkbox groups, form groups, form sections, and form field groups.** |
|
|
1208
|
+
| `role="radiogroup"` | `.pf-c-form__group` | Provides group role for radio input groups. **Required for radio input groups** |
|
|
1209
|
+
| `id` | `.pf-c-form__group-label` | Generates an `id` for use in the `aria-labelledby` attribute in a checkbox or radio form group. |
|
|
1210
|
+
| `id` | `.pf-c-form__field-group-title-text` | Generates an `id` for use in the `aria-labelledby` attribute in an expandable field group's toggle button. |
|
|
1211
|
+
| `id` | `.pf-c-form__field-group-toggle-button > button` | Generates an `id` for use in the `aria-labelledby` attribute in an expandable field group's toggle button. |
|
|
1212
|
+
| `aria-labelledby="{label id}"` | `.pf-c-form__group`, `.pf-c-form__section`, `.pf-c-form__field-group` | Provides an accessible label for form groups, form sections, and form field groups. **Required for form groups, form sections, and form field groups that contain labels.** |
|
|
1213
|
+
| `aria-label` | `.pf-c-form__field-group-toggle-button > button` | Provides an accessible label for the field group toggle button. |
|
|
1214
|
+
| `aria-labelledby="{title id} {toggle button id}"` | `.pf-c-form__field-group-toggle-button > button` | Provides an accessible label for the field group toggle button. |
|
|
1215
|
+
| `aria-expanded="true/false"` | `.pf-c-form__field-group-toggle-button > button` | Indicates whether the field group body is visible or hidden. |
|
|
1216
|
+
| `id="{form_label_id}"` | `.pf-c-form__label` | Generates an `id` for use in the `aria-describedby` attribute in a `.pf-c-form__group-label-help`. |
|
|
1217
|
+
| `aria-label="{descriptive text}" aria-describedby="{form_label_id}"` | `.pf-c-form__group-label-help` | Provides an accessible label on a button that provides additional information for a form element. |
|
|
1147
1218
|
|
|
1148
1219
|
### Usage
|
|
1149
1220
|
|
|
@@ -150,6 +150,23 @@ cssPrefix: pf-c-menu-toggle
|
|
|
150
150
|
</span>
|
|
151
151
|
</button>
|
|
152
152
|
|
|
153
|
+
|
|
154
|
+
<button
|
|
155
|
+
class="pf-c-menu-toggle pf-m-secondary"
|
|
156
|
+
type="button"
|
|
157
|
+
aria-expanded="false"
|
|
158
|
+
>
|
|
159
|
+
<span class="pf-c-menu-toggle__icon">
|
|
160
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
161
|
+
</span>
|
|
162
|
+
<span class="pf-c-menu-toggle__text">Icon</span>
|
|
163
|
+
<span class="pf-c-menu-toggle__controls">
|
|
164
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
165
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
166
|
+
</span>
|
|
167
|
+
</span>
|
|
168
|
+
</button>
|
|
169
|
+
|
|
153
170
|
|
|
154
171
|
<button
|
|
155
172
|
class="pf-c-menu-toggle pf-m-secondary pf-m-expanded"
|
|
@@ -601,7 +618,7 @@ cssPrefix: pf-c-menu-toggle
|
|
|
601
618
|
### Split button (action)
|
|
602
619
|
|
|
603
620
|
```html
|
|
604
|
-
<div class="pf-c-menu-toggle pf-m-
|
|
621
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled">
|
|
605
622
|
<button class="pf-c-menu-toggle__button" type="button" disabled>Action</button>
|
|
606
623
|
<button
|
|
607
624
|
class="pf-c-menu-toggle__button"
|
|
@@ -619,7 +636,7 @@ cssPrefix: pf-c-menu-toggle
|
|
|
619
636
|
</button>
|
|
620
637
|
</div>
|
|
621
638
|
|
|
622
|
-
<div class="pf-c-menu-toggle pf-m-
|
|
639
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-action">
|
|
623
640
|
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
624
641
|
<button
|
|
625
642
|
class="pf-c-menu-toggle__button"
|
|
@@ -636,7 +653,7 @@ cssPrefix: pf-c-menu-toggle
|
|
|
636
653
|
</button>
|
|
637
654
|
</div>
|
|
638
655
|
|
|
639
|
-
<div class="pf-c-menu-toggle pf-m-expanded pf-m-
|
|
656
|
+
<div class="pf-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-action">
|
|
640
657
|
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
641
658
|
<button
|
|
642
659
|
class="pf-c-menu-toggle__button"
|
|
@@ -659,7 +676,7 @@ cssPrefix: pf-c-menu-toggle
|
|
|
659
676
|
|
|
660
677
|
```html
|
|
661
678
|
<div
|
|
662
|
-
class="pf-c-menu-toggle pf-m-
|
|
679
|
+
class="pf-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled pf-m-primary"
|
|
663
680
|
>
|
|
664
681
|
<button class="pf-c-menu-toggle__button" type="button" disabled>Action</button>
|
|
665
682
|
<button
|
|
@@ -678,7 +695,7 @@ cssPrefix: pf-c-menu-toggle
|
|
|
678
695
|
</button>
|
|
679
696
|
</div>
|
|
680
697
|
|
|
681
|
-
<div class="pf-c-menu-toggle pf-m-
|
|
698
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-action pf-m-primary">
|
|
682
699
|
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
683
700
|
<button
|
|
684
701
|
class="pf-c-menu-toggle__button"
|
|
@@ -696,7 +713,7 @@ cssPrefix: pf-c-menu-toggle
|
|
|
696
713
|
</div>
|
|
697
714
|
|
|
698
715
|
<div
|
|
699
|
-
class="pf-c-menu-toggle pf-m-expanded pf-m-
|
|
716
|
+
class="pf-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-action pf-m-primary"
|
|
700
717
|
>
|
|
701
718
|
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
702
719
|
<button
|
|
@@ -720,7 +737,7 @@ cssPrefix: pf-c-menu-toggle
|
|
|
720
737
|
|
|
721
738
|
```html
|
|
722
739
|
<div
|
|
723
|
-
class="pf-c-menu-toggle pf-m-
|
|
740
|
+
class="pf-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled pf-m-secondary"
|
|
724
741
|
>
|
|
725
742
|
<button class="pf-c-menu-toggle__button" type="button" disabled>Action</button>
|
|
726
743
|
<button
|
|
@@ -739,7 +756,7 @@ cssPrefix: pf-c-menu-toggle
|
|
|
739
756
|
</button>
|
|
740
757
|
</div>
|
|
741
758
|
|
|
742
|
-
<div class="pf-c-menu-toggle pf-m-
|
|
759
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-action pf-m-secondary">
|
|
743
760
|
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
744
761
|
<button
|
|
745
762
|
class="pf-c-menu-toggle__button"
|
|
@@ -757,7 +774,7 @@ cssPrefix: pf-c-menu-toggle
|
|
|
757
774
|
</div>
|
|
758
775
|
|
|
759
776
|
<div
|
|
760
|
-
class="pf-c-menu-toggle pf-m-expanded pf-m-
|
|
777
|
+
class="pf-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-action pf-m-secondary"
|
|
761
778
|
>
|
|
762
779
|
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
763
780
|
<button
|
|
@@ -898,6 +915,48 @@ cssPrefix: pf-c-menu-toggle
|
|
|
898
915
|
|
|
899
916
|
```
|
|
900
917
|
|
|
918
|
+
### Typeahead
|
|
919
|
+
|
|
920
|
+
```html
|
|
921
|
+
<div class="pf-c-menu-toggle pf-m-typeahead pf-m-full-width">
|
|
922
|
+
<div class="pf-c-text-input-group pf-m-plain">
|
|
923
|
+
<div class="pf-c-text-input-group__main">
|
|
924
|
+
<span class="pf-c-text-input-group__text">
|
|
925
|
+
<input
|
|
926
|
+
class="pf-c-text-input-group__text-input"
|
|
927
|
+
type="text"
|
|
928
|
+
value
|
|
929
|
+
aria-label="Type to filter"
|
|
930
|
+
/>
|
|
931
|
+
</span>
|
|
932
|
+
</div>
|
|
933
|
+
<div class="pf-c-text-input-group__utilities">
|
|
934
|
+
<button
|
|
935
|
+
class="pf-c-button pf-m-plain"
|
|
936
|
+
type="button"
|
|
937
|
+
aria-label="Clear input"
|
|
938
|
+
>
|
|
939
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
940
|
+
</button>
|
|
941
|
+
</div>
|
|
942
|
+
</div>
|
|
943
|
+
<button
|
|
944
|
+
class="pf-c-menu-toggle__button"
|
|
945
|
+
type="button"
|
|
946
|
+
aria-expanded="false"
|
|
947
|
+
id="typeahead-example-toggle-button"
|
|
948
|
+
aria-label="Menu toggle"
|
|
949
|
+
>
|
|
950
|
+
<span class="pf-c-menu-toggle__controls">
|
|
951
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
952
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
953
|
+
</span>
|
|
954
|
+
</span>
|
|
955
|
+
</button>
|
|
956
|
+
</div>
|
|
957
|
+
|
|
958
|
+
```
|
|
959
|
+
|
|
901
960
|
### Accessibility
|
|
902
961
|
|
|
903
962
|
| Class | Applied to | Outcome |
|
|
@@ -451,6 +451,7 @@ A modal box is a generic rectangular container that can be used to build modals.
|
|
|
451
451
|
| `aria-label="Close"` | `.pf-c-modal-box__close .pf-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required** |
|
|
452
452
|
| `aria-hidden="true"` | Parent element containing the page contents when modal is open | Hides main contents of the page from screen readers. The element with `.pf-c-modal-box` must not be a descendent of the element with `aria-hidden="true"`. For more info see [trapping focus](/accessibility/product-development-guide#trapping-focus). **Required** |
|
|
453
453
|
| `form="[id of form in modal body]"` | `.pf-c-modal-box__footer .pf-c-button` | Associates a submit button in the modal footer with a form in the modal body. For use when the submit button is outside of the `<form>` that the button submits. |
|
|
454
|
+
| `tabindex="0"` | `.pf-c-modal-box__body` | If a modal box body has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the body must include either a focusable element within the scrollable region or the body itself must be focusable by adding `tabindex="0"`. |
|
|
454
455
|
|
|
455
456
|
### Usage
|
|
456
457
|
|
|
@@ -747,7 +747,7 @@ _Note:_ The attribute `aria-selected="true"` should be set programmatically to t
|
|
|
747
747
|
| `.pf-m-top` | `.pf-c-options-menu` | Modifies to display the menu above the toggle. |
|
|
748
748
|
| `.pf-m-align-right` | `.pf-c-options-menu__menu` | Modifies to display the menu aligned to the right edge of the toggle |
|
|
749
749
|
| `.pf-m-expanded` | `.pf-c-options-menu` | Modifies for the expanded state. |
|
|
750
|
-
| `.pf-m-plain` | `.pf-c-options-menu__toggle` | Modifies to display the toggle with no border.
|
|
750
|
+
| `.pf-m-plain` | `.pf-c-options-menu__toggle` | Modifies to display the toggle with no border. **Note:** Can be combined with `.pf-m-text` to create a normal text toggle with no border. |
|
|
751
751
|
| `.pf-m-disabled` | `.pf-c-options-menu__toggle` | Modifies to display the options menu toggle as disabled. This applies to `pf-c-options-menu__toggle` and should not be used in lieu of the `disabled` attribute on `pf-c-options-menu__toggle`. When this is used, `disabled` should also be added to any form elements in `.pf-c-options-menu__toggle` |
|
|
752
752
|
| `.pf-m-text` | `.pf-c-options-menu__toggle` | For use when the `.pf-c-options-menu__toggle` is a `<div>` or some non-interactive elment, and you're using a custom `.pf-c-options-menu__toggle-button` to toggle the options menu. |
|
|
753
753
|
| `.pf-m-active` | `.pf-c-options-menu__toggle` | Forces display of the active state of the toggle. |
|
|
@@ -173,14 +173,15 @@ This component provides the basic chrome for a page, including sidebar, header,
|
|
|
173
173
|
|
|
174
174
|
### Accessibility
|
|
175
175
|
|
|
176
|
-
| Attribute | Applied to | Outcome
|
|
177
|
-
| ----------------------------- | ------------------------------------------------ |
|
|
178
|
-
| `role="banner"` | `.pf-c-page__header` | Identifies the element that serves as the banner region.
|
|
179
|
-
| `role="main"` | `.pf-c-page__main` | Identifies the element that serves as the main region.
|
|
180
|
-
| `tabindex="-1"` | `.pf-c-page__main` | Allows the main region to receive programmatic focus. **Required**
|
|
181
|
-
| `id="[id]"` | `.pf-c-page__main` | Provides a hook for sending focus to new content. **Required**
|
|
182
|
-
| `aria-expanded="true/false"` | `.pf-c-page__header-brand-toggle > .pf-c-button` | Indicates that the expandable content is visible and the current state of the contents. **Required**
|
|
183
|
-
| `aria-controls="[id of nav]"` | `.pf-c-page__header-brand-toggle > .pf-c-button` | Identifies the element controlled by the toggle. **Required**
|
|
176
|
+
| Attribute | Applied to | Outcome |
|
|
177
|
+
| ----------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
178
|
+
| `role="banner"` | `.pf-c-page__header` | Identifies the element that serves as the banner region. |
|
|
179
|
+
| `role="main"` | `.pf-c-page__main` | Identifies the element that serves as the main region. |
|
|
180
|
+
| `tabindex="-1"` | `.pf-c-page__main` | Allows the main region to receive programmatic focus. **Required** |
|
|
181
|
+
| `id="[id]"` | `.pf-c-page__main` | Provides a hook for sending focus to new content. **Required** |
|
|
182
|
+
| `aria-expanded="true/false"` | `.pf-c-page__header-brand-toggle > .pf-c-button` | Indicates that the expandable content is visible and the current state of the contents. **Required** |
|
|
183
|
+
| `aria-controls="[id of nav]"` | `.pf-c-page__header-brand-toggle > .pf-c-button` | Identifies the element controlled by the toggle. **Required** |
|
|
184
|
+
| `tabindex="0"` | `.pf-c-page__main-section.pf-m-overflow-scroll` | If a page section has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the page section must include either a focusable element within the scrollable region or the page section itself must be focusable by adding `tabindex="0"`. |
|
|
184
185
|
|
|
185
186
|
### Usage
|
|
186
187
|
|