From e64bd923dac23ae867d81a38be0b77be58c4cd1d Mon Sep 17 00:00:00 2001
From: saicaca <zephyird@gmail.com>
Date: Tue, 12 Mar 2024 12:37:49 +0800
Subject: [PATCH] fix: a11y fixes

---
 src/components/GlobalStyles.astro            |  6 ++++++
 src/components/Navbar.astro                  |  2 +-
 src/components/misc/Markdown.astro           | 10 +++++++++-
 src/components/widget/DisplaySettings.svelte |  2 +-
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/GlobalStyles.astro b/src/components/GlobalStyles.astro
index 40ff22b..e98a29e 100644
--- a/src/components/GlobalStyles.astro
+++ b/src/components/GlobalStyles.astro
@@ -90,6 +90,7 @@ color_set({
 
   --license-block-bg: black(0.03) var(--codeblock-bg)
 
+  --link-underline: oklch(0.93 0.04 var(--hue)) oklch(0.40 0.08 var(--hue))
   --link-hover: oklch(0.95 0.025 var(--hue)) oklch(0.40 0.08 var(--hue))
   --link-active: oklch(0.90 0.05 var(--hue)) oklch(0.35 0.07 var(--hue))
 
@@ -215,6 +216,11 @@ color_set({
         text-[var(--btn-content)] dark:text-white/75
     }
 
+    .link-underline {
+        @apply transition underline decoration-2 decoration-dashed decoration-[var(--link-underline)]
+        hover:decoration-[var(--link-hover)] active:decoration-[var(--link-active)] underline-offset-[0.25rem]
+    }
+
     .text-90 {
         @apply text-black/90 dark:text-white/90
     }
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 82fb0bc..edee470 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -52,7 +52,7 @@ let links: NavBarLink[] = navBarConfig.links.map((item: NavBarLink | LinkPreset)
             <Icon name="material-symbols:wb-sunny-outline-rounded" size={"1.25rem"} class="absolute opacity-[var(--display-light-icon)]"></Icon>
             <Icon name="material-symbols:dark-mode-outline-rounded" size={"1.25rem"} class="absolute opacity-[var(--display-dark-icon)]"></Icon>
         </button>
-        <button name="Nav Menu" class="btn-plain w-11 h-11 rounded-lg active:scale-90 md:hidden" id="nav-menu-switch">
+        <button aria-label="Menu" name="Nav Menu" class="btn-plain w-11 h-11 rounded-lg active:scale-90 md:hidden" id="nav-menu-switch">
             <Icon name="material-symbols:menu-rounded" size={"1.25rem"}></Icon>
         </button>
     </div>
diff --git a/src/components/misc/Markdown.astro b/src/components/misc/Markdown.astro
index dfb46bb..a74246b 100644
--- a/src/components/misc/Markdown.astro
+++ b/src/components/misc/Markdown.astro
@@ -22,6 +22,7 @@ const className = Astro.props.class;
         padding: 0.125rem
         user-select: none
         opacity: 0
+        text-decoration: none
         transition: opacity 0.15s ease-in-out, background 0.15s ease-in-out
         .anchor-icon
           margin-left: 0.45ch
@@ -35,8 +36,13 @@ const className = Astro.props.class;
       margin: -0.25rem
       padding: 0.25rem
       border-radius: 0.375rem
+      font-weight: 500
       color: var(--primary)
-      text-decoration-line: none;
+      text-decoration-line: underline
+      text-decoration-color: var(--link-underline)
+      text-decoration-thickness: 0.125rem
+      text-decoration-style: dashed
+      text-underline-offset: 0.25rem
       /*&:after*/
       /*  content: ''*/
       /*  position: absolute*/
@@ -50,8 +56,10 @@ const className = Astro.props.class;
       /*  z-index: -1;*/
       &:hover
         background: var(--link-hover)
+        text-decoration-color: var(--link-hover)
       &:active
         background: var(--link-active)
+        text-decoration-color: var(--link-active)
     /*&:after*/
     /*  background: var(--link-active)*/
     code
diff --git a/src/components/widget/DisplaySettings.svelte b/src/components/widget/DisplaySettings.svelte
index f036dc7..c7d3714 100644
--- a/src/components/widget/DisplaySettings.svelte
+++ b/src/components/widget/DisplaySettings.svelte
@@ -22,7 +22,7 @@ $: if (hue || hue === 0) {
             before:absolute before:-left-3 before:top-[0.33rem]"
         >
             {i18n(I18nKey.themeColor)}
-            <button class="btn-regular w-7 h-7 rounded-md  active:scale-90"
+            <button aria-label="Reset to Default" class="btn-regular w-7 h-7 rounded-md  active:scale-90"
                     class:opacity-0={hue === defaultHue} class:pointer-events-none={hue === defaultHue} on:click={resetHue}>
                 <div class="text-[var(--btn-content)]">
                     <slot name="restore-icon"></slot>