mirror of
https://github.com/wukko/cobalt.git
synced 2024-11-15 12:50:01 +00:00
web/settings: more accessibility improvements
This commit is contained in:
parent
a478993599
commit
901f0a7480
3 changed files with 5 additions and 4 deletions
|
@ -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,
|
||||||
|
|
|
@ -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})">
|
||||||
|
|
|
@ -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}>
|
||||||
|
|
Loading…
Reference in a new issue