@patternfly/react-core 6.6.2 → 6.7.0-prerelease.2

package/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap

@@ -2,9 +2,7 @@
 
 exports[`SearchInput advanced search 1`] = `
 <DocumentFragment>
-  <div
-    class=""
-  >
+  <div>
     <div
       class="pf-v6-c-input-group"
     >
@@ -29,24 +27,12 @@ exports[`SearchInput advanced search 1`] = `
                   fill="currentColor"
                   height="1em"
                   role="img"
+                  viewBox="0 0 20 20"
                   width="1em"
                 >
-                  <svg
-                    class="pf-v6-icon-default"
-                    viewBox="0 0 512 512"
-                  >
-                    <path
-                      d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                    />
-                  </svg>
-                  <svg
-                    class="pf-v6-icon-rh-ui"
-                    viewBox="0 0 32 32"
-                  >
-                    <path
-                      d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
-                    />
-                  </svg>
+                  <path
+                    d="m18.8 17.21-4.41-4.41A7.906 7.906 0 0 0 16 8c0-4.41-3.59-8-8-8S0 3.59 0 8s3.59 8 8 8c1.73 0 3.42-.57 4.8-1.61l4.41 4.41c.44.44 1.15.44 1.59 0 .44-.44.44-1.15 0-1.59ZM8 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6Z"
+                  />
                 </svg>
               </span>
               <input
@@ -141,7 +127,7 @@ exports[`SearchInput advanced search 1`] = `
                   width="1em"
                 >
                   <path
-                    d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
+                    d="M18.35 8.94 12.7 3.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 4.29 4.29H2c-.55 0-1 .45-1 1s.45 1 1 1h13.59l-4.29 4.29a.987.987 0 0 0-.02 1.41c.38.4 1.02.41 1.41.02l.02-.02 5.65-5.65c.59-.59.59-1.53 0-2.12Z"
                   />
                 </svg>
               </span>
@@ -157,7 +143,6 @@ exports[`SearchInput advanced search 1`] = `
 exports[`SearchInput advanced search with custom attributes 1`] = `
 <DocumentFragment>
   <div
-    class=""
     data-testid="test-id"
   >
     <div
@@ -184,24 +169,12 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   fill="currentColor"
                   height="1em"
                   role="img"
+                  viewBox="0 0 20 20"
                   width="1em"
                 >
-                  <svg
-                    class="pf-v6-icon-default"
-                    viewBox="0 0 512 512"
-                  >
-                    <path
-                      d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                    />
-                  </svg>
-                  <svg
-                    class="pf-v6-icon-rh-ui"
-                    viewBox="0 0 32 32"
-                  >
-                    <path
-                      d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
-                    />
-                  </svg>
+                  <path
+                    d="m18.8 17.21-4.41-4.41A7.906 7.906 0 0 0 16 8c0-4.41-3.59-8-8-8S0 3.59 0 8s3.59 8 8 8c1.73 0 3.42-.57 4.8-1.61l4.41 4.41c.44.44 1.15.44 1.59 0 .44-.44.44-1.15 0-1.59ZM8 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6Z"
+                  />
                 </svg>
               </span>
               <input
@@ -296,7 +269,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   width="1em"
                 >
                   <path
-                    d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
+                    d="M18.35 8.94 12.7 3.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 4.29 4.29H2c-.55 0-1 .45-1 1s.45 1 1 1h13.59l-4.29 4.29a.987.987 0 0 0-.02 1.41c.38.4 1.02.41 1.41.02l.02-.02 5.65-5.65c.59-.59.59-1.53 0-2.12Z"
                   />
                 </svg>
               </span>
@@ -306,7 +279,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
       </div>
     </div>
     <div
-      class=""
       data-popper-escaped="true"
       data-popper-placement="bottom-start"
       data-popper-reference-hidden="true"
@@ -466,28 +438,40 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   class="pf-v6-c-form__group-control"
                 >
                   <div
-                    class="pf-v6-c-form__actions"
+                    class="pf-v6-c-action-list"
                   >
-                    <button
-                      class="pf-v6-c-button pf-m-primary"
-                      type="submit"
+                    <div
+                      class="pf-v6-c-action-list__group"
                     >
-                      <span
-                        class="pf-v6-c-button__text"
+                      <div
+                        class="pf-v6-c-action-list__item"
                       >
-                        Search
-                      </span>
-                    </button>
-                    <button
-                      class="pf-v6-c-button pf-m-link"
-                      type="reset"
-                    >
-                      <span
-                        class="pf-v6-c-button__text"
+                        <button
+                          class="pf-v6-c-button pf-m-primary"
+                          type="submit"
+                        >
+                          <span
+                            class="pf-v6-c-button__text"
+                          >
+                            Search
+                          </span>
+                        </button>
+                      </div>
+                      <div
+                        class="pf-v6-c-action-list__item"
                       >
-                        Reset
-                      </span>
-                    </button>
+                        <button
+                          class="pf-v6-c-button pf-m-link"
+                          type="reset"
+                        >
+                          <span
+                            class="pf-v6-c-button__text"
+                          >
+                            Reset
+                          </span>
+                        </button>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -502,9 +486,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
 
 exports[`SearchInput renders search input in strict mode 1`] = `
 <DocumentFragment>
-  <div
-    class=""
-  >
+  <div>
     <div
       class="pf-v6-c-input-group"
     >
@@ -529,24 +511,12 @@ exports[`SearchInput renders search input in strict mode 1`] = `
                   fill="currentColor"
                   height="1em"
                   role="img"
+                  viewBox="0 0 20 20"
                   width="1em"
                 >
-                  <svg
-                    class="pf-v6-icon-default"
-                    viewBox="0 0 512 512"
-                  >
-                    <path
-                      d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                    />
-                  </svg>
-                  <svg
-                    class="pf-v6-icon-rh-ui"
-                    viewBox="0 0 32 32"
-                  >
-                    <path
-                      d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
-                    />
-                  </svg>
+                  <path
+                    d="m18.8 17.21-4.41-4.41A7.906 7.906 0 0 0 16 8c0-4.41-3.59-8-8-8S0 3.59 0 8s3.59 8 8 8c1.73 0 3.42-.57 4.8-1.61l4.41 4.41c.44.44 1.15.44 1.59 0 .44-.44.44-1.15 0-1.59ZM8 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6Z"
+                  />
                 </svg>
               </span>
               <input
@@ -641,7 +611,7 @@ exports[`SearchInput renders search input in strict mode 1`] = `
                   width="1em"
                 >
                   <path
-                    d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
+                    d="M18.35 8.94 12.7 3.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 4.29 4.29H2c-.55 0-1 .45-1 1s.45 1 1 1h13.59l-4.29 4.29a.987.987 0 0 0-.02 1.41c.38.4 1.02.41 1.41.02l.02-.02 5.65-5.65c.59-.59.59-1.53 0-2.12Z"
                   />
                 </svg>
               </span>
@@ -687,24 +657,12 @@ exports[`SearchInput search input with hint 1`] = `
                 fill="currentColor"
                 height="1em"
                 role="img"
+                viewBox="0 0 20 20"
                 width="1em"
               >
-                <svg
-                  class="pf-v6-icon-default"
-                  viewBox="0 0 512 512"
-                >
-                  <path
-                    d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                  />
-                </svg>
-                <svg
-                  class="pf-v6-icon-rh-ui"
-                  viewBox="0 0 32 32"
-                >
-                  <path
-                    d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
-                  />
-                </svg>
+                <path
+                  d="m18.8 17.21-4.41-4.41A7.906 7.906 0 0 0 16 8c0-4.41-3.59-8-8-8S0 3.59 0 8s3.59 8 8 8c1.73 0 3.42-.57 4.8-1.61l4.41 4.41c.44.44 1.15.44 1.59 0 .44-.44.44-1.15 0-1.59ZM8 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6Z"
+                />
               </svg>
             </span>
             <input
@@ -735,24 +693,12 @@ exports[`SearchInput search input with hint 1`] = `
                   fill="currentColor"
                   height="1em"
                   role="img"
+                  viewBox="0 0 20 20"
                   width="1em"
                 >
-                  <svg
-                    class="pf-v6-icon-default"
-                    viewBox="0 0 320 512"
-                  >
-                    <path
-                      d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
-                    />
-                  </svg>
-                  <svg
-                    class="pf-v6-icon-rh-ui"
-                    viewBox="0 0 32 32"
-                  >
-                    <path
-                      d="M29 22a.997.997 0 0 1-.707-.293L16 9.414 3.707 21.707a.999.999 0 1 1-1.414-1.414L14.939 7.646a1.501 1.501 0 0 1 2.121 0l12.646 12.646a.999.999 0 0 1-.707 1.707Z"
-                    />
-                  </svg>
+                  <path
+                    d="m18.71 13.29-7.65-7.65a1.49 1.49 0 0 0-2.12 0l-7.65 7.65-.02.02c-.38.4-.37 1.03.02 1.41.4.38 1.03.37 1.41-.02l7.29-7.29 7.29 7.29c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41Z"
+                  />
                 </svg>
               </span>
             </button>
@@ -774,7 +720,7 @@ exports[`SearchInput search input with hint 1`] = `
                   width="1em"
                 >
                   <path
-                    d="m17.65 8.76-6.674 5.72a1.496 1.496 0 0 1-.976.365c-.347 0-.694-.122-.978-.366l-6.673-5.72A1 1 0 0 1 3 7h14a1 1 0 0 1 .65 1.76Z"
+                    d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
                   />
                 </svg>
               </span>
@@ -833,7 +779,7 @@ exports[`SearchInput search input with hint 1`] = `
                 width="1em"
               >
                 <path
-                  d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
+                  d="M18.35 8.94 12.7 3.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 4.29 4.29H2c-.55 0-1 .45-1 1s.45 1 1 1h13.59l-4.29 4.29a.987.987 0 0 0-.02 1.41c.38.4 1.02.41 1.41.02l.02-.02 5.65-5.65c.59-.59.59-1.53 0-2.12Z"
                 />
               </svg>
             </span>
@@ -871,24 +817,12 @@ exports[`SearchInput simple search input 1`] = `
                 fill="currentColor"
                 height="1em"
                 role="img"
+                viewBox="0 0 20 20"
                 width="1em"
               >
-                <svg
-                  class="pf-v6-icon-default"
-                  viewBox="0 0 512 512"
-                >
-                  <path
-                    d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                  />
-                </svg>
-                <svg
-                  class="pf-v6-icon-rh-ui"
-                  viewBox="0 0 32 32"
-                >
-                  <path
-                    d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
-                  />
-                </svg>
+                <path
+                  d="m18.8 17.21-4.41-4.41A7.906 7.906 0 0 0 16 8c0-4.41-3.59-8-8-8S0 3.59 0 8s3.59 8 8 8c1.73 0 3.42-.57 4.8-1.61l4.41 4.41c.44.44 1.15.44 1.59 0 .44-.44.44-1.15 0-1.59ZM8 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6Z"
+                />
               </svg>
             </span>
             <input
@@ -919,24 +853,12 @@ exports[`SearchInput simple search input 1`] = `
                   fill="currentColor"
                   height="1em"
                   role="img"
+                  viewBox="0 0 20 20"
                   width="1em"
                 >
-                  <svg
-                    class="pf-v6-icon-default"
-                    viewBox="0 0 320 512"
-                  >
-                    <path
-                      d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
-                    />
-                  </svg>
-                  <svg
-                    class="pf-v6-icon-rh-ui"
-                    viewBox="0 0 32 32"
-                  >
-                    <path
-                      d="M29 22a.997.997 0 0 1-.707-.293L16 9.414 3.707 21.707a.999.999 0 1 1-1.414-1.414L14.939 7.646a1.501 1.501 0 0 1 2.121 0l12.646 12.646a.999.999 0 0 1-.707 1.707Z"
-                    />
-                  </svg>
+                  <path
+                    d="m18.71 13.29-7.65-7.65a1.49 1.49 0 0 0-2.12 0l-7.65 7.65-.02.02c-.38.4-.37 1.03.02 1.41.4.38 1.03.37 1.41-.02l7.29-7.29 7.29 7.29c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41Z"
+                  />
                 </svg>
               </span>
             </button>
@@ -958,7 +880,7 @@ exports[`SearchInput simple search input 1`] = `
                   width="1em"
                 >
                   <path
-                    d="m17.65 8.76-6.674 5.72a1.496 1.496 0 0 1-.976.365c-.347 0-.694-.122-.978-.366l-6.673-5.72A1 1 0 0 1 3 7h14a1 1 0 0 1 .65 1.76Z"
+                    d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
                   />
                 </svg>
               </span>
@@ -1017,7 +939,7 @@ exports[`SearchInput simple search input 1`] = `
                 width="1em"
               >
                 <path
-                  d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
+                  d="M18.35 8.94 12.7 3.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 4.29 4.29H2c-.55 0-1 .45-1 1s.45 1 1 1h13.59l-4.29 4.29a.987.987 0 0 0-.02 1.41c.38.4 1.02.41 1.41.02l.02-.02 5.65-5.65c.59-.59.59-1.53 0-2.12Z"
                 />
               </svg>
             </span>

package/src/components/Select/examples/SelectBasic.tsx

@@ -20,6 +20,7 @@ export const SelectBasic: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}

package/src/components/Select/examples/SelectCheckbox.tsx

@@ -22,6 +22,7 @@ export const SelectCheckbox: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}

package/src/components/Select/examples/SelectFooter.tsx

@@ -11,6 +11,7 @@ export const SelectFooter: React.FunctionComponent = () => {
 
   const toggle = (toggleRef) => (
     <MenuToggle
+      aria-haspopup="listbox"
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}

package/src/components/Select/examples/SelectGrouped.tsx

@@ -27,6 +27,7 @@ export const SelectGrouped: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}

package/src/components/Select/examples/SelectMultiTypeahead.tsx

@@ -188,6 +188,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       variant="typeahead"
       aria-label="Multi typeahead menu toggle"
       onClick={onToggleClick}

package/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx

@@ -196,6 +196,7 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       variant="typeahead"
       aria-label="Multi typeahead checkbox menu toggle"
       onClick={onToggleClick}

package/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx

@@ -201,6 +201,7 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       variant="typeahead"
       aria-label="Multi typeahead creatable menu toggle"
       onClick={onToggleClick}

package/src/components/Select/examples/SelectOptionVariations.tsx

@@ -20,6 +20,7 @@ export const SelectOptionVariations: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}

package/src/components/Select/examples/SelectTypeahead.tsx

@@ -199,6 +199,7 @@ export const SelectTypeahead: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       ref={toggleRef}
       variant="typeahead"
       aria-label="Typeahead menu toggle"

package/src/components/Select/examples/SelectTypeaheadCreatable.tsx

@@ -206,6 +206,7 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       ref={toggleRef}
       variant="typeahead"
       aria-label="Typeahead creatable menu toggle"

package/src/components/Select/examples/SelectValidated.tsx

@@ -30,6 +30,7 @@ export const SelectValidated: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}

package/src/components/Select/examples/SelectViewMore.tsx

@@ -101,6 +101,7 @@ export const SelectViewMore: React.FunctionComponent = () => {
 
   const toggle = (
     <MenuToggle
+      aria-haspopup="listbox"
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}

package/src/components/Slider/Slider.tsx

@@ -4,10 +4,11 @@ import { css } from '@patternfly/react-styles';
 import { SliderStep } from './SliderStep';
 import { InputGroup, InputGroupText, InputGroupItem } from '../InputGroup';
 import { TextInput } from '../TextInput';
-import { Tooltip } from '../Tooltip';
+import { Tooltip, TooltipProps } from '../Tooltip';
 import cssSliderValue from '@patternfly/react-tokens/dist/esm/c_slider_value';
 import cssFormControlWidthChars from '@patternfly/react-tokens/dist/esm/c_slider__value_c_form_control_width_chars';
 import { getLanguageDirection } from '../../helpers/util';
+import { useOUIAProps, OUIAProps } from '../../helpers';
 
 /** Properties for creating custom steps in a slider. These properties should be passed in as
  * an object within an array to the slider component's customSteps property.
@@ -29,7 +30,7 @@ export type SliderOnChangeEvent =
   | React.FocusEvent<HTMLInputElement>;
 
 /** The main slider component. */
-export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
+export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'>, OUIAProps {
   /** Flag indicating if the slider is discrete for custom steps. This will cause the slider
    * to snap to the closest value.
    */
@@ -42,8 +43,12 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onCh
   className?: string;
   /** Array of custom slider step objects (value and label of each step) for the slider. */
   customSteps?: SliderStepObject[];
-  /* Adds a tooltip over the slider thumb containing the current value. */
+  /** Enables a tooltip over the silder thumb. Defaults to the current value, or tooltipContent if provided. */
   hasTooltipOverThumb?: boolean;
+  /** Content of the tooltip over the slider thumb. Defaults to the current value.  */
+  tooltipContent?: React.ReactNode;
+  /** Additional props passed to the tooltip. */
+  tooltipProps?: Omit<TooltipProps, 'content'>;
   /** Accessible label for the input field. */
   inputAriaLabel?: string;
   /** Text label that is place after the input field. */
@@ -56,6 +61,8 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onCh
   isDisabled?: boolean;
   /** Flag to show value input field. */
   isInputVisible?: boolean;
+  /** Flag indicating if the input value should also update the slider value as the user types. When false, the slider will update its value on blur or enter key press. */
+  isInputLive?: boolean;
   /** @deprecated Use startActions instead. Actions placed at the start of the slider. */
   leftActions?: React.ReactNode;
   /** Actions placed at the start of the slider. */
@@ -81,10 +88,16 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onCh
   showTicks?: boolean;
   /** The step interval. */
   step?: number;
-  /* Accessible label for the slider thumb. */
+  /** Accessible label for the slider thumb. */
   thumbAriaLabel?: string;
+  /** Accessible text for the current value of the slider. Defaults to the current value. */
+  thumbAriaValueText?: string;
   /** Current value of the slider.  */
   value?: number;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 const getPercentage = (current: number, max: number) => (100 * current) / max;
@@ -97,10 +110,14 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   isDisabled = false,
   isInputVisible = false,
   inputValue = 0,
+  isInputLive = false,
   inputLabel,
   inputAriaLabel = 'Slider value input',
   thumbAriaLabel = 'Value',
+  thumbAriaValueText,
   hasTooltipOverThumb = false,
+  tooltipContent,
+  tooltipProps,
   inputPosition = 'end',
   onChange,
   leftActions,
@@ -114,8 +131,11 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   showBoundaries = true,
   'aria-describedby': ariaDescribedby,
   'aria-labelledby': ariaLabelledby,
+  ouiaId,
+  ouiaSafe = true,
   ...props
 }: SliderProps) => {
+  const ouiaProps = useOUIAProps(Slider.displayName, ouiaId, ouiaSafe);
   const sliderRailRef = useRef<HTMLDivElement>(undefined);
   const thumbRef = useRef<HTMLDivElement>(undefined);
 
@@ -145,8 +165,11 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   const widthChars = useMemo(() => localInputValue.toString().length, [localInputValue]);
   const inputStyle = { [cssFormControlWidthChars.name]: widthChars } as React.CSSProperties;
 
-  const onChangeHandler = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
-    setLocalInputValue(Number(value));
+  const onChangeHandler = (event: React.FormEvent<HTMLInputElement>, value: string) => {
+    const newValue = Number(value);
+    setLocalInputValue(newValue);
+
+    isInputLive && onChange && onChange(event, localValue, newValue, setLocalInputValue);
   };
 
   const handleKeyPressOnInput = (event: React.KeyboardEvent) => {
@@ -425,7 +448,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
       aria-valuemin={customSteps ? customSteps[0].value : min}
       aria-valuemax={customSteps ? customSteps[customSteps.length - 1].value : max}
       aria-valuenow={localValue}
-      aria-valuetext={findAriaTextValue()}
+      aria-valuetext={thumbAriaValueText ?? findAriaTextValue()}
       aria-label={thumbAriaLabel}
       aria-disabled={isDisabled}
       aria-describedby={ariaDescribedby}
@@ -442,6 +465,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
       className={css(styles.slider, className, isDisabled && styles.modifiers.disabled)}
       style={{ ...style, ...inputStyle }}
       {...props}
+      {...ouiaProps}
     >
       {(leftActions || startActions) && <div className={css(styles.sliderActions)}>{leftActions || startActions}</div>}
       <div className={css(styles.sliderMain)}>
@@ -477,7 +501,8 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
             className={css('pf-v6-m-tabular-nums')}
             triggerRef={thumbRef}
             entryDelay={0}
-            content={findAriaTextValue()}
+            content={tooltipContent ?? findAriaTextValue()}
+            {...tooltipProps}
           >
             {thumbComponent}
           </Tooltip>