Luna 1326: Changes BpkSlider base library for mobile accessibility

.eslintrc

@@ -146,9 +146,12 @@
               "ListElements",  // allowed for a prop that is passed down in BpkList to the conditional list elements
               "Pointer", // allowed for a prop that is passed down in the BpkFlareBar to a generated element and necessary to continue supporting svgClassName
               "ScrimBpkModalInner", // allowed for a prop that is passed in BpkModal down to a scrim wrapped BpkModalInner component.
-              "Slider", // allowed for a prop that is passed in BpkSlider down to the react-slider component.
               "TransitionComponent", // allowed for a prop that is passed in BpkCalendarGridTransition down to a "transition" component prop.
-              "WithOpenEventsInputComponent" // allowed for a prop as consumer className is passed in
+              "WithOpenEventsInputComponent", // allowed for a prop as consumer className is passed in
+              "Slider.Root", // allowed for styling to be passed to radix-ui component
+              "Slider.Track", // allowed for styling to be passed to radix-ui component
+              "Slider.Range", // allowed for styling to be passed to radix-ui component
+              "Slider.Thumb" // allowed for styling to be passed to radix-ui component
             ]
           }
         ]

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

@@ -16,58 +16,87 @@
  * 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 currentValue = Array.isArray(value) ? value : [value];
 
-  const isRange = (rest.value || rest.defaultValue || []).length > 1;
+  const processSliderValues = (
+    sliderValues: number[],
+    callback?: (val: number | number[]) => void,
+  ) => {
+    const val = sliderValues.length === 1 ? sliderValues[0] : sliderValues;
+    if (callback) {
+      callback(val);
+    }
+  };
 
-  if (isRange) {
-    classNames.push(getClassName('bpk-slider--range'));
-  }
-  if (className) {
-    classNames.push(getClassName(className));
-  }
+  const handleOnChange = (sliderValues: number[]) => {
+    processSliderValues(sliderValues, onChange);
+  };
+
+  const handleOnAfterChange = (sliderValues: number[]) => {
+    processSliderValues(sliderValues, onAfterChange);
+  };
 
   return (
-    <Slider
+    <Slider.Root
+      className={getClassName('bpk-slider')}
+      defaultValue={currentValue}
+      min={min}
+      max={max}
+      step={step || 1}
+      onValueChange={handleOnChange}
+      onValueCommit={handleOnAfterChange}
+      inverted={invert}
+      minStepsBetweenThumbs={minDistance}
       {...rest}
-      withTracks
-      snapDragDisabled={false}
-      invert={invert}
-      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>
+      {currentValue.map((val, index) => (
+        <Slider.Thumb
+          key={ariaLabel[index]}
+          aria-label={ariaLabel[index]}
+          aria-valuetext={ariaValuetext ? ariaValuetext[index] : val.toString()}
+          className={getClassName('bpk-slider__thumb')}
+          aria-valuenow={currentValue[index]}
+        />
+      ))}
+    </Slider.Root>
   );
 };
 
-BpkSlider.propTypes = {
-  className: PropTypes.string,
-};
-
-BpkSlider.defaultProps = {
-  className: null,
-};
-
 export default BpkSlider;