@patternfly/patternfly 4.205.1 → 4.206.0

package/base/_common.scss

@@ -22,6 +22,15 @@
 
 .pf-screen-reader {
   @include pf-u-screen-reader; // for use with assistive technologies
+
+  &.pf-m-full-size {
+    width: 100%;
+    height: 100%;
+  }
+
+  &.pf-m-absolute {
+    position: absolute;
+  }
 }
 
 .pf-m-tabular-nums {

package/base/patternfly-common.css

@@ -17,6 +17,13 @@ html {
   white-space: nowrap;
   border: 0;
 }
+.pf-screen-reader.pf-m-full-size {
+  width: 100%;
+  height: 100%;
+}
+.pf-screen-reader.pf-m-absolute {
+  position: absolute;
+}
 
 .pf-m-tabular-nums {
   font-variant-numeric: tabular-nums;

package/docs/components/AppLauncher/examples/application-launcher.md

@@ -9,17 +9,25 @@ cssPrefix: pf-c-app-launcher
 ### Collapsed
 
 ```html
-<nav class="pf-c-app-launcher" aria-label="Application launcher">
+<nav
+  class="pf-c-app-launcher"
+  aria-label="Application launcher"
+  id="application-launcher-collapsed"
+>
   <button
     class="pf-c-app-launcher__toggle"
     type="button"
-    id="-button"
+    id="application-launcher-collapsed-button"
     aria-expanded="false"
     aria-label="Application launcher"
   >
     <i class="fas fa-th" aria-hidden="true"></i>
   </button>
-  <ul class="pf-c-app-launcher__menu" aria-labelledby="-button" hidden>
+  <ul
+    class="pf-c-app-launcher__menu"
+    aria-labelledby="application-launcher-collapsed-button"
+    hidden
+  >
     <li>
       <a class="pf-c-app-launcher__menu-item" href="#">Link</a>
     </li>
@@ -43,18 +51,26 @@ cssPrefix: pf-c-app-launcher
 ### Disabled
 
 ```html
-<nav class="pf-c-app-launcher" aria-label="Application launcher">
+<nav
+  class="pf-c-app-launcher"
+  aria-label="Application launcher"
+  id="application-launcher-disabled"
+>
   <button
     class="pf-c-app-launcher__toggle"
     type="button"
-    id="-button"
+    id="application-launcher-disabled-button"
     aria-expanded="false"
     aria-label="Application launcher"
     disabled
   >
     <i class="fas fa-th" aria-hidden="true"></i>
   </button>
-  <ul class="pf-c-app-launcher__menu" aria-labelledby="-button" hidden>
+  <ul
+    class="pf-c-app-launcher__menu"
+    aria-labelledby="application-launcher-disabled-button"
+    hidden
+  >
     <li>
       <a class="pf-c-app-launcher__menu-item" href="#">Link</a>
     </li>
@@ -78,17 +94,24 @@ cssPrefix: pf-c-app-launcher
 ### Expanded
 
 ```html
-<nav class="pf-c-app-launcher pf-m-expanded" aria-label="Application launcher">
+<nav
+  class="pf-c-app-launcher pf-m-expanded"
+  aria-label="Application launcher"
+  id="application-launcher-expanded"
+>
   <button
     class="pf-c-app-launcher__toggle"
     type="button"
-    id="-button"
+    id="application-launcher-expanded-button"
     aria-expanded="true"
     aria-label="Application launcher"
   >
     <i class="fas fa-th" aria-hidden="true"></i>
   </button>
-  <ul class="pf-c-app-launcher__menu" aria-labelledby="-button">
+  <ul
+    class="pf-c-app-launcher__menu"
+    aria-labelledby="application-launcher-expanded-button"
+  >
     <li>
       <a class="pf-c-app-launcher__menu-item" href="#">Link</a>
     </li>
@@ -112,11 +135,15 @@ cssPrefix: pf-c-app-launcher
 ### Aligned right
 
 ```html
-<nav class="pf-c-app-launcher pf-m-expanded" aria-label="Application launcher">
+<nav
+  class="pf-c-app-launcher pf-m-expanded"
+  aria-label="Application launcher"
+  id="application-launcher-aligned-right"
+>
   <button
     class="pf-c-app-launcher__toggle"
     type="button"
-    id="-button"
+    id="application-launcher-aligned-right-button"
     aria-expanded="true"
     aria-label="Application launcher"
   >
@@ -124,7 +151,7 @@ cssPrefix: pf-c-app-launcher
   </button>
   <ul
     class="pf-c-app-launcher__menu pf-m-align-right"
-    aria-labelledby="-button"
+    aria-labelledby="application-launcher-aligned-right-button"
   >
     <li>
       <a class="pf-c-app-launcher__menu-item" href="#">Link</a>
@@ -152,17 +179,21 @@ cssPrefix: pf-c-app-launcher
 <nav
   class="pf-c-app-launcher pf-m-expanded pf-m-top"
   aria-label="Application launcher"
+  id="application-launcher-aligned-top"
 >
   <button
     class="pf-c-app-launcher__toggle"
     type="button"
-    id="-button"
+    id="application-launcher-aligned-top-button"
     aria-expanded="true"
     aria-label="Application launcher"
   >
     <i class="fas fa-th" aria-hidden="true"></i>
   </button>
-  <ul class="pf-c-app-launcher__menu" aria-labelledby="-button">
+  <ul
+    class="pf-c-app-launcher__menu"
+    aria-labelledby="application-launcher-aligned-top-button"
+  >
     <li>
       <a class="pf-c-app-launcher__menu-item" href="#">Link</a>
     </li>
@@ -186,11 +217,15 @@ cssPrefix: pf-c-app-launcher
 ### With sections and dividers between sections
 
 ```html
-<nav class="pf-c-app-launcher pf-m-expanded" aria-label="Application launcher">
+<nav
+  class="pf-c-app-launcher pf-m-expanded"
+  aria-label="Application launcher"
+  id="application-launcher-divided-sections"
+>
   <button
     class="pf-c-app-launcher__toggle"
     type="button"
-    id="-button"
+    id="application-launcher-divided-sections-button"
     aria-expanded="true"
     aria-label="Application launcher"
   >
@@ -236,11 +271,15 @@ cssPrefix: pf-c-app-launcher
 ### With sections and dividers between items
 
 ```html
-<nav class="pf-c-app-launcher pf-m-expanded" aria-label="Application launcher">
+<nav
+  class="pf-c-app-launcher pf-m-expanded"
+  aria-label="Application launcher"
+  id="application-launcher-divided-items"
+>
   <button
     class="pf-c-app-launcher__toggle"
     type="button"
-    id="-button"
+    id="application-launcher-divided-items-button"
     aria-expanded="true"
     aria-label="Application launcher"
   >
@@ -286,11 +325,15 @@ cssPrefix: pf-c-app-launcher
 ### With sections, dividers, icons, and external links
 
 ```html
-<nav class="pf-c-app-launcher pf-m-expanded" aria-label="Application launcher">
+<nav
+  class="pf-c-app-launcher pf-m-expanded"
+  aria-label="Application launcher"
+  id="application-launcher-sections-dividers-icons-links"
+>
   <button
     class="pf-c-app-launcher__toggle"
     type="button"
-    id="-button"
+    id="application-launcher-sections-dividers-icons-links-button"
     aria-expanded="true"
     aria-label="Application launcher"
   >
@@ -401,11 +444,15 @@ cssPrefix: pf-c-app-launcher
 ### Favorites
 
 ```html
-<nav class="pf-c-app-launcher pf-m-expanded" aria-label="Application launcher">
+<nav
+  class="pf-c-app-launcher pf-m-expanded"
+  aria-label="Application launcher"
+  id="app-launcher-favorites"
+>
   <button
     class="pf-c-app-launcher__toggle"
     type="button"
-    id="-button"
+    id="app-launcher-favorites-button"
     aria-expanded="true"
     aria-label="Application launcher"
   >

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

@@ -478,7 +478,7 @@ When a list item includes more than one block of content, it can be difficult fo
     <section
       class="pf-c-data-list__expandable-content"
       id="data-list-expandable-content1"
-      aria-label="Primary content details"
+      aria-label="data-list-expandable Primary content details"
     >
       <div
         class="pf-c-data-list__expandable-content-body"
@@ -684,11 +684,11 @@ When a list item includes more than one block of content, it can be difficult fo
   class="pf-c-data-list pf-m-compact"
   role="list"
   aria-label="Expandable data list example"
-  id="data-list-expandable"
+  id="data-list-expandable-compact"
 >
   <li
     class="pf-c-data-list__item pf-m-expanded"
-    aria-labelledby="data-list-expandable-item-1"
+    aria-labelledby="data-list-expandable-compact-item-1"
   >
     <div class="pf-c-data-list__item-row">
       <div class="pf-c-data-list__item-control">
@@ -696,11 +696,11 @@ When a list item includes more than one block of content, it can be difficult fo
           <button
             class="pf-c-button pf-m-plain"
             type="button"
-            aria-labelledby="data-list-expandable-toggle1 data-list-expandable-item1"
-            id="data-list-expandable-toggle1"
+            aria-labelledby="data-list-expandable-compact-toggle1 data-list-expandable-compact-item1"
+            id="data-list-expandable-compact-toggle1"
             aria-label="Toggle details for"
             aria-expanded="true"
-            aria-controls="data-list-expandable-content1"
+            aria-controls="data-list-expandable-compact-content1"
           >
             <div class="pf-c-data-list__toggle-icon">
               <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -713,7 +713,7 @@ When a list item includes more than one block of content, it can be difficult fo
           <i class="fas fa-code-branch" aria-hidden="true"></i>
         </div>
         <div class="pf-c-data-list__cell">
-          <div id="data-list-expandable-item-1">Primary content</div>
+          <div id="data-list-expandable-compact-item-1">Primary content</div>
           <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
           <a href="#">link</a>
         </div>
@@ -729,7 +729,7 @@ When a list item includes more than one block of content, it can be difficult fo
           <div class="pf-c-dropdown">
             <button
               class="pf-c-dropdown__toggle pf-m-plain"
-              id="data-list-expandable-item-1-dropdown-kebab-button"
+              id="data-list-expandable-compact-item-1-dropdown-kebab-button"
               aria-expanded="false"
               type="button"
               aria-label="Actions"
@@ -738,7 +738,7 @@ When a list item includes more than one block of content, it can be difficult fo
             </button>
             <ul
               class="pf-c-dropdown__menu pf-m-align-right"
-              aria-labelledby="data-list-expandable-item-1-dropdown-kebab-button"
+              aria-labelledby="data-list-expandable-compact-item-1-dropdown-kebab-button"
               hidden
             >
               <li>
@@ -773,8 +773,8 @@ When a list item includes more than one block of content, it can be difficult fo
     </div>
     <section
       class="pf-c-data-list__expandable-content"
-      id="data-list-expandable-content1"
-      aria-label="Primary content details"
+      id="data-list-expandable-compact-content1"
+      aria-label="data-list-expandable-compact Primary content details"
     >
       <div
         class="pf-c-data-list__expandable-content-body"
@@ -784,7 +784,7 @@ When a list item includes more than one block of content, it can be difficult fo
 
   <li
     class="pf-c-data-list__item"
-    aria-labelledby="data-list-expandable-item-2"
+    aria-labelledby="data-list-expandable-compact-item-2"
   >
     <div class="pf-c-data-list__item-row">
       <div class="pf-c-data-list__item-control">
@@ -792,11 +792,11 @@ When a list item includes more than one block of content, it can be difficult fo
           <button
             class="pf-c-button pf-m-plain"
             type="button"
-            aria-labelledby="data-list-expandable-toggle2 data-list-expandable-item2"
-            id="data-list-expandable-toggle2"
+            aria-labelledby="data-list-expandable-compact-toggle2 data-list-expandable-compact-item2"
+            id="data-list-expandable-compact-toggle2"
             aria-label="Toggle details for"
             aria-expanded="false"
-            aria-controls="data-list-expandable-content2"
+            aria-controls="data-list-expandable-compact-content2"
           >
             <div class="pf-c-data-list__toggle-icon">
               <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -809,7 +809,7 @@ When a list item includes more than one block of content, it can be difficult fo
           <i class="fas fa-code-branch" aria-hidden="true"></i>
         </div>
         <div class="pf-c-data-list__cell">
-          <span id="data-list-expandable-item-2">Secondary content</span>
+          <span id="data-list-expandable-compact-item-2">Secondary content</span>
           <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
         </div>
         <div class="pf-c-data-list__cell">
@@ -824,7 +824,7 @@ When a list item includes more than one block of content, it can be difficult fo
           <div class="pf-c-dropdown">
             <button
               class="pf-c-dropdown__toggle pf-m-plain"
-              id="data-list-expandable-item-2-dropdown-kebab-button"
+              id="data-list-expandable-compact-item-2-dropdown-kebab-button"
               aria-expanded="false"
               type="button"
               aria-label="Actions"
@@ -833,7 +833,7 @@ When a list item includes more than one block of content, it can be difficult fo
             </button>
             <ul
               class="pf-c-dropdown__menu pf-m-align-right"
-              aria-labelledby="data-list-expandable-item-2-dropdown-kebab-button"
+              aria-labelledby="data-list-expandable-compact-item-2-dropdown-kebab-button"
               hidden
             >
               <li>
@@ -868,7 +868,7 @@ When a list item includes more than one block of content, it can be difficult fo
     </div>
     <section
       class="pf-c-data-list__expandable-content"
-      id="data-list-expandable-content2"
+      id="data-list-expandable-compact-content2"
       aria-label="Secondary content details"
       hidden
     >
@@ -880,7 +880,7 @@ When a list item includes more than one block of content, it can be difficult fo
 
   <li
     class="pf-c-data-list__item pf-m-expanded"
-    aria-labelledby="data-list-expandable-item-3"
+    aria-labelledby="data-list-expandable-compact-item-3"
   >
     <div class="pf-c-data-list__item-row">
       <div class="pf-c-data-list__item-control">
@@ -888,11 +888,11 @@ When a list item includes more than one block of content, it can be difficult fo
           <button
             class="pf-c-button pf-m-plain"
             type="button"
-            aria-labelledby="data-list-expandable-toggle3 data-list-expandable-item3"
-            id="data-list-expandable-toggle3"
+            aria-labelledby="data-list-expandable-compact-toggle3 data-list-expandable-compact-item3"
+            id="data-list-expandable-compact-toggle3"
             aria-label="Toggle details for"
             aria-expanded="true"
-            aria-controls="data-list-expandable-content3"
+            aria-controls="data-list-expandable-compact-content3"
           >
             <div class="pf-c-data-list__toggle-icon">
               <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -905,7 +905,7 @@ When a list item includes more than one block of content, it can be difficult fo
           <i class="fas fa-code-branch" aria-hidden="true"></i>
         </div>
         <div class="pf-c-data-list__cell">
-          <span id="data-list-expandable-item-3">Tertiary content</span>
+          <span id="data-list-expandable-compact-item-3">Tertiary content</span>
           <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
         </div>
         <div class="pf-c-data-list__cell">
@@ -920,7 +920,7 @@ When a list item includes more than one block of content, it can be difficult fo
           <div class="pf-c-dropdown">
             <button
               class="pf-c-dropdown__toggle pf-m-plain"
-              id="data-list-expandable-item-3-dropdown-kebab-button"
+              id="data-list-expandable-compact-item-3-dropdown-kebab-button"
               aria-expanded="false"
               type="button"
               aria-label="Actions"
@@ -929,7 +929,7 @@ When a list item includes more than one block of content, it can be difficult fo
             </button>
             <ul
               class="pf-c-dropdown__menu pf-m-align-right"
-              aria-labelledby="data-list-expandable-item-3-dropdown-kebab-button"
+              aria-labelledby="data-list-expandable-compact-item-3-dropdown-kebab-button"
               hidden
             >
               <li>
@@ -964,7 +964,7 @@ When a list item includes more than one block of content, it can be difficult fo
     </div>
     <section
       class="pf-c-data-list__expandable-content"
-      id="data-list-expandable-content3"
+      id="data-list-expandable-compact-content3"
       aria-label="Tertiary content details"
     >
       <div
@@ -1073,7 +1073,7 @@ When a list item includes more than one block of content, it can be difficult fo
     <section
       class="pf-c-data-list__expandable-content"
       id="data-list-expandable-nested-content1"
-      aria-label="Primary content details"
+      aria-label="data-list-expandable-nested Primary content details"
     >
       <div class="pf-c-data-list__expandable-content-body">
         <ul
@@ -1899,7 +1899,7 @@ When a list item includes more than one block of content, it can be difficult fo
     <section
       class="pf-c-data-list__expandable-content"
       id="data-list-flex-modifiers-2-content1"
-      aria-label="Primary content details"
+      aria-label="data-list-flex-modifiers-2 Primary content details"
     >
       <div
         class="pf-c-data-list__expandable-content-body"
@@ -2034,7 +2034,7 @@ When a list item includes more than one block of content, it can be difficult fo
     <section
       class="pf-c-data-list__expandable-content"
       id="data-list-selectable-expandable-rows-content1"
-      aria-label="Primary content details"
+      aria-label="data-list-selectable-expandable-rows Primary content details"
     >
       <div
         class="pf-c-data-list__expandable-content-body"

package/docs/components/DatePicker/examples/DatePicker.md

@@ -132,8 +132,8 @@ cssPrefix: pf-c-date-picker
         class="pf-c-form-control"
         type="text"
         value="November 20, 2020"
-        id="basic-input"
-        name="basic-input"
+        id="custom-width-input-input"
+        name="custom-width-input-input"
         aria-label="Date picker"
       />
       <button
@@ -162,8 +162,8 @@ cssPrefix: pf-c-date-picker
         class="pf-c-form-control"
         type="text"
         value="November 20, 2020"
-        id="basic-input"
-        name="basic-input"
+        id="custom-width-input-based-on-number-of-characters-input"
+        name="custom-width-input-based-on-number-of-characters-input"
         aria-label="Date picker"
       />
       <button

package/docs/components/LabelGroup/examples/LabelGroup.md

@@ -790,9 +790,9 @@ In addition to the JavaScript management of [editable labels](/components/label#
           <button
             class="pf-c-button pf-m-plain"
             type="button"
-            id="static-labels-editable-group-example-editable-label-static-1-button"
+            id="static-labels-dynamic-label-group-example-editable-label-static-1-button"
             aria-label="Remove"
-            aria-labelledby="static-labels-editable-group-example-editable-label-static-1-button static-labels-editable-group-example-editable-label-static-1-text"
+            aria-labelledby="static-labels-dynamic-label-group-example-editable-label-static-1-button static-labels-dynamic-label-group-example-editable-label-static-1-text"
           >
             <i class="fas fa-times" aria-hidden="true"></i>
           </button>
@@ -804,9 +804,9 @@ In addition to the JavaScript management of [editable labels](/components/label#
           <button
             class="pf-c-button pf-m-plain"
             type="button"
-            id="static-labels-editable-group-example-editable-label-static-2-button"
+            id="static-labels-dynamic-label-group-example-editable-label-static-2-button"
             aria-label="Remove"
-            aria-labelledby="static-labels-editable-group-example-editable-label-static-2-button static-labels-editable-group-example-editable-label-static-2-text"
+            aria-labelledby="static-labels-dynamic-label-group-example-editable-label-static-2-button static-labels-dynamic-label-group-example-editable-label-static-2-text"
           >
             <i class="fas fa-times" aria-hidden="true"></i>
           </button>
@@ -818,9 +818,9 @@ In addition to the JavaScript management of [editable labels](/components/label#
           <button
             class="pf-c-button pf-m-plain"
             type="button"
-            id="static-labels-editable-group-example-editable-label-static-3-button"
+            id="static-labels-dynamic-label-group-example-editable-label-static-3-button"
             aria-label="Remove"
-            aria-labelledby="static-labels-editable-group-example-editable-label-static-3-button static-labels-editable-group-example-editable-label-static-3-text"
+            aria-labelledby="static-labels-dynamic-label-group-example-editable-label-static-3-button static-labels-dynamic-label-group-example-editable-label-static-3-text"
           >
             <i class="fas fa-times" aria-hidden="true"></i>
           </button>
@@ -852,9 +852,9 @@ In addition to the JavaScript management of [editable labels](/components/label#
           <button
             class="pf-c-button pf-m-plain"
             type="button"
-            id="static-labels-editable-group-example-editable-label-static-1-button"
+            id="mixed-labels-dynamic-label-group-example-editable-label-static-1-button"
             aria-label="Remove"
-            aria-labelledby="static-labels-editable-group-example-editable-label-static-1-button static-labels-editable-group-example-editable-label-static-1-text"
+            aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-static-1-button mixed-labels-dynamic-label-group-example-editable-label-static-1-text"
           >
             <i class="fas fa-times" aria-hidden="true"></i>
           </button>
@@ -866,9 +866,9 @@ In addition to the JavaScript management of [editable labels](/components/label#
           <button
             class="pf-c-button pf-m-plain"
             type="button"
-            id="static-labels-editable-group-example-editable-label-static-2-button"
+            id="mixed-labels-dynamic-label-group-example-editable-label-static-2-button"
             aria-label="Remove"
-            aria-labelledby="static-labels-editable-group-example-editable-label-static-2-button static-labels-editable-group-example-editable-label-static-2-text"
+            aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-static-2-button mixed-labels-dynamic-label-group-example-editable-label-static-2-text"
           >
             <i class="fas fa-times" aria-hidden="true"></i>
           </button>
@@ -878,7 +878,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
         <span class="pf-c-label pf-m-blue pf-m-editable">
           <button
             class="pf-c-label__content"
-            id="static-labels-editable-group-example-editable-label-dynamic-1-editable-content"
+            id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-editable-content"
             currvalue="          Dynamic, editable label 1
         "
             aria-label="Editable text"
@@ -887,9 +887,9 @@ In addition to the JavaScript management of [editable labels](/components/label#
           <button
             class="pf-c-button pf-m-plain"
             type="button"
-            id="static-labels-editable-group-example-editable-label-dynamic-1-button"
+            id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-button"
             aria-label="Remove"
-            aria-labelledby="static-labels-editable-group-example-editable-label-dynamic-1-button static-labels-editable-group-example-editable-label-dynamic-1-text"
+            aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-button mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-text"
           >
             <i class="fas fa-times" aria-hidden="true"></i>
           </button>
@@ -899,7 +899,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
         <span class="pf-c-label pf-m-blue pf-m-editable">
           <button
             class="pf-c-label__content"
-            id="static-labels-editable-group-example-editable-label-dynamic-2-editable-content"
+            id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-editable-content"
             currvalue="          Dynamic, editable label 2
         "
             aria-label="Editable text"
@@ -908,9 +908,9 @@ In addition to the JavaScript management of [editable labels](/components/label#
           <button
             class="pf-c-button pf-m-plain"
             type="button"
-            id="static-labels-editable-group-example-editable-label-dynamic-2-button"
+            id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-button"
             aria-label="Remove"
-            aria-labelledby="static-labels-editable-group-example-editable-label-dynamic-2-button static-labels-editable-group-example-editable-label-dynamic-2-text"
+            aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-button mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-text"
           >
             <i class="fas fa-times" aria-hidden="true"></i>
           </button>
@@ -920,7 +920,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
         <span class="pf-c-label pf-m-blue pf-m-active pf-m-editable">
           <button
             class="pf-c-label__content"
-            id="static-labels-editable-group-example-editable-label-dynamic-3-editable-content"
+            id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-editable-content"
             currvalue="          Dynamic, editable label 3
         "
             aria-label="Editable text"
@@ -929,9 +929,9 @@ In addition to the JavaScript management of [editable labels](/components/label#
           <button
             class="pf-c-button pf-m-plain"
             type="button"
-            id="static-labels-editable-group-example-editable-label-dynamic-3-button"
+            id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-button"
             aria-label="Remove"
-            aria-labelledby="static-labels-editable-group-example-editable-label-dynamic-3-button static-labels-editable-group-example-editable-label-dynamic-3-text"
+            aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-button mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-text"
           >
             <i class="fas fa-times" aria-hidden="true"></i>
           </button>