fix(slider): Add aria-hidden to value indicator container, to avoid duplicate value announcements for screenreader users.

PiperOrigin-RevId: 350350886

Author: joyzhong

packages/mdc-slider/README.md

@@ -153,7 +153,7 @@ To create a discrete slider, add the following:
     </div>
   </div>
   <div class="mdc-slider__thumb">
-    <div class="mdc-slider__value-indicator-container">
+    <div class="mdc-slider__value-indicator-container" aria-hidden="true">
       <div class="mdc-slider__value-indicator">
         <span class="mdc-slider__value-indicator-text">
           50
@@ -203,7 +203,7 @@ To add tick marks to a discrete slider, add the following:
     </div>
   </div>
   <div class="mdc-slider__thumb">
-    <div class="mdc-slider__value-indicator-container">
+    <div class="mdc-slider__value-indicator-container" aria-hidden="true">
       <div class="mdc-slider__value-indicator">
         <span class="mdc-slider__value-indicator-text">
           50
@@ -228,7 +228,7 @@ To add tick marks to a discrete slider, add the following:
     </div>
   </div>
   <div class="mdc-slider__thumb">
-    <div class="mdc-slider__value-indicator-container">
+    <div class="mdc-slider__value-indicator-container" aria-hidden="true">
       <div class="mdc-slider__value-indicator">
         <span class="mdc-slider__value-indicator-text">
           20
@@ -238,7 +238,7 @@ To add tick marks to a discrete slider, add the following:
     <div class="mdc-slider__thumb-knob"></div>
   </div>
   <div class="mdc-slider__thumb">
-    <div class="mdc-slider__value-indicator-container">
+    <div class="mdc-slider__value-indicator-container" aria-hidden="true">
       <div class="mdc-slider__value-indicator">
         <span class="mdc-slider__value-indicator-text">
           50

packages/mdc-slider/test/component.test.ts

@@ -539,7 +539,7 @@ describe('MDCSlider', () => {
           </div>
           <div class="mdc-slider__thumb" tabindex="0" role="slider" aria-valuemin="0"
                aria-valuemax="100" aria-valuenow="70" style="left:calc(70% - 24px)">
-            <div class="mdc-slider__value-indicator-container">
+            <div class="mdc-slider__value-indicator-container" aria-hidden="true">
               <div class="mdc-slider__value-indicator">
                 <span class="mdc-slider__value-indicator-text">70</span>
               </div>
@@ -634,7 +634,7 @@ function setUpTest(
       {min: isRange ? valueStart || 0 : 0, max: 100, value: value || 0, step});
 
   const valueIndicator = (valueNum: number) => html`
-      <div class="mdc-slider__value-indicator-container">
+      <div class="mdc-slider__value-indicator-container" aria-hidden="true">
         <div class="mdc-slider__value-indicator">
           <span class="mdc-slider__value-indicator-text">
             ${valueNum}