@patternfly/patternfly 6.3.0-prerelease.67 → 6.3.0-prerelease.69

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 (27) hide show
  1. package/base/patternfly-variables.css +8 -8
  2. package/base/tokens/tokens-charts-dark.scss +1 -1
  3. package/base/tokens/tokens-charts.scss +1 -1
  4. package/base/tokens/tokens-dark.scss +1 -1
  5. package/base/tokens/tokens-default.scss +5 -5
  6. package/base/tokens/tokens-highcontrast-dark.scss +1 -1
  7. package/base/tokens/tokens-highcontrast.scss +5 -5
  8. package/base/tokens/tokens-palette.scss +1 -1
  9. package/components/DualListSelector/dual-list-selector.css +2 -3
  10. package/components/DualListSelector/dual-list-selector.scss +3 -3
  11. package/components/_index.css +2 -3
  12. package/docs/components/DatePicker/examples/DatePicker.md +4 -1
  13. package/docs/components/FileUpload/examples/FileUpload.md +4 -3
  14. package/docs/components/Form/examples/Form.md +16 -15
  15. package/docs/components/HelperText/examples/HelperText.md +65 -75
  16. package/docs/components/Login/examples/Login.md +20 -15
  17. package/docs/demos/Alert/examples/Alert.md +28 -19
  18. package/docs/demos/Form/examples/BasicForms.md +0 -21
  19. package/docs/demos/HelperText/examples/HelperText.md +31 -23
  20. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +56 -38
  21. package/package.json +2 -2
  22. package/patternfly-base-no-globals.css +8 -8
  23. package/patternfly-base.css +8 -8
  24. package/patternfly-no-globals.css +10 -11
  25. package/patternfly.css +10 -11
  26. package/patternfly.min.css +1 -1
  27. package/patternfly.min.css.map +1 -1
package/base/patternfly-variables.css CHANGED
@@ -145,10 +145,10 @@
145
145
  --pf-t--global--duration--50: 50ms;
146
146
  --pf-t--global--duration--500: 500ms;
147
147
  --pf-t--global--duration--600: 600ms;
148
- --pf-t--global--focus-ring--position--inset: -4;
149
- --pf-t--global--focus-ring--position--offset: 2;
150
- --pf-t--global--focus-ring--width--inset: 3;
151
- --pf-t--global--focus-ring--width--offset: 2;
148
+ --pf-t--global--focus-ring--position--inset: -4px;
149
+ --pf-t--global--focus-ring--position--offset: 2px;
150
+ --pf-t--global--focus-ring--width--inset: 3px;
151
+ --pf-t--global--focus-ring--width--offset: 2px;
152
152
  --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
153
153
  --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
154
154
  --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace;
@@ -1366,10 +1366,10 @@
1366
1366
  --pf-t--global--breakpoint--600: 90.625rem;
1367
1367
  --pf-t--global--color--nonstatus--green--400: #3d7019;
1368
1368
  --pf-t--global--color--status--success--150: #3d7019;
1369
- --pf-t--global--focus-ring--position--inset: -4;
1370
- --pf-t--global--focus-ring--position--offset: 2;
1371
- --pf-t--global--focus-ring--width--inset: 3;
1372
- --pf-t--global--focus-ring--width--offset: 2;
1369
+ --pf-t--global--focus-ring--position--inset: -4px;
1370
+ --pf-t--global--focus-ring--position--offset: 2px;
1371
+ --pf-t--global--focus-ring--width--inset: 3px;
1372
+ --pf-t--global--focus-ring--width--offset: 2px;
1373
1373
  --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
1374
1374
  --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
1375
1375
  --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace;
package/base/tokens/tokens-charts-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 02 Sep 2025 22:55:03 GMT
3
+ // Generated on Wed, 10 Sep 2025 19:58:14 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/base/tokens/tokens-charts.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 02 Sep 2025 22:55:03 GMT
3
+ // Generated on Wed, 10 Sep 2025 19:58:14 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/base/tokens/tokens-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 02 Sep 2025 22:55:02 GMT
3
+ // Generated on Wed, 10 Sep 2025 19:58:14 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
package/base/tokens/tokens-default.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 02 Sep 2025 22:55:02 GMT
3
+ // Generated on Wed, 10 Sep 2025 19:58:14 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -72,10 +72,10 @@
72
72
  --pf-t--global--duration--50: 50ms;
73
73
  --pf-t--global--duration--500: 500ms;
74
74
  --pf-t--global--duration--600: 600ms;
75
- --pf-t--global--focus-ring--position--inset: -4;
76
- --pf-t--global--focus-ring--position--offset: 2;
77
- --pf-t--global--focus-ring--width--inset: 3;
78
- --pf-t--global--focus-ring--width--offset: 2;
75
+ --pf-t--global--focus-ring--position--inset: -4px;
76
+ --pf-t--global--focus-ring--position--offset: 2px;
77
+ --pf-t--global--focus-ring--width--inset: 3px;
78
+ --pf-t--global--focus-ring--width--offset: 2px;
79
79
  --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
80
80
  --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
81
81
  --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace;
package/base/tokens/tokens-highcontrast-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 02 Sep 2025 22:55:03 GMT
3
+ // Generated on Wed, 10 Sep 2025 19:58:14 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
package/base/tokens/tokens-highcontrast.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 02 Sep 2025 22:55:03 GMT
3
+ // Generated on Wed, 10 Sep 2025 19:58:14 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -55,10 +55,10 @@
55
55
  --pf-t--global--breakpoint--600: 90.625rem;
56
56
  --pf-t--global--color--nonstatus--green--400: #3d7019;
57
57
  --pf-t--global--color--status--success--150: #3d7019;
58
- --pf-t--global--focus-ring--position--inset: -4;
59
- --pf-t--global--focus-ring--position--offset: 2;
60
- --pf-t--global--focus-ring--width--inset: 3;
61
- --pf-t--global--focus-ring--width--offset: 2;
58
+ --pf-t--global--focus-ring--position--inset: -4px;
59
+ --pf-t--global--focus-ring--position--offset: 2px;
60
+ --pf-t--global--focus-ring--width--inset: 3px;
61
+ --pf-t--global--focus-ring--width--offset: 2px;
62
62
  --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
63
63
  --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
64
64
  --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace;
package/base/tokens/tokens-palette.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 02 Sep 2025 22:55:03 GMT
3
+ // Generated on Wed, 10 Sep 2025 19:58:14 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--color--black: #000000;
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/_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);
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>