Added aria-hidden to EuiRangeSlider and EuiRangeTrack (#3423)

* Added aria-hidden = true when showInput is true * Updated snapshots * Added cl * Replaced using of showInput with rest * Updated snapshot * Removed space * Refractor conditional operator * Extend html attributes to range track
elastic · May 7, 2020 · 916b803 · 916b803
1 parent 6e6b556
commit 916b803
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 6 deletions.
diff --git a/CHANGELOG.md b/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 `testenv` mock for `EuiCode` and `EuiCodeBlock` ([#3405](https://github.com/elastic/eui/pull/3405))
 
 **Bug Fixes**

diff --git a/src/components/form/range/__snapshots__/dual_range.test.tsx.snap b/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"
   >

diff --git a/src/components/form/range/__snapshots__/range.test.tsx.snap b/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"

diff --git a/src/components/form/range/__snapshots__/range_track.test.tsx.snap b/src/components/form/range/__snapshots__/range_track.test.tsx.snap
@@ -2,7 +2,9 @@
 
 exports[`EuiRangeTrack is rendered 1`] = `
 <div
-  class="euiRangeTrack"
+  aria-label="aria-label"
+  class="testClass1 testClass2"
+  data-test-subj="test subject string"
   style="margin-right:0.6em"
 >
   <div

diff --git a/src/components/form/range/dual_range.tsx b/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}
+          aria-hidden={showInput === true}>
           {showRange && this.isValid && (
             <EuiRangeHighlight
               compressed={compressed}

diff --git a/src/components/form/range/range.tsx b/src/components/form/range/range.tsx
@@ -254,7 +254,8 @@ export class EuiRange extends Component<EuiRangeProps> {
           ticks={ticks}
           levels={levels}
           onChange={this.handleOnChange}
-          value={value}>
+          value={value}
+          aria-hidden={showInput === true}>
           {showRange && this.isValid && (
             <EuiRangeHighlight
               compressed={compressed}
@@ -287,6 +288,7 @@ export class EuiRange extends Component<EuiRangeProps> {
             }
             onFocus={showInput === true ? undefined : onFocus}
             onBlur={showInputOnly ? this.onInputBlur : onBlur}
+            aria-hidden={showInput === true ? true : false}
             {...rest}
           />
 

diff --git a/src/components/form/range/range_track.tsx b/src/components/form/range/range_track.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { Component, MouseEventHandler } from 'react';
+import React, { Component, MouseEventHandler, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
 import range from 'lodash/range';
@@ -28,7 +28,8 @@ import { EuiRangeTicks, EuiRangeTick } from './range_ticks';
 
 export { LEVEL_COLORS };
 
-export interface EuiRangeTrackProps {
+export interface EuiRangeTrackProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
   min: number;
   max: number;
   step?: number;
@@ -138,6 +139,7 @@ export class EuiRangeTrack extends Component<EuiRangeTrackProps> {
       onChange,
       value,
       compressed,
+      ...rest
     } = this.props;
 
     // TODO: Move these to only re-calculate if no-value props have changed
@@ -167,7 +169,7 @@ export class EuiRangeTrack extends Component<EuiRangeTrackProps> {
     });
 
     return (
-      <div className={trackClasses} style={inputWrapperStyle}>
+      <div className={trackClasses} style={inputWrapperStyle} {...rest}>
         {levels && !!levels.length && (
           <EuiRangeLevels
             compressed={compressed}