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}>