feat(web,a11y): slider accessibility improvements

[ben-basten]

Description

Made the following accessibility changes to the Slider toggle component:

1. Added a focus outline around the currently focused slider, to make it easier for users to track where they are on the page. The color of the outline is automatically determined by the browser and can vary - open to ideas if there's a specific color in mind.
2. Linking labels to the slider using IDs, so screen readers will now announce the context that goes with it.

Screenshots

Expand for screenshots

Focused slider in dark mode (Firefox)

Focused slider in light mode (Firefox)

How Has This Been Tested?

• MacOS + VoiceOver
  • Chrome
  • Firefox
  • Safari
• Windows + NVDA - don't have this setup yet
  • Chrome
  • Firefox

Try tabbing through a form with sliders, such as the "Create link to share" modal. There should be visible focus outlines around the slider.

Checklist:

• npm run lint (linting via ESLint)
• npm run format (formatting via Prettier)
• npm run check:svelte (Type checking via SvelteKit)
• npm test (unit tests)

[jrasm91]

LGTM

[mertalev]

The outlines have some aliasing and color artifacts. Can we fix that?

Dark mode (left inner section):

Light mode (inner circle):

[alextran1502]

Can we please keep the slider's original styling?

[mertalev]

I think it only changes the styling when the slider is focused. It makes it easier when you're tabbing through elements in the page, etc.

[ben-basten]

The outlines have some aliasing and color artifacts. Can we fix that?

Yes, I'm seeing that too. I will do some investigation to see if there's a good solution for that.

[ben-basten]

The outlines have some aliasing and color artifacts. Can we fix that?

So I've been looking into this @mertalev . Some things I've tried:

• adding a box shadow to fill the gap around the slider: no change
• using border to indicate focus: removes the color artifacts, but feels weird because the border makes the slider look smaller
• enlarging the slider, to see if the color artifacts are caused by how small the slider is: still seeing color artifacts when the slider is larger, see this screenshot where the circle is 40px by 40px for an example:

So... the compromise solution I could think of is adding a subtle border in the same color as the background, to mask the color artifacting. It also has the added benefit of making the slider a little easier to see when it's focused, in my opinion.

What do you think about this solution?

Expand for screenshots

Dark Mode (Firefox)

Light Mode (Firefox)

[mertalev]

That looks a lot better! It's also good in that it increases contrast when the outline and slider are both gray.