@patternfly/patternfly 6.3.0-prerelease.68 → 6.3.0-prerelease.70

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 (19) hide show
  1. package/components/DualListSelector/dual-list-selector.css +2 -3
  2. package/components/DualListSelector/dual-list-selector.scss +3 -3
  3. package/components/Page/page.css +5 -0
  4. package/components/Page/page.scss +13 -4
  5. package/components/_index.css +7 -3
  6. package/docs/components/DatePicker/examples/DatePicker.md +4 -1
  7. package/docs/components/FileUpload/examples/FileUpload.md +4 -3
  8. package/docs/components/Form/examples/Form.md +16 -15
  9. package/docs/components/HelperText/examples/HelperText.md +65 -75
  10. package/docs/components/Login/examples/Login.md +20 -15
  11. package/docs/demos/Alert/examples/Alert.md +28 -19
  12. package/docs/demos/Form/examples/BasicForms.md +0 -21
  13. package/docs/demos/HelperText/examples/HelperText.md +31 -23
  14. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +56 -38
  15. package/package.json +1 -1
  16. package/patternfly-no-globals.css +7 -3
  17. package/patternfly.css +7 -3
  18. package/patternfly.min.css +1 -1
  19. package/patternfly.min.css.map +1 -1
package/components/DualListSelector/dual-list-selector.css CHANGED
@@ -225,14 +225,13 @@
225
225
  --pf-v6-c-dual-list-selector__item-text--Color: var(--pf-v6-c-dual-list-selector__list-item-row--m-selected__text--Color);
226
226
  font-weight: var(--pf-v6-c-dual-list-selector__list-item-row--m-selected__text--FontWeight);
227
227
  }
228
- .pf-v6-c-dual-list-selector__list-item-row:hover {
228
+ .pf-v6-c-dual-list-selector__list-item-row:hover, .pf-v6-c-dual-list-selector__list-item-row:focus-within {
229
229
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor);
230
230
  --pf-v6-c-dual-list-selector__list-item-row--BorderWidth: var(--pf-v6-c-dual-list-selector__list-item-row--hover--BorderWidth);
231
231
  }
232
232
  .pf-v6-c-dual-list-selector__list-item-row.pf-m-check {
233
233
  --pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: transparent;
234
- --pf-v6-c-dual-list-selector__list-item-row--m-selected--BorderColor: transparent;
235
- --pf-v6-c-dual-list-selector__list-item-row--BorderWidth: revert;
234
+ --pf-v6-c-dual-list-selector__list-item-row--m-selected--BorderWidth: 0;
236
235
  }
237
236
  .pf-v6-c-dual-list-selector__list-item-row.pf-m-ghost-row {
238
237
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor);
package/components/DualListSelector/dual-list-selector.scss CHANGED
@@ -287,15 +287,15 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
287
287
  }
288
288
  }
289
289
 
290
- &:hover {
290
+ &:hover,
291
+ &:focus-within {
291
292
  --#{$dual-list-selector}__list-item-row--BackgroundColor: var(--#{$dual-list-selector}__list-item-row--hover--BackgroundColor);
292
293
  --#{$dual-list-selector}__list-item-row--BorderWidth: var(--#{$dual-list-selector}__list-item-row--hover--BorderWidth);
293
294
  }
294
295
 
295
296
  &.pf-m-check {
296
297
  --#{$dual-list-selector}__list-item-row--m-selected--BackgroundColor: transparent;
297
- --#{$dual-list-selector}__list-item-row--m-selected--BorderColor: transparent;
298
- --#{$dual-list-selector}__list-item-row--BorderWidth: revert;
298
+ --#{$dual-list-selector}__list-item-row--m-selected--BorderWidth: 0;
299
299
  }
300
300
 
301
301
  &.pf-m-ghost-row {
package/components/Page/page.css CHANGED
@@ -107,6 +107,8 @@
107
107
  --pf-v6-c-page__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
108
108
  --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
109
109
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
110
+ --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
111
+ --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
110
112
  }
111
113
  @media screen and (prefers-reduced-motion: no-preference) {
112
114
  .pf-v6-c-page {
@@ -729,6 +731,9 @@
729
731
  flex-shrink: 0;
730
732
  }
731
733
 
734
+ .pf-v6-c-page__drawer > .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
735
+ border-block-start: var(--pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth) solid var(--pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor);
736
+ }
732
737
  .pf-v6-c-page__drawer .pf-v6-c-page__main-container {
733
738
  align-self: revert;
734
739
  }
package/components/Page/page.scss CHANGED
@@ -154,6 +154,10 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
154
154
  --#{$page}__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
155
155
  --#{$page}__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
156
156
  --#{$page}__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
157
+
158
+ // Drawer section
159
+ --#{$page}__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
160
+ --#{$page}__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
157
161
  }
158
162
 
159
163
  .#{$page} {
@@ -568,10 +572,15 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
568
572
  flex-shrink: 0;
569
573
  }
570
574
 
571
- .#{$page}__drawer .#{$page}__main-container {
572
- align-self: revert;
575
+ .#{$page}__drawer {
576
+ > .#{$drawer} > .#{$drawer}__main > .#{$drawer}__panel {
577
+ border-block-start: var(--#{$page}__drawer--c-drawer--BorderBlockStartWidth) solid var(--#{$page}__drawer--c-drawer--BorderBlockStartColor);
578
+ }
579
+ .#{$page}__main-container {
580
+ align-self: revert;
573
581
 
574
- &.pf-m-fill {
575
- flex-grow: 1;
582
+ &.pf-m-fill {
583
+ flex-grow: 1;
584
+ }
576
585
  }
577
586
  }
package/components/_index.css CHANGED
@@ -5159,14 +5159,13 @@ ul) {
5159
5159
  --pf-v6-c-dual-list-selector__item-text--Color: var(--pf-v6-c-dual-list-selector__list-item-row--m-selected__text--Color);
5160
5160
  font-weight: var(--pf-v6-c-dual-list-selector__list-item-row--m-selected__text--FontWeight);
5161
5161
  }
5162
- .pf-v6-c-dual-list-selector__list-item-row:hover {
5162
+ .pf-v6-c-dual-list-selector__list-item-row:hover, .pf-v6-c-dual-list-selector__list-item-row:focus-within {
5163
5163
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor);
5164
5164
  --pf-v6-c-dual-list-selector__list-item-row--BorderWidth: var(--pf-v6-c-dual-list-selector__list-item-row--hover--BorderWidth);
5165
5165
  }
5166
5166
  .pf-v6-c-dual-list-selector__list-item-row.pf-m-check {
5167
5167
  --pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: transparent;
5168
- --pf-v6-c-dual-list-selector__list-item-row--m-selected--BorderColor: transparent;
5169
- --pf-v6-c-dual-list-selector__list-item-row--BorderWidth: revert;
5168
+ --pf-v6-c-dual-list-selector__list-item-row--m-selected--BorderWidth: 0;
5170
5169
  }
5171
5170
  .pf-v6-c-dual-list-selector__list-item-row.pf-m-ghost-row {
5172
5171
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor);
@@ -12584,6 +12583,8 @@ ul.pf-v6-c-list {
12584
12583
  --pf-v6-c-page__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12585
12584
  --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
12586
12585
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
12586
+ --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
12587
+ --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
12587
12588
  }
12588
12589
  @media screen and (prefers-reduced-motion: no-preference) {
12589
12590
  .pf-v6-c-page {
@@ -13206,6 +13207,9 @@ ul.pf-v6-c-list {
13206
13207
  flex-shrink: 0;
13207
13208
  }
13208
13209
 
13210
+ .pf-v6-c-page__drawer > .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
13211
+ border-block-start: var(--pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth) solid var(--pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor);
13212
+ }
13209
13213
  .pf-v6-c-page__drawer .pf-v6-c-page__main-container {
13210
13214
  align-self: revert;
13211
13215
  }
package/docs/components/DatePicker/examples/DatePicker.md CHANGED
@@ -124,7 +124,10 @@ cssPrefix: pf-v6-c-date-picker
124
124
  <span class="pf-v6-c-helper-text__item-icon">
125
125
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
126
126
  </span>
127
- <span class="pf-v6-c-helper-text__item-text">Invalid date</span>
127
+ <span class="pf-v6-c-helper-text__item-text">
128
+ <span class="pf-v6-screen-reader">Error:</span>
129
+ Invalid date
130
+ </span>
128
131
  </div>
129
132
  </div>
130
133
  </div>
package/docs/components/FileUpload/examples/FileUpload.md CHANGED
@@ -325,9 +325,10 @@ cssPrefix: pf-v6-c-file-upload
325
325
  <span class="pf-v6-c-helper-text__item-icon">
326
326
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
327
327
  </span>
328
- <span
329
- class="pf-v6-c-helper-text__item-text"
330
- >Must be a CSV file no larger than 1 KB</span>
328
+ <span class="pf-v6-c-helper-text__item-text">
329
+ <span class="pf-v6-screen-reader">Error:</span>
330
+ Must be a CSV file no larger than 1 KB
331
+ </span>
331
332
  </div>
332
333
  </div>
333
334
  </div>
package/docs/components/Form/examples/Form.md CHANGED
@@ -345,9 +345,6 @@ cssPrefix: pf-v6-c-form
345
345
  class="pf-v6-c-helper-text__item"
346
346
  id="form-help-text-name-helper"
347
347
  >
348
- <span class="pf-v6-c-helper-text__item-icon">
349
- <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
350
- </span>
351
348
  <span class="pf-v6-c-helper-text__item-text">This is helper text.</span>
352
349
  </div>
353
350
  </div>
@@ -382,9 +379,10 @@ cssPrefix: pf-v6-c-form
382
379
  <span class="pf-v6-c-helper-text__item-icon">
383
380
  <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
384
381
  </span>
385
- <span
386
- class="pf-v6-c-helper-text__item-text"
387
- >This is helper text for a warning input.</span>
382
+ <span class="pf-v6-c-helper-text__item-text">
383
+ <span class="pf-v6-screen-reader">Warning:</span>
384
+ This is helper text for a warning input.
385
+ </span>
388
386
  </div>
389
387
  </div>
390
388
  </div>
@@ -419,9 +417,10 @@ cssPrefix: pf-v6-c-form
419
417
  <span class="pf-v6-c-helper-text__item-icon">
420
418
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
421
419
  </span>
422
- <span
423
- class="pf-v6-c-helper-text__item-text"
424
- >This is helper text for an invalid input.</span>
420
+ <span class="pf-v6-c-helper-text__item-text">
421
+ <span class="pf-v6-screen-reader">Error:</span>
422
+ This is helper text for an invalid input.
423
+ </span>
425
424
  </div>
426
425
  </div>
427
426
  </div>
@@ -455,9 +454,10 @@ cssPrefix: pf-v6-c-form
455
454
  <span class="pf-v6-c-helper-text__item-icon">
456
455
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
457
456
  </span>
458
- <span
459
- class="pf-v6-c-helper-text__item-text"
460
- >This is helper text for success input.</span>
457
+ <span class="pf-v6-c-helper-text__item-text">
458
+ <span class="pf-v6-screen-reader">Success:</span>
459
+ This is helper text for success input.
460
+ </span>
461
461
  </div>
462
462
  </div>
463
463
  </div>
@@ -492,9 +492,10 @@ cssPrefix: pf-v6-c-form
492
492
  <span class="pf-v6-c-helper-text__item-icon">
493
493
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
494
494
  </span>
495
- <span
496
- class="pf-v6-c-helper-text__item-text"
497
- >This is helper text with an icon.</span>
495
+ <span class="pf-v6-c-helper-text__item-text">
496
+ <span class="pf-v6-screen-reader">Error:</span>
497
+ This is helper text with an icon.
498
+ </span>
498
499
  </div>
499
500
  </div>
500
501
  </div>
package/docs/components/HelperText/examples/HelperText.md CHANGED
@@ -4,7 +4,7 @@ section: components
4
4
  cssPrefix: pf-v6-c-helper-text
5
5
  ---## Examples
6
6
 
7
- ### Static
7
+ ### Basic
8
8
 
9
9
  ```html
10
10
  <div class="pf-v6-c-helper-text">
@@ -14,48 +14,13 @@ cssPrefix: pf-v6-c-helper-text
14
14
  </div>
15
15
  <div class="pf-v6-c-helper-text">
16
16
  <div class="pf-v6-c-helper-text__item pf-m-indeterminate">
17
- <span
18
- class="pf-v6-c-helper-text__item-text"
19
- >This is indeterminate helper text</span>
20
- </div>
21
- </div>
22
- <div class="pf-v6-c-helper-text">
23
- <div class="pf-v6-c-helper-text__item pf-m-warning">
24
- <span class="pf-v6-c-helper-text__item-text">This is warning helper text</span>
25
- </div>
26
- </div>
27
- <div class="pf-v6-c-helper-text">
28
- <div class="pf-v6-c-helper-text__item pf-m-success">
29
- <span class="pf-v6-c-helper-text__item-text">This is success helper text</span>
30
- </div>
31
- </div>
32
- <div class="pf-v6-c-helper-text">
33
- <div class="pf-v6-c-helper-text__item pf-m-error">
34
- <span class="pf-v6-c-helper-text__item-text">This is error helper text</span>
35
- </div>
36
- </div>
37
-
38
- ```
39
-
40
- ### Icon
41
-
42
- ```html
43
- <div class="pf-v6-c-helper-text">
44
- <div class="pf-v6-c-helper-text__item">
45
17
  <span class="pf-v6-c-helper-text__item-icon">
46
18
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
47
19
  </span>
48
- <span class="pf-v6-c-helper-text__item-text">This is default helper text</span>
49
- </div>
50
- </div>
51
- <div class="pf-v6-c-helper-text">
52
- <div class="pf-v6-c-helper-text__item pf-m-indeterminate">
53
- <span class="pf-v6-c-helper-text__item-icon">
54
- <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
20
+ <span class="pf-v6-c-helper-text__item-text">
21
+ <span class="pf-v6-screen-reader">Indeterminate:</span>
22
+ This is indeterminate helper text
55
23
  </span>
56
- <span
57
- class="pf-v6-c-helper-text__item-text"
58
- >This is indeterminate helper text</span>
59
24
  </div>
60
25
  </div>
61
26
  <div class="pf-v6-c-helper-text">
@@ -63,7 +28,10 @@ cssPrefix: pf-v6-c-helper-text
63
28
  <span class="pf-v6-c-helper-text__item-icon">
64
29
  <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
65
30
  </span>
66
- <span class="pf-v6-c-helper-text__item-text">This is warning helper text</span>
31
+ <span class="pf-v6-c-helper-text__item-text">
32
+ <span class="pf-v6-screen-reader">Warning:</span>
33
+ This is warning helper text
34
+ </span>
67
35
  </div>
68
36
  </div>
69
37
  <div class="pf-v6-c-helper-text">
@@ -71,7 +39,10 @@ cssPrefix: pf-v6-c-helper-text
71
39
  <span class="pf-v6-c-helper-text__item-icon">
72
40
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
73
41
  </span>
74
- <span class="pf-v6-c-helper-text__item-text">This is success helper text</span>
42
+ <span class="pf-v6-c-helper-text__item-text">
43
+ <span class="pf-v6-screen-reader">Success:</span>
44
+ This is success helper text
45
+ </span>
75
46
  </div>
76
47
  </div>
77
48
  <div class="pf-v6-c-helper-text">
@@ -79,41 +50,45 @@ cssPrefix: pf-v6-c-helper-text
79
50
  <span class="pf-v6-c-helper-text__item-icon">
80
51
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
81
52
  </span>
82
- <span class="pf-v6-c-helper-text__item-text">This is error helper text</span>
53
+ <span class="pf-v6-c-helper-text__item-text">
54
+ <span class="pf-v6-screen-reader">Error:</span>
55
+ This is error helper text
56
+ </span>
83
57
  </div>
84
58
  </div>
85
59
 
86
60
  ```
87
61
 
88
- ### Multiple static
62
+ ### Multiple items
63
+
64
+ You can include multiple `HelperTextItem` components inside a single `HelperText` container.
89
65
 
90
66
  ```html
91
- <div class="pf-v6-c-helper-text">
92
- <div class="pf-v6-c-helper-text__item">
67
+ <ul class="pf-v6-c-helper-text" role="list">
68
+ <li class="pf-v6-c-helper-text__item">
93
69
  <span class="pf-v6-c-helper-text__item-text">This is default helper text</span>
94
- </div>
95
- <div class="pf-v6-c-helper-text__item">
70
+ </li>
71
+ <li class="pf-v6-c-helper-text__item">
96
72
  <span
97
73
  class="pf-v6-c-helper-text__item-text"
98
74
  >This is another default helper text in the same block</span>
99
- </div>
100
- <div class="pf-v6-c-helper-text__item">
75
+ </li>
76
+ <li class="pf-v6-c-helper-text__item">
101
77
  <span
102
78
  class="pf-v6-c-helper-text__item-text"
103
79
  >And this is more default text in the same block</span>
104
- </div>
105
- </div>
80
+ </li>
81
+ </ul>
106
82
 
107
83
  ```
108
84
 
109
85
  ### Dynamic
110
86
 
87
+ If the `HelperTextItem` components are expected or intended to dynamically update in some way, you should use a dynamic `HelperText` container.
88
+
111
89
  ```html
112
90
  <div class="pf-v6-c-helper-text">
113
91
  <div class="pf-v6-c-helper-text__item pf-m-dynamic">
114
- <span class="pf-v6-c-helper-text__item-icon">
115
- <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
116
- </span>
117
92
  <span class="pf-v6-c-helper-text__item-text">This is default helper text</span>
118
93
  </div>
119
94
  </div>
@@ -122,9 +97,10 @@ cssPrefix: pf-v6-c-helper-text
122
97
  <span class="pf-v6-c-helper-text__item-icon">
123
98
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
124
99
  </span>
125
- <span
126
- class="pf-v6-c-helper-text__item-text"
127
- >This is indeterminate helper text</span>
100
+ <span class="pf-v6-c-helper-text__item-text">
101
+ <span class="pf-v6-screen-reader">Indeterminate:</span>
102
+ This is indeterminate helper text
103
+ </span>
128
104
  </div>
129
105
  </div>
130
106
  <div class="pf-v6-c-helper-text">
@@ -132,7 +108,10 @@ cssPrefix: pf-v6-c-helper-text
132
108
  <span class="pf-v6-c-helper-text__item-icon">
133
109
  <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
134
110
  </span>
135
- <span class="pf-v6-c-helper-text__item-text">This is warning helper text</span>
111
+ <span class="pf-v6-c-helper-text__item-text">
112
+ <span class="pf-v6-screen-reader">Warning:</span>
113
+ This is warning helper text
114
+ </span>
136
115
  </div>
137
116
  </div>
138
117
  <div class="pf-v6-c-helper-text">
@@ -140,7 +119,10 @@ cssPrefix: pf-v6-c-helper-text
140
119
  <span class="pf-v6-c-helper-text__item-icon">
141
120
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
142
121
  </span>
143
- <span class="pf-v6-c-helper-text__item-text">This is success helper text</span>
122
+ <span class="pf-v6-c-helper-text__item-text">
123
+ <span class="pf-v6-screen-reader">Success:</span>
124
+ This is success helper text
125
+ </span>
144
126
  </div>
145
127
  </div>
146
128
  <div class="pf-v6-c-helper-text">
@@ -148,7 +130,10 @@ cssPrefix: pf-v6-c-helper-text
148
130
  <span class="pf-v6-c-helper-text__item-icon">
149
131
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
150
132
  </span>
151
- <span class="pf-v6-c-helper-text__item-text">This is error helper text</span>
133
+ <span class="pf-v6-c-helper-text__item-text">
134
+ <span class="pf-v6-screen-reader">Error:</span>
135
+ This is error helper text
136
+ </span>
152
137
  </div>
153
138
  </div>
154
139
 
@@ -157,30 +142,35 @@ cssPrefix: pf-v6-c-helper-text
157
142
  ### Dynamic list
158
143
 
159
144
  ```html
160
- <div class="pf-v6-c-helper-text">
161
- <div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
145
+ <ul class="pf-v6-c-helper-text" role="list">
146
+ <li class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
162
147
  <span class="pf-v6-c-helper-text__item-icon">
163
148
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
164
149
  </span>
165
- <span class="pf-v6-c-helper-text__item-text">Must be at least 14 characters</span>
166
- </div>
167
- <div class="pf-v6-c-helper-text__item pf-m-error pf-m-dynamic">
150
+ <span class="pf-v6-c-helper-text__item-text">
151
+ <span class="pf-v6-screen-reader">Success:</span>
152
+ Must be at least 14 characters
153
+ </span>
154
+ </li>
155
+ <li class="pf-v6-c-helper-text__item pf-m-error pf-m-dynamic">
168
156
  <span class="pf-v6-c-helper-text__item-icon">
169
157
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
170
158
  </span>
171
- <span
172
- class="pf-v6-c-helper-text__item-text"
173
- >Cannot contain any variation of the word "redhat"</span>
174
- </div>
175
- <div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
159
+ <span class="pf-v6-c-helper-text__item-text">
160
+ <span class="pf-v6-screen-reader">Error:</span>
161
+ Cannot contain any variation of the word "redhat"
162
+ </span>
163
+ </li>
164
+ <li class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
176
165
  <span class="pf-v6-c-helper-text__item-icon">
177
166
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
178
167
  </span>
179
- <span
180
- class="pf-v6-c-helper-text__item-text"
181
- >Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols</span>
182
- </div>
183
- </div>
168
+ <span class="pf-v6-c-helper-text__item-text">
169
+ <span class="pf-v6-screen-reader">Success:</span>
170
+ Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols
171
+ </span>
172
+ </li>
173
+ </ul>
184
174
 
185
175
  ```
186
176
 
package/docs/components/Login/examples/Login.md CHANGED
@@ -37,9 +37,10 @@ wrapperTag: div
37
37
  <span class="pf-v6-c-helper-text__item-icon">
38
38
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
39
39
  </span>
40
- <span
41
- class="pf-v6-c-helper-text__item-text"
42
- >Invalid login credentials.</span>
40
+ <span class="pf-v6-c-helper-text__item-text">
41
+ <span class="pf-v6-screen-reader">Error:</span>
42
+ Invalid login credentials.
43
+ </span>
43
44
  </div>
44
45
  </div>
45
46
  </div>
@@ -270,9 +271,10 @@ wrapperTag: div
270
271
  <span class="pf-v6-c-helper-text__item-icon">
271
272
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
272
273
  </span>
273
- <span
274
- class="pf-v6-c-helper-text__item-text"
275
- >Invalid login credentials.</span>
274
+ <span class="pf-v6-c-helper-text__item-text">
275
+ <span class="pf-v6-screen-reader">Error:</span>
276
+ Invalid login credentials.
277
+ </span>
276
278
  </div>
277
279
  </div>
278
280
  </div>
@@ -520,9 +522,10 @@ wrapperTag: div
520
522
  <span class="pf-v6-c-helper-text__item-icon">
521
523
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
522
524
  </span>
523
- <span
524
- class="pf-v6-c-helper-text__item-text"
525
- >Invalid login credentials.</span>
525
+ <span class="pf-v6-c-helper-text__item-text">
526
+ <span class="pf-v6-screen-reader">Error:</span>
527
+ Invalid login credentials.
528
+ </span>
526
529
  </div>
527
530
  </div>
528
531
  </div>
@@ -765,9 +768,10 @@ wrapperTag: div
765
768
  <span class="pf-v6-c-helper-text__item-icon">
766
769
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
767
770
  </span>
768
- <span
769
- class="pf-v6-c-helper-text__item-text"
770
- >Invalid login credentials.</span>
771
+ <span class="pf-v6-c-helper-text__item-text">
772
+ <span class="pf-v6-screen-reader">Error:</span>
773
+ Invalid login credentials.
774
+ </span>
771
775
  </div>
772
776
  </div>
773
777
  </div>
@@ -1032,9 +1036,10 @@ wrapperTag: div
1032
1036
  <span class="pf-v6-c-helper-text__item-icon">
1033
1037
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1034
1038
  </span>
1035
- <span
1036
- class="pf-v6-c-helper-text__item-text"
1037
- >Invalid login credentials.</span>
1039
+ <span class="pf-v6-c-helper-text__item-text">
1040
+ <span class="pf-v6-screen-reader">Error:</span>
1041
+ Invalid login credentials.
1042
+ </span>
1038
1043
  </div>
1039
1044
  </div>
1040
1045
  </div>
package/docs/demos/Alert/examples/Alert.md CHANGED
@@ -738,9 +738,10 @@ section: components
738
738
  aria-hidden="true"
739
739
  ></i>
740
740
  </span>
741
- <span
742
- class="pf-v6-c-helper-text__item-text"
743
- >Required field</span>
741
+ <span class="pf-v6-c-helper-text__item-text">
742
+ <span class="pf-v6-screen-reader">Error:</span>
743
+ Required field
744
+ </span>
744
745
  </div>
745
746
  </div>
746
747
  </div>
@@ -806,9 +807,10 @@ section: components
806
807
  aria-hidden="true"
807
808
  ></i>
808
809
  </span>
809
- <span
810
- class="pf-v6-c-helper-text__item-text"
811
- >Required field</span>
810
+ <span class="pf-v6-c-helper-text__item-text">
811
+ <span class="pf-v6-screen-reader">Error:</span>
812
+ Required field
813
+ </span>
812
814
  </div>
813
815
  </div>
814
816
  </div>
@@ -844,9 +846,10 @@ section: components
844
846
  aria-hidden="true"
845
847
  ></i>
846
848
  </span>
847
- <span
848
- class="pf-v6-c-helper-text__item-text"
849
- >This is a required field</span>
849
+ <span class="pf-v6-c-helper-text__item-text">
850
+ <span class="pf-v6-screen-reader">Error:</span>
851
+ This is a required field
852
+ </span>
850
853
  </div>
851
854
  </div>
852
855
  </div>
@@ -1233,9 +1236,10 @@ section: components
1233
1236
  aria-hidden="true"
1234
1237
  ></i>
1235
1238
  </span>
1236
- <span
1237
- class="pf-v6-c-helper-text__item-text"
1238
- >Required field</span>
1239
+ <span class="pf-v6-c-helper-text__item-text">
1240
+ <span class="pf-v6-screen-reader">Error:</span>
1241
+ Required field
1242
+ </span>
1239
1243
  </div>
1240
1244
  </div>
1241
1245
  </div>
@@ -1274,9 +1278,10 @@ section: components
1274
1278
  aria-hidden="true"
1275
1279
  ></i>
1276
1280
  </span>
1277
- <span
1278
- class="pf-v6-c-helper-text__item-text"
1279
- >Enter a valid email address: example@gmail.com</span>
1281
+ <span class="pf-v6-c-helper-text__item-text">
1282
+ <span class="pf-v6-screen-reader">Error:</span>
1283
+ Enter a valid email address: example@gmail.com
1284
+ </span>
1280
1285
  </div>
1281
1286
  </div>
1282
1287
  </div>
@@ -1331,7 +1336,10 @@ section: components
1331
1336
  aria-hidden="true"
1332
1337
  ></i>
1333
1338
  </span>
1334
- <span class="pf-v6-c-helper-text__item-text">Required field</span>
1339
+ <span class="pf-v6-c-helper-text__item-text">
1340
+ <span class="pf-v6-screen-reader">Error:</span>
1341
+ Required field
1342
+ </span>
1335
1343
  </div>
1336
1344
  </div>
1337
1345
  </div>
@@ -1364,9 +1372,10 @@ section: components
1364
1372
  aria-hidden="true"
1365
1373
  ></i>
1366
1374
  </span>
1367
- <span
1368
- class="pf-v6-c-helper-text__item-text"
1369
- >This is a required field</span>
1375
+ <span class="pf-v6-c-helper-text__item-text">
1376
+ <span class="pf-v6-screen-reader">Error:</span>
1377
+ This is a required field
1378
+ </span>
1370
1379
  </div>
1371
1380
  </div>
1372
1381
  </div>