Added aria-hidden to EuiRangeSlider and EuiRangeTrack

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `aria-hidden = true` to `EuiRangeSlider` and `EuiRangeTrack` if `showInput = true` ([#3423](https://github.com/elastic/eui/pull/3423))
 - Added `iconType` prop to `EuiDatePicker` ([#3383](https://github.com/elastic/eui/pull/3383))
 - Applied `max-width: 100%` to `EuiPageBody` so inner flex-based items don't overflow their containers  ([#3375](https://github.com/elastic/eui/pull/3375))
 - Added `titleSize` prop to `EuiStep` and `EuiSteps` ([#3340](https://github.com/elastic/eui/pull/3340))

src/components/color_picker/color_stops/__snapshots__/color_stops.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`renders EuiColorStops 1`] = `
     Test:   Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
   </p>
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <div
@@ -124,6 +125,7 @@ exports[`renders compressed EuiColorStops 1`] = `
     Test:   Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
   </p>
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <div
@@ -235,6 +237,7 @@ exports[`renders disabled EuiColorStops 1`] = `
     Test:  Disabled. Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
   </p>
   <div
+    aria-hidden="false"
     class="euiRangeTrack euiRangeTrack--disabled"
   >
     <div
@@ -349,6 +352,7 @@ exports[`renders empty EuiColorStops 1`] = `
     Test:   Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
   </p>
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <div
@@ -385,6 +389,7 @@ exports[`renders fixed stop EuiColorStops 1`] = `
     Test:   Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
   </p>
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <div
@@ -496,6 +501,7 @@ exports[`renders free-range EuiColorStops 1`] = `
     Test:   Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
   </p>
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <div
@@ -532,6 +538,7 @@ exports[`renders fullWidth EuiColorStops 1`] = `
     Test:   Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
   </p>
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <div
@@ -643,6 +650,7 @@ exports[`renders max-only EuiColorStops 1`] = `
     Test:   Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
   </p>
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <div
@@ -679,6 +687,7 @@ exports[`renders min-only EuiColorStops 1`] = `
     Test:   Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
   </p>
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <div
@@ -715,6 +724,7 @@ exports[`renders readOnly EuiColorStops 1`] = `
     Test: Read-only.  Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
   </p>
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <div

src/components/form/range/__snapshots__/dual_range.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`EuiDualRange allows value prop to accept empty strings 1`] = `
     class="euiRange__horizontalSpacer"
   />
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <input
@@ -35,6 +36,7 @@ exports[`EuiDualRange allows value prop to accept numbers 1`] = `
     class="euiRange__horizontalSpacer"
   />
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <div
@@ -89,6 +91,7 @@ exports[`EuiDualRange input props can be applied to min and max inputs 1`] = `
     class="euiRange__horizontalSpacer"
   />
   <div
+    aria-hidden="true"
     class="euiRangeTrack"
   >
     <div
@@ -144,6 +147,7 @@ exports[`EuiDualRange is rendered 1`] = `
     class="euiRange__horizontalSpacer"
   />
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <div
@@ -182,6 +186,7 @@ exports[`EuiDualRange props compressed should render 1`] = `
     class="euiRange__horizontalSpacer"
   />
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <div
@@ -217,6 +222,7 @@ exports[`EuiDualRange props custom ticks should render 1`] = `
     class="euiRange__horizontalSpacer"
   />
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
     style="margin-right:0.6em"
   >
@@ -277,6 +283,7 @@ exports[`EuiDualRange props disabled should render 1`] = `
     class="euiRange__horizontalSpacer"
   />
   <div
+    aria-hidden="false"
     class="euiRangeTrack euiRangeTrack--disabled"
   >
     <div
@@ -313,6 +320,7 @@ exports[`EuiDualRange props fullWidth should render 1`] = `
     class="euiRange__horizontalSpacer"
   />
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <div
@@ -367,6 +375,7 @@ exports[`EuiDualRange props inputs should render 1`] = `
     class="euiRange__horizontalSpacer"
   />
   <div
+    aria-hidden="true"
     class="euiRangeTrack"
   >
     <div
@@ -429,6 +438,7 @@ exports[`EuiDualRange props labels should render 1`] = `
     0
   </label>
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <div
@@ -469,6 +479,7 @@ exports[`EuiDualRange props levels should render 1`] = `
     class="euiRange__horizontalSpacer"
   />
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <div
@@ -516,6 +527,7 @@ exports[`EuiDualRange props range should render 1`] = `
     class="euiRange__horizontalSpacer"
   />
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <div
@@ -601,6 +613,7 @@ exports[`EuiDualRange props ticks should render 1`] = `
     class="euiRange__horizontalSpacer"
   />
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
     style="margin-right:0.6em"
   >

src/components/form/range/__snapshots__/range.test.tsx.snap

@@ -5,9 +5,11 @@ exports[`EuiRange allows value prop to accept a number 1`] = `
   class="euiRangeWrapper euiRange"
 >
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <input
+      aria-hidden="false"
       class="euiRangeSlider"
       id="generated-id"
       max="100"
@@ -38,9 +40,11 @@ exports[`EuiRange allows value prop to accept empty string 1`] = `
   class="euiRangeWrapper euiRange"
 >
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <input
+      aria-hidden="false"
       class="euiRangeSlider"
       id="generated-id"
       max="100"
@@ -61,9 +65,11 @@ exports[`EuiRange is rendered 1`] = `
   class="euiRangeWrapper euiRange testClass1 testClass2"
 >
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <input
+      aria-hidden="false"
       aria-label="aria-label"
       class="euiRangeSlider"
       data-test-subj="test subject string"
@@ -87,9 +93,11 @@ exports[`EuiRange props compressed should render 1`] = `
   class="euiRangeWrapper euiRangeWrapper--compressed euiRange"
 >
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <input
+      aria-hidden="false"
       class="euiRangeSlider euiRangeSlider--compressed"
       id="generated-id"
       max="100"
@@ -110,6 +118,7 @@ exports[`EuiRange props custom ticks should render 1`] = `
   class="euiRangeWrapper euiRange"
 >
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
     style="margin-right:0.6em"
   >
@@ -138,6 +147,7 @@ exports[`EuiRange props custom ticks should render 1`] = `
       </button>
     </div>
     <input
+      aria-hidden="false"
       class="euiRangeSlider euiRangeSlider--hasTicks"
       id="generated-id"
       max="100"
@@ -158,9 +168,11 @@ exports[`EuiRange props disabled should render 1`] = `
   class="euiRangeWrapper euiRange"
 >
   <div
+    aria-hidden="false"
     class="euiRangeTrack euiRangeTrack--disabled"
   >
     <input
+      aria-hidden="false"
       class="euiRangeSlider"
       disabled=""
       id="generated-id"
@@ -182,9 +194,11 @@ exports[`EuiRange props fullWidth should render 1`] = `
   class="euiRangeWrapper euiRangeWrapper--fullWidth euiRange"
 >
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <input
+      aria-hidden="false"
       class="euiRangeSlider"
       id="generated-id"
       max="100"
@@ -205,9 +219,11 @@ exports[`EuiRange props input should render 1`] = `
   class="euiRangeWrapper euiRange testClass1 testClass2"
 >
   <div
+    aria-hidden="true"
     class="euiRangeTrack"
   >
     <input
+      aria-hidden="true"
       aria-label="aria-label"
       class="euiRangeSlider"
       data-test-subj="test subject string"
@@ -257,9 +273,11 @@ exports[`EuiRange props labels should render 1`] = `
     0
   </label>
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <input
+      aria-hidden="false"
       class="euiRangeSlider"
       id="generated-id"
       max="100"
@@ -285,6 +303,7 @@ exports[`EuiRange props levels should render 1`] = `
   class="euiRangeWrapper euiRange"
 >
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <div
@@ -300,6 +319,7 @@ exports[`EuiRange props levels should render 1`] = `
       />
     </div>
     <input
+      aria-hidden="false"
       class="euiRangeSlider"
       id="generated-id"
       max="100"
@@ -320,6 +340,7 @@ exports[`EuiRange props range should render 1`] = `
   class="euiRangeWrapper euiRange"
 >
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <div
@@ -331,6 +352,7 @@ exports[`EuiRange props range should render 1`] = `
       />
     </div>
     <input
+      aria-hidden="false"
       class="euiRangeSlider euiRangeSlider--hasRange"
       id="generated-id"
       max="100"
@@ -384,6 +406,7 @@ exports[`EuiRange props ticks should render 1`] = `
   class="euiRangeWrapper euiRange"
 >
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
     style="margin-right:0.6em"
   >
@@ -447,6 +470,7 @@ exports[`EuiRange props ticks should render 1`] = `
       </button>
     </div>
     <input
+      aria-hidden="false"
       class="euiRangeSlider euiRangeSlider--hasTicks"
       id="generated-id"
       max="100"
@@ -467,9 +491,11 @@ exports[`EuiRange props value should render 1`] = `
   class="euiRangeWrapper euiRange"
 >
   <div
+    aria-hidden="false"
     class="euiRangeTrack"
   >
     <input
+      aria-hidden="false"
       class="euiRangeSlider"
       id="generated-id"
       max="100"

src/components/form/range/__snapshots__/range_track.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`EuiRangeTrack is rendered 1`] = `
 <div
+  aria-hidden="false"
   class="euiRangeTrack"
   style="margin-right:0.6em"
 >

src/components/form/range/dual_range.tsx

@@ -553,7 +553,8 @@ export class EuiDualRange extends Component<EuiDualRangeProps> {
           ticks={ticks}
           levels={levels}
           onChange={this.handleSliderChange}
-          value={value}>
+          value={value}
+          showInput={showInput}>
           {showRange && this.isValid && (
             <EuiRangeHighlight
               compressed={compressed}
@@ -585,6 +586,7 @@ export class EuiDualRange extends Component<EuiDualRangeProps> {
             showRange={showRange}
             onFocus={onFocus}
             onBlur={onBlur}
+            showInput={showInput}
             {...rest}
           />