From 901f0a7480dcef273c35316f547785a43946c6d3 Mon Sep 17 00:00:00 2001 From: wukko <me@wukko.me> Date: Wed, 3 Jul 2024 17:10:53 +0600 Subject: [PATCH] web/settings: more accessibility improvements --- web/src/components/settings/SettingsSection.svelte | 4 ++-- web/src/components/settings/SettingsTab.svelte | 1 + web/src/routes/settings/+layout.svelte | 4 ++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/web/src/components/settings/SettingsSection.svelte b/web/src/components/settings/SettingsSection.svelte index 127f2012..cab74bb0 100644 --- a/web/src/components/settings/SettingsSection.svelte +++ b/web/src/components/settings/SettingsSection.svelte @@ -2,12 +2,12 @@ export let sectionTitle: string; </script> -<div id="settings-section"> +<section id="settings-section"> <div id="settings-section-title">{sectionTitle}</div> <div id="settings-section-categories"> <slot></slot> </div> -</div> +</section> <style> #settings-section, diff --git a/web/src/components/settings/SettingsTab.svelte b/web/src/components/settings/SettingsTab.svelte index e8cf8f93..12ebbb06 100644 --- a/web/src/components/settings/SettingsTab.svelte +++ b/web/src/components/settings/SettingsTab.svelte @@ -14,6 +14,7 @@ class="settings-tab" href="/settings/{tabLink}" class:active={isActive} + role="button" > <div class="settings-tab-left"> <div class="tab-icon" style="background: var(--{iconColor})"> diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte index 6ac82241..10e61fbd 100644 --- a/web/src/routes/settings/+layout.svelte +++ b/web/src/routes/settings/+layout.svelte @@ -39,7 +39,7 @@ <IconChevronLeft /> </a> {/if} - <h3 id="settings-page-title"> + <h3 id="settings-page-title" aria-level="1"> settings {#if !isHome} <span class="title-slash"> / </span> @@ -47,7 +47,7 @@ {/if} </h3> {:else} - <h2 id="settings-page-title">settings</h2> + <h2 id="settings-page-title" aria-level="1">settings</h2> {/if} </div> <nav id="settings-navigation" class:visible-mobile={isMobile && isHome}>