@patternfly/patternfly 4.204.4 → 4.206.0

package/docs/components/Nav/examples/Navigation.md

@@ -698,7 +698,7 @@ cssPrefix: pf-c-nav
     <li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
       <button
         class="pf-c-nav__link"
-        id="expandable-example1"
+        id="expandable-light-example1"
         aria-expanded="true"
       >
         Link 1 (current and expanded example)
@@ -708,7 +708,10 @@ cssPrefix: pf-c-nav
           </span>
         </span>
       </button>
-      <section class="pf-c-nav__subnav" aria-labelledby="expandable-example1">
+      <section
+        class="pf-c-nav__subnav"
+        aria-labelledby="expandable-light-example1"
+      >
         <ul class="pf-c-nav__list">
           <li class="pf-c-nav__item">
             <a href="#" class="pf-c-nav__link">Current link</a>
@@ -730,7 +733,7 @@ cssPrefix: pf-c-nav
     <li class="pf-c-nav__item pf-m-expandable pf-m-expanded">
       <button
         class="pf-c-nav__link"
-        id="expandable-example2"
+        id="expandable-light-example2"
         aria-expanded="true"
       >
         Link 2 (expanded, but not current example)
@@ -742,7 +745,10 @@ cssPrefix: pf-c-nav
           </span>
         </span>
       </button>
-      <section class="pf-c-nav__subnav" aria-labelledby="expandable-example2">
+      <section
+        class="pf-c-nav__subnav"
+        aria-labelledby="expandable-light-example2"
+      >
         <ul class="pf-c-nav__list">
           <li class="pf-c-nav__item">
             <a href="#" class="pf-c-nav__link">Subnav link 1</a>
@@ -756,7 +762,7 @@ cssPrefix: pf-c-nav
     <li class="pf-c-nav__item pf-m-expandable">
       <button
         class="pf-c-nav__link"
-        id="expandable-example3"
+        id="expandable-light-example3"
         aria-expanded="false"
       >
         Link 3
@@ -768,7 +774,7 @@ cssPrefix: pf-c-nav
       </button>
       <section
         class="pf-c-nav__subnav"
-        aria-labelledby="expandable-example3"
+        aria-labelledby="expandable-light-example3"
         hidden
       >
         <ul class="pf-c-nav__list">

package/docs/components/Pagination/examples/Pagination.md

@@ -51,7 +51,7 @@ cssPrefix: pf-c-pagination
       </li>
     </ul>
   </div>
-  <nav class="pf-c-pagination__nav" aria-label="Pagination">
+  <nav class="pf-c-pagination__nav" aria-label="Pagination nav - top example">
     <div class="pf-c-pagination__nav-control pf-m-first">
       <button
         class="pf-c-button pf-m-plain"
@@ -150,7 +150,10 @@ cssPrefix: pf-c-pagination
       </li>
     </ul>
   </div>
-  <nav class="pf-c-pagination__nav" aria-label="Pagination">
+  <nav
+    class="pf-c-pagination__nav"
+    aria-label="Pagination nav - top expanded example"
+  >
     <div class="pf-c-pagination__nav-control pf-m-first">
       <button
         class="pf-c-button pf-m-plain"
@@ -217,7 +220,7 @@ cssPrefix: pf-c-pagination
     <button
       class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
       type="button"
-      id="pagination-options-menu-top-example-toggle"
+      id="pagination-options-menu-top-sticky-example-toggle"
       aria-haspopup="listbox"
       aria-expanded="false"
     >
@@ -231,7 +234,7 @@ cssPrefix: pf-c-pagination
     </button>
     <ul
       class="pf-c-options-menu__menu"
-      aria-labelledby="pagination-options-menu-top-example-toggle"
+      aria-labelledby="pagination-options-menu-top-sticky-example-toggle"
       hidden
     >
       <li>
@@ -250,7 +253,10 @@ cssPrefix: pf-c-pagination
       </li>
     </ul>
   </div>
-  <nav class="pf-c-pagination__nav" aria-label="Pagination">
+  <nav
+    class="pf-c-pagination__nav"
+    aria-label="Pagination nav - top sticky example"
+  >
     <div class="pf-c-pagination__nav-control pf-m-first">
       <button
         class="pf-c-button pf-m-plain"
@@ -360,7 +366,10 @@ cssPrefix: pf-c-pagination
       </li>
     </ul>
   </div>
-  <nav class="pf-c-pagination__nav" aria-label="Pagination">
+  <nav
+    class="pf-c-pagination__nav"
+    aria-label="Pagination nav - indeterminate item count example"
+  >
     <div class="pf-c-pagination__nav-control pf-m-first">
       <button
         class="pf-c-button pf-m-plain"
@@ -455,7 +464,10 @@ cssPrefix: pf-c-pagination
       </li>
     </ul>
   </div>
-  <nav class="pf-c-pagination__nav" aria-label="Pagination">
+  <nav
+    class="pf-c-pagination__nav"
+    aria-label="Pagination nav - bottom example"
+  >
     <div class="pf-c-pagination__nav-control pf-m-first">
       <button
         class="pf-c-button pf-m-plain"
@@ -561,7 +573,10 @@ cssPrefix: pf-c-pagination
       </li>
     </ul>
   </div>
-  <nav class="pf-c-pagination__nav" aria-label="Pagination">
+  <nav
+    class="pf-c-pagination__nav"
+    aria-label="Pagination nav - bottom sticky example"
+  >
     <div class="pf-c-pagination__nav-control pf-m-first">
       <button
         class="pf-c-button pf-m-plain"
@@ -662,7 +677,10 @@ cssPrefix: pf-c-pagination
       </li>
     </ul>
   </div>
-  <nav class="pf-c-pagination__nav" aria-label="Pagination">
+  <nav
+    class="pf-c-pagination__nav"
+    aria-label="Pagination nav - top disabled example"
+  >
     <div class="pf-c-pagination__nav-control pf-m-first">
       <button
         class="pf-c-button pf-m-plain"
@@ -765,7 +783,10 @@ cssPrefix: pf-c-pagination
       </li>
     </ul>
   </div>
-  <nav class="pf-c-pagination__nav" aria-label="Pagination">
+  <nav
+    class="pf-c-pagination__nav"
+    aria-label="Pagination nav - compact example"
+  >
     <div class="pf-c-pagination__nav-control pf-m-prev">
       <button
         class="pf-c-button pf-m-plain"
@@ -835,7 +856,10 @@ cssPrefix: pf-c-pagination
       </li>
     </ul>
   </div>
-  <nav class="pf-c-pagination__nav" aria-label="Pagination">
+  <nav
+    class="pf-c-pagination__nav"
+    aria-label="Pagination nav - top with display summary modifier example"
+  >
     <div class="pf-c-pagination__nav-control pf-m-first">
       <button
         class="pf-c-button pf-m-plain"
@@ -935,7 +959,10 @@ cssPrefix: pf-c-pagination
       </li>
     </ul>
   </div>
-  <nav class="pf-c-pagination__nav" aria-label="Pagination">
+  <nav
+    class="pf-c-pagination__nav"
+    aria-label="Pagination nav - top with display full modifier example"
+  >
     <div class="pf-c-pagination__nav-control pf-m-first">
       <button
         class="pf-c-button pf-m-plain"
@@ -1037,7 +1064,10 @@ cssPrefix: pf-c-pagination
       </li>
     </ul>
   </div>
-  <nav class="pf-c-pagination__nav" aria-label="Pagination">
+  <nav
+    class="pf-c-pagination__nav"
+    aria-label="Pagination nav - top with responsive display summary and display full modifiers example"
+  >
     <div class="pf-c-pagination__nav-control pf-m-first">
       <button
         class="pf-c-button pf-m-plain"
@@ -1137,7 +1167,10 @@ cssPrefix: pf-c-pagination
       </li>
     </ul>
   </div>
-  <nav class="pf-c-pagination__nav" aria-label="Pagination">
+  <nav
+    class="pf-c-pagination__nav"
+    aria-label="Pagination nav - compact display full modifier example"
+  >
     <div class="pf-c-pagination__nav-control pf-m-prev">
       <button
         class="pf-c-button pf-m-plain"

package/docs/components/Popover/examples/Popover.md

@@ -292,8 +292,8 @@ cssPrefix: pf-c-popover
   class="pf-c-popover pf-m-left"
   role="dialog"
   aria-modal="true"
-  aria-labelledby="popover-top-header"
-  aria-describedby="popover-top-body"
+  aria-labelledby="popover-icon-title-header"
+  aria-describedby="popover-icon-title-body"
 >
   <div class="pf-c-popover__arrow"></div>
   <div class="pf-c-popover__content">
@@ -301,7 +301,7 @@ cssPrefix: pf-c-popover
       <i class="fas fa-times" aria-hidden="true"></i>
     </button>
     <header class="pf-c-popover__header">
-      <h1 class="pf-c-popover__title pf-m-icon" id="popover-top-header">
+      <h1 class="pf-c-popover__title pf-m-icon" id="popover-icon-title-header">
         <span class="pf-c-popover__title-icon">
           <i class="fas fa-fw fa-bullhorn" aria-hidden="true"></i>
         </span>
@@ -310,7 +310,7 @@ cssPrefix: pf-c-popover
     </header>
     <div
       class="pf-c-popover__body"
-      id="popover-top-body"
+      id="popover-icon-title-body"
     >Popovers are triggered by click rather than hover. Click again to close.</div>
     <footer class="pf-c-popover__footer">Popover footer</footer>
   </div>
@@ -325,8 +325,8 @@ cssPrefix: pf-c-popover
   class="pf-c-popover pf-m-default pf-m-left"
   role="dialog"
   aria-modal="true"
-  aria-labelledby="popover-top-header"
-  aria-describedby="popover-top-body"
+  aria-labelledby="popover-default-alert-header"
+  aria-describedby="popover-default-alert-body"
 >
   <div class="pf-c-popover__arrow"></div>
   <div class="pf-c-popover__content">
@@ -334,7 +334,10 @@ cssPrefix: pf-c-popover
       <i class="fas fa-times" aria-hidden="true"></i>
     </button>
     <header class="pf-c-popover__header">
-      <h1 class="pf-c-popover__title pf-m-icon" id="popover-top-header">
+      <h1
+        class="pf-c-popover__title pf-m-icon"
+        id="popover-default-alert-header"
+      >
         <span class="pf-c-popover__title-icon">
           <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
         </span>
@@ -347,7 +350,7 @@ cssPrefix: pf-c-popover
     </header>
     <div
       class="pf-c-popover__body"
-      id="popover-top-body"
+      id="popover-default-alert-body"
     >Popovers are triggered by click rather than hover. Click again to close.</div>
     <footer class="pf-c-popover__footer">Popover footer</footer>
   </div>
@@ -362,8 +365,8 @@ cssPrefix: pf-c-popover
   class="pf-c-popover pf-m-info pf-m-top"
   role="dialog"
   aria-modal="true"
-  aria-labelledby="popover-top-header"
-  aria-describedby="popover-top-body"
+  aria-labelledby="popover-info-alert-header"
+  aria-describedby="popover-info-alert-body"
 >
   <div class="pf-c-popover__arrow"></div>
   <div class="pf-c-popover__content">
@@ -371,7 +374,7 @@ cssPrefix: pf-c-popover
       <i class="fas fa-times" aria-hidden="true"></i>
     </button>
     <header class="pf-c-popover__header">
-      <h1 class="pf-c-popover__title pf-m-icon" id="popover-top-header">
+      <h1 class="pf-c-popover__title pf-m-icon" id="popover-info-alert-header">
         <span class="pf-c-popover__title-icon">
           <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
         </span>
@@ -384,7 +387,7 @@ cssPrefix: pf-c-popover
     </header>
     <div
       class="pf-c-popover__body"
-      id="popover-top-body"
+      id="popover-info-alert-body"
     >Popovers are triggered by click rather than hover. Click again to close.</div>
     <footer class="pf-c-popover__footer">Popover footer</footer>
   </div>
@@ -399,8 +402,8 @@ cssPrefix: pf-c-popover
   class="pf-c-popover pf-m-success pf-m-top"
   role="dialog"
   aria-modal="true"
-  aria-labelledby="popover-top-header"
-  aria-describedby="popover-top-body"
+  aria-labelledby="popover-success-alert-header"
+  aria-describedby="popover-success-alert-body"
 >
   <div class="pf-c-popover__arrow"></div>
   <div class="pf-c-popover__content">
@@ -408,7 +411,10 @@ cssPrefix: pf-c-popover
       <i class="fas fa-times" aria-hidden="true"></i>
     </button>
     <header class="pf-c-popover__header">
-      <h1 class="pf-c-popover__title pf-m-icon" id="popover-top-header">
+      <h1
+        class="pf-c-popover__title pf-m-icon"
+        id="popover-success-alert-header"
+      >
         <span class="pf-c-popover__title-icon">
           <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
         </span>
@@ -421,7 +427,7 @@ cssPrefix: pf-c-popover
     </header>
     <div
       class="pf-c-popover__body"
-      id="popover-top-body"
+      id="popover-success-alert-body"
     >Popovers are triggered by click rather than hover. Click again to close.</div>
     <footer class="pf-c-popover__footer">Popover footer</footer>
   </div>
@@ -436,8 +442,8 @@ cssPrefix: pf-c-popover
   class="pf-c-popover pf-m-warning pf-m-top"
   role="dialog"
   aria-modal="true"
-  aria-labelledby="popover-top-header"
-  aria-describedby="popover-top-body"
+  aria-labelledby="popover-warning-alert-header"
+  aria-describedby="popover-warning-alert-body"
 >
   <div class="pf-c-popover__arrow"></div>
   <div class="pf-c-popover__content">
@@ -445,7 +451,10 @@ cssPrefix: pf-c-popover
       <i class="fas fa-times" aria-hidden="true"></i>
     </button>
     <header class="pf-c-popover__header">
-      <h1 class="pf-c-popover__title pf-m-icon" id="popover-top-header">
+      <h1
+        class="pf-c-popover__title pf-m-icon"
+        id="popover-warning-alert-header"
+      >
         <span class="pf-c-popover__title-icon">
           <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
         </span>
@@ -458,7 +467,7 @@ cssPrefix: pf-c-popover
     </header>
     <div
       class="pf-c-popover__body"
-      id="popover-top-body"
+      id="popover-warning-alert-body"
     >Popovers are triggered by click rather than hover. Click again to close.</div>
     <footer class="pf-c-popover__footer">Popover footer</footer>
   </div>
@@ -473,8 +482,8 @@ cssPrefix: pf-c-popover
   class="pf-c-popover pf-m-danger pf-m-top"
   role="dialog"
   aria-modal="true"
-  aria-labelledby="popover-top-header"
-  aria-describedby="popover-top-body"
+  aria-labelledby="popover-danger-alert-header"
+  aria-describedby="popover-danger-alert-body"
 >
   <div class="pf-c-popover__arrow"></div>
   <div class="pf-c-popover__content">
@@ -482,7 +491,10 @@ cssPrefix: pf-c-popover
       <i class="fas fa-times" aria-hidden="true"></i>
     </button>
     <header class="pf-c-popover__header">
-      <h1 class="pf-c-popover__title pf-m-icon" id="popover-top-header">
+      <h1
+        class="pf-c-popover__title pf-m-icon"
+        id="popover-danger-alert-header"
+      >
         <span class="pf-c-popover__title-icon">
           <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
         </span>
@@ -495,7 +507,7 @@ cssPrefix: pf-c-popover
     </header>
     <div
       class="pf-c-popover__body"
-      id="popover-top-body"
+      id="popover-danger-alert-body"
     >Popovers are triggered by click rather than hover. Click again to close.</div>
     <footer class="pf-c-popover__footer">Popover footer</footer>
   </div>

package/docs/components/SearchInput/examples/SearchInput.md

@@ -488,7 +488,7 @@ cssPrefix: pf-c-search-input
           <div class="pf-c-form__group-label">
             <label
               class="pf-c-form__label"
-              for="advanced-search-input-form-username"
+              for="advanced-search-autocomplete-input-form-username"
             >
               <span class="pf-c-form__label-text">Username</span>
             </label>
@@ -498,8 +498,8 @@ cssPrefix: pf-c-search-input
               class="pf-c-form-control"
               type="text"
               value="root"
-              id="advanced-search-input-form-username"
-              name="advanced-search-input-form-username"
+              id="advanced-search-autocomplete-input-form-username"
+              name="advanced-search-autocomplete-input-form-username"
             />
           </div>
         </div>
@@ -507,7 +507,7 @@ cssPrefix: pf-c-search-input
           <div class="pf-c-form__group-label">
             <label
               class="pf-c-form__label"
-              for="advanced-search-input-form-firstname"
+              for="advanced-search-autocomplete-input-form-firstname"
             >
               <span class="pf-c-form__label-text">First name</span>
             </label>
@@ -517,8 +517,8 @@ cssPrefix: pf-c-search-input
               class="pf-c-form-control"
               type="text"
               value="n"
-              id="advanced-search-input-form-firstname"
-              name="advanced-search-input-form-firstname"
+              id="advanced-search-autocomplete-input-form-firstname"
+              name="advanced-search-autocomplete-input-form-firstname"
             />
           </div>
         </div>
@@ -526,7 +526,7 @@ cssPrefix: pf-c-search-input
           <div class="pf-c-form__group-label">
             <label
               class="pf-c-form__label"
-              for="advanced-search-input-form-group"
+              for="advanced-search-autocomplete-input-form-group"
             >
               <span class="pf-c-form__label-text">Group</span>
             </label>
@@ -535,8 +535,8 @@ cssPrefix: pf-c-search-input
             <input
               class="pf-c-form-control"
               type="text"
-              id="advanced-search-input-form-group"
-              name="advanced-search-input-form-group"
+              id="advanced-search-autocomplete-input-form-group"
+              name="advanced-search-autocomplete-input-form-group"
             />
           </div>
         </div>
@@ -544,7 +544,7 @@ cssPrefix: pf-c-search-input
           <div class="pf-c-form__group-label">
             <label
               class="pf-c-form__label"
-              for="advanced-search-input-form-email"
+              for="advanced-search-autocomplete-input-form-email"
             >
               <span class="pf-c-form__label-text">Email</span>
             </label>
@@ -553,8 +553,8 @@ cssPrefix: pf-c-search-input
             <input
               class="pf-c-form-control"
               type="text"
-              id="advanced-search-input-form-email"
-              name="advanced-search-input-form-email"
+              id="advanced-search-autocomplete-input-form-email"
+              name="advanced-search-autocomplete-input-form-email"
             />
           </div>
         </div>

package/docs/components/Select/examples/Select.md

@@ -3260,15 +3260,15 @@ The plain select variation should be used when you do not want a border applied
 
 ```html
 <div class="pf-c-select pf-m-expanded">
-  <span id="select-placeholder-expanded-label" hidden>Choose one</span>
+  <span id="select-placeholder-item-disabled-label" hidden>Choose one</span>
 
   <button
     class="pf-c-select__toggle pf-m-placeholder"
     type="button"
-    id="select-placeholder-expanded-toggle"
+    id="select-placeholder-item-disabled-toggle"
     aria-haspopup="true"
     aria-expanded="true"
-    aria-labelledby="select-placeholder-expanded-label select-placeholder-expanded-toggle"
+    aria-labelledby="select-placeholder-item-disabled-label select-placeholder-item-disabled-toggle"
   >
     <div class="pf-c-select__toggle-wrapper">
       <span class="pf-c-select__toggle-text">Filter by status</span>
@@ -3281,7 +3281,7 @@ The plain select variation should be used when you do not want a border applied
   <ul
     class="pf-c-select__menu"
     role="listbox"
-    aria-labelledby="select-placeholder-expanded-label"
+    aria-labelledby="select-placeholder-item-disabled-label"
   >
     <li role="presentation">
       <button
@@ -3323,15 +3323,15 @@ The plain select variation should be used when you do not want a border applied
 
 ```html
 <div class="pf-c-select pf-m-expanded">
-  <span id="select-placeholder-expanded-label" hidden>Choose one</span>
+  <span id="select-placeholder-item-enabled-label" hidden>Choose one</span>
 
   <button
     class="pf-c-select__toggle pf-m-placeholder"
     type="button"
-    id="select-placeholder-expanded-toggle"
+    id="select-placeholder-item-enabled-toggle"
     aria-haspopup="true"
     aria-expanded="true"
-    aria-labelledby="select-placeholder-expanded-label select-placeholder-expanded-toggle"
+    aria-labelledby="select-placeholder-item-enabled-label select-placeholder-item-enabled-toggle"
   >
     <div class="pf-c-select__toggle-wrapper">
       <span class="pf-c-select__toggle-text">Filter by status</span>
@@ -3344,7 +3344,7 @@ The plain select variation should be used when you do not want a border applied
   <ul
     class="pf-c-select__menu"
     role="listbox"
-    aria-labelledby="select-placeholder-expanded-label"
+    aria-labelledby="select-placeholder-item-enabled-label"
   >
     <li role="presentation">
       <button class="pf-c-select__menu-item" role="option">Filter by status</button>

package/docs/components/Table/examples/Table.md

@@ -22604,7 +22604,7 @@ For sticky columns to function correctly, the parent table's width must be contr
 
 ```
 
-### Nested column headers
+### Nested column headers example
 
 ```html
 <div class="pf-c-scroll-inner-wrapper">