@patternfly/patternfly 6.3.0 → 6.4.0-prerelease.1

package/docs/components/EmptyState/examples/EmptyState.md

@@ -14,7 +14,7 @@ cssPrefix: pf-v6-c-empty-state
         <i class="fas fa-cubes" aria-hidden="true"></i>
       </div>
       <div class="pf-v6-c-empty-state__title">
-        <h1 class="pf-v6-c-empty-state__title-text">Empty state</h1>
+        <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
       </div>
     </div>
 
@@ -64,7 +64,7 @@ cssPrefix: pf-v6-c-empty-state
         <i class="fas fa-cubes" aria-hidden="true"></i>
       </div>
       <div class="pf-v6-c-empty-state__title">
-        <h1 class="pf-v6-c-empty-state__title-text">Empty state</h1>
+        <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
       </div>
     </div>
 
@@ -109,7 +109,7 @@ cssPrefix: pf-v6-c-empty-state
         <i class="fas fa-cubes" aria-hidden="true"></i>
       </div>
       <div class="pf-v6-c-empty-state__title">
-        <h1 class="pf-v6-c-empty-state__title-text">Empty state</h1>
+        <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
       </div>
     </div>
 
@@ -160,7 +160,7 @@ cssPrefix: pf-v6-c-empty-state
         <i class="fas fa-cubes" aria-hidden="true"></i>
       </div>
       <div class="pf-v6-c-empty-state__title">
-        <h1 class="pf-v6-c-empty-state__title-text">Empty state</h1>
+        <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
       </div>
     </div>
 
@@ -210,7 +210,7 @@ cssPrefix: pf-v6-c-empty-state
         <i class="fas fa-cubes" aria-hidden="true"></i>
       </div>
       <div class="pf-v6-c-empty-state__title">
-        <h1 class="pf-v6-c-empty-state__title-text">Empty state</h1>
+        <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
       </div>
     </div>
 
@@ -259,7 +259,7 @@ cssPrefix: pf-v6-c-empty-state
         <i class="fas fa- fa-check-circle" aria-hidden="true"></i>
       </div>
       <div class="pf-v6-c-empty-state__title">
-        <h1 class="pf-v6-c-empty-state__title-text">You're all set</h1>
+        <h4 class="pf-v6-c-empty-state__title-text">You're all set</h4>
       </div>
     </div>
 

package/docs/components/ExpandableSection/examples/ExpandableSection.md

@@ -9,18 +9,26 @@ cssPrefix: pf-v6-c-expandable-section
 ```html
 <div class="pf-v6-c-expandable-section">
   <div class="pf-v6-c-expandable-section__toggle">
-    <button class="pf-v6-c-button pf-m-link" type="button">
+    <button
+      class="pf-v6-c-button pf-m-link"
+      id="hidden-toggle"
+      type="button"
+      aria-controls="hidden-content"
+    >
       <span class="pf-v6-c-button__icon pf-m-start">
         <span class="pf-v6-c-expandable-section__toggle-icon">
           <i class="fas fa-angle-right" aria-hidden="true"></i>
         </span>
       </span>
-      <span class="pf-v6-c-button__text">Show more</span>
+      <span class="pf-v6-c-button__text">Show more hidden example content</span>
     </button>
   </div>
   <div
     class="pf-v6-c-expandable-section__content"
     hidden
+    id="hidden-content"
+    role="region"
+    aria-labelledby="hidden-toggle"
   >This content is visible only when the component is expanded.</div>
 </div>
 
@@ -31,17 +39,26 @@ cssPrefix: pf-v6-c-expandable-section
 ```html
 <div class="pf-v6-c-expandable-section pf-m-expanded">
   <div class="pf-v6-c-expandable-section__toggle">
-    <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded>
+    <button
+      class="pf-v6-c-button pf-m-link"
+      id="expanded-toggle"
+      type="button"
+      aria-expanded="true"
+      aria-controls="expanded-content"
+    >
       <span class="pf-v6-c-button__icon pf-m-start">
         <span class="pf-v6-c-expandable-section__toggle-icon">
           <i class="fas fa-angle-right" aria-hidden="true"></i>
         </span>
       </span>
-      <span class="pf-v6-c-button__text">Show less</span>
+      <span class="pf-v6-c-button__text">Show less expanded example content</span>
     </button>
   </div>
   <div
     class="pf-v6-c-expandable-section__content"
+    id="expanded-content"
+    role="region"
+    aria-labelledby="expanded-toggle"
   >This content is visible only when the component is expanded.</div>
 </div>
 
@@ -52,17 +69,26 @@ cssPrefix: pf-v6-c-expandable-section
 ```html
 <div class="pf-v6-c-expandable-section pf-m-expanded pf-m-indented">
   <div class="pf-v6-c-expandable-section__toggle">
-    <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded>
+    <button
+      class="pf-v6-c-button pf-m-link"
+      id="indented-toggle"
+      type="button"
+      aria-expanded="true"
+      aria-controls="indented-content"
+    >
       <span class="pf-v6-c-button__icon pf-m-start">
         <span class="pf-v6-c-expandable-section__toggle-icon">
           <i class="fas fa-angle-right" aria-hidden="true"></i>
         </span>
       </span>
-      <span class="pf-v6-c-button__text">Show less</span>
+      <span class="pf-v6-c-button__text">Show less indented example content</span>
     </button>
   </div>
   <div
     class="pf-v6-c-expandable-section__content"
+    id="indented-content"
+    role="region"
+    aria-labelledby="indented-toggle"
   >This content is visible only when the component is expanded.</div>
 </div>
 
@@ -73,18 +99,28 @@ cssPrefix: pf-v6-c-expandable-section
 ```html
 <div class="pf-v6-c-expandable-section pf-m-display-lg pf-m-limit-width">
   <div class="pf-v6-c-expandable-section__toggle">
-    <button class="pf-v6-c-button pf-m-link" type="button">
+    <button
+      class="pf-v6-c-button pf-m-link"
+      id="disclosure-variation-hidden-toggle"
+      type="button"
+      aria-controls="disclosure-variation-hidden-content"
+    >
       <span class="pf-v6-c-button__icon pf-m-start">
         <span class="pf-v6-c-expandable-section__toggle-icon">
           <i class="fas fa-angle-right" aria-hidden="true"></i>
         </span>
       </span>
-      <span class="pf-v6-c-button__text">Show more</span>
+      <span
+        class="pf-v6-c-button__text"
+      >Show more disclosure variation example content</span>
     </button>
   </div>
   <div
     class="pf-v6-c-expandable-section__content"
     hidden
+    id="disclosure-variation-hidden-content"
+    role="region"
+    aria-labelledby="disclosure-variation-hidden-toggle"
   >This content is visible only when the component is expanded.</div>
 </div>
 
@@ -97,17 +133,28 @@ cssPrefix: pf-v6-c-expandable-section
   class="pf-v6-c-expandable-section pf-m-expanded pf-m-display-lg pf-m-limit-width"
 >
   <div class="pf-v6-c-expandable-section__toggle">
-    <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded>
+    <button
+      class="pf-v6-c-button pf-m-link"
+      id="disclosure-variation-expanded-toggle"
+      type="button"
+      aria-expanded="true"
+      aria-controls="disclosure-variation-expanded-content"
+    >
       <span class="pf-v6-c-button__icon pf-m-start">
         <span class="pf-v6-c-expandable-section__toggle-icon">
           <i class="fas fa-angle-right" aria-hidden="true"></i>
         </span>
       </span>
-      <span class="pf-v6-c-button__text">Show less</span>
+      <span
+        class="pf-v6-c-button__text"
+      >Show less disclosure variation example content</span>
     </button>
   </div>
   <div
     class="pf-v6-c-expandable-section__content"
+    id="disclosure-variation-expanded-content"
+    role="region"
+    aria-labelledby="disclosure-variation-expanded-toggle"
   >This content is visible only when the component is expanded.</div>
 </div>
 
@@ -120,17 +167,28 @@ cssPrefix: pf-v6-c-expandable-section
   class="pf-v6-c-expandable-section pf-m-expanded pf-m-display-lg pf-m-limit-width pf-m-indented"
 >
   <div class="pf-v6-c-expandable-section__toggle">
-    <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded>
+    <button
+      class="pf-v6-c-button pf-m-link"
+      id="disclosure-variation-indented-toggle"
+      type="button"
+      aria-expanded="true"
+      aria-controls="disclosure-variation-indented-content"
+    >
       <span class="pf-v6-c-button__icon pf-m-start">
         <span class="pf-v6-c-expandable-section__toggle-icon">
           <i class="fas fa-angle-right" aria-hidden="true"></i>
         </span>
       </span>
-      <span class="pf-v6-c-button__text">Show less</span>
+      <span
+        class="pf-v6-c-button__text"
+      >Show less disclosure variation indented example content</span>
     </button>
   </div>
   <div
     class="pf-v6-c-expandable-section__content"
+    id="disclosure-variation-indented-content"
+    role="region"
+    aria-labelledby="disclosure-variation-indented-toggle"
   >This content is visible only when the component is expanded.</div>
 </div>
 
@@ -147,6 +205,8 @@ cssPrefix: pf-v6-c-expandable-section
       <div
         class="pf-v6-c-expandable-section__content"
         id="detached-toggle-content"
+        role="region"
+        aria-labelledby="detached-toggle-toggle"
       >This content is visible only when the component is expanded.</div>
     </div>
   </div>
@@ -158,8 +218,9 @@ cssPrefix: pf-v6-c-expandable-section
       <div class="pf-v6-c-expandable-section__toggle">
         <button
           class="pf-v6-c-button pf-m-link"
+          id="detached-toggle-toggle"
           type="button"
-          aria-expanded
+          aria-expanded="true"
           aria-controls="detached-toggle-content"
         >
           <span class="pf-v6-c-button__icon pf-m-start">
@@ -167,7 +228,7 @@ cssPrefix: pf-v6-c-expandable-section
               <i class="fas fa-angle-right" aria-hidden="true"></i>
             </span>
           </span>
-          <span class="pf-v6-c-button__text">Show less</span>
+          <span class="pf-v6-c-button__text">Show less detached example content</span>
         </button>
       </div>
     </div>
@@ -182,10 +243,18 @@ cssPrefix: pf-v6-c-expandable-section
 <div class="pf-v6-c-expandable-section pf-m-truncate">
   <div
     class="pf-v6-c-expandable-section__content"
+    id="truncated-expansion-hidden-content"
+    role="region"
+    aria-labelledby="truncated-expansion-hidden-toggle"
   >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus, diam vitae eleifend consequat, metus sapien posuere quam, ut tincidunt nunc enim eget sapien. Mauris ac dui imperdiet dolor dignissim efficitur laoreet quis erat. Proin turpis leo, malesuada eget urna et, tristique mollis odio. Ut mattis nulla lorem, elementum hendrerit nunc molestie vitae. Proin massa sem, bibendum id urna in, viverra porta neque. Ut ut mi ac lacus rhoncus mollis id quis sem. Suspendisse non justo elementum, dictum eros nec, hendrerit sapien. Mauris aliquet, est sit amet tincidunt vehicula, purus est hendrerit arcu, vitae egestas odio lorem ut lacus. In et neque non metus viverra rhoncus quis non purus. Integer id venenatis tortor. Nulla sollicitudin convallis tellus, at porta eros volutpat in. Curabitur rhoncus rhoncus nisi, sit amet tincidunt dolor efficitur vitae. Integer purus neque, porta non odio lobortis, accumsan elementum risus. Pellentesque viverra id lacus a cursus. Etiam eu pulvinar risus. Etiam ultrices nec urna id consequat.</div>
   <div class="pf-v6-c-expandable-section__toggle">
-    <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
-      <span class="pf-v6-c-button__text">Show more</span>
+    <button
+      class="pf-v6-c-button pf-m-inline pf-m-link"
+      id="truncated-expansion-hidden-toggle"
+      type="button"
+      aria-controls="truncated-expansion-hidden-content"
+    >
+      <span class="pf-v6-c-button__text">Show more truncated content</span>
     </button>
   </div>
 </div>
@@ -198,14 +267,19 @@ cssPrefix: pf-v6-c-expandable-section
 <div class="pf-v6-c-expandable-section pf-m-expanded pf-m-truncate">
   <div
     class="pf-v6-c-expandable-section__content"
+    id="truncate-expansion-expanded-content"
+    role="region"
+    aria-labelledby="truncate-expansion-expanded-toggle"
   >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus, diam vitae eleifend consequat, metus sapien posuere quam, ut tincidunt nunc enim eget sapien. Mauris ac dui imperdiet dolor dignissim efficitur laoreet quis erat. Proin turpis leo, malesuada eget urna et, tristique mollis odio. Ut mattis nulla lorem, elementum hendrerit nunc molestie vitae. Proin massa sem, bibendum id urna in, viverra porta neque. Ut ut mi ac lacus rhoncus mollis id quis sem. Suspendisse non justo elementum, dictum eros nec, hendrerit sapien. Mauris aliquet, est sit amet tincidunt vehicula, purus est hendrerit arcu, vitae egestas odio lorem ut lacus. In et neque non metus viverra rhoncus quis non purus. Integer id venenatis tortor. Nulla sollicitudin convallis tellus, at porta eros volutpat in. Curabitur rhoncus rhoncus nisi, sit amet tincidunt dolor efficitur vitae. Integer purus neque, porta non odio lobortis, accumsan elementum risus. Pellentesque viverra id lacus a cursus. Etiam eu pulvinar risus. Etiam ultrices nec urna id consequat.</div>
   <div class="pf-v6-c-expandable-section__toggle">
     <button
       class="pf-v6-c-button pf-m-inline pf-m-link"
+      id="truncate-expansion-expanded-toggle"
       type="button"
-      aria-expanded
+      aria-expanded="true"
+      aria-controls="truncate-expansion-expanded-content"
     >
-      <span class="pf-v6-c-button__text">Show less</span>
+      <span class="pf-v6-c-button__text">Show less truncated content</span>
     </button>
   </div>
 </div>

package/docs/components/FileUpload/examples/FileUpload.md

@@ -325,9 +325,10 @@ cssPrefix: pf-v6-c-file-upload
               <span class="pf-v6-c-helper-text__item-icon">
                 <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
               </span>
-              <span
-                class="pf-v6-c-helper-text__item-text"
-              >Must be a CSV file no larger than 1 KB</span>
+              <span class="pf-v6-c-helper-text__item-text">
+                <span class="pf-v6-screen-reader">Error:</span>
+                Must be a CSV file no larger than 1 KB
+              </span>
             </div>
           </div>
         </div>

package/docs/components/Form/examples/Form.md

@@ -345,9 +345,6 @@ cssPrefix: pf-v6-c-form
             class="pf-v6-c-helper-text__item"
             id="form-help-text-name-helper"
           >
-            <span class="pf-v6-c-helper-text__item-icon">
-              <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
-            </span>
             <span class="pf-v6-c-helper-text__item-text">This is helper text.</span>
           </div>
         </div>
@@ -382,9 +379,10 @@ cssPrefix: pf-v6-c-form
             <span class="pf-v6-c-helper-text__item-icon">
               <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
             </span>
-            <span
-              class="pf-v6-c-helper-text__item-text"
-            >This is helper text for a warning input.</span>
+            <span class="pf-v6-c-helper-text__item-text">
+              <span class="pf-v6-screen-reader">Warning:</span>
+              This is helper text for a warning input.
+            </span>
           </div>
         </div>
       </div>
@@ -419,9 +417,10 @@ cssPrefix: pf-v6-c-form
             <span class="pf-v6-c-helper-text__item-icon">
               <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
             </span>
-            <span
-              class="pf-v6-c-helper-text__item-text"
-            >This is helper text for an invalid input.</span>
+            <span class="pf-v6-c-helper-text__item-text">
+              <span class="pf-v6-screen-reader">Error:</span>
+              This is helper text for an invalid input.
+            </span>
           </div>
         </div>
       </div>
@@ -455,9 +454,10 @@ cssPrefix: pf-v6-c-form
             <span class="pf-v6-c-helper-text__item-icon">
               <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
             </span>
-            <span
-              class="pf-v6-c-helper-text__item-text"
-            >This is helper text for success input.</span>
+            <span class="pf-v6-c-helper-text__item-text">
+              <span class="pf-v6-screen-reader">Success:</span>
+              This is helper text for success input.
+            </span>
           </div>
         </div>
       </div>
@@ -492,9 +492,10 @@ cssPrefix: pf-v6-c-form
             <span class="pf-v6-c-helper-text__item-icon">
               <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
             </span>
-            <span
-              class="pf-v6-c-helper-text__item-text"
-            >This is helper text with an icon.</span>
+            <span class="pf-v6-c-helper-text__item-text">
+              <span class="pf-v6-screen-reader">Error:</span>
+              This is helper text with an icon.
+            </span>
           </div>
         </div>
       </div>
@@ -793,7 +794,7 @@ cssPrefix: pf-v6-c-form
     <div class="pf-v6-c-form__field-group-toggle">
       <div class="pf-v6-c-form__field-group-toggle-button">
         <button
-          class="pf-v6-c-button pf-m-expanded pf-m-plain"
+          class="pf-v6-c-button pf-m-plain"
           id="form-expandable-field-groups-field-group-1-toggle"
           type="button"
           aria-expanded="true"
@@ -835,7 +836,7 @@ cssPrefix: pf-v6-c-form
         <div class="pf-v6-c-form__field-group-toggle">
           <div class="pf-v6-c-form__field-group-toggle-button">
             <button
-              class="pf-v6-c-button pf-m-expanded pf-m-plain"
+              class="pf-v6-c-button pf-m-plain"
               id="form-expandable-field-groups-nested-field-group-1-toggle"
               type="button"
               aria-expanded="true"
@@ -1506,7 +1507,7 @@ cssPrefix: pf-v6-c-form
     <div class="pf-v6-c-form__field-group-toggle">
       <div class="pf-v6-c-form__field-group-toggle-button">
         <button
-          class="pf-v6-c-button pf-m-expanded pf-m-plain"
+          class="pf-v6-c-button pf-m-plain"
           id="form-expandable-field-groups-field-group-4-toggle"
           type="button"
           aria-expanded="true"

package/docs/components/HelperText/examples/HelperText.md

@@ -4,7 +4,7 @@ section: components
 cssPrefix: pf-v6-c-helper-text
 ---## Examples
 
-### Static
+### Basic
 
 ```html
 <div class="pf-v6-c-helper-text">
@@ -14,48 +14,13 @@ cssPrefix: pf-v6-c-helper-text
 </div>
 <div class="pf-v6-c-helper-text">
   <div class="pf-v6-c-helper-text__item pf-m-indeterminate">
-    <span
-      class="pf-v6-c-helper-text__item-text"
-    >This is indeterminate helper text</span>
-  </div>
-</div>
-<div class="pf-v6-c-helper-text">
-  <div class="pf-v6-c-helper-text__item pf-m-warning">
-    <span class="pf-v6-c-helper-text__item-text">This is warning helper text</span>
-  </div>
-</div>
-<div class="pf-v6-c-helper-text">
-  <div class="pf-v6-c-helper-text__item pf-m-success">
-    <span class="pf-v6-c-helper-text__item-text">This is success helper text</span>
-  </div>
-</div>
-<div class="pf-v6-c-helper-text">
-  <div class="pf-v6-c-helper-text__item pf-m-error">
-    <span class="pf-v6-c-helper-text__item-text">This is error helper text</span>
-  </div>
-</div>
-
-```
-
-### Icon
-
-```html
-<div class="pf-v6-c-helper-text">
-  <div class="pf-v6-c-helper-text__item">
     <span class="pf-v6-c-helper-text__item-icon">
       <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
     </span>
-    <span class="pf-v6-c-helper-text__item-text">This is default helper text</span>
-  </div>
-</div>
-<div class="pf-v6-c-helper-text">
-  <div class="pf-v6-c-helper-text__item pf-m-indeterminate">
-    <span class="pf-v6-c-helper-text__item-icon">
-      <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
+    <span class="pf-v6-c-helper-text__item-text">
+      <span class="pf-v6-screen-reader">Indeterminate:</span>
+      This is indeterminate helper text
     </span>
-    <span
-      class="pf-v6-c-helper-text__item-text"
-    >This is indeterminate helper text</span>
   </div>
 </div>
 <div class="pf-v6-c-helper-text">
@@ -63,7 +28,10 @@ cssPrefix: pf-v6-c-helper-text
     <span class="pf-v6-c-helper-text__item-icon">
       <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
     </span>
-    <span class="pf-v6-c-helper-text__item-text">This is warning helper text</span>
+    <span class="pf-v6-c-helper-text__item-text">
+      <span class="pf-v6-screen-reader">Warning:</span>
+      This is warning helper text
+    </span>
   </div>
 </div>
 <div class="pf-v6-c-helper-text">
@@ -71,7 +39,10 @@ cssPrefix: pf-v6-c-helper-text
     <span class="pf-v6-c-helper-text__item-icon">
       <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
     </span>
-    <span class="pf-v6-c-helper-text__item-text">This is success helper text</span>
+    <span class="pf-v6-c-helper-text__item-text">
+      <span class="pf-v6-screen-reader">Success:</span>
+      This is success helper text
+    </span>
   </div>
 </div>
 <div class="pf-v6-c-helper-text">
@@ -79,41 +50,45 @@ cssPrefix: pf-v6-c-helper-text
     <span class="pf-v6-c-helper-text__item-icon">
       <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
     </span>
-    <span class="pf-v6-c-helper-text__item-text">This is error helper text</span>
+    <span class="pf-v6-c-helper-text__item-text">
+      <span class="pf-v6-screen-reader">Error:</span>
+      This is error helper text
+    </span>
   </div>
 </div>
 
 ```
 
-### Multiple static
+### Multiple items
+
+You can include multiple `HelperTextItem` components inside a single `HelperText` container.
 
 ```html
-<div class="pf-v6-c-helper-text">
-  <div class="pf-v6-c-helper-text__item">
+<ul class="pf-v6-c-helper-text" role="list">
+  <li class="pf-v6-c-helper-text__item">
     <span class="pf-v6-c-helper-text__item-text">This is default helper text</span>
-  </div>
-  <div class="pf-v6-c-helper-text__item">
+  </li>
+  <li class="pf-v6-c-helper-text__item">
     <span
       class="pf-v6-c-helper-text__item-text"
     >This is another default helper text in the same block</span>
-  </div>
-  <div class="pf-v6-c-helper-text__item">
+  </li>
+  <li class="pf-v6-c-helper-text__item">
     <span
       class="pf-v6-c-helper-text__item-text"
     >And this is more default text in the same block</span>
-  </div>
-</div>
+  </li>
+</ul>
 
 ```
 
 ### Dynamic
 
+If the `HelperTextItem` components are expected or intended to dynamically update in some way, you should use a dynamic `HelperText` container.
+
 ```html
 <div class="pf-v6-c-helper-text">
   <div class="pf-v6-c-helper-text__item pf-m-dynamic">
-    <span class="pf-v6-c-helper-text__item-icon">
-      <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
-    </span>
     <span class="pf-v6-c-helper-text__item-text">This is default helper text</span>
   </div>
 </div>
@@ -122,9 +97,10 @@ cssPrefix: pf-v6-c-helper-text
     <span class="pf-v6-c-helper-text__item-icon">
       <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
     </span>
-    <span
-      class="pf-v6-c-helper-text__item-text"
-    >This is indeterminate helper text</span>
+    <span class="pf-v6-c-helper-text__item-text">
+      <span class="pf-v6-screen-reader">Indeterminate:</span>
+      This is indeterminate helper text
+    </span>
   </div>
 </div>
 <div class="pf-v6-c-helper-text">
@@ -132,7 +108,10 @@ cssPrefix: pf-v6-c-helper-text
     <span class="pf-v6-c-helper-text__item-icon">
       <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
     </span>
-    <span class="pf-v6-c-helper-text__item-text">This is warning helper text</span>
+    <span class="pf-v6-c-helper-text__item-text">
+      <span class="pf-v6-screen-reader">Warning:</span>
+      This is warning helper text
+    </span>
   </div>
 </div>
 <div class="pf-v6-c-helper-text">
@@ -140,7 +119,10 @@ cssPrefix: pf-v6-c-helper-text
     <span class="pf-v6-c-helper-text__item-icon">
       <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
     </span>
-    <span class="pf-v6-c-helper-text__item-text">This is success helper text</span>
+    <span class="pf-v6-c-helper-text__item-text">
+      <span class="pf-v6-screen-reader">Success:</span>
+      This is success helper text
+    </span>
   </div>
 </div>
 <div class="pf-v6-c-helper-text">
@@ -148,7 +130,10 @@ cssPrefix: pf-v6-c-helper-text
     <span class="pf-v6-c-helper-text__item-icon">
       <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
     </span>
-    <span class="pf-v6-c-helper-text__item-text">This is error helper text</span>
+    <span class="pf-v6-c-helper-text__item-text">
+      <span class="pf-v6-screen-reader">Error:</span>
+      This is error helper text
+    </span>
   </div>
 </div>
 
@@ -157,30 +142,35 @@ cssPrefix: pf-v6-c-helper-text
 ### Dynamic list
 
 ```html
-<div class="pf-v6-c-helper-text">
-  <div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
+<ul class="pf-v6-c-helper-text" role="list">
+  <li class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
     <span class="pf-v6-c-helper-text__item-icon">
       <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
     </span>
-    <span class="pf-v6-c-helper-text__item-text">Must be at least 14 characters</span>
-  </div>
-  <div class="pf-v6-c-helper-text__item pf-m-error pf-m-dynamic">
+    <span class="pf-v6-c-helper-text__item-text">
+      <span class="pf-v6-screen-reader">Success:</span>
+      Must be at least 14 characters
+    </span>
+  </li>
+  <li class="pf-v6-c-helper-text__item pf-m-error pf-m-dynamic">
     <span class="pf-v6-c-helper-text__item-icon">
       <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
     </span>
-    <span
-      class="pf-v6-c-helper-text__item-text"
-    >Cannot contain any variation of the word "redhat"</span>
-  </div>
-  <div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
+    <span class="pf-v6-c-helper-text__item-text">
+      <span class="pf-v6-screen-reader">Error:</span>
+      Cannot contain any variation of the word "redhat"
+    </span>
+  </li>
+  <li class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
     <span class="pf-v6-c-helper-text__item-icon">
       <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
     </span>
-    <span
-      class="pf-v6-c-helper-text__item-text"
-    >Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols</span>
-  </div>
-</div>
+    <span class="pf-v6-c-helper-text__item-text">
+      <span class="pf-v6-screen-reader">Success:</span>
+      Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols
+    </span>
+  </li>
+</ul>
 
 ```