@patternfly/patternfly 6.3.0-prerelease.4 → 6.3.0-prerelease.41

package/docs/components/Breadcrumb/examples/Breadcrumb.md

@@ -161,7 +161,7 @@ cssPrefix: pf-v6-c-breadcrumb
       </span>
       <span class="pf-v6-c-breadcrumb__dropdown">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text"
+          class="pf-v6-c-menu-toggle pf-m-text pf-m-small pf-m-plain"
           type="button"
           aria-expanded="false"
           aria-label="Menu toggle"

package/docs/components/Button/examples/Button.md

@@ -1906,7 +1906,19 @@ For when a plain/icon button is placed inline with text
   aria-label="More info"
 >
   <span class="pf-v6-c-button__icon">
-    <i class="fas fa-question-circle" aria-hidden="true"></i>
+    <svg
+      class="pf-v6-svg"
+      viewBox="0 0 1024 1024"
+      fill="currentColor"
+      aria-hidden="true"
+      role="img"
+      width="1em"
+      height="1em"
+    >
+      <path
+        d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
+      />
+    </svg>
   </span>
 </button>
 .
@@ -2010,7 +2022,36 @@ A favorite button should use a plain button with the star icon. Applying `.pf-m-
   aria-label="not starred"
 >
   <span class="pf-v6-c-button__icon">
-    <i class="fas fa-star" aria-hidden="true"></i>
+    <span class="pf-v6-c-button__icon-favorite">
+      <svg
+        class="pf-v6-svg"
+        viewBox="0 0 576 512"
+        fill="currentColor"
+        aria-hidden="true"
+        role="img"
+        width="1em"
+        height="1em"
+      >
+        <path
+          d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
+        />
+      </svg>
+    </span>
+    <span class="pf-v6-c-button__icon-favorited">
+      <svg
+        class="pf-v6-svg"
+        viewBox="0 0 576 512"
+        fill="currentColor"
+        aria-hidden="true"
+        role="img"
+        width="1em"
+        height="1em"
+      >
+        <path
+          d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
+        />
+      </svg>
+    </span>
   </span>
 </button>
 <button
@@ -2019,7 +2060,117 @@ A favorite button should use a plain button with the star icon. Applying `.pf-m-
   aria-label="starred"
 >
   <span class="pf-v6-c-button__icon">
-    <i class="fas fa-star" aria-hidden="true"></i>
+    <span class="pf-v6-c-button__icon-favorite">
+      <svg
+        class="pf-v6-svg"
+        viewBox="0 0 576 512"
+        fill="currentColor"
+        aria-hidden="true"
+        role="img"
+        width="1em"
+        height="1em"
+      >
+        <path
+          d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
+        />
+      </svg>
+    </span>
+    <span class="pf-v6-c-button__icon-favorited">
+      <svg
+        class="pf-v6-svg"
+        viewBox="0 0 576 512"
+        fill="currentColor"
+        aria-hidden="true"
+        role="img"
+        width="1em"
+        height="1em"
+      >
+        <path
+          d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
+        />
+      </svg>
+    </span>
+  </span>
+</button>
+
+```
+
+### Settings
+
+```html
+<button
+  class="pf-v6-c-button pf-m-settings pf-m-plain"
+  type="button"
+  aria-label="Settings"
+>
+  <span class="pf-v6-c-button__icon">
+    <i class="fas fa-cog" aria-hidden="true"></i>
+  </span>
+</button>
+
+```
+
+### Hamburger
+
+```html
+<button
+  class="pf-v6-c-button pf-m-hamburger pf-m-plain"
+  type="button"
+  aria-expanded="false"
+  aria-label="Hamburger"
+>
+  <span class="pf-v6-c-button__icon">
+    <svg
+      viewBox="0 0 10 10"
+      class="pf-v6-c-button--hamburger-icon pf-v6-svg"
+      width="1em"
+      height="1em"
+    >
+      <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
+      <path class="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5" />
+      <path class="pf-v6-c-button--hamburger-icon--arrow" d="M1,5 L1,5 L1,5" />
+      <path class="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9" />
+    </svg>
+  </span>
+</button>
+<button
+  class="pf-v6-c-button pf-m-expand pf-m-hamburger pf-m-plain"
+  type="button"
+  aria-expanded="false"
+  aria-label="Hamburger"
+>
+  <span class="pf-v6-c-button__icon">
+    <svg
+      viewBox="0 0 10 10"
+      class="pf-v6-c-button--hamburger-icon pf-v6-svg"
+      width="1em"
+      height="1em"
+    >
+      <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
+      <path class="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5" />
+      <path class="pf-v6-c-button--hamburger-icon--arrow" d="M1,5 L1,5 L1,5" />
+      <path class="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9" />
+    </svg>
+  </span>
+</button>
+<button
+  class="pf-v6-c-button pf-m-collapse pf-m-hamburger pf-m-expanded pf-m-plain"
+  type="button"
+  aria-expanded="true"
+  aria-label="Hamburger"
+>
+  <span class="pf-v6-c-button__icon">
+    <svg
+      viewBox="0 0 10 10"
+      class="pf-v6-c-button--hamburger-icon pf-v6-svg"
+      width="1em"
+      height="1em"
+    >
+      <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
+      <path class="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5" />
+      <path class="pf-v6-c-button--hamburger-icon--arrow" d="M1,5 L1,5 L1,5" />
+      <path class="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9" />
+    </svg>
   </span>
 </button>
 
@@ -2056,7 +2207,7 @@ Semantic buttons and links are important for usability as well as accessibility.
 | `.pf-v6-c-button` | `<button>, <span>` |  Initiates a button. Always use it with a modifier class. **Required** |
 | `.pf-v6-c-button__icon` | `<span>` | Initiates a button icon. |
 | `.pf-v6-c-button__progress` | `<span>` | Initiates a button progress container. |
-| `.pf-v6-c-button__count` | `<span>` | Initiates a button count container. **Note:** Count should only be used on link buttons.|
+| `.pf-v6-c-button__count` | `<span>` | Initiates a button count container. **Note:** Count should only be used on link buttons. |
 | `.pf-m-primary` | `.pf-v6-c-button` | Modifies for primary styles. |
 | `.pf-m-secondary` | `.pf-v6-c-button` | Modifies for secondary styles. |
 | `.pf-m-tertiary` | `.pf-v6-c-button` | Modifies for tertiary styles. |
@@ -2079,5 +2230,9 @@ Semantic buttons and links are important for usability as well as accessibility.
 | `.pf-m-in-progress` | `.pf-v6-c-button` | Indicates that the button is in the in progress state. |
 | `.pf-m-stateful` | `.pf-v6-c-button` | Indicates that the button is used for one of read, unread, and attention states. **Note:** Always use with a modifier of `.pf-m-read`, `.pf-m-unread`, or `.pf-m-attention`. |
 | `.pf-m-notify` | `.pf-v6-c-button` | Indicates that the button should show the user notification of an event. **Note:** This is intended for use with a bell icon in the notification badge. |
-| `.pf-m-favorite` | `.pf-v6-c-button .pf-m-plain` | Modifies a plain button to be a favorite button. **Note:** This is intended for use with a star icon. |
-| `.pf-m-favorited` | `.pf-v6-c-button .pf-m-plain .pf-m-favorite` | Modifies a favorite button to indicate that item is favorited.  |
+| `.pf-m-favorite` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to be a favorite button. **Note:** This is intended for use with a star icon. |
+| `.pf-m-favorited` | `.pf-v6-c-button.pf-m-plain.pf-m-favorite` | Modifies a favorite button to indicate that item is favorited. |
+| `.pf-m-settings` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to be a settings button. |
+| `.pf-m-hamburger` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to be a hamburger button. |
+| `.pf-m-expand` | `.pf-v6-c-button.pf-m-hamburger` | Modifies a hamburger button to indicate that it will expand a menu. |
+| `.pf-m-collapse` | `.pf-v6-c-button.pf-m-hamburger` | Modifies a hamburger button to indicate that it will collapse a menu. |

package/docs/components/Card/examples/Card.md

@@ -101,7 +101,7 @@ cssPrefix: pf-v6-c-card
         class="pf-v6-c-menu-toggle pf-m-plain"
         type="button"
         aria-expanded="false"
-        aria-label="Menu toggle"
+        aria-label="Card menu toggle"
         id="card-action-example-1-menu-toggle-kebab"
       >
         <span class="pf-v6-c-menu-toggle__icon">
@@ -142,7 +142,7 @@ cssPrefix: pf-v6-c-card
         class="pf-v6-c-menu-toggle pf-m-plain"
         type="button"
         aria-expanded="false"
-        aria-label="Menu toggle"
+        aria-label="Card menu toggle"
         id="card-action-example-2-menu-toggle-kebab"
       >
         <span class="pf-v6-c-menu-toggle__icon">
@@ -185,7 +185,7 @@ cssPrefix: pf-v6-c-card
         class="pf-v6-c-menu-toggle pf-m-plain"
         type="button"
         aria-expanded="false"
-        aria-label="Menu toggle"
+        aria-label="Card menu toggle"
         id="card-action-example-3-menu-toggle-kebab"
       >
         <span class="pf-v6-c-menu-toggle__icon">
@@ -1434,7 +1434,7 @@ cssPrefix: pf-v6-c-card
         class="pf-v6-c-menu-toggle pf-m-plain"
         type="button"
         aria-expanded="false"
-        aria-label="Menu toggle"
+        aria-label="Card menu toggle"
         id="card-expandable-example-menu-toggle-kebab"
       >
         <span class="pf-v6-c-menu-toggle__icon">
@@ -1497,7 +1497,7 @@ cssPrefix: pf-v6-c-card
         class="pf-v6-c-menu-toggle pf-m-plain"
         type="button"
         aria-expanded="false"
-        aria-label="Menu toggle"
+        aria-label="Card menu toggle"
         id="card-expandable-image-example-menu-toggle-kebab"
       >
         <span class="pf-v6-c-menu-toggle__icon">
@@ -1545,7 +1545,7 @@ cssPrefix: pf-v6-c-card
         class="pf-v6-c-menu-toggle pf-m-plain"
         type="button"
         aria-expanded="false"
-        aria-label="Menu toggle"
+        aria-label="Card menu toggle"
         id="card-expanded-example-menu-toggle-kebab"
       >
         <span class="pf-v6-c-menu-toggle__icon">
@@ -1588,7 +1588,7 @@ cssPrefix: pf-v6-c-card
         class="pf-v6-c-menu-toggle pf-m-plain"
         type="button"
         aria-expanded="false"
-        aria-label="Menu toggle"
+        aria-label="Card menu toggle"
         id="card-full-height-example-menu-toggle-kebab"
       >
         <span class="pf-v6-c-menu-toggle__icon">
@@ -1631,7 +1631,7 @@ cssPrefix: pf-v6-c-card
         class="pf-v6-c-menu-toggle pf-m-plain"
         type="button"
         aria-expanded="false"
-        aria-label="Menu toggle"
+        aria-label="Card menu toggle"
         id="card-toggle-on-right-example-menu-toggle-kebab"
       >
         <span class="pf-v6-c-menu-toggle__icon">

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

@@ -83,7 +83,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
 kind: HelmChartRepository
 metadata:
 name: azure-sample-repo<div
-  class="pf-v6-c-expandable-section"
+  class="pf-v6-c-expandable-section pf-m-detached"
 ><div
   class="pf-v6-c-expandable-section__content"
   hidden
@@ -95,7 +95,7 @@ name: azure-sample-repo<div
 </div>
 </code>
 </pre>
-    <div class="pf-v6-c-expandable-section">
+    <div class="pf-v6-c-expandable-section pf-m-detached">
       <div class="pf-v6-c-expandable-section__toggle">
         <button
           class="pf-v6-c-button pf-m-link"
@@ -153,7 +153,7 @@ name: azure-sample-repo<div
 kind: HelmChartRepository
 metadata:
 name: azure-sample-repo<div
-  class="pf-v6-c-expandable-section pf-m-expanded"
+  class="pf-v6-c-expandable-section pf-m-expanded pf-m-detached"
 ><div
   class="pf-v6-c-expandable-section__content"
   id="code-block-expandable-expanded-content"
@@ -164,12 +164,12 @@ name: azure-sample-repo<div
 </div>
 </code>
 </pre>
-    <div class="pf-v6-c-expandable-section pf-m-expanded">
+    <div class="pf-v6-c-expandable-section pf-m-expanded pf-m-detached">
       <div class="pf-v6-c-expandable-section__toggle">
         <button
           class="pf-v6-c-button pf-m-link"
           type="button"
-          aria-expanded="true"
+          aria-expanded
           aria-controls="code-block-expandable-expanded-content"
         >
           <span class="pf-v6-c-button__icon pf-m-start">

package/docs/components/CodeEditor/examples/CodeEditor.md

@@ -255,7 +255,19 @@ cssPrefix: pf-v6-c-code-editor
       <div class="pf-v6-c-code-editor__keyboard-shortcuts">
         <button class="pf-v6-c-button pf-m-link" type="button">
           <span class="pf-v6-c-button__icon pf-m-start">
-            <i class="fas fa-question-circle" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 1024 1024"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
+              />
+            </svg>
           </span>
           <span class="pf-v6-c-button__text">View shortcuts</span>
         </button>
@@ -402,7 +414,19 @@ This is an extra container used in React to prevent event propagation if upload
       <div class="pf-v6-c-code-editor__keyboard-shortcuts">
         <button class="pf-v6-c-button pf-m-link" type="button">
           <span class="pf-v6-c-button__icon pf-m-start">
-            <i class="fas fa-question-circle" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 1024 1024"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
+              />
+            </svg>
           </span>
           <span class="pf-v6-c-button__text">View shortcuts</span>
         </button>

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

@@ -165,7 +165,7 @@ When a list item includes more than one block of content, it can be difficult fo
           class="pf-v6-c-menu-toggle pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-checkboxes-actions-addl-cells-item-1-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -212,7 +212,7 @@ When a list item includes more than one block of content, it can be difficult fo
           class="pf-v6-c-menu-toggle pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-checkboxes-actions-addl-cells-item-2-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -269,7 +269,7 @@ When a list item includes more than one block of content, it can be difficult fo
           class="pf-v6-c-menu-toggle pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-checkboxes-actions-addl-cells-item-3-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -373,7 +373,7 @@ When a list item includes more than one block of content, it can be difficult fo
           class="pf-v6-c-menu-toggle pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-expandable-item-1-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -434,7 +434,7 @@ When a list item includes more than one block of content, it can be difficult fo
           class="pf-v6-c-menu-toggle pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-expandable-item-2-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -499,7 +499,7 @@ When a list item includes more than one block of content, it can be difficult fo
           class="pf-v6-c-menu-toggle pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-expandable-item-3-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -573,10 +573,10 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
       <div class="pf-v6-c-data-list__item-action">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
+          class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-expandable-compact-item-1-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -637,10 +637,10 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
       <div class="pf-v6-c-data-list__item-action">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
+          class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-expandable-compact-item-2-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -702,10 +702,10 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
       <div class="pf-v6-c-data-list__item-action">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
+          class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-expandable-compact-item-3-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -782,7 +782,7 @@ When a list item includes more than one block of content, it can be difficult fo
           class="pf-v6-c-menu-toggle pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-expandable-nested-item-1-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -978,7 +978,7 @@ When a list item includes more than one block of content, it can be difficult fo
           class="pf-v6-c-menu-toggle pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-expandable-nested-item-2-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -1043,7 +1043,7 @@ When a list item includes more than one block of content, it can be difficult fo
           class="pf-v6-c-menu-toggle pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-expandable-nested-item-3-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -1115,10 +1115,10 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
       <div class="pf-v6-c-data-list__item-action">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
+          class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-compact-item-1-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -1160,10 +1160,10 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
       <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-lg">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
+          class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-compact-item-2-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -1215,10 +1215,10 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
       <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-xl">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
+          class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-compact-item-3-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -1369,7 +1369,7 @@ When a list item includes more than one block of content, it can be difficult fo
           class="pf-v6-c-menu-toggle pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-flex-modifiers-item-1-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -1458,7 +1458,7 @@ When a list item includes more than one block of content, it can be difficult fo
           class="pf-v6-c-menu-toggle pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-flex-modifiers-2-item-1-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">

package/docs/components/Divider/examples/Divider.md

@@ -18,7 +18,7 @@ cssPrefix: pf-v6-c-divider
 ```html
 <ul role="list">
   <li>List item one</li>
-  <li class="pf-v6-c-divider" role="separator"></li>
+  <li class="pf-v6-c-divider" role="presentation"></li>
   <li>List item two</li>
 </ul>
 

package/docs/components/Drawer/examples/Drawer.md

@@ -550,6 +550,7 @@ cssPrefix: pf-v6-c-drawer
         class="pf-v6-c-drawer__splitter pf-m-vertical"
         role="separator"
         tabindex="0"
+        aria-valuenow="50"
         aria-orientation="vertical"
       >
         <div class="pf-v6-c-drawer__splitter-handle"></div>
@@ -597,6 +598,7 @@ cssPrefix: pf-v6-c-drawer
         class="pf-v6-c-drawer__splitter pf-m-vertical"
         role="separator"
         tabindex="0"
+        aria-valuenow="50"
         aria-orientation="vertical"
       >
         <div class="pf-v6-c-drawer__splitter-handle"></div>
@@ -647,6 +649,7 @@ cssPrefix: pf-v6-c-drawer
         class="pf-v6-c-drawer__splitter"
         role="separator"
         tabindex="0"
+        aria-valuenow="50"
         aria-orientation="horizontal"
       >
         <div class="pf-v6-c-drawer__splitter-handle"></div>
@@ -694,6 +697,7 @@ cssPrefix: pf-v6-c-drawer
         class="pf-v6-c-drawer__splitter pf-m-vertical"
         role="separator"
         tabindex="0"
+        aria-valuenow="50"
         aria-orientation="vertical"
       >
         <div class="pf-v6-c-drawer__splitter-handle"></div>