@patternfly/patternfly 4.145.0 → 4.147.0
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/AppLauncher/app-launcher.css +5 -1
- package/components/AppLauncher/app-launcher.scss +7 -3
- package/components/Card/card.css +97 -18
- package/components/Card/card.scss +127 -19
- package/components/Menu/menu.css +4 -2
- package/components/Menu/menu.scss +5 -2
- package/components/Select/select.css +21 -5
- package/components/Select/select.scss +25 -7
- package/components/Tile/tile.css +53 -29
- package/components/Tile/tile.scss +72 -34
- package/docs/components/Card/examples/Card.md +70 -29
- package/docs/components/DragDrop/examples/DragDrop.md +1 -1
- package/docs/components/Form/examples/Form.md +103 -56
- package/docs/components/Tile/examples/Tile.md +2 -2
- package/docs/demos/Form/examples/BasicForms.md +20 -4
- package/package.json +1 -1
- package/patternfly-no-reset.css +180 -55
- package/patternfly.css +180 -55
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -122,7 +122,7 @@ cssPrefix: pf-c-form
|
|
|
122
122
|
|
|
123
123
|
```html
|
|
124
124
|
<form novalidate class="pf-c-form">
|
|
125
|
-
<section class="pf-c-form__section">
|
|
125
|
+
<section class="pf-c-form__section" role="group">
|
|
126
126
|
<div class="pf-c-form__group">
|
|
127
127
|
<div class="pf-c-form__group-label">
|
|
128
128
|
<label
|
|
@@ -162,8 +162,16 @@ cssPrefix: pf-c-form
|
|
|
162
162
|
</div>
|
|
163
163
|
</div>
|
|
164
164
|
</section>
|
|
165
|
-
<section
|
|
166
|
-
|
|
165
|
+
<section
|
|
166
|
+
class="pf-c-form__section"
|
|
167
|
+
role="group"
|
|
168
|
+
aria-labelledby="form-section-example-section2-title"
|
|
169
|
+
>
|
|
170
|
+
<div
|
|
171
|
+
class="pf-c-form__section-title"
|
|
172
|
+
id="form-section-example-section2-title"
|
|
173
|
+
aria-hidden="true"
|
|
174
|
+
>Section 2 title (optional)</div>
|
|
167
175
|
<div class="pf-c-form__group">
|
|
168
176
|
<div class="pf-c-form__group-label">
|
|
169
177
|
<label
|
|
@@ -422,7 +430,11 @@ cssPrefix: pf-c-form
|
|
|
422
430
|
/>
|
|
423
431
|
</div>
|
|
424
432
|
</div>
|
|
425
|
-
<div
|
|
433
|
+
<div
|
|
434
|
+
class="pf-c-form__field-group pf-m-expanded"
|
|
435
|
+
role="group"
|
|
436
|
+
aria-labelledby="form-expandable-field-groups-field-group1-title"
|
|
437
|
+
>
|
|
426
438
|
<div class="pf-c-form__field-group-toggle">
|
|
427
439
|
<div class="pf-c-form__field-group-toggle-button">
|
|
428
440
|
<button
|
|
@@ -457,7 +469,11 @@ cssPrefix: pf-c-form
|
|
|
457
469
|
</div>
|
|
458
470
|
</div>
|
|
459
471
|
<div class="pf-c-form__field-group-body">
|
|
460
|
-
<div
|
|
472
|
+
<div
|
|
473
|
+
class="pf-c-form__field-group pf-m-expanded"
|
|
474
|
+
role="group"
|
|
475
|
+
aria-labelledby="form-expandable-field-groups-field-group2-title"
|
|
476
|
+
>
|
|
461
477
|
<div class="pf-c-form__field-group-toggle">
|
|
462
478
|
<div class="pf-c-form__field-group-toggle-button">
|
|
463
479
|
<button
|
|
@@ -501,7 +517,7 @@ cssPrefix: pf-c-form
|
|
|
501
517
|
<div class="pf-c-form__group-label">
|
|
502
518
|
<label
|
|
503
519
|
class="pf-c-form__label"
|
|
504
|
-
for="form-expandable-field-groups-field-group2-label1"
|
|
520
|
+
for="form-expandable-field-groupsform-expandable-field-groups-field-group2-label1"
|
|
505
521
|
>
|
|
506
522
|
<span class="pf-c-form__label-text">Label 1</span>
|
|
507
523
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
@@ -518,8 +534,8 @@ cssPrefix: pf-c-form
|
|
|
518
534
|
<input
|
|
519
535
|
class="pf-c-form-control"
|
|
520
536
|
type="text"
|
|
521
|
-
id="form-expandable-field-groups-field-group2-label1"
|
|
522
|
-
name="form-expandable-field-groups-field-group2-label1"
|
|
537
|
+
id="form-expandable-field-groupsform-expandable-field-groups-field-group2-label1"
|
|
538
|
+
name="form-expandable-field-groupsform-expandable-field-groups-field-group2-label1"
|
|
523
539
|
required
|
|
524
540
|
/>
|
|
525
541
|
</div>
|
|
@@ -528,7 +544,7 @@ cssPrefix: pf-c-form
|
|
|
528
544
|
<div class="pf-c-form__group-label">
|
|
529
545
|
<label
|
|
530
546
|
class="pf-c-form__label"
|
|
531
|
-
for="form-expandable-field-groups-field-group2-label2"
|
|
547
|
+
for="form-expandable-field-groupsform-expandable-field-groups-field-group2-label2"
|
|
532
548
|
>
|
|
533
549
|
<span class="pf-c-form__label-text">Label 2</span>
|
|
534
550
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
@@ -545,15 +561,19 @@ cssPrefix: pf-c-form
|
|
|
545
561
|
<input
|
|
546
562
|
class="pf-c-form-control"
|
|
547
563
|
type="text"
|
|
548
|
-
id="form-expandable-field-groups-field-group2-label2"
|
|
549
|
-
name="form-expandable-field-groups-field-group2-label2"
|
|
564
|
+
id="form-expandable-field-groupsform-expandable-field-groups-field-group2-label2"
|
|
565
|
+
name="form-expandable-field-groupsform-expandable-field-groups-field-group2-label2"
|
|
550
566
|
required
|
|
551
567
|
/>
|
|
552
568
|
</div>
|
|
553
569
|
</div>
|
|
554
570
|
</div>
|
|
555
571
|
</div>
|
|
556
|
-
<div
|
|
572
|
+
<div
|
|
573
|
+
class="pf-c-form__field-group"
|
|
574
|
+
role="group"
|
|
575
|
+
aria-labelledby="form-expandable-field-groups-field-group3-title"
|
|
576
|
+
>
|
|
557
577
|
<div class="pf-c-form__field-group-toggle">
|
|
558
578
|
<div class="pf-c-form__field-group-toggle-button">
|
|
559
579
|
<button
|
|
@@ -590,7 +610,11 @@ cssPrefix: pf-c-form
|
|
|
590
610
|
</div>
|
|
591
611
|
</div>
|
|
592
612
|
</div>
|
|
593
|
-
<div
|
|
613
|
+
<div
|
|
614
|
+
class="pf-c-form__field-group"
|
|
615
|
+
role="group"
|
|
616
|
+
aria-labelledby="form-expandable-field-groups-field-group4-title"
|
|
617
|
+
>
|
|
594
618
|
<div class="pf-c-form__field-group-toggle">
|
|
595
619
|
<div class="pf-c-form__field-group-toggle-button">
|
|
596
620
|
<button
|
|
@@ -680,7 +704,11 @@ cssPrefix: pf-c-form
|
|
|
680
704
|
</div>
|
|
681
705
|
</div>
|
|
682
706
|
</div>
|
|
683
|
-
<div
|
|
707
|
+
<div
|
|
708
|
+
class="pf-c-form__field-group"
|
|
709
|
+
role="group"
|
|
710
|
+
aria-labelledby="form-expandable-field-groups-field-group5-title"
|
|
711
|
+
>
|
|
684
712
|
<div class="pf-c-form__field-group-toggle">
|
|
685
713
|
<div class="pf-c-form__field-group-toggle-button">
|
|
686
714
|
<button
|
|
@@ -715,7 +743,11 @@ cssPrefix: pf-c-form
|
|
|
715
743
|
</div>
|
|
716
744
|
</div>
|
|
717
745
|
</div>
|
|
718
|
-
<div
|
|
746
|
+
<div
|
|
747
|
+
class="pf-c-form__field-group pf-m-expanded"
|
|
748
|
+
role="group"
|
|
749
|
+
aria-labelledby="form-expandable-field-groups-field-group6-title"
|
|
750
|
+
>
|
|
719
751
|
<div class="pf-c-form__field-group-toggle">
|
|
720
752
|
<div class="pf-c-form__field-group-toggle-button">
|
|
721
753
|
<button
|
|
@@ -794,22 +826,27 @@ cssPrefix: pf-c-form
|
|
|
794
826
|
/>
|
|
795
827
|
</div>
|
|
796
828
|
</div>
|
|
797
|
-
<div
|
|
829
|
+
<div
|
|
830
|
+
class="pf-c-form__field-group pf-m-expanded"
|
|
831
|
+
role="group"
|
|
832
|
+
aria-labelledby="form-expandable-field-groups-field-group7-title"
|
|
833
|
+
>
|
|
798
834
|
<div class="pf-c-form__field-group-header">
|
|
799
835
|
<div class="pf-c-form__field-group-header-main">
|
|
800
836
|
<div class="pf-c-form__field-group-header-title">
|
|
801
837
|
<div
|
|
802
838
|
class="pf-c-form__field-group-header-title-text"
|
|
839
|
+
id="form-expandable-field-groups-field-group7-title"
|
|
803
840
|
>Nested field group 1 (non-expandable)</div>
|
|
804
841
|
</div>
|
|
805
842
|
</div>
|
|
806
843
|
</div>
|
|
807
|
-
<div class="pf-c-form__field-group-body"
|
|
844
|
+
<div class="pf-c-form__field-group-body">
|
|
808
845
|
<div class="pf-c-form__group">
|
|
809
846
|
<div class="pf-c-form__group-label">
|
|
810
847
|
<label
|
|
811
848
|
class="pf-c-form__label"
|
|
812
|
-
for="form-expandable-field-groups-field-group7-label1"
|
|
849
|
+
for="form-expandable-field-groupsform-expandable-field-groups-field-group7-label1"
|
|
813
850
|
>
|
|
814
851
|
<span class="pf-c-form__label-text">Label 1</span>
|
|
815
852
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
@@ -826,8 +863,8 @@ cssPrefix: pf-c-form
|
|
|
826
863
|
<input
|
|
827
864
|
class="pf-c-form-control"
|
|
828
865
|
type="text"
|
|
829
|
-
id="form-expandable-field-groups-field-group7-label1"
|
|
830
|
-
name="form-expandable-field-groups-field-group7-label1"
|
|
866
|
+
id="form-expandable-field-groupsform-expandable-field-groups-field-group7-label1"
|
|
867
|
+
name="form-expandable-field-groupsform-expandable-field-groups-field-group7-label1"
|
|
831
868
|
required
|
|
832
869
|
/>
|
|
833
870
|
</div>
|
|
@@ -836,7 +873,7 @@ cssPrefix: pf-c-form
|
|
|
836
873
|
<div class="pf-c-form__group-label">
|
|
837
874
|
<label
|
|
838
875
|
class="pf-c-form__label"
|
|
839
|
-
for="form-expandable-field-groups-field-group7-label2"
|
|
876
|
+
for="form-expandable-field-groupsform-expandable-field-groups-field-group7-label2"
|
|
840
877
|
>
|
|
841
878
|
<span class="pf-c-form__label-text">Label 2</span>
|
|
842
879
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
@@ -853,20 +890,25 @@ cssPrefix: pf-c-form
|
|
|
853
890
|
<input
|
|
854
891
|
class="pf-c-form-control"
|
|
855
892
|
type="text"
|
|
856
|
-
id="form-expandable-field-groups-field-group7-label2"
|
|
857
|
-
name="form-expandable-field-groups-field-group7-label2"
|
|
893
|
+
id="form-expandable-field-groupsform-expandable-field-groups-field-group7-label2"
|
|
894
|
+
name="form-expandable-field-groupsform-expandable-field-groups-field-group7-label2"
|
|
858
895
|
required
|
|
859
896
|
/>
|
|
860
897
|
</div>
|
|
861
898
|
</div>
|
|
862
899
|
</div>
|
|
863
900
|
</div>
|
|
864
|
-
<div
|
|
901
|
+
<div
|
|
902
|
+
class="pf-c-form__field-group pf-m-expanded"
|
|
903
|
+
role="group"
|
|
904
|
+
aria-labelledby="form-expandable-field-groups-field-group8-title"
|
|
905
|
+
>
|
|
865
906
|
<div class="pf-c-form__field-group-header">
|
|
866
907
|
<div class="pf-c-form__field-group-header-main">
|
|
867
908
|
<div class="pf-c-form__field-group-header-title">
|
|
868
909
|
<div
|
|
869
910
|
class="pf-c-form__field-group-header-title-text"
|
|
911
|
+
id="form-expandable-field-groups-field-group8-title"
|
|
870
912
|
>Nested field group 2 (non-expandable)</div>
|
|
871
913
|
</div>
|
|
872
914
|
<div
|
|
@@ -874,12 +916,12 @@ cssPrefix: pf-c-form
|
|
|
874
916
|
>Field group 1 description text.</div>
|
|
875
917
|
</div>
|
|
876
918
|
</div>
|
|
877
|
-
<div class="pf-c-form__field-group-body"
|
|
919
|
+
<div class="pf-c-form__field-group-body">
|
|
878
920
|
<div class="pf-c-form__group">
|
|
879
921
|
<div class="pf-c-form__group-label">
|
|
880
922
|
<label
|
|
881
923
|
class="pf-c-form__label"
|
|
882
|
-
for="form-expandable-field-groups-field-
|
|
924
|
+
for="form-expandable-field-groupsform-expandable-field-groups-field-group8-label1"
|
|
883
925
|
>
|
|
884
926
|
<span class="pf-c-form__label-text">Label 1</span>
|
|
885
927
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
@@ -896,8 +938,8 @@ cssPrefix: pf-c-form
|
|
|
896
938
|
<input
|
|
897
939
|
class="pf-c-form-control"
|
|
898
940
|
type="text"
|
|
899
|
-
id="form-expandable-field-groups-field-
|
|
900
|
-
name="form-expandable-field-groups-field-
|
|
941
|
+
id="form-expandable-field-groupsform-expandable-field-groups-field-group8-label1"
|
|
942
|
+
name="form-expandable-field-groupsform-expandable-field-groups-field-group8-label1"
|
|
901
943
|
required
|
|
902
944
|
/>
|
|
903
945
|
</div>
|
|
@@ -906,7 +948,7 @@ cssPrefix: pf-c-form
|
|
|
906
948
|
<div class="pf-c-form__group-label">
|
|
907
949
|
<label
|
|
908
950
|
class="pf-c-form__label"
|
|
909
|
-
for="form-expandable-field-groups-field-
|
|
951
|
+
for="form-expandable-field-groupsform-expandable-field-groups-field-group8-label2"
|
|
910
952
|
>
|
|
911
953
|
<span class="pf-c-form__label-text">Label 2</span>
|
|
912
954
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
@@ -923,8 +965,8 @@ cssPrefix: pf-c-form
|
|
|
923
965
|
<input
|
|
924
966
|
class="pf-c-form-control"
|
|
925
967
|
type="text"
|
|
926
|
-
id="form-expandable-field-groups-field-
|
|
927
|
-
name="form-expandable-field-groups-field-
|
|
968
|
+
id="form-expandable-field-groupsform-expandable-field-groups-field-group8-label2"
|
|
969
|
+
name="form-expandable-field-groupsform-expandable-field-groups-field-group8-label2"
|
|
928
970
|
required
|
|
929
971
|
/>
|
|
930
972
|
</div>
|
|
@@ -933,12 +975,17 @@ cssPrefix: pf-c-form
|
|
|
933
975
|
</div>
|
|
934
976
|
</div>
|
|
935
977
|
</div>
|
|
936
|
-
<div
|
|
978
|
+
<div
|
|
979
|
+
class="pf-c-form__field-group"
|
|
980
|
+
role="group"
|
|
981
|
+
aria-labelledby="form-expandable-field-groups-field-group9-title"
|
|
982
|
+
>
|
|
937
983
|
<div class="pf-c-form__field-group-header">
|
|
938
984
|
<div class="pf-c-form__field-group-header-main">
|
|
939
985
|
<div class="pf-c-form__field-group-header-title">
|
|
940
986
|
<div
|
|
941
987
|
class="pf-c-form__field-group-header-title-text"
|
|
988
|
+
id="form-expandable-field-groups-field-group9-title"
|
|
942
989
|
>Field group 4 (non-expandable)</div>
|
|
943
990
|
</div>
|
|
944
991
|
<div
|
|
@@ -955,7 +1002,7 @@ cssPrefix: pf-c-form
|
|
|
955
1002
|
<div class="pf-c-form__group-label">
|
|
956
1003
|
<label
|
|
957
1004
|
class="pf-c-form__label"
|
|
958
|
-
for="form-expandable-field-groupsform-expandable-field-groups-field-
|
|
1005
|
+
for="form-expandable-field-groupsform-expandable-field-groups-field-group9-label1"
|
|
959
1006
|
>
|
|
960
1007
|
<span class="pf-c-form__label-text">Label 1</span>
|
|
961
1008
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
@@ -969,8 +1016,8 @@ cssPrefix: pf-c-form
|
|
|
969
1016
|
<input
|
|
970
1017
|
class="pf-c-form-control"
|
|
971
1018
|
type="text"
|
|
972
|
-
id="form-expandable-field-groupsform-expandable-field-groups-field-
|
|
973
|
-
name="form-expandable-field-groupsform-expandable-field-groups-field-
|
|
1019
|
+
id="form-expandable-field-groupsform-expandable-field-groups-field-group9-label1"
|
|
1020
|
+
name="form-expandable-field-groupsform-expandable-field-groups-field-group9-label1"
|
|
974
1021
|
required
|
|
975
1022
|
/>
|
|
976
1023
|
</div>
|
|
@@ -979,7 +1026,7 @@ cssPrefix: pf-c-form
|
|
|
979
1026
|
<div class="pf-c-form__group-label">
|
|
980
1027
|
<label
|
|
981
1028
|
class="pf-c-form__label"
|
|
982
|
-
for="form-expandable-field-groupsform-expandable-field-groups-field-
|
|
1029
|
+
for="form-expandable-field-groupsform-expandable-field-groups-field-group9-label2"
|
|
983
1030
|
>
|
|
984
1031
|
<span class="pf-c-form__label-text">Label 2</span>
|
|
985
1032
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
@@ -993,8 +1040,8 @@ cssPrefix: pf-c-form
|
|
|
993
1040
|
<input
|
|
994
1041
|
class="pf-c-form-control"
|
|
995
1042
|
type="text"
|
|
996
|
-
id="form-expandable-field-groupsform-expandable-field-groups-field-
|
|
997
|
-
name="form-expandable-field-groupsform-expandable-field-groups-field-
|
|
1043
|
+
id="form-expandable-field-groupsform-expandable-field-groups-field-group9-label2"
|
|
1044
|
+
name="form-expandable-field-groupsform-expandable-field-groups-field-group9-label2"
|
|
998
1045
|
required
|
|
999
1046
|
/>
|
|
1000
1047
|
</div>
|
|
@@ -1051,24 +1098,24 @@ cssPrefix: pf-c-form
|
|
|
1051
1098
|
|
|
1052
1099
|
### Accessibility
|
|
1053
1100
|
|
|
1054
|
-
| Attribute | Applied to
|
|
1055
|
-
| --------------------------------------------------------- |
|
|
1056
|
-
| `for` | `<label>`
|
|
1057
|
-
| `id` | `<input type="radio/checkbox/text">`, `<select>`, `<textarea>`
|
|
1058
|
-
| `required` | `<input>`, `<select>`, `<textarea>`
|
|
1059
|
-
| `id="{helper_text_id}"` | `.pf-c-form__helper-text`
|
|
1060
|
-
| `aria-describedby="{helper_text_id}"` | `<input>`, `<select>`, `<textarea>`
|
|
1061
|
-
| `aria-invalid="true" aria-describedby="{helper_text_id}"` | `<input>`, `<select>`, `<textarea>`
|
|
1062
|
-
| `aria-hidden="true"` | `.pf-c-form__label-required`
|
|
1063
|
-
| `role="group"` | `.pf-c-form__group`
|
|
1064
|
-
| `role="radiogroup"` | `.pf-c-form__group`
|
|
1065
|
-
| `id` | `.pf-c-form__group-label`
|
|
1066
|
-
| `id` | `.pf-c-form__field-group-title-text`
|
|
1067
|
-
| `id` | `.pf-c-form__field-group-toggle-button > button`
|
|
1068
|
-
| `aria-labelledby="{label id}"` | `.pf-c-form__group`
|
|
1069
|
-
| `aria-label` | `.pf-c-form__field-group-toggle-button > button`
|
|
1070
|
-
| `aria-labelledby="{title id} {toggle button id}"` | `.pf-c-form__field-group-toggle-button > button`
|
|
1071
|
-
| `aria-expanded="true/false"` | `.pf-c-form__field-group-toggle-button > button`
|
|
1101
|
+
| Attribute | Applied to | Outcome | |
|
|
1102
|
+
| --------------------------------------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
|
|
1103
|
+
| `for` | `<label>` | Each `<label>` must have a `for` attribute that matches its form field id. **Required** | |
|
|
1104
|
+
| `id` | `<input type="radio/checkbox/text">`, `<select>`, `<textarea>` | Each `<form>` field must have an `id` attribute that matches its label's `for` value. **Required** | |
|
|
1105
|
+
| `required` | `<input>`, `<select>`, `<textarea>` | Required fields must include these attributes. | |
|
|
1106
|
+
| `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}">`. | |
|
|
1107
|
+
| `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}">`. | |
|
|
1108
|
+
| `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. | |
|
|
1109
|
+
| `aria-hidden="true"` | `.pf-c-form__label-required` | Hides the required indicator from assistive technologies. | |
|
|
1110
|
+
| `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.** | |
|
|
1111
|
+
| `role="radiogroup"` | `.pf-c-form__group` | Provides group role for radio input groups. **Required for radio input groups** | |
|
|
1112
|
+
| `id` | `.pf-c-form__group-label` | Generates an `id` for use in the `aria-labelledby` attribute in a checkbox or radio form group. | |
|
|
1113
|
+
| `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. | |
|
|
1114
|
+
| `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. | |
|
|
1115
|
+
| `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.** |
|
|
1116
|
+
| `aria-label` | `.pf-c-form__field-group-toggle-button > button` | Provides an accessible label for the field group toggle button. | |
|
|
1117
|
+
| `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. | |
|
|
1118
|
+
| `aria-expanded="true/false"` | `.pf-c-form__field-group-toggle-button > button` | Indicates whether the field group body is visible or hidden. | |
|
|
1072
1119
|
|
|
1073
1120
|
### Usage
|
|
1074
1121
|
|
|
@@ -9,7 +9,7 @@ cssPrefix: pf-c-tile
|
|
|
9
9
|
|
|
10
10
|
### Basic tiles
|
|
11
11
|
|
|
12
|
-
```html
|
|
12
|
+
```html isBeta
|
|
13
13
|
<div class="pf-c-tile" tabindex="0">
|
|
14
14
|
<div class="pf-c-tile__header">
|
|
15
15
|
<div class="pf-c-tile__title">Default</div>
|
|
@@ -877,7 +877,7 @@ cssPrefix: pf-c-tile
|
|
|
877
877
|
| Attribute | Applied to | Outcome |
|
|
878
878
|
| --------------- | ------------ | ------------------------------------------------------------------------------------- |
|
|
879
879
|
| `tabindex="0"` | `.pf-c-tile` | Inserts the tile into the tab order of the page so that it is focusable. **Required** |
|
|
880
|
-
| `tabindex="-1"` |
|
|
880
|
+
| `tabindex="-1"` | `.pf-c-tile` | Removes the tile from keyboard focus when it is disabled. |
|
|
881
881
|
|
|
882
882
|
### Usage
|
|
883
883
|
|
|
@@ -504,8 +504,16 @@ section: components
|
|
|
504
504
|
|
|
505
505
|
```html
|
|
506
506
|
<form novalidate class="pf-c-form">
|
|
507
|
-
<section
|
|
508
|
-
|
|
507
|
+
<section
|
|
508
|
+
class="pf-c-form__section"
|
|
509
|
+
role="group"
|
|
510
|
+
aria-labelledby="form-demo-sections-repeatable-fields-section1-title"
|
|
511
|
+
>
|
|
512
|
+
<div
|
|
513
|
+
class="pf-c-form__section-title"
|
|
514
|
+
id="form-demo-sections-repeatable-fields-section1-title"
|
|
515
|
+
aria-hidden="true"
|
|
516
|
+
>General settings</div>
|
|
509
517
|
<div class="pf-c-form__group">
|
|
510
518
|
<div class="pf-c-form__group-label">
|
|
511
519
|
<label
|
|
@@ -579,8 +587,16 @@ section: components
|
|
|
579
587
|
</div>
|
|
580
588
|
</div>
|
|
581
589
|
</section>
|
|
582
|
-
<section
|
|
583
|
-
|
|
590
|
+
<section
|
|
591
|
+
class="pf-c-form__section"
|
|
592
|
+
role="group"
|
|
593
|
+
aria-labelledby="form-demo-sections-repeatable-fields-section2-title"
|
|
594
|
+
>
|
|
595
|
+
<div
|
|
596
|
+
class="pf-c-form__section-title"
|
|
597
|
+
id="form-demo-sections-repeatable-fields-section2-title"
|
|
598
|
+
aria-hidden="true"
|
|
599
|
+
>Access settings</div>
|
|
584
600
|
<div class="pf-c-form__group">
|
|
585
601
|
<div class="pf-c-form__group-label">
|
|
586
602
|
<label
|