@patternfly/patternfly 6.3.0-prerelease.64 → 6.3.0-prerelease.66

package/components/FormControl/form-control.css

@@ -158,6 +158,12 @@
 .pf-v6-c-form-control > :is(input, select) {
   text-overflow: ellipsis;
 }
+.pf-v6-c-form-control > select {
+  background-color: var(--pf-v6-c-form-control--BackgroundColor);
+}
+.pf-v6-c-form-control > select * {
+  color: var(--pf-v6-c-form-control--Color);
+}
 .pf-v6-c-form-control:has(input) {
   --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__input--PaddingBlockStart);
   --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__input--PaddingBlockEnd);
@@ -303,7 +309,6 @@
   --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__select--PaddingInlineStart);
   --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) + var(--pf-v6-c-form-control__icon--FontSize));
   --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
-  background-color: var(--pf-v6-c-form-control--BackgroundColor);
 }
 .pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
   padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);

package/components/FormControl/form-control.scss

@@ -205,6 +205,14 @@
     text-overflow: ellipsis;
   }
 
+  > select {
+    background-color: var(--#{$form-control}--BackgroundColor); // needed for OS/browser combos where dark theme styles aren't applied properly. DO NOT REMOVE!
+
+    * {
+      color: var(--#{$form-control}--Color); // needed for OS/browser combos where dark theme styles aren't applied properly. DO NOT REMOVE!
+    }
+  }
+
   @at-root .#{$form-control} {
     &:has(input) {
       --#{$form-control}--PaddingBlockStart: var(--#{$form-control}__input--PaddingBlockStart);
@@ -393,9 +401,6 @@
       --#{$form-control}--PaddingInlineEnd: calc(var(--#{$form-control}__select--PaddingInlineEnd) - 1px);
       --#{$form-control}--PaddingInlineStart: calc(var(--#{$form-control}__select--PaddingInlineStart) - 4px);
     }
-
-    // We need this property for certain Linux distros/non-Mac OS where dark theme styles aren't applied properly.
-    background-color: var(--#{$form-control}--BackgroundColor);
   }
 
   &.pf-m-placeholder > select {

package/components/_index.css

@@ -7588,6 +7588,12 @@ ul) {
 .pf-v6-c-form-control > :is(input, select) {
   text-overflow: ellipsis;
 }
+.pf-v6-c-form-control > select {
+  background-color: var(--pf-v6-c-form-control--BackgroundColor);
+}
+.pf-v6-c-form-control > select * {
+  color: var(--pf-v6-c-form-control--Color);
+}
 .pf-v6-c-form-control:has(input) {
   --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__input--PaddingBlockStart);
   --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__input--PaddingBlockEnd);
@@ -7733,7 +7739,6 @@ ul) {
   --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__select--PaddingInlineStart);
   --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) + var(--pf-v6-c-form-control__icon--FontSize));
   --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
-  background-color: var(--pf-v6-c-form-control--BackgroundColor);
 }
 .pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
   padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);

package/docs/components/ClipboardCopy/examples/ClipboardCopy.md

@@ -500,7 +500,7 @@ cssPrefix: pf-v6-c-clipboard-copy
 ```html
 <div class="pf-v6-c-clipboard-copy pf-m-inline pf-m-truncate">
   <span class="pf-v6-c-clipboard-copy__text">
-    <span class="pf-v6-c-truncate">
+    <span class="pf-v6-c-truncate" tabindex="0">
       <span
         class="pf-v6-c-truncate__start"
       >This lengthy, copyable content will be truncated with default settings when the truncation prop is simply set to true. This is useful for quickly applying truncation without needing to worry about any other properties to set.</span>

package/docs/components/DataList/examples/DataList.md

@@ -1885,6 +1885,7 @@ When a list item includes more than one block of content, it can be difficult fo
         </div>
         <div
           class="pf-v6-c-data-list__cell pf-m-truncate"
+          tabindex="0"
         >This text will truncate because it is very very long.</div>
         <div
           class="pf-v6-c-data-list__cell pf-m-break-word"
@@ -1898,15 +1899,19 @@ When a list item includes more than one block of content, it can be difficult fo
       <div class="pf-v6-c-data-list__item-content">
         <div
           class="pf-v6-c-data-list__cell"
+          tabindex="0"
         >This text will truncate because it is very very long. This text will truncate because it is very very long.</div>
         <div
           class="pf-v6-c-data-list__cell"
+          tabindex="0"
         >This text will truncate because it is very very long. This text will truncate because it is very very long.</div>
         <div
           class="pf-v6-c-data-list__cell"
+          tabindex="0"
         >This text will truncate because it is very very long. This text will truncate because it is very very long.</div>
         <div
           class="pf-v6-c-data-list__cell"
+          tabindex="0"
         >This text will truncate because it is very very long. This text will truncate because it is very very long.</div>
       </div>
     </div>
@@ -1957,6 +1962,7 @@ When a list item includes more than one block of content, it can be difficult fo
           >This text will wrap to the next line because it has the default behavior of the data list cell.</span>
           <span
             class="pf-v6-c-data-list__text pf-m-truncate"
+            tabindex="0"
           >This is data list text, you can apply `pf-m-truncate` directly to the text. This is data list text, you can apply `pf-m-truncate` directly to the text.</span>
         </div>
         <div class="pf-v6-c-data-list__cell">

package/docs/components/Icon/examples/Icon.md

@@ -285,16 +285,6 @@ extra large
   <span class="pf-v6-c-icon__content">
     <i class="fas fa-check-circle" aria-hidden="true"></i>
   </span>
-  <span class="pf-v6-c-icon__progress">
-    <svg
-      class="pf-v6-c-spinner pf-m-md"
-      role="progressbar"
-      viewBox="0 0 100 100"
-      aria-label="Loading..."
-    >
-      <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
-    </svg>
-  </span>
 </span>
 
 ```

package/docs/components/JumpLinks/examples/JumpLinks.md

@@ -7,8 +7,12 @@ cssPrefix: pf-v6-c-jump-links
 ### Horizontal default
 
 ```html
-<nav class="pf-v6-c-jump-links">
-  <ul class="pf-v6-c-jump-links__list" role="list">
+<nav class="pf-v6-c-jump-links" aria-label="Horizontal default example">
+  <ul
+    class="pf-v6-c-jump-links__list"
+    role="list"
+    aria-label="Horizontal default example"
+  >
     <li class="pf-v6-c-jump-links__item">
       <span class="pf-v6-c-jump-links__link">
         <a class="pf-v6-c-button pf-m-link" href="#">
@@ -18,7 +22,7 @@ cssPrefix: pf-v6-c-jump-links
         </a>
       </span>
     </li>
-    <li class="pf-v6-c-jump-links__item pf-m-current">
+    <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
       <span class="pf-v6-c-jump-links__link">
         <a class="pf-v6-c-button pf-m-link" href="#">
           <span class="pf-v6-c-button__text">
@@ -44,8 +48,15 @@ cssPrefix: pf-v6-c-jump-links
 ### Horizontal with centered list
 
 ```html
-<nav class="pf-v6-c-jump-links pf-m-center">
-  <ul class="pf-v6-c-jump-links__list" role="list">
+<nav
+  class="pf-v6-c-jump-links pf-m-center"
+  aria-label="Horizontal with centered list example"
+>
+  <ul
+    class="pf-v6-c-jump-links__list"
+    role="list"
+    aria-label="Horizontal with centered list example"
+  >
     <li class="pf-v6-c-jump-links__item">
       <span class="pf-v6-c-jump-links__link">
         <a class="pf-v6-c-button pf-m-link" href="#">
@@ -55,7 +66,7 @@ cssPrefix: pf-v6-c-jump-links
         </a>
       </span>
     </li>
-    <li class="pf-v6-c-jump-links__item pf-m-current">
+    <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
       <span class="pf-v6-c-jump-links__link">
         <a class="pf-v6-c-button pf-m-link" href="#">
           <span class="pf-v6-c-button__text">
@@ -81,12 +92,21 @@ cssPrefix: pf-v6-c-jump-links
 ### Horizontal with label
 
 ```html
-<nav class="pf-v6-c-jump-links" aria-label="Jump to section">
+<nav class="pf-v6-c-jump-links" aria-label="Horizontal with label example">
   <div class="pf-v6-c-jump-links__main">
-    <div class="pf-v6-c-jump-links__header">
-      <div class="pf-v6-c-jump-links__label">Jump to section</div>
+    <div
+      class="pf-v6-c-jump-links__header"
+      id="horizontal-with-label-header-one"
+    >
+      <div
+        class="pf-v6-c-jump-links__label"
+      >Jump to horizontal with label example sections one</div>
     </div>
-    <ul class="pf-v6-c-jump-links__list" role="list">
+    <ul
+      class="pf-v6-c-jump-links__list"
+      role="list"
+      aria-labelledby="horizontal-with-label-header-one"
+    >
       <li class="pf-v6-c-jump-links__item">
         <span class="pf-v6-c-jump-links__link">
           <a class="pf-v6-c-button pf-m-link" href="#">
@@ -96,7 +116,7 @@ cssPrefix: pf-v6-c-jump-links
           </a>
         </span>
       </li>
-      <li class="pf-v6-c-jump-links__item pf-m-current">
+      <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
         <span class="pf-v6-c-jump-links__link">
           <a class="pf-v6-c-button pf-m-link" href="#">
             <span class="pf-v6-c-button__text">
@@ -118,12 +138,24 @@ cssPrefix: pf-v6-c-jump-links
   </div>
 </nav>
 <br />
-<nav class="pf-v6-c-jump-links pf-m-center" aria-label="Jump to section">
+<nav
+  class="pf-v6-c-jump-links pf-m-center"
+  aria-label="Horizontal with label second example"
+>
   <div class="pf-v6-c-jump-links__main">
-    <div class="pf-v6-c-jump-links__header">
-      <div class="pf-v6-c-jump-links__label">Jump to section</div>
+    <div
+      class="pf-v6-c-jump-links__header"
+      id="horizontal-with-label-header-two"
+    >
+      <div
+        class="pf-v6-c-jump-links__label"
+      >Jump to horizontal with label example sections two</div>
     </div>
-    <ul class="pf-v6-c-jump-links__list" role="list">
+    <ul
+      class="pf-v6-c-jump-links__list"
+      role="list"
+      aria-labelledby="horizontal-with-label-header-two"
+    >
       <li class="pf-v6-c-jump-links__item">
         <span class="pf-v6-c-jump-links__link">
           <a class="pf-v6-c-button pf-m-link" href="#">
@@ -133,7 +165,7 @@ cssPrefix: pf-v6-c-jump-links
           </a>
         </span>
       </li>
-      <li class="pf-v6-c-jump-links__item pf-m-current">
+      <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
         <span class="pf-v6-c-jump-links__link">
           <a class="pf-v6-c-button pf-m-link" href="#">
             <span class="pf-v6-c-button__text">
@@ -160,8 +192,15 @@ cssPrefix: pf-v6-c-jump-links
 ### Vertical default
 
 ```html
-<nav class="pf-v6-c-jump-links pf-m-vertical">
-  <ul class="pf-v6-c-jump-links__list" role="list">
+<nav
+  class="pf-v6-c-jump-links pf-m-vertical"
+  aria-label="Vertical default example"
+>
+  <ul
+    class="pf-v6-c-jump-links__list"
+    role="list"
+    aria-label="Vertical default example"
+  >
     <li class="pf-v6-c-jump-links__item">
       <span class="pf-v6-c-jump-links__link">
         <a class="pf-v6-c-button pf-m-link" href="#">
@@ -171,7 +210,7 @@ cssPrefix: pf-v6-c-jump-links
         </a>
       </span>
     </li>
-    <li class="pf-v6-c-jump-links__item pf-m-current">
+    <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
       <span class="pf-v6-c-jump-links__link">
         <a class="pf-v6-c-button pf-m-link" href="#">
           <span class="pf-v6-c-button__text">
@@ -215,11 +254,20 @@ cssPrefix: pf-v6-c-jump-links
 ### Vertical with label
 
 ```html
-<nav class="pf-v6-c-jump-links pf-m-vertical" aria-label="Jump to section">
-  <div class="pf-v6-c-jump-links__header">
-    <div class="pf-v6-c-jump-links__label">Jump to section</div>
+<nav
+  class="pf-v6-c-jump-links pf-m-vertical"
+  aria-label="Vertical with label example"
+>
+  <div class="pf-v6-c-jump-links__header" id="vertical-with-label-header">
+    <div
+      class="pf-v6-c-jump-links__label"
+    >Jump to vertical with label example sections</div>
   </div>
-  <ul class="pf-v6-c-jump-links__list" role="list">
+  <ul
+    class="pf-v6-c-jump-links__list"
+    role="list"
+    aria-labelledby="vertical-with-label-header"
+  >
     <li class="pf-v6-c-jump-links__item">
       <span class="pf-v6-c-jump-links__link">
         <a class="pf-v6-c-button pf-m-link" href="#">
@@ -229,7 +277,7 @@ cssPrefix: pf-v6-c-jump-links
         </a>
       </span>
     </li>
-    <li class="pf-v6-c-jump-links__item pf-m-current">
+    <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
       <span class="pf-v6-c-jump-links__link">
         <a class="pf-v6-c-button pf-m-link" href="#">
           <span class="pf-v6-c-button__text">
@@ -273,12 +321,24 @@ cssPrefix: pf-v6-c-jump-links
 ### Vertical with inactive subsections
 
 ```html
-<nav class="pf-v6-c-jump-links pf-m-vertical" aria-label="Jump to section">
-  <div class="pf-v6-c-jump-links__header">
-    <div class="pf-v6-c-jump-links__label">Jump to section</div>
+<nav
+  class="pf-v6-c-jump-links pf-m-vertical"
+  aria-label="Vertical with inactive subsections example"
+>
+  <div
+    class="pf-v6-c-jump-links__header"
+    id="vertical-with-inactive-subsections-header"
+  >
+    <div
+      class="pf-v6-c-jump-links__label"
+    >Jump to vertical with inactive subsections example sections</div>
   </div>
-  <ul class="pf-v6-c-jump-links__list" role="list">
-    <li class="pf-v6-c-jump-links__item pf-m-current">
+  <ul
+    class="pf-v6-c-jump-links__list"
+    role="list"
+    aria-labelledby="vertical-with-inactive-subsections-header"
+  >
+    <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
       <span class="pf-v6-c-jump-links__link">
         <a class="pf-v6-c-button pf-m-link" href="#">
           <span class="pf-v6-c-button__text">
@@ -304,7 +364,11 @@ cssPrefix: pf-v6-c-jump-links
           </span>
         </a>
       </span>
-      <ul class="pf-v6-c-jump-links__list" role="list">
+      <ul
+        class="pf-v6-c-jump-links__list"
+        role="list"
+        aria-label="Second inactive subsection"
+      >
         <li class="pf-v6-c-jump-links__item">
           <span class="pf-v6-c-jump-links__link">
             <a class="pf-v6-c-button pf-m-link" href="#">
@@ -351,11 +415,23 @@ cssPrefix: pf-v6-c-jump-links
 ### Vertical with active subsections
 
 ```html
-<nav class="pf-v6-c-jump-links pf-m-vertical" aria-label="Jump to section">
-  <div class="pf-v6-c-jump-links__header">
-    <div class="pf-v6-c-jump-links__label">Jump to section</div>
+<nav
+  class="pf-v6-c-jump-links pf-m-vertical"
+  aria-label="Vertical with active subsections example"
+>
+  <div
+    class="pf-v6-c-jump-links__header"
+    id="vertical-with-active-subsections-header"
+  >
+    <div
+      class="pf-v6-c-jump-links__label"
+    >Jump to vertical with active subsections example sections</div>
   </div>
-  <ul class="pf-v6-c-jump-links__list" role="list">
+  <ul
+    class="pf-v6-c-jump-links__list"
+    role="list"
+    aria-labelledby="vertical-with-active-subsections-header"
+  >
     <li class="pf-v6-c-jump-links__item">
       <span class="pf-v6-c-jump-links__link">
         <a class="pf-v6-c-button pf-m-link" href="#">
@@ -382,8 +458,15 @@ cssPrefix: pf-v6-c-jump-links
           </span>
         </a>
       </span>
-      <ul class="pf-v6-c-jump-links__list" role="list">
-        <li class="pf-v6-c-jump-links__item pf-m-current">
+      <ul
+        class="pf-v6-c-jump-links__list"
+        role="list"
+        aria-label="Second active subsection"
+      >
+        <li
+          class="pf-v6-c-jump-links__item pf-m-current"
+          aria-current="location"
+        >
           <span class="pf-v6-c-jump-links__link">
             <a class="pf-v6-c-button pf-m-link" href="#">
               <span class="pf-v6-c-button__text">
@@ -431,26 +514,26 @@ cssPrefix: pf-v6-c-jump-links
 ```html
 <nav
   class="pf-v6-c-jump-links pf-m-vertical pf-m-expandable"
-  aria-label="Jump to section"
+  aria-label="Expandable example"
 >
-  <div class="pf-v6-c-jump-links__header">
+  <div class="pf-v6-c-jump-links__header" id="expandable-header-header">
     <div class="pf-v6-c-jump-links__toggle">
-      <button
-        class="pf-v6-c-button pf-m-plain"
-        type="button"
-        aria-label="Toggle jump links"
-      >
+      <button class="pf-v6-c-button pf-m-plain" type="button">
         <span class="pf-v6-c-button__icon pf-m-start">
           <span class="pf-v6-c-jump-links__toggle-icon">
             <i class="fas fa-angle-right" aria-hidden="true"></i>
           </span>
         </span>
-        <span class="pf-v6-c-button__text">Jump to section</span>
+        <span class="pf-v6-c-button__text">Jump to expandable example sections</span>
       </button>
     </div>
-    <div class="pf-v6-c-jump-links__label">Jump to section</div>
+    <div class="pf-v6-c-jump-links__label">Jump to expandable example sections</div>
   </div>
-  <ul class="pf-v6-c-jump-links__list" role="list">
+  <ul
+    class="pf-v6-c-jump-links__list"
+    role="list"
+    aria-labelledby="expandable-header-header"
+  >
     <li class="pf-v6-c-jump-links__item">
       <span class="pf-v6-c-jump-links__link">
         <a class="pf-v6-c-button pf-m-link" href="#">
@@ -460,7 +543,7 @@ cssPrefix: pf-v6-c-jump-links
         </a>
       </span>
     </li>
-    <li class="pf-v6-c-jump-links__item pf-m-current">
+    <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
       <span class="pf-v6-c-jump-links__link">
         <a class="pf-v6-c-button pf-m-link" href="#">
           <span class="pf-v6-c-button__text">
@@ -506,27 +589,26 @@ cssPrefix: pf-v6-c-jump-links
 ```html
 <nav
   class="pf-v6-c-jump-links pf-m-vertical pf-m-expandable pf-m-expanded"
-  aria-label="Jump to section"
+  aria-label="Expanded example"
 >
-  <div class="pf-v6-c-jump-links__header">
+  <div class="pf-v6-c-jump-links__header" id="expanded-header">
     <div class="pf-v6-c-jump-links__toggle">
-      <button
-        class="pf-v6-c-button pf-m-plain"
-        type="button"
-        aria-expanded="true"
-        aria-label="Toggle jump links"
-      >
+      <button class="pf-v6-c-button pf-m-plain" type="button">
         <span class="pf-v6-c-button__icon pf-m-start">
           <span class="pf-v6-c-jump-links__toggle-icon">
             <i class="fas fa-angle-right" aria-hidden="true"></i>
           </span>
         </span>
-        <span class="pf-v6-c-button__text">Jump to section</span>
+        <span class="pf-v6-c-button__text">Jump to expanded example sections</span>
       </button>
     </div>
-    <div class="pf-v6-c-jump-links__label">Jump to section</div>
+    <div class="pf-v6-c-jump-links__label">Jump to expanded example sections</div>
   </div>
-  <ul class="pf-v6-c-jump-links__list" role="list">
+  <ul
+    class="pf-v6-c-jump-links__list"
+    role="list"
+    aria-labelledby="expanded-header"
+  >
     <li class="pf-v6-c-jump-links__item">
       <span class="pf-v6-c-jump-links__link">
         <a class="pf-v6-c-button pf-m-link" href="#">
@@ -536,7 +618,7 @@ cssPrefix: pf-v6-c-jump-links
         </a>
       </span>
     </li>
-    <li class="pf-v6-c-jump-links__item pf-m-current">
+    <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
       <span class="pf-v6-c-jump-links__link">
         <a class="pf-v6-c-button pf-m-link" href="#">
           <span class="pf-v6-c-button__text">
@@ -582,26 +664,30 @@ cssPrefix: pf-v6-c-jump-links
 ```html
 <nav
   class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl pf-m-expandable"
-  aria-label="Jump to section"
+  aria-label="Expandable responsive"
 >
-  <div class="pf-v6-c-jump-links__header">
+  <div class="pf-v6-c-jump-links__header" id="expandable-responsive-header">
     <div class="pf-v6-c-jump-links__toggle">
-      <button
-        class="pf-v6-c-button pf-m-plain"
-        type="button"
-        aria-label="Toggle jump links"
-      >
+      <button class="pf-v6-c-button pf-m-plain" type="button">
         <span class="pf-v6-c-button__icon pf-m-start">
           <span class="pf-v6-c-jump-links__toggle-icon">
             <i class="fas fa-angle-right" aria-hidden="true"></i>
           </span>
         </span>
-        <span class="pf-v6-c-button__text">Jump to section</span>
+        <span
+          class="pf-v6-c-button__text"
+        >Jump to expandable responsive example sections</span>
       </button>
     </div>
-    <div class="pf-v6-c-jump-links__label">Jump to section</div>
+    <div
+      class="pf-v6-c-jump-links__label"
+    >Jump to expandable responsive example sections</div>
   </div>
-  <ul class="pf-v6-c-jump-links__list" role="list">
+  <ul
+    class="pf-v6-c-jump-links__list"
+    role="list"
+    aria-labelledby="expandable-responsive-header"
+  >
     <li class="pf-v6-c-jump-links__item">
       <span class="pf-v6-c-jump-links__link">
         <a class="pf-v6-c-button pf-m-link" href="#">
@@ -611,7 +697,7 @@ cssPrefix: pf-v6-c-jump-links
         </a>
       </span>
     </li>
-    <li class="pf-v6-c-jump-links__item pf-m-current">
+    <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
       <span class="pf-v6-c-jump-links__link">
         <a class="pf-v6-c-button pf-m-link" href="#">
           <span class="pf-v6-c-button__text">
@@ -657,14 +743,11 @@ cssPrefix: pf-v6-c-jump-links
 ```html
 <nav
   class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl pf-m-expandable"
+  aria-label="Expandable responsive with no label"
 >
   <div class="pf-v6-c-jump-links__header">
     <div class="pf-v6-c-jump-links__toggle">
-      <button
-        class="pf-v6-c-button pf-m-plain"
-        type="button"
-        aria-label="Toggle jump links"
-      >
+      <button class="pf-v6-c-button pf-m-plain" type="button">
         <span class="pf-v6-c-button__icon pf-m-start">
           <span class="pf-v6-c-jump-links__toggle-icon">
             <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -674,7 +757,11 @@ cssPrefix: pf-v6-c-jump-links
       </button>
     </div>
   </div>
-  <ul class="pf-v6-c-jump-links__list" role="list">
+  <ul
+    class="pf-v6-c-jump-links__list"
+    role="list"
+    aria-label="Expandable responsive with no label example"
+  >
     <li class="pf-v6-c-jump-links__item">
       <span class="pf-v6-c-jump-links__link">
         <a class="pf-v6-c-button pf-m-link" href="#">
@@ -684,7 +771,7 @@ cssPrefix: pf-v6-c-jump-links
         </a>
       </span>
     </li>
-    <li class="pf-v6-c-jump-links__item pf-m-current">
+    <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
       <span class="pf-v6-c-jump-links__link">
         <a class="pf-v6-c-button pf-m-link" href="#">
           <span class="pf-v6-c-button__text">

package/docs/components/Progress/examples/Progress.md

@@ -336,6 +336,7 @@ cssPrefix: pf-v6-c-progress
   <div
     class="pf-v6-c-progress__description pf-m-truncate"
     id="progress-truncate-description-example-description"
+    tabindex="0"
   >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis ultricies lectus, eu lobortis mauris. Morbi pretium arcu id rhoncus mollis. Donec accumsan tincidunt enim nec varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse potenti.</div>
   <div class="pf-v6-c-progress__status" aria-hidden="true">
     <span class="pf-v6-c-progress__measure">33%</span>
@@ -425,7 +426,7 @@ If the status that displays with the bar is not a percentage, then the ARIA tag
 When conveying status, you should ensure:
 
 * There is visible helper text that explains the status.
-* The helper text includes the status icon, as seen in our [basic helper text example](/components/helper-text/html#basic).
+* The helper text includes the status icon, as seen in our HTML [helper text component](/components/helper-text).
 * The helper text is linked to the `.pf-v6-c-progress__bar[role="progressbar"]` element via an `aria-describedby` attribute, as seen in the [progress helper text example](#helper-text).
 
 ### Success

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>