@patternfly/patternfly 6.3.0-prerelease.60 → 6.3.0-prerelease.62

package/components/Menu/menu.css

@@ -26,7 +26,11 @@
   --pf-v6-c-menu__search--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-menu__search--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-menu__footer--BoxShadow: none;
+  --pf-v6-c-menu__footer--BorderColor: transparent;
+  --pf-v6-c-menu__footer--BorderWidth: 0;
   --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
+  --pf-v6-c-menu--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-menu--m-scrollable__footer--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-menu__list-item--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
@@ -346,6 +350,8 @@
 .pf-v6-c-menu.pf-m-scrollable {
   --pf-v6-c-menu__content--MaxHeight: var(--pf-v6-c-menu--m-scrollable__content--MaxHeight);
   --pf-v6-c-menu__footer--BoxShadow: var(--pf-v6-c-menu--m-scrollable__footer--BoxShadow);
+  --pf-v6-c-menu__footer--BorderColor: var(--pf-v6-c-menu--m-scrollable__footer--BorderColor);
+  --pf-v6-c-menu__footer--BorderWidth: var(--pf-v6-c-menu--m-scrollable__footer--BorderWidth);
   --pf-v6-c-menu__footer--PaddingBlockStart: calc(var(--pf-v6-c-menu__item--PaddingBlockStart) + var(--pf-v6-c-menu--RowGap));
   --pf-v6-c-menu__footer--PaddingBlockEnd: calc(var(--pf-v6-c-menu__item--PaddingBlockStart) + var(--pf-v6-c-menu--RowGap));
   overflow: hidden;
@@ -387,6 +393,7 @@
   padding-block-end: var(--pf-v6-c-menu__footer--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-menu__footer--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-menu__footer--PaddingInlineEnd);
+  border-block-start: var(--pf-v6-c-menu__footer--BorderWidth) solid var(--pf-v6-c-menu__footer--BorderColor);
   box-shadow: var(--pf-v6-c-menu__footer--BoxShadow);
 }
 

package/components/Menu/menu.scss

@@ -41,7 +41,11 @@
 
   // * Menu footer
   --#{$menu}__footer--BoxShadow: none;
+  --#{$menu}__footer--BorderColor: transparent;
+  --#{$menu}__footer--BorderWidth: 0;
   --#{$menu}--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
+  --#{$menu}--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$menu}--m-scrollable__footer--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
 
   // * Menu list item
   --#{$menu}__list-item--Color: var(--pf-t--global--text--color--regular);
@@ -401,6 +405,8 @@
   &.pf-m-scrollable {
     --#{$menu}__content--MaxHeight: var(--#{$menu}--m-scrollable__content--MaxHeight);
     --#{$menu}__footer--BoxShadow: var(--#{$menu}--m-scrollable__footer--BoxShadow);
+    --#{$menu}__footer--BorderColor: var(--#{$menu}--m-scrollable__footer--BorderColor);
+    --#{$menu}__footer--BorderWidth: var(--#{$menu}--m-scrollable__footer--BorderWidth);
     --#{$menu}__footer--PaddingBlockStart: calc(var(--#{$menu}__item--PaddingBlockStart) + var(--#{$menu}--RowGap));
     --#{$menu}__footer--PaddingBlockEnd: calc(var(--#{$menu}__item--PaddingBlockStart) + var(--#{$menu}--RowGap));
 
@@ -452,6 +458,7 @@
   padding-block-end: var(--#{$menu}__footer--PaddingBlockEnd);
   padding-inline-start: var(--#{$menu}__footer--PaddingInlineStart);
   padding-inline-end: var(--#{$menu}__footer--PaddingInlineEnd);
+  border-block-start: var(--#{$menu}__footer--BorderWidth) solid var(--#{$menu}__footer--BorderColor);
   box-shadow: var(--#{$menu}__footer--BoxShadow);
 }
 

package/components/Panel/panel.css

@@ -29,11 +29,15 @@
   --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__footer--BoxShadow: none;
+  --pf-v6-c-panel__footer--BorderColor: transparent;
+  --pf-v6-c-panel__footer--BorderWidth: 0;
   --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
   --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
   --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
   --pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-panel--m-scrollable__footer--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
 }
 
 .pf-v6-c-panel {
@@ -72,6 +76,8 @@
   --pf-v6-c-panel__footer--BoxShadow: var(--pf-v6-c-panel--m-scrollable__footer--BoxShadow);
   --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart);
   --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd);
+  --pf-v6-c-panel__footer--BorderColor: var(--pf-v6-c-panel--m-scrollable__footer--BorderColor);
+  --pf-v6-c-panel__footer--BorderWidth: var(--pf-v6-c-panel--m-scrollable__footer--BorderWidth);
 }
 
 .pf-v6-c-panel__header {
@@ -98,5 +104,6 @@
   padding-block-end: var(--pf-v6-c-panel__footer--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-panel__footer--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-panel__footer--PaddingInlineEnd);
+  border-block-start: var(--pf-v6-c-panel__footer--BorderWidth) solid var(--pf-v6-c-panel__footer--BorderColor);
   box-shadow: var(--pf-v6-c-panel__footer--BoxShadow);
 }

package/components/Panel/panel.scss

@@ -47,6 +47,8 @@
   --#{$panel}__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --#{$panel}__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --#{$panel}__footer--BoxShadow: none;
+  --#{$panel}__footer--BorderColor: transparent;
+  --#{$panel}__footer--BorderWidth: 0;
 
   // scrollable
   --#{$panel}--m-scrollable__main--MaxHeight: #{pf-size-prem(300px)};
@@ -54,6 +56,8 @@
   --#{$panel}--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
   --#{$panel}--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --#{$panel}--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$panel}--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$panel}--m-scrollable__footer--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
 }
 
 .#{$panel} {
@@ -96,6 +100,8 @@
     --#{$panel}__footer--BoxShadow: var(--#{$panel}--m-scrollable__footer--BoxShadow);
     --#{$panel}__footer--PaddingBlockStart: var(--#{$panel}--m-scrollable__footer--PaddingBlockStart);
     --#{$panel}__footer--PaddingBlockEnd: var(--#{$panel}--m-scrollable__footer--PaddingBlockEnd);
+    --#{$panel}__footer--BorderColor: var(--#{$panel}--m-scrollable__footer--BorderColor);
+    --#{$panel}__footer--BorderWidth: var(--#{$panel}--m-scrollable__footer--BorderWidth);
   }
 }
 
@@ -123,5 +129,6 @@
   padding-block-end: var(--#{$panel}__footer--PaddingBlockEnd);
   padding-inline-start: var(--#{$panel}__footer--PaddingInlineStart);
   padding-inline-end: var(--#{$panel}__footer--PaddingInlineEnd);
+  border-block-start: var(--#{$panel}__footer--BorderWidth) solid var(--#{$panel}__footer--BorderColor);
   box-shadow: var(--#{$panel}__footer--BoxShadow);
 }

package/components/Wizard/wizard.css

@@ -94,6 +94,8 @@
   --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
   --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v6-c-wizard__nav--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --pf-v6-c-wizard__nav--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-wizard__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --pf-v6-c-wizard__nav--Width: 100%;
   --pf-v6-c-wizard__nav--lg--Width: 15.625rem;
@@ -127,6 +129,7 @@
   .pf-v6-c-wizard {
     --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
     --pf-v6-c-wizard__nav--BoxShadow: none;
+    --pf-v6-c-wizard__nav--BorderBlockEndWidth: 0;
   }
 }
 
@@ -313,6 +316,7 @@
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   background-color: var(--pf-v6-c-wizard__nav--BackgroundColor);
+  border-block-end: var(--pf-v6-c-wizard__nav--BorderBlockEndWidth) solid var(--pf-v6-c-wizard__nav--BorderBlockEndColor);
   box-shadow: var(--pf-v6-c-wizard__nav--BoxShadow);
 }
 .pf-v6-c-wizard__nav.pf-m-expanded {

package/components/Wizard/wizard.scss

@@ -138,6 +138,8 @@
   // Nav
   --#{$wizard}__nav--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$wizard}__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$wizard}__nav--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --#{$wizard}__nav--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
   --#{$wizard}__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --#{$wizard}__nav--Width: 100%;
   --#{$wizard}__nav--lg--Width: #{pf-size-prem(250px)};
@@ -147,6 +149,7 @@
   @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
     --#{$wizard}__nav--Width: var(--#{$wizard}__nav--lg--Width);
     --#{$wizard}__nav--BoxShadow: none;
+    --#{$wizard}__nav--BorderBlockEndWidth: 0;
   }
 
   // Nav list (nested)
@@ -371,8 +374,8 @@
 
 .#{$wizard}__nav {
   position: absolute;
- inset-block-start: 0;
- inset-inline-start: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   z-index: var(--#{$wizard}__nav--ZIndex);
   display: none;
   width: var(--#{$wizard}__nav--Width);
@@ -380,6 +383,7 @@
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   background-color: var(--#{$wizard}__nav--BackgroundColor);
+  border-block-end: var(--#{$wizard}__nav--BorderBlockEndWidth) solid var(--#{$wizard}__nav--BorderBlockEndColor);
   box-shadow: var(--#{$wizard}__nav--BoxShadow);
 
   &.pf-m-expanded {

package/components/_index.css

@@ -10257,7 +10257,11 @@ ul.pf-v6-c-list {
   --pf-v6-c-menu__search--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-menu__search--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-menu__footer--BoxShadow: none;
+  --pf-v6-c-menu__footer--BorderColor: transparent;
+  --pf-v6-c-menu__footer--BorderWidth: 0;
   --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
+  --pf-v6-c-menu--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-menu--m-scrollable__footer--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-menu__list-item--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
@@ -10577,6 +10581,8 @@ ul.pf-v6-c-list {
 .pf-v6-c-menu.pf-m-scrollable {
   --pf-v6-c-menu__content--MaxHeight: var(--pf-v6-c-menu--m-scrollable__content--MaxHeight);
   --pf-v6-c-menu__footer--BoxShadow: var(--pf-v6-c-menu--m-scrollable__footer--BoxShadow);
+  --pf-v6-c-menu__footer--BorderColor: var(--pf-v6-c-menu--m-scrollable__footer--BorderColor);
+  --pf-v6-c-menu__footer--BorderWidth: var(--pf-v6-c-menu--m-scrollable__footer--BorderWidth);
   --pf-v6-c-menu__footer--PaddingBlockStart: calc(var(--pf-v6-c-menu__item--PaddingBlockStart) + var(--pf-v6-c-menu--RowGap));
   --pf-v6-c-menu__footer--PaddingBlockEnd: calc(var(--pf-v6-c-menu__item--PaddingBlockStart) + var(--pf-v6-c-menu--RowGap));
   overflow: hidden;
@@ -10618,6 +10624,7 @@ ul.pf-v6-c-list {
   padding-block-end: var(--pf-v6-c-menu__footer--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-menu__footer--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-menu__footer--PaddingInlineEnd);
+  border-block-start: var(--pf-v6-c-menu__footer--BorderWidth) solid var(--pf-v6-c-menu__footer--BorderColor);
   box-shadow: var(--pf-v6-c-menu__footer--BoxShadow);
 }
 
@@ -13617,11 +13624,15 @@ ul.pf-v6-c-list {
   --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__footer--BoxShadow: none;
+  --pf-v6-c-panel__footer--BorderColor: transparent;
+  --pf-v6-c-panel__footer--BorderWidth: 0;
   --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
   --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
   --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
   --pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-panel--m-scrollable__footer--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
 }
 
 .pf-v6-c-panel {
@@ -13660,6 +13671,8 @@ ul.pf-v6-c-list {
   --pf-v6-c-panel__footer--BoxShadow: var(--pf-v6-c-panel--m-scrollable__footer--BoxShadow);
   --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart);
   --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd);
+  --pf-v6-c-panel__footer--BorderColor: var(--pf-v6-c-panel--m-scrollable__footer--BorderColor);
+  --pf-v6-c-panel__footer--BorderWidth: var(--pf-v6-c-panel--m-scrollable__footer--BorderWidth);
 }
 
 .pf-v6-c-panel__header {
@@ -13686,6 +13699,7 @@ ul.pf-v6-c-list {
   padding-block-end: var(--pf-v6-c-panel__footer--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-panel__footer--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-panel__footer--PaddingInlineEnd);
+  border-block-start: var(--pf-v6-c-panel__footer--BorderWidth) solid var(--pf-v6-c-panel__footer--BorderColor);
   box-shadow: var(--pf-v6-c-panel__footer--BoxShadow);
 }
 
@@ -23622,6 +23636,8 @@ label.pf-v6-c-tree-view__node-text {
   --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
   --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v6-c-wizard__nav--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --pf-v6-c-wizard__nav--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-wizard__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --pf-v6-c-wizard__nav--Width: 100%;
   --pf-v6-c-wizard__nav--lg--Width: 15.625rem;
@@ -23655,6 +23671,7 @@ label.pf-v6-c-tree-view__node-text {
   .pf-v6-c-wizard {
     --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
     --pf-v6-c-wizard__nav--BoxShadow: none;
+    --pf-v6-c-wizard__nav--BorderBlockEndWidth: 0;
   }
 }
 
@@ -23841,6 +23858,7 @@ label.pf-v6-c-tree-view__node-text {
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   background-color: var(--pf-v6-c-wizard__nav--BackgroundColor);
+  border-block-end: var(--pf-v6-c-wizard__nav--BorderBlockEndWidth) solid var(--pf-v6-c-wizard__nav--BorderBlockEndColor);
   box-shadow: var(--pf-v6-c-wizard__nav--BoxShadow);
 }
 .pf-v6-c-wizard__nav.pf-m-expanded {

package/docs/components/CodeBlock/examples/CodeBlock.md

@@ -88,6 +88,8 @@ name: azure-sample-repo<div
   class="pf-v6-c-expandable-section__content"
   hidden
   id="code-block-expandable-content"
+  role="region"
+  aria-labelledby="code-block-expandable-toggle"
 >
   spec:
   connectionConfig:
@@ -99,6 +101,7 @@ name: azure-sample-repo<div
       <div class="pf-v6-c-expandable-section__toggle">
         <button
           class="pf-v6-c-button pf-m-link"
+          id="code-block-expandable-toggle"
           type="button"
           aria-controls="code-block-expandable-content"
         >
@@ -157,6 +160,8 @@ name: azure-sample-repo<div
 ><div
   class="pf-v6-c-expandable-section__content"
   id="code-block-expandable-expanded-content"
+  role="region"
+  aria-labelledby="code-block-expandable-expanded-toggle"
 >
   spec:
   connectionConfig:
@@ -168,6 +173,7 @@ name: azure-sample-repo<div
       <div class="pf-v6-c-expandable-section__toggle">
         <button
           class="pf-v6-c-button pf-m-link"
+          id="code-block-expandable-expanded-toggle"
           type="button"
           aria-expanded="true"
           aria-controls="code-block-expandable-expanded-content"

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

@@ -9,7 +9,12 @@ 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>
@@ -21,6 +26,9 @@ cssPrefix: pf-v6-c-expandable-section
   <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,7 +39,13 @@ 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="true">
+    <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>
@@ -42,6 +56,9 @@ cssPrefix: pf-v6-c-expandable-section
   </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,7 +69,13 @@ 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="true">
+    <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>
@@ -63,6 +86,9 @@ cssPrefix: pf-v6-c-expandable-section
   </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,7 +99,12 @@ 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>
@@ -87,6 +118,9 @@ cssPrefix: pf-v6-c-expandable-section
   <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>
 
@@ -99,7 +133,13 @@ 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="true">
+    <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>
@@ -112,6 +152,9 @@ cssPrefix: pf-v6-c-expandable-section
   </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>
 
@@ -124,7 +167,13 @@ 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="true">
+    <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>
@@ -137,6 +186,9 @@ cssPrefix: pf-v6-c-expandable-section
   </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>
 
@@ -153,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>
@@ -164,6 +218,7 @@ 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="true"
           aria-controls="detached-toggle-content"
@@ -188,9 +243,17 @@ 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">
+    <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>
@@ -204,12 +267,17 @@ 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="true"
+      aria-controls="truncate-expansion-expanded-content"
     >
       <span class="pf-v6-c-button__text">Show less truncated content</span>
     </button>

package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md

@@ -139,7 +139,7 @@ cssPrefix: pf-v6-c-multiple-file-upload
   <div class="pf-v6-c-multiple-file-upload__status">
     <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="-toggle" type="button">
           <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>
@@ -157,7 +157,13 @@ cssPrefix: pf-v6-c-multiple-file-upload
           </span>
         </button>
       </div>
-      <div class="pf-v6-c-expandable-section__content" hidden>
+      <div
+        class="pf-v6-c-expandable-section__content"
+        hidden
+        id="-content"
+        role="region"
+        aria-labelledby="-toggle"
+      >
         <ul class="pf-v6-c-multiple-file-upload__status-list" role="list">
           <li class="pf-v6-c-multiple-file-upload__status-item">
             <div class="pf-v6-c-multiple-file-upload__status-item-icon">
@@ -348,6 +354,7 @@ cssPrefix: pf-v6-c-multiple-file-upload
       <div class="pf-v6-c-expandable-section__toggle">
         <button
           class="pf-v6-c-button pf-m-link"
+          id="-toggle"
           type="button"
           aria-expanded="true"
         >
@@ -368,7 +375,12 @@ cssPrefix: pf-v6-c-multiple-file-upload
           </span>
         </button>
       </div>
-      <div class="pf-v6-c-expandable-section__content">
+      <div
+        class="pf-v6-c-expandable-section__content"
+        id="-content"
+        role="region"
+        aria-labelledby="-toggle"
+      >
         <ul class="pf-v6-c-multiple-file-upload__status-list" role="list">
           <li class="pf-v6-c-multiple-file-upload__status-item">
             <div class="pf-v6-c-multiple-file-upload__status-item-icon">
@@ -559,6 +571,7 @@ cssPrefix: pf-v6-c-multiple-file-upload
       <div class="pf-v6-c-expandable-section__toggle">
         <button
           class="pf-v6-c-button pf-m-link"
+          id="-toggle"
           type="button"
           aria-expanded="true"
         >
@@ -579,7 +592,12 @@ cssPrefix: pf-v6-c-multiple-file-upload
           </span>
         </button>
       </div>
-      <div class="pf-v6-c-expandable-section__content">
+      <div
+        class="pf-v6-c-expandable-section__content"
+        id="-content"
+        role="region"
+        aria-labelledby="-toggle"
+      >
         <ul class="pf-v6-c-multiple-file-upload__status-list" role="list">
           <li class="pf-v6-c-multiple-file-upload__status-item">
             <div class="pf-v6-c-multiple-file-upload__status-item-icon">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.3.0-prerelease.60",
+  "version": "6.3.0-prerelease.62",
   "keywords": [],
   "license": "MIT",
   "engines": {