Luna 1326: Changes BpkSlider base library for mobile accessibility

examples/bpk-component-slider/examples.js

@@ -64,12 +64,11 @@ class SliderContainer extends Component {
           min={min}
           max={time ? 59 : 100}
           step={1}
-          className="bpk-slider"
           onChange={this.handleChange}
           {...this.props}
           value={this.state.value}
           ariaLabel={['minimum', 'maximum']}
-          ariaValuetext={time ? (s) => this.valueTimeFormatter(s.value) : null}
+          ariaValuetext={[this.state.value[0], this.state.value[1]]}
         />
         <br />
       </div>

examples/bpk-component-slider/stories.js

@@ -40,11 +40,13 @@ export default {
           <Title />
           <ArgsTable of={PRIMARY_STORY} />
           <Markdown>
-            {
-              `[Please refer to react-slider's documentation for a full list of props](https://zillow.github.io/react-slider/).
-              **Note:** When you're representing non-integer values (eg time, dates) please ensure you use \`ariaLabel\` and \`ariaValuetext\` to ensure that assistive technologies will be able to understand the value better.
-              `
-            }
+            {`**Note**: The aria props are the values that will be passed to the thumb of the slider. If your slider is for times for instance you would likely pass something like the following to ensure the value of the thumb is read out in a formatted state rather than just the value of where the thumb is on the track. If no \`ariaValuetext\` is passed to the component the screen reader will read just the value of the thumb
+
+            ariaLabels={['From', 'To']}
+    ariaValuetext={[getSliderTime(finalSliderStart), getSliderTime(finalSliderEnd)]}
+
+          `}
+
           </Markdown>
         </>
       )

packages/bpk-component-slider/README.md

@@ -18,8 +18,8 @@ const Slider = () => (
     max={100}
     value={[20, 80]}
     step={10}
-    className={'my-class-name'}
     onChange={(value) => alert('Actual value: ' + value)}
+    ariaLabel={['min', 'max']}
   />
 );
 

packages/bpk-component-slider/index.d.ts

@@ -0,0 +1,21 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import BpkSlider from './src/BpkSlider'
+import type { Props } from './src/BpkSlider'
+export type BpkSliderProps = Props
+export default BpkSlider

packages/bpk-component-slider/src/BpkSlider-test.tsx

@@ -20,7 +20,7 @@ import { render } from '@testing-library/react';
 
 import BpkSlider from './BpkSlider';
 
-// Mock the ResizeObserver which 'react-slider' uses to handle slider resize programatically 
+// Mock the ResizeObserver which 'react-slider' uses to handle slider resize programatically
 window.ResizeObserver =
   window.ResizeObserver ||
   jest.fn().mockImplementation(() => ({
@@ -30,35 +30,37 @@ window.ResizeObserver =
   }));
 
 describe('BpkSlider', () => {
+  const defaultProps = {
+    min: 0,
+    max: 100,
+    value: 25,
+    onChange: jest.fn(),
+    onAfterChange: jest.fn(),
+    ariaLabel: ['min', 'max'],
+    ariaValuetext: ['0','80']
+  }
   it('should render correctly', () => {
-    const { asFragment } = render(<BpkSlider min={0} max={100} value={25} />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render correctly with a "className" attribute', () => {
-    const { asFragment } = render(
-      <BpkSlider min={0} max={100} value={25} className="my-slider" />,
-    );
+    const { asFragment } = render(<BpkSlider {...defaultProps} />);
     expect(asFragment()).toMatchSnapshot();
   });
 
   it('should render correctly with a "step" attribute', () => {
     const { asFragment } = render(
-      <BpkSlider min={0} max={100} value={2} step={10} />,
+      <BpkSlider {...defaultProps} step={10} />,
     );
     expect(asFragment()).toMatchSnapshot();
   });
 
   it('should render correctly with a range of values', () => {
     const { asFragment } = render(
-      <BpkSlider min={0} max={100} value={[10, 90]} />,
+      <BpkSlider {...defaultProps} value={[10, 90]} />,
     );
     expect(asFragment()).toMatchSnapshot();
   });
 
   it('should render correctly with a minimum distance between controls', () => {
     const { asFragment } = render(
-      <BpkSlider min={0} max={100} value={[10, 90]} minDistance={20} />,
+      <BpkSlider {...defaultProps} value={[10, 90]} minDistance={20} />,
     );
     expect(asFragment()).toMatchSnapshot();
   });

packages/bpk-component-slider/src/BpkSlider.d.ts

@@ -0,0 +1,21 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { Props as BpkSliderProps } from './BpkSlider'
+export type Props = BpkSliderProps
+declare const BpkSlider: ({ ariaLabel, ariaValuetext, max, min, minDistance, onAfterChange, onChange, step, value }: Props) => JSX.Element
+export default BpkSlider

packages/bpk-component-slider/src/BpkSlider.module.scss

@@ -25,18 +25,33 @@ $slider-handle-touch-size: tokens.bpk-spacing-xxl();
 $slider-bar-height: tokens.bpk-spacing-sm();
 
 .bpk-slider {
+  position: relative;
+  display: flex;
   height: $slider-handle-size;
+  align-items: center;
   -webkit-tap-highlight-color: transparent;
+  touch-action: none;
+  user-select: none;
 
-  &__handle {
-    display: flex;
+  &__track {
+    position: relative;
+    height: $slider-bar-height;
+    flex-grow: 1;
+    background-color: tokens.$bpk-line-day;
+  }
+
+  &__range {
+    position: absolute;
+    height: 100%;
+    background-color: tokens.$bpk-core-accent-day;
+  }
+
+  &__thumb {
+    display: block;
     width: $slider-handle-size;
     height: $slider-handle-size;
-    justify-content: center;
-    align-items: center;
     border-radius: 50%;
     background-color: tokens.$bpk-core-accent-day;
-    cursor: pointer;
 
     @include shadows.bpk-box-shadow-sm;
 
@@ -48,40 +63,9 @@ $slider-bar-height: tokens.bpk-spacing-sm();
       border-radius: 50%;
     }
 
-    &--active {
+    &:active {
       transform: scale(1.2) translate3d(0, 0, 0);
       background-color: tokens.$bpk-private-slider-selected-day;
     }
   }
-
-  &__bar {
-    top: calc(50% - #{$slider-bar-height * 0.5});
-    height: $slider-bar-height;
-    border-radius: tokens.$bpk-border-radius-sm;
-    background-color: tokens.$bpk-line-day;
-  }
-
-  // stylelint-disable-next-line selector-attribute-quotes
-  > div[class$='0'] {
-    @include utils.bpk-themeable-property(
-      background-color,
-      --bpk-slider-bar-color,
-      tokens.$bpk-core-accent-day
-    );
-  }
-
-  &--range {
-    // stylelint-disable-next-line selector-attribute-quotes
-    > div[class$='0'] {
-      background-color: tokens.$bpk-line-day;
-    }
-    // stylelint-disable-next-line selector-attribute-quotes
-    > div[class$='1'] {
-      @include utils.bpk-themeable-property(
-        background-color,
-        --bpk-slider-bar-color,
-        tokens.$bpk-core-accent-day
-      );
-    }
-  }
 }

packages/bpk-component-slider/src/BpkSlider.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @skyscanner/rules/forbid-component-props */
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -16,60 +17,74 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
-
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import Slider from 'react-slider';
+import * as Slider from '@radix-ui/react-slider';
 
 import { cssModules, isRTL } from '../../bpk-react-utils';
 
 import STYLES from './BpkSlider.module.scss';
 
 const getClassName = cssModules(STYLES);
 
-type Props = {
-  className?: string | null;
+export type Props = {
+  max: number
+  min: number
+  minDistance?: number,
+  step?: number
+  onChange: (value: number[] | number) => void
+  onAfterChange?: (value: number[] | number ) => void
+  value: number[] | number
+  ariaLabel: string[]
+  ariaValuetext?: string[]
   [rest: string]: any;
 }
 
-const BpkSlider = (props: Props) => {
-  const { className, ...rest } = props;
+const BpkSlider = ({ ariaLabel, ariaValuetext, max, min, minDistance, onAfterChange, onChange, step, value, ...rest }: Props) => {
   const invert = isRTL();
-  const classNames = [getClassName('bpk-slider')];
-  const thumbClassNames = [getClassName('bpk-slider__handle')];
-  const trackClassNames = [getClassName('bpk-slider__bar')];
+  const defaultValue = Array.isArray(value) ? value : [value]
+
+  const processSliderValues = (sliderValues: number[], callback?: (val: number | number[]) => void) => {
+  const val = sliderValues.length === 1 ? sliderValues[0] : sliderValues;
+  if (callback) {
+    callback(val);
+   }
+  };
+
+  const handleOnChange = (sliderValues: number[]) => {
+    processSliderValues(sliderValues, onChange);
+  };
 
-  const isRange = (rest.value || rest.defaultValue || []).length > 1;
+  const handleOnAfterChange = (sliderValues: number[]) => {
+    processSliderValues(sliderValues, onAfterChange);
+  };
 
-  if (isRange) {
-    classNames.push(getClassName('bpk-slider--range'));
-  }
-  if (className) {
-    classNames.push(getClassName(className));
-  }
 
   return (
-    <Slider
+    <Slider.Root
+      className={getClassName('bpk-slider')}
+      defaultValue={defaultValue}
+      min={min}
+      max={max}
+      step={step || 1}
+      onValueChange={handleOnChange}
+      onValueCommit={handleOnAfterChange}
+      inverted={invert}
+      minStepsBetweenThumbs={minDistance}
       {...rest}
-      withTracks
-      snapDragDisabled={false}
-      invert={invert}
-      // TODO: className to be removed
-      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-      className={classNames.join(' ')}
-      thumbClassName={thumbClassNames.join(' ')}
-      thumbActiveClassName={getClassName('bpk-slider__handle--active')}
-      trackClassName={trackClassNames.join(' ')}
-    />
-  );
+    >
+      <Slider.Track className={getClassName('bpk-slider__track')}>
+        <Slider.Range className={getClassName('bpk-slider__range')} />
+      </Slider.Track>
+      {defaultValue.map((val,index) => (
+          <Slider.Thumb
+            key={ariaLabel[index]}
+            aria-label={ariaLabel[index]}
+            aria-valuetext={ariaValuetext ? ariaValuetext[index] : val.toString()}
+            className={getClassName('bpk-slider__thumb')}
+          />
+        ))}
+      </Slider.Root>
+    );
 };
 
-BpkSlider.propTypes = {
-  className: PropTypes.string,
-};
-
-BpkSlider.defaultProps = {
-  className: null,
-};
 
 export default BpkSlider;