@patternfly/patternfly 6.3.0 → 6.4.0-prerelease.1

package/docs/components/TextInputGroup/examples/TextInputGroup.md

@@ -16,7 +16,7 @@ cssPrefix: pf-v6-c-text-input-group
         class="pf-v6-c-text-input-group__text-input"
         type="text"
         value
-        aria-label="Type to filter"
+        aria-label="Basic"
       />
     </span>
   </div>
@@ -35,7 +35,7 @@ cssPrefix: pf-v6-c-text-input-group
         type="text"
         disabled
         value="Disabled"
-        aria-label="Disabled text input group example input"
+        aria-label="Disabled"
       />
     </span>
   </div>
@@ -56,7 +56,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         class="pf-v6-c-text-input-group__text-input"
         type="text"
         value="Text input group with plain styling"
-        aria-label="Type to filter"
+        aria-label="Plain"
       />
     </span>
   </div>
@@ -78,7 +78,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         type="text"
         placeholder="placeholder"
         value
-        aria-label="Type to filter"
+        aria-label="Utilities and icon with placeholder"
       />
     </span>
   </div>
@@ -86,7 +86,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear utilities and icon with placeholder example"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -107,7 +107,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         class="pf-v6-c-text-input-group__text-input"
         type="text"
         value="Success validation"
-        aria-label="Type to filter"
+        aria-label="Success validation"
       />
       <span class="pf-v6-c-text-input-group__icon pf-m-status">
         <i aria-hidden="true" class="fas fa-check-circle"></i>
@@ -126,7 +126,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         class="pf-v6-c-text-input-group__text-input"
         type="text"
         value="Warning validation with icon at start"
-        aria-label="Type to filter"
+        aria-label="Warning validation"
       />
       <span class="pf-v6-c-text-input-group__icon pf-m-status">
         <i aria-hidden="true" class="fas fa-exclamation-triangle"></i>
@@ -145,6 +145,34 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         class="pf-v6-c-text-input-group__text-input"
         type="text"
         value="Error validation with icon at start and utilities"
+        aria-label="Error validation"
+      />
+      <span class="pf-v6-c-text-input-group__icon pf-m-status">
+        <i aria-hidden="true" class="fas fa-exclamation-circle"></i>
+      </span>
+    </span>
+  </div>
+  <div class="pf-v6-c-text-input-group__utilities">
+    <button
+      class="pf-v6-c-button pf-m-plain"
+      type="button"
+      aria-label="Clear error validation example"
+    >
+      <span class="pf-v6-c-button__text">
+        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
+</div>
+
+<br />
+<div class="pf-v6-c-text-input-group pf-m-error">
+  <div class="pf-v6-c-text-input-group__main">
+    <span class="pf-v6-c-text-input-group__text">
+      <input
+        class="pf-v6-c-text-input-group__text-input"
+        type="text"
+        value="Error validation with no icon but with utilities"
         aria-label="Type to filter"
       />
       <span class="pf-v6-c-text-input-group__icon pf-m-status">
@@ -334,7 +362,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         class="pf-v6-c-text-input-group__text-input"
         type="text"
         value
-        aria-label="Type to filter"
+        aria-label="Filters"
       />
     </span>
   </div>
@@ -342,7 +370,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear filter example"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -695,7 +723,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         class="pf-v6-c-text-input-group__text-input"
         type="text"
         value
-        aria-label="Type to filter"
+        aria-label="Filters expanded"
       />
     </span>
   </div>
@@ -703,7 +731,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear filters expanded example"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -755,7 +783,7 @@ The React implementation can be found in the [search input](/components/search-i
         type="text"
         placeholder="Find by name"
         value
-        aria-label="Search input"
+        aria-label="Search input group"
       />
     </span>
   </div>
@@ -777,7 +805,7 @@ The React implementation can be found in the [search input](/components/search-i
         type="text"
         placeholder="Find by name"
         value="Joh"
-        aria-label="Search input"
+        aria-label="Search input group no match"
       />
     </span>
   </div>
@@ -785,7 +813,7 @@ The React implementation can be found in the [search input](/components/search-i
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear search input group no match"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -810,16 +838,19 @@ The React implementation can be found in the [search input](/components/search-i
         type="text"
         placeholder="Find by name"
         value="John Doe"
-        aria-label="Search input"
+        aria-label="Search input group match with result count"
       />
     </span>
   </div>
   <div class="pf-v6-c-text-input-group__utilities">
-    <span class="pf-v6-c-badge pf-m-read">3</span>
+    <span class="pf-v6-c-badge pf-m-read">
+      <span aria-hidden="true">3</span>
+      <span class="pf-v6-screen-reader">3 matching results</span>
+    </span>
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear search input group match with result count"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -844,16 +875,36 @@ The React implementation can be found in the [search input](/components/search-i
         type="text"
         placeholder="Find by name"
         value="John Doe"
-        aria-label="Search input"
+        aria-label="Search input group match with navigable options"
       />
     </span>
   </div>
   <div class="pf-v6-c-text-input-group__utilities">
-    <span class="pf-v6-c-badge pf-m-read">1 / 3</span>
+    <span class="pf-v6-c-badge pf-m-read">
+      <span aria-hidden="true">1 / 3</span>
+      <span class="pf-v6-screen-reader">Showing result 1 / 3</span>
+    </span>
+    <div class="pf-v6-c-text-input-group__group">
+      <button
+        class="pf-v6-c-button pf-m-plain"
+        type="button"
+        aria-label="Previous"
+        disabled
+      >
+        <span class="pf-v6-c-button__icon">
+          <i class="fas fa-angle-up fa-fw" aria-hidden="true"></i>
+        </span>
+      </button>
+      <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Next">
+        <span class="pf-v6-c-button__icon">
+          <i class="fas fa-angle-down fa-fw" aria-hidden="true"></i>
+        </span>
+      </button>
+    </div>
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear search input group match with navigable options"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -882,7 +933,7 @@ The React implementation can be found in the [search input](/components/search-i
             type="text"
             placeholder="Search"
             value
-            aria-label="Search input"
+            aria-label="Search input group collapsed"
           />
         </span>
       </div>
@@ -892,7 +943,7 @@ The React implementation can be found in the [search input](/components/search-i
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Open search"
+      aria-label="Open search input group collapsed"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-search fa-fw" aria-hidden="true"></i>
@@ -900,7 +951,11 @@ The React implementation can be found in the [search input](/components/search-i
     </button>
   </div>
   <div class="pf-v6-c-input-group__item pf-m-search-action pf-m-plain">
-    <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
+    <button
+      class="pf-v6-c-button pf-m-plain"
+      type="button"
+      aria-label="Close search input group expandable"
+    >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
       </span>
@@ -926,7 +981,7 @@ The React implementation can be found in the [search input](/components/search-i
             type="text"
             placeholder="Search"
             value
-            aria-label="Search input"
+            aria-label="Search input group expanded"
           />
         </span>
       </div>
@@ -936,7 +991,7 @@ The React implementation can be found in the [search input](/components/search-i
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Open search"
+      aria-label="Open search input group collapsed"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-search fa-fw" aria-hidden="true"></i>
@@ -944,7 +999,11 @@ The React implementation can be found in the [search input](/components/search-i
     </button>
   </div>
   <div class="pf-v6-c-input-group__item pf-m-search-action pf-m-plain">
-    <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
+    <button
+      class="pf-v6-c-button pf-m-plain"
+      type="button"
+      aria-label="Close search input group expandable"
+    >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
       </span>
@@ -970,7 +1029,7 @@ The React implementation can be found in the [search input](/components/search-i
             type="text"
             placeholder="Find by name"
             value
-            aria-label="Search input"
+            aria-label="Search input group with submit button"
           />
         </span>
       </div>
@@ -980,7 +1039,7 @@ The React implementation can be found in the [search input](/components/search-i
     <button
       class="pf-v6-c-button pf-m-control"
       type="submit"
-      aria-label="Search"
+      aria-label="Submit search input group"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-arrow-right" aria-hidden="true"></i>
@@ -1006,7 +1065,7 @@ The React implementation can be found in the [search input](/components/search-i
             class="pf-v6-c-text-input-group__text-input"
             type="text"
             value="username:root firstname:ned"
-            aria-label="Search input"
+            aria-label="Search input group advanced search"
           />
         </span>
       </div>
@@ -1014,7 +1073,7 @@ The React implementation can be found in the [search input](/components/search-i
         <button
           class="pf-v6-c-button pf-m-plain"
           type="button"
-          aria-label="Clear input"
+          aria-label="Clear advance search input group collapsed"
         >
           <span class="pf-v6-c-button__icon">
             <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -1028,7 +1087,7 @@ The React implementation can be found in the [search input](/components/search-i
       class="pf-v6-c-button pf-m-control"
       type="button"
       aria-expanded="false"
-      aria-label="Advanced search"
+      aria-label="Advanced search collapsed"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-caret-down" aria-hidden="true"></i>
@@ -1039,7 +1098,7 @@ The React implementation can be found in the [search input](/components/search-i
     <button
       class="pf-v6-c-button pf-m-control"
       type="submit"
-      aria-label="Search"
+      aria-label="Search advance search input group collapsed"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-arrow-right" aria-hidden="true"></i>
@@ -1065,7 +1124,7 @@ The React implementation can be found in the [search input](/components/search-i
             class="pf-v6-c-text-input-group__text-input"
             type="text"
             value="username:root firstname:ned"
-            aria-label="Search input"
+            aria-label="Search input group advanced search expanded"
           />
         </span>
       </div>
@@ -1073,7 +1132,7 @@ The React implementation can be found in the [search input](/components/search-i
         <button
           class="pf-v6-c-button pf-m-plain"
           type="button"
-          aria-label="Clear input"
+          aria-label="Clear advance search input group expanded"
         >
           <span class="pf-v6-c-button__icon">
             <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -1087,7 +1146,7 @@ The React implementation can be found in the [search input](/components/search-i
       class="pf-v6-c-button pf-m-expanded pf-m-control"
       type="button"
       aria-expanded="true"
-      aria-label="Advanced search"
+      aria-label="Advanced search expanded"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-caret-down" aria-hidden="true"></i>
@@ -1098,7 +1157,7 @@ The React implementation can be found in the [search input](/components/search-i
     <button
       class="pf-v6-c-button pf-m-control"
       type="submit"
-      aria-label="Search"
+      aria-label="Search advance search input group expanded"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-arrow-right" aria-hidden="true"></i>
@@ -1183,10 +1242,20 @@ The React implementation can be found in the [search input](/components/search-i
         </div>
         <div class="pf-v6-c-form__group pf-m-action">
           <div class="pf-v6-c-form__actions">
-            <button class="pf-v6-c-button pf-m-primary" type="submit">
+            <button
+              class="pf-v6-c-button pf-m-primary"
+              id="submit-advanced-search-expanded"
+              type="submit"
+              aria-labelledby="submit-advanced-search-expanded search-input-group-advanced-search-expanded"
+            >
               <span class="pf-v6-c-button__text">Submit</span>
             </button>
-            <button class="pf-v6-c-button pf-m-link" type="reset">
+            <button
+              class="pf-v6-c-button pf-m-link"
+              id="reset-advanced-search-expanded"
+              type="reset"
+              aria-labelledby="reset-advanced-search-expanded search-input-group-advanced-search-expanded"
+            >
               <span class="pf-v6-c-button__text">Reset</span>
             </button>
           </div>
@@ -1211,7 +1280,7 @@ The React implementation can be found in the [search input](/components/search-i
         class="pf-v6-c-text-input-group__text-input"
         type="text"
         value="app"
-        aria-label="Search input"
+        aria-label="Search input group autocomplete"
       />
     </span>
   </div>
@@ -1219,7 +1288,7 @@ The React implementation can be found in the [search input](/components/search-i
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear autocomplete search input group"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -1287,7 +1356,7 @@ The React implementation can be found in the [search input](/components/search-i
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear autocomple search input group last option hint"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -1328,7 +1397,7 @@ The React implementation can be found in the [search input](/components/search-i
               class="pf-v6-c-text-input-group__text-input"
               type="text"
               value="username:root firstname:n"
-              aria-label="Search input"
+              aria-label="Search input group advanced search expanded with autocomplete"
             />
           </span>
         </div>
@@ -1336,7 +1405,7 @@ The React implementation can be found in the [search input](/components/search-i
           <button
             class="pf-v6-c-button pf-m-plain"
             type="button"
-            aria-label="Clear input"
+            aria-label="Clear advance search input group expanded with autocomplete"
           >
             <span class="pf-v6-c-button__icon">
               <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -1350,7 +1419,7 @@ The React implementation can be found in the [search input](/components/search-i
         class="pf-v6-c-button pf-m-expanded pf-m-control"
         type="button"
         aria-expanded="true"
-        aria-label="Advanced search"
+        aria-label="Advanced search expanded with autocomplete"
       >
         <span class="pf-v6-c-button__icon">
           <i class="fas fa-caret-down" aria-hidden="true"></i>
@@ -1361,7 +1430,7 @@ The React implementation can be found in the [search input](/components/search-i
       <button
         class="pf-v6-c-button pf-m-control"
         type="submit"
-        aria-label="Search"
+        aria-label="Search advanced search input group expanded with autocomplete"
       >
         <span class="pf-v6-c-button__icon">
           <i class="fas fa-arrow-right" aria-hidden="true"></i>
@@ -1446,10 +1515,20 @@ The React implementation can be found in the [search input](/components/search-i
           </div>
           <div class="pf-v6-c-form__group pf-m-action">
             <div class="pf-v6-c-form__actions">
-              <button class="pf-v6-c-button pf-m-primary" type="submit">
+              <button
+                class="pf-v6-c-button pf-m-primary"
+                id="submit-advanced-search-expanded-with-autocomplete"
+                type="submit"
+                aria-labelledby="submit-advanced-search-expanded-with-autocomplete search-input-group-advanced-search-expanded-with-autocomplete"
+              >
                 <span class="pf-v6-c-button__text">Submit</span>
               </button>
-              <button class="pf-v6-c-button pf-m-link" type="reset">
+              <button
+                class="pf-v6-c-button pf-m-link"
+                id="reset-advanced-search-expanded-with-autocomplete"
+                type="submit"
+                aria-labelledby="reset-advanced-search-expanded-with-autocomplete search-input-group-advanced-search-expanded-with-autocomplete"
+              >
                 <span class="pf-v6-c-button__text">Reset</span>
               </button>
             </div>

package/docs/components/Title/examples/Title.md

@@ -19,12 +19,12 @@ cssPrefix: pf-v6-c-title
 ### Heading level modifiers
 
 ```html
-<div class="pf-v6-c-title pf-m-h1">H1-styled title</div>
-<div class="pf-v6-c-title pf-m-h2">H2-styled title</div>
-<div class="pf-v6-c-title pf-m-h3">H3-styled title</div>
-<div class="pf-v6-c-title pf-m-h4">H4-styled title</div>
-<div class="pf-v6-c-title pf-m-h5">H5-styled title</div>
-<div class="pf-v6-c-title pf-m-h6">H6-styled title</div>
+<h1 class="pf-v6-c-title pf-m-h1">H1-styled title</h1>
+<h2 class="pf-v6-c-title pf-m-h2">H2-styled title</h2>
+<h3 class="pf-v6-c-title pf-m-h3">H3-styled title</h3>
+<h4 class="pf-v6-c-title pf-m-h4">H4-styled title</h4>
+<h5 class="pf-v6-c-title pf-m-h5">H5-styled title</h5>
+<h6 class="pf-v6-c-title pf-m-h6">H6-styled title</h6>
 
 ```
 
@@ -33,7 +33,7 @@ cssPrefix: pf-v6-c-title
 ```html
 <h1 class="pf-v6-c-title pf-m-2xl pf-m-page-title">2xl page title</h1>
 
-<div class="pf-v6-c-title pf-m-h1 pf-m-page-title">H1 page title</div>
+<h1 class="pf-v6-c-title pf-m-h1 pf-m-page-title">H1 page title</h1>
 
 ```
 
@@ -58,7 +58,7 @@ The content component defines margin on headers. To regain the same spacing use,
 
 | Class | Applied | Outcome |
 | -- | -- | -- |
-| `.pf-v6-c-title` | `*` |  Initiates a title. Always use it with a modifier class. |
+| `.pf-v6-c-title` | `h1-h6` |  Initiates a title. Always use it with a modifier class. |
 | `.pf-m-4xl` | `.pf-v6-c-title` | Modifies for 4xl size |
 | `.pf-m-3xl` | `.pf-v6-c-title` | Modifies for 3xl size |
 | `.pf-m-2xl` | `.pf-v6-c-title` | Modifies for 2xl size |

package/docs/components/Truncate/examples/Truncate.md

@@ -8,13 +8,15 @@ cssPrefix: pf-v6-c-truncate
 
 The default behavior of the truncate component is to truncate based on whether the content can fit within the width of its parent container, and to prevent text from wrapping. The following examples that use this default behavior render the truncate component inside a resizable container, allowing you to see how the parent container width affects the truncation.
 
+Note that when content is truncated, a tabindex of 0 should also be added to the element to ensure it remains accessible. The examples below however, add a tabindex in both cases as the content is static.
+
 ### Default
 
 When only the `.pf-v6-c-truncate__start` element is used, truncation will occur at the end of the string.
 
 ```html
 <div class="pf-v6-c-truncate--example">
-  <span class="pf-v6-c-truncate">
+  <span class="pf-v6-c-truncate" tabindex="0">
     <span
       class="pf-v6-c-truncate__start"
     >redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip</span>
@@ -29,7 +31,7 @@ When both `.pf-v6-c-truncate__start` and `.pf-v6-c-truncate__end` elements are u
 
 ```html
 <div class="pf-v6-c-truncate--example">
-  <span class="pf-v6-c-truncate">
+  <span class="pf-v6-c-truncate" tabindex="0">
     <span
       class="pf-v6-c-truncate__start"
     >redhat_logo_black_and_white_reversed_simple_</span>
@@ -45,7 +47,7 @@ When only the `.pf-v6-c-truncate__end` element is used, truncation will occur at
 
 ```html
 <div class="pf-v6-c-truncate--example">
-  <span class="pf-v6-c-truncate">
+  <span class="pf-v6-c-truncate" tabindex="0">
     <span
       class="pf-v6-c-truncate__end"
     >redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip</span>
@@ -60,7 +62,7 @@ Apply the `.pf-m-fixed` class to the `.pf-v6-c-truncate` element to implement tr
 
 ```html
 <div>Truncated at end position:</div>
-<span class="pf-v6-c-truncate pf-m-fixed">
+<span class="pf-v6-c-truncate pf-m-fixed" tabindex="0">
   <span
     class="pf-v6-c-truncate__text"
   >redhat_logo_black_and_white_reversed_simple_with_</span>
@@ -70,7 +72,7 @@ Apply the `.pf-m-fixed` class to the `.pf-v6-c-truncate` element to implement tr
 <br />
 <br />
 <div>Truncated at middle position:</div>
-<span class="pf-v6-c-truncate pf-m-fixed">
+<span class="pf-v6-c-truncate pf-m-fixed" tabindex="0">
   <span class="pf-v6-c-truncate__text">redhat_logo_black_and_</span>
   <span class="pf-v6-screen-reader">white_reversed_simple_with_</span>
 
@@ -80,7 +82,7 @@ Apply the `.pf-m-fixed` class to the `.pf-v6-c-truncate` element to implement tr
 <br />
 <br />
 <div>Truncated at start position:</div>
-<span class="pf-v6-c-truncate pf-m-fixed">
+<span class="pf-v6-c-truncate pf-m-fixed" tabindex="0">
   <span class="pf-v6-screen-reader">redhat_logo_black_</span>
 
   <span class="pf-v6-c-truncate__omission" aria-hidden="true">&hellip;</span>