Luna 1326: Changes BpkSlider base library for mobile accessibility #3368

LouiseReid · 2024-04-16T15:30:36Z

Base library updated to radux-ui/react-slider which allows for screen reader swipe interaction on mWeb.

All props of previous react-slider library have been changed to ensure 99% backwards compatibility however ariaLabel is now a required prop

The Problem we had - swiping does not move thumb

RPReplay_Final1713258395.MP4

With new base library - note this is using the dist build from this PR in banana

RPReplay_Final1713348804.mov

Breaking change

ariaLabel is now a required prop
className prop removed

Remember to include the following changes:

Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [KOA-123][BpkButton] Updating the colour
README.md (If you have created a new component)
Component README.md
Tests
Storybook examples created/updated
Type declaration (.d.ts) files updated
For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

LouiseReid · 2024-04-16T15:31:20Z

examples/bpk-component-slider/stories.js

+    ariaValuetext={[getSliderTime(finalSliderStart), getSliderTime(finalSliderEnd)]}
+
+          `}
+


This looks nice when rendered

github-actions · 2024-04-16T15:34:24Z

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against 7ee6105

github-actions · 2024-04-16T15:34:48Z

Visit https://backpack.github.io/storybook-prs/3368 to see this build running in a browser.

LouiseReid · 2024-04-16T15:36:01Z

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

-  it('should render correctly with a "className" attribute', () => {
-    const { asFragment } = render(
-      <BpkSlider min={0} max={100} value={25} className="my-slider" />,
-    );


className prop removed

LouiseReid · 2024-04-16T15:36:27Z

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

@@ -1,3 +1,4 @@
+/* eslint-disable @skyscanner/rules/forbid-component-props */


This is needed here as a way to set styles on the external component

Here we can add an exclusion to our linter so its centralised in one place, see here for examples: https://github.com/Skyscanner/backpack/blob/main/.eslintrc#L139

github-actions · 2024-04-16T15:38:52Z

Visit https://backpack.github.io/storybook-prs/3368 to see this build running in a browser.

github-actions · 2024-04-17T09:41:52Z

Visit https://backpack.github.io/storybook-prs/3368 to see this build running in a browser.

LouiseReid · 2024-04-17T09:42:40Z

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

+  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);
+  };


This looks a bit wild but its to handle differences between the base libraries. This new library always returns the value in an array, so if there is just one thumb it is passed back like [value] where as for a range its the expected [value, value]

The previous library returned a one thumb slider value back as just a number rather than a number in an array

Out of curiosity how does the [value, value] get added to the array?
Is the value at index 0 always one of the sliders, and index 1 is at the other?

Yea, that is from the internal workings of the library. Somewhere in here, its state is an array

https://github.com/radix-ui/primitives/blob/main/packages/react/slider/src/Slider.tsx#L99

github-actions · 2024-04-17T09:48:37Z

Visit https://backpack.github.io/storybook-prs/3368 to see this build running in a browser.

Jennahowieson · 2024-04-17T10:30:49Z

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


  return (
-    <Slider
+    <Slider.Root
+      className={getClassName('bpk-slider')}


Why is it that we remove className throughout, when we still need it here for the root styling?

We still need to give the slider skyscanner the styles but removing the className prop from BpkSlider prevents the likes of Banana adding their own styles on top of that

Jennahowieson · 2024-04-17T10:32:00Z

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

@@ -30,44 +30,52 @@ window.ResizeObserver =
  }));

 describe('BpkSlider accessibility tests', () => {
-  /*
-  Currently this test fails because the third-party library


So nice to be able to delete this 🔥

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

olliecurtis · 2024-04-18T08:43:27Z

Thanks @LouiseReid for the PR this is interesting this issue came up as we recently completed an audit for this component based on the old library and there were no screenreader issues coming. So this PR comes as a shock as its not working when it was passed in audits

LouiseReid · 2024-04-18T08:46:58Z

Thanks @LouiseReid for the PR this is interesting this issue came up as we recently completed an audit for this component based on the old library and there were no screenreader issues coming. So this PR comes as a shock as its not working when it was passed in audits

Its strange as the keyboard arrow keys for navigation work on desktop which is what I believe should also power the mobile screen reader swipe but they don't

olliecurtis · 2024-04-18T08:57:52Z

Thanks @LouiseReid for the PR this is interesting this issue came up as we recently completed an audit for this component based on the old library and there were no screenreader issues coming. So this PR comes as a shock as its not working when it was passed in audits

Its strange as the keyboard arrow keys for navigation work on desktop which is what I believe should also power the mobile screen reader swipe but they don't

Gotcha I see, now trying again on some different devices!

Could you also check the storybook for this? https://backpack.github.io/storybook-prs/3368/?path=/story/bpk-component-slider--visual-test

I just tried on Chrome on Android and its not working as expected, its the same behaviour of not slidiing but this time no highlighting of the slider controls

olliecurtis

Just adding a merge prevention here whilst we are figuring out some A11y weirdness with Android

…1326

LouiseReid · 2024-04-18T10:34:38Z

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

+          aria-label={ariaLabel[index]}
+          aria-valuetext={ariaValuetext ? ariaValuetext[index] : val.toString()}
+          className={getClassName('bpk-slider__thumb')}
+          aria-valuenow={currentValue[index]}


I think this might fix the android issue. Without it the valueText remained static when the slider moved but with it it changes with the slider value

Before

Screen.Recording.2024-04-18.at.11.30.37.mov

Now

Screen.Recording.2024-04-18.at.11.31.01.mov

github-actions · 2024-04-18T10:35:00Z

Visit https://backpack.github.io/storybook-prs/3368 to see this build running in a browser.

LouiseReid · 2024-04-18T13:44:18Z

Will pause this just now. I've raised an issue on the source repo - radix-ui/primitives#2850

Will give that a couple of weeks then we can decided next steps - nothing, finding another lib or merging as is to at least fix for iOS

LouiseReid · 2024-05-03T10:56:13Z

@olliecurtis I've hit a bit of a wall with trying to get this working with Android talkback. I propose we merge as is at the next appropriate time given it enhances iOS and does nothing detrimental to android

github-actions · 2024-05-03T10:58:20Z

Visit https://backpack.github.io/storybook-prs/3368 to see this build running in a browser.

github-actions · 2024-05-06T11:39:26Z

Visit https://backpack.github.io/storybook-prs/3368 to see this build running in a browser.

olliecurtis

One small comment see below. Also to check do we need to have a migration guide for folks to adopt the new version of the Slider to help manage this change?

olliecurtis · 2024-05-06T11:37:14Z

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

@@ -1,3 +1,4 @@
+/* eslint-disable @skyscanner/rules/forbid-component-props */


Here we can add an exclusion to our linter so its centralised in one place, see here for examples: https://github.com/Skyscanner/backpack/blob/main/.eslintrc#L139

olliecurtis · 2024-05-06T11:40:13Z

Adding DON'T MERGE label so we don't merge until the point of next major and batch together

…1326

LouiseReid · 2024-05-06T12:33:41Z

Also to check do we need to have a migration guide

No, its been make backward compatible matching the api of the old library with the only breaking change being the need to now send an array of aria labels (previously was also array but not required).

We could also make that an optional prop as to not be a breaking change but really aria labels and aria value text values should really be given for a11y

github-actions · 2024-05-06T12:35:30Z

Visit https://backpack.github.io/storybook-prs/3368 to see this build running in a browser.

github-actions · 2024-05-09T09:54:11Z

Visit https://backpack.github.io/storybook-prs/3368 to see this build running in a browser.

…essibility (#3368) [Luna 1326][BpkSlider]: Changes BpkSlider base library for mobile accessibility (#3368) * styling aligned * remove react-slider, install radix slider * initial props setup * aria value text update * remove class name from the example * update tests * update readme and stories` * ts ds * make step optional * handle range values being returned as an array * stick height in * remove debug * adds value now aria value * update linting for classname * Fixing package files for mistaken merge

LouiseReid and others added 8 commits April 16, 2024 12:25

styling aligned

743b3d0

remove react-slider, install radix slider

6b7f74b

initial props setup

84a5687

aria value text update

83447bb

remove class name from the example

740740c

update tests

33c88bb

update readme and stories`

0c980b6

ts ds

64ddcf2

LouiseReid added the major Breaking change label Apr 16, 2024

LouiseReid commented Apr 16, 2024

View reviewed changes

make step optional

5910325

LouiseReid commented Apr 16, 2024

View reviewed changes

LouiseReid added 2 commits April 17, 2024 10:26

handle range values being returned as an array

5af4cd4

stick height in

8dfdbb8

LouiseReid commented Apr 17, 2024

View reviewed changes

Merge branch 'main' into LUNA-1326

a43bd05

Jennahowieson reviewed Apr 17, 2024

View reviewed changes

HelloMaggieP reviewed Apr 17, 2024

View reviewed changes

packages/bpk-component-slider/src/accessibility-test.tsx Outdated Show resolved Hide resolved

remove debug

4b798bc

Jennahowieson approved these changes Apr 17, 2024

View reviewed changes

HelloMaggieP approved these changes Apr 17, 2024

View reviewed changes

olliecurtis self-requested a review April 18, 2024 08:43

olliecurtis requested changes Apr 18, 2024

View reviewed changes

LouiseReid added 2 commits April 18, 2024 11:24

Merge branch 'LUNA-1326' of github.com:Skyscanner/backpack into LUNA-…

a67cf6d

…1326

adds value now aria value

52e0b41

LouiseReid commented Apr 18, 2024

View reviewed changes

merge main

2776391

Merge branch 'main' into LUNA-1326

70eed83

olliecurtis reviewed May 6, 2024

View reviewed changes

olliecurtis added the DON'T MERGE label May 6, 2024

LouiseReid added 2 commits May 6, 2024 13:28

update linting for classname

806078b

Merge branch 'LUNA-1326' of github.com:Skyscanner/backpack into LUNA-…

51800c4

…1326

olliecurtis approved these changes May 9, 2024

View reviewed changes

olliecurtis added 2 commits May 9, 2024 10:47

Merge branch 'main' into LUNA-1326

6e9d1b1

Fixing package files for mistaken merge

7ee6105

olliecurtis merged commit 0f6f5fe into main May 9, 2024
9 checks passed

olliecurtis deleted the LUNA-1326 branch May 9, 2024 09:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Luna 1326: Changes BpkSlider base library for mobile accessibility #3368

Luna 1326: Changes BpkSlider base library for mobile accessibility #3368

LouiseReid commented Apr 16, 2024 •

edited

LouiseReid Apr 16, 2024

github-actions bot commented Apr 16, 2024 •

edited

github-actions bot commented Apr 16, 2024

LouiseReid Apr 16, 2024

LouiseReid Apr 16, 2024

olliecurtis May 6, 2024

github-actions bot commented Apr 16, 2024

github-actions bot commented Apr 17, 2024

LouiseReid Apr 17, 2024

HelloMaggieP Apr 17, 2024

LouiseReid Apr 17, 2024

github-actions bot commented Apr 17, 2024

Jennahowieson Apr 17, 2024

LouiseReid Apr 17, 2024

Jennahowieson Apr 17, 2024

olliecurtis commented Apr 18, 2024

LouiseReid commented Apr 18, 2024

olliecurtis commented Apr 18, 2024

olliecurtis left a comment

LouiseReid Apr 18, 2024

github-actions bot commented Apr 18, 2024

LouiseReid commented Apr 18, 2024

LouiseReid commented May 3, 2024

github-actions bot commented May 3, 2024

github-actions bot commented May 6, 2024

olliecurtis left a comment

olliecurtis May 6, 2024

olliecurtis commented May 6, 2024

LouiseReid commented May 6, 2024

github-actions bot commented May 6, 2024

github-actions bot commented May 9, 2024

		ariaValuetext={[getSliderTime(finalSliderStart), getSliderTime(finalSliderEnd)]}

		`}

		@@ -1,3 +1,4 @@
		/* eslint-disable @skyscanner/rules/forbid-component-props */

Luna 1326: Changes BpkSlider base library for mobile accessibility #3368

Luna 1326: Changes BpkSlider base library for mobile accessibility #3368

Conversation

LouiseReid commented Apr 16, 2024 • edited

Choose a reason for hiding this comment

github-actions bot commented Apr 16, 2024 • edited

Browser support

github-actions bot commented Apr 16, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Apr 16, 2024

github-actions bot commented Apr 17, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Apr 17, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

olliecurtis commented Apr 18, 2024

LouiseReid commented Apr 18, 2024

olliecurtis commented Apr 18, 2024

olliecurtis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Apr 18, 2024

LouiseReid commented Apr 18, 2024

LouiseReid commented May 3, 2024

github-actions bot commented May 3, 2024

github-actions bot commented May 6, 2024

olliecurtis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

olliecurtis commented May 6, 2024

LouiseReid commented May 6, 2024

github-actions bot commented May 6, 2024

github-actions bot commented May 9, 2024

LouiseReid commented Apr 16, 2024 •

edited

github-actions bot commented Apr 16, 2024 •

edited