web/settings: more accessibility improvements

This commit is contained in:
wukko 2024-07-03 17:10:53 +06:00
parent a478993599
commit 901f0a7480
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
3 changed files with 5 additions and 4 deletions

View file

@ -2,12 +2,12 @@
export let sectionTitle: string; export let sectionTitle: string;
</script> </script>
<div id="settings-section"> <section id="settings-section">
<div id="settings-section-title">{sectionTitle}</div> <div id="settings-section-title">{sectionTitle}</div>
<div id="settings-section-categories"> <div id="settings-section-categories">
<slot></slot> <slot></slot>
</div> </div>
</div> </section>
<style> <style>
#settings-section, #settings-section,

View file

@ -14,6 +14,7 @@
class="settings-tab" class="settings-tab"
href="/settings/{tabLink}" href="/settings/{tabLink}"
class:active={isActive} class:active={isActive}
role="button"
> >
<div class="settings-tab-left"> <div class="settings-tab-left">
<div class="tab-icon" style="background: var(--{iconColor})"> <div class="tab-icon" style="background: var(--{iconColor})">

View file

@ -39,7 +39,7 @@
<IconChevronLeft /> <IconChevronLeft />
</a> </a>
{/if} {/if}
<h3 id="settings-page-title"> <h3 id="settings-page-title" aria-level="1">
settings settings
{#if !isHome} {#if !isHome}
<span class="title-slash"> / </span> <span class="title-slash"> / </span>
@ -47,7 +47,7 @@
{/if} {/if}
</h3> </h3>
{:else} {:else}
<h2 id="settings-page-title">settings</h2> <h2 id="settings-page-title" aria-level="1">settings</h2>
{/if} {/if}
</div> </div>
<nav id="settings-navigation" class:visible-mobile={isMobile && isHome}> <nav id="settings-navigation" class:visible-mobile={isMobile && isHome}>