mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/imputnet/cobalt.git synced 2025-01-01 12:46:07 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

web: improve screen reader usability

Browse source 
- switchers now have audible states
- toggles are now interpreted as toggles
- fixed weird spacing introduced in last commit
This commit is contained in:
wukko 2024-07-03 14:09:09 +06:00
parent 5ced7b5388
commit a478993599
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
3 changed files with 4 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
web/src/components/buttons/SettingsButton.svelte
View file

@ -21,6 +21,7 @@
id="setting-button-{settingContext}-{String(settingId)}-{settingValue}" id="setting-button-{settingContext}-{String(settingId)}-{settingValue}"
class="button" class="button"
class:active={isActive} class:active={isActive}
aria-pressed={isActive}
on:click={() => on:click={() =>
updateSetting({ updateSetting({
[settingContext]: { [settingContext]: {

1
web/src/components/buttons/SettingsToggle.svelte
View file

@ -23,6 +23,7 @@
<div id="setting-toggle-{settingContext}-{String(settingId)}" class="toggle-parent"> <div id="setting-toggle-{settingContext}-{String(settingId)}" class="toggle-parent">
<button <button
class="toggle-container" class="toggle-container"
aria-pressed={isEnabled}
on:click={() => on:click={() =>
updateSetting({ updateSetting({
[settingContext]: { [settingContext]: {

4
web/src/components/buttons/Switcher.svelte
View file

@ -2,7 +2,7 @@
export let big: boolean = false; export let big: boolean = false;
</script> </script>
<div id="switcher-container" class="switcher" class:big={big}> <div id="switcher-container" class="switcher" class:big={big} role="listbox">
<slot></slot> <slot></slot>
</div> </div>
@ -18,7 +18,7 @@
} }
.switcher :global(.button) { .switcher :global(.button) {
white-space: pre; white-space: nowrap;
} }
.switcher:not(.big) :global(.button:first-child) { .switcher:not(.big) :global(.button:first-child) {