chore: improve accessbility and SEO

HEIGE-PCloud · May 3, 2024 · 693e8f5 · 693e8f5
1 parent 6d8755d
commit 693e8f5
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 3 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -914,6 +914,10 @@ html.dark {
   padding-bottom: 0.5rem;
 }
 
+.tw-text-fgColor-link-muted {
+  color: var(--global-link-color);
+}
+
 .tw-shadow-black {
   --tw-shadow-color: #000;
   --tw-shadow: var(--tw-shadow-colored);
@@ -959,6 +963,10 @@ html.dark {
   color: var(--fgColor-link);
 }
 
+.hover\:tw-text-fgColor-link-muted-hover:hover {
+  color: var(--global-link-hover-color);
+}
+
 .hover\:tw-shadow-md:hover {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);

diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html
@@ -31,7 +31,8 @@
         tw-duration-500 
         tw-ease-in-out
         print:!tw-hidden"
-      disabled>
+      disabled
+      aria-hidden="true">
       {{- partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "chevron-right") -}}
     </button>
 

diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
@@ -15,7 +15,7 @@
 {{- end -}}
 
 <h{{ .Level }} id="{{ .Anchor | safeURL }}" class="headerLink">
-    <a href="#{{ .Anchor | safeURL }}" class="header-mark"></a>
+    <a href="#{{ .Anchor | safeURL }}" class="header-mark" aria-label="Header mark for '{{ .Text }}'"></a>
     {{- if $isEnable -}}
 
         {{/* Add 1 to the current level */}}

diff --git a/layouts/partials/single/footer.html b/layouts/partials/single/footer.html
@@ -82,7 +82,7 @@
             {{- end -}}
         </section>
         <section class="print:!tw-hidden">
-            <span><a href="javascript:void(0);" onclick="window.history.back();">{{ T "back" }}</a></span>&nbsp;|&nbsp;<span><a href="{{ .Site.Home.RelPermalink }}">{{ T "home" }}</a></span>
+            <span><button class="tw-text-fgColor-link-muted hover:tw-text-fgColor-link-muted-hover" onclick="window.history.back();">{{ T "back" }}</button></span>&nbsp;|&nbsp;<span><a href="{{ .Site.Home.RelPermalink }}">{{ T "home" }}</a></span>
         </section>
     </div>
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -11,6 +11,8 @@ module.exports = {
         'fgColor-muted' : 'var(--fgColor-muted)',
         'fgColor-link' : 'var(--fgColor-link)',
         'fgColor-link-hover' : 'var(--fgColor-link-hover)',
+        'fgColor-link-muted': 'var(--global-link-color)',
+        'fgColor-link-muted-hover': 'var(--global-link-hover-color)',
         'bgColor-default' : 'var(--bgColor-default)',
         'bgColor-secondary' : 'var(--bgColor-secondary)',
         'bgColor-accent-emphasis' : 'var(--bgColor-accent-emphasis)',