feat(web,a11y): slider accessibility improvements (#8479)

* feat(web,a11y): slider accessibility improvements

* add perceivable focus outline
* label all sliders for screen readers

* chore: add IDs to all settings sliders

* chore: add comment to id prop

* fix: switch to using CSS to add outlines

* fix: reactive sliderId

* fix: bring back the slot

* fix: add aria-describedby for the subtitle

* fix: cleanup css because disabled slider cannot be focused

* fix: add border to the slider when focus is visible

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Ben 2024-04-06 14:18:49 +00:00 committed by GitHub
parent e1f8e96e28
commit 56d27bc1b4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
21 changed files with 102 additions and 28 deletions

View file

@ -26,6 +26,7 @@
<SettingAccordion key="map" title="Map Settings" subtitle="Manage map settings">
<div class="ml-4 mt-4 flex flex-col gap-4">
<SettingSwitch
id="enable-map-features"
title="ENABLED"
{disabled}
subtitle="Enable map features"
@ -66,6 +67,7 @@
</svelte:fragment>
<div class="ml-4 mt-4 flex flex-col gap-4">
<SettingSwitch
id="enable-reverse-geocoding"
title="ENABLED"
{disabled}
subtitle="Enable reverse geocoding"