Accessibility fixes

.forgejo/workflows/build_preview.yml

@@ -44,7 +44,7 @@ jobs:
     runs-on: docker
     steps:
       - name: Release New Version
-        uses: https://code.forgejo.org/Neshura/forgejo-release@main
+        uses: actions/forgejo-release@v1
         with:
           direction: upload
           url: https://forgejo.neshweb.net

src/components/hero.astro

@@ -16,11 +16,11 @@ const release = `https://forgejo.neshweb.net/Firq/fgo-ta-com-website/releases/ta
     >
     <br />
     <span class="version"
-      >(Website version: <a
+      >( Website version: <a
         href={release}
         target="_blank"
         rel="noopener noreferrer">{version}</a
-      >)</span
+      > )</span
     >
   </span>
   <slot />
@@ -31,7 +31,7 @@ const release = `https://forgejo.neshweb.net/Firq/fgo-ta-com-website/releases/ta
     display: flex;
     width: 100%;
     max-height: auto;
-    background-color: var(--c-gray);
+    background-color: var(--c-duskgray);
     text-align: center;
     align-items: center;
     justify-content: center;

src/components/navbar.astro

@@ -6,9 +6,9 @@ const hamburger_src_url = `url("${hamburger.src}")`
 ---
 
 <header>
-  <a href="/" rel="noopener noreferrer" aria-label="Home" role="navigation">
+  <a href="/" rel="noopener noreferrer" aria-label="Home" role="button">
-    <Image src={logo} alt="Website Logo" />
+    <Image src={logo} alt="FGO TA Logo" />
-    <span class="visually-hidden">Website Logo</span>
+    <span class="visually-hidden">Logo</span>
   </a>
   <ul class="desktop">
     <slot name="desktop" />

src/components/navbarEntry.astro

@@ -30,7 +30,7 @@ let extraattributes = navtype === 'mobile' ? { tabindex: '0' } : {}
     rel="noopener noreferrer"
     aria-label={text}
     class={currPage}
-    role="navigation"
+    role="button"
     {...extraattributes}
   >
     <div class="icon"></div>
@@ -60,11 +60,11 @@ let extraattributes = navtype === 'mobile' ? { tabindex: '0' } : {}
   }
 
   li > a:hover {
-    color: var(--c-purplepink);
+    color: var(--c-purplepink) !important;
   }
 
   li > a:hover > .icon {
-    background-color: var(--c-purplepink);
+    background-color: var(--c-purplepink) !important;
   }
 
   .current {

src/components/taCard.astro

@@ -26,7 +26,7 @@ const servant_images = import.meta.glob<{ default: ImageMetadata }>(
 )
 ---
 
-<a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
+<a href={link} target="_blank" rel="noopener noreferrer" aria-label=`By ${runner} • ${formatted_date} ${turns}`>
   <article>
     <Image src={servant_images[servantImagePath]()} alt="" class="icon" />
     <div class="title desktop">
@@ -34,9 +34,8 @@ const servant_images = import.meta.glob<{ default: ImageMetadata }>(
     </div>
     <p class="desktop">
       <span>
-        By {runner}<br /> •
+        By {runner}<br /> • <br/ > {formatted_date}
       </span>
-      {formatted_date}
     </p>
     <div class="mobile">
       <h2>{title}</h2>

src/layouts/Layout.astro

@@ -96,6 +96,7 @@ const mapped_navdata = navdata.map((item) => ({
     --c-gray: #2e2e2e;
     --c-lightgray: #3e3e3e;
     --c-darkpurple: #b86cff;
+    --c-lighterpurple: #c98fff;
     --c-purplepink: #c105ff;
     --c-darkergray: #1b1b1b;
   }