Add skip to main content button, make things more semantic and accessible.

pnpm-lock.yaml

@@ -47,6 +47,9 @@ dependencies:
   node-fetch:
     specifier: ^3.3.2
     version: 3.3.2
+  notyf:
+    specifier: ^3.10.0
+    version: 3.10.0
   rammerhead:
     specifier: https://github.com/NebulaServices/rammerhead/releases/download/rammerhead-1.2.41-nebula.8/rammerhead-1.2.41-nebula.7.tgz
     version: '@github.com/NebulaServices/rammerhead/releases/download/rammerhead-1.2.41-nebula.8/rammerhead-1.2.41-nebula.7.tgz(bufferutil@4.0.8)'
@@ -4543,6 +4546,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /notyf@3.10.0:
+    resolution: {integrity: sha512-Mtnp+0qiZxgrH+TzVlzhWyZceHdAZ/UWK0/ju9U0HQeDpap1mZ8cC7H5wSI5mwgni6yeAjaxsTw0sbMK+aSuHw==}
+    dev: false
+
   /npm-run-path@5.3.0:
     resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}

src/components/SettingsContent/CustomizationTab.astro

@@ -19,11 +19,11 @@ const languageList = [
 
 <div class="settings-container">
   <div class="setting__theme">
-    <label class="setting-label">{t("settings.customization.theme")}</label>
+    <label aria-label="Theme" class="setting-label">{t("settings.customization.theme")}</label>
     <Dropdown buttonNameDefault="Alu" dropdownList={themeList} id="dropdown__selected-theme" />
   </div>
   <div class="setting__language">
-    <label class="setting-label">{t("settings.customization.language")}</label>
+    <label aria-label="Language" class="setting-label">{t("settings.customization.language")}</label>
     <Dropdown
       buttonNameDefault="English"
       dropdownList={languageList}

src/components/SettingsContent/ProxyTab.astro

@@ -33,7 +33,7 @@ const transportsList = [
 
 <div class="settings-container">
   <div class="setting__selected-proxy">
-    <label class="setting-label">{t("settings.proxy.selectedProxy")}</label>
+    <label aria-label="Selected Proxy" class="setting-label">{t("settings.proxy.selectedProxy")}</label>
     <Dropdown
       buttonNameDefault="Ultraviolet"
       dropdownList={proxyList}
@@ -42,7 +42,7 @@ const transportsList = [
     />
   </div>
   <div class="setting__search-engine">
-    <label class="setting-label">{t("settings.proxy.searchEngine")}</label>
+    <label aria-label="Search Engine" class="setting-label">{t("settings.proxy.searchEngine")}</label>
     <Dropdown
       buttonNameDefault="Google"
       dropdownList={searchEngineList}
@@ -51,7 +51,7 @@ const transportsList = [
     />
   </div>
   <div class="setting__open_with">
-    <label class="setting-label">{t("settings.proxy.openPageWith")}</label>
+    <label aria-label="Open Page With" class="setting-label">{t("settings.proxy.openPageWith")}</label>
     <Dropdown
       buttonNameDefault={t("settings.proxy.openPageWith.embed")}
       dropdownList={openPageWith}
@@ -60,15 +60,15 @@ const transportsList = [
     />
   </div>
   <div class="setting__wisp_url">
-    <label for="wisp-url-input" class="setting-label">{t("settings.proxy.wispURL")}</label>
+    <label aria-label="Wisp URL" for="wisp-url-input" class="setting-label">{t("settings.proxy.wispURL")}</label>
     <Input height="50px" inputName="wisp-url" />
   </div>
   <div class="setting__bare_url">
-    <label for="bare-url-input" class="setting-label">{t("settings.proxy.bareURL")}</label>
+    <label aria-label="Bare Server URL" for="bare-url-input" class="setting-label">{t("settings.proxy.bareURL")}</label>
     <Input height="50px" inputName="bare-url" />
   </div>
   <div class="setting__transport">
-    <label class="setting-label">{t("settings.proxy.transport")}</label>
+    <label aria-label="Wisp Transport" class="setting-label">{t("settings.proxy.transport")}</label>
     <Dropdown
       buttonNameDefault="Epoxy"
       dropdownList={transportsList}
@@ -78,6 +78,6 @@ const transportsList = [
   </div>
 </div>
 <div class="setting__searxng-url">
-  <label for="searxng-url-input" class="setting-label">{t("settings.proxy.searxngURL")}</label>
+  <label aria-label="SearXNG URL" for="searxng-url-input" class="setting-label">{t("settings.proxy.searxngURL")}</label>
   <Input height="50px" inputName="searxng-url" defaultTextContent="https://searxng.site/" />
 </div>

src/components/UI/Footer.astro

@@ -5,8 +5,8 @@ import WaveSVG from "../WaveSVG.astro";
 const t = i18n.inferLangUseTranslations(Astro.url);
 ---
 
-<div class="footer">
+<footer class="footer">
-  <div class="wave-svg-container">
+  <div aria-hidden="true" class="wave-svg-container">
     <WaveSVG />
   </div>
   <div class="footer-top">
@@ -63,4 +63,4 @@ const t = i18n.inferLangUseTranslations(Astro.url);
       color: var(--text-color);
     }
   </style>
-</div>
+</footer>

src/components/UI/Header.astro

@@ -4,7 +4,7 @@ const lang = i18n.getLangFromUrl(Astro.url);
 const t = i18n.useTranslations(lang);
 ---
 
-<div class="top-header">
+<nav class="top-header">
   <div id="title-background" class="title-background">
     <div class="left">
       <a href={`/${lang}/`} class="header-item">{t("nav.brand")}</a>
@@ -14,7 +14,7 @@ const t = i18n.useTranslations(lang);
       <a href={`/${lang}/settings/`} class="header-item">{t("nav.settings")}</a>
     </div>
   </div>
-</div>
+</nav>
 
 <style>
   .top-header {

src/layouts/Layout.astro

@@ -63,6 +63,7 @@ const { title, optionalPreloads } = Astro.props;
     <ViewTransitions />
   </head>
   <body>
+    <a href="#main-content" class="skip-to-main-content-link">Skip to main content</a>
     <Header />
     <slot transition:animate={"fade"} />
     <script src="/uv/uv.bundle.js" is:inline transition:persist></script>
@@ -116,6 +117,26 @@ const { title, optionalPreloads } = Astro.props;
         --dropdown-background-color: #1f1d2e;
       }
 
+      .skip-to-main-content-link {
+        position: absolute;
+        top: 10px;
+        left: 15px;
+        z-index: 999;
+        padding: 0.75em;
+        padding-inline: 20px;
+        background-color: var(--background-highlight);
+        color: var(--text-color);
+        border-radius: 15px;
+        opacity: 0;
+        transition: opacity 250ms ease-in-out;
+      }
+      .skip-to-main-content-link:focus {
+        top: 10px;
+        left: 15px;
+        opacity: 1;
+        outline: none;
+      }
+
       body,
       html {
         margin: 0;

src/pages/404.astro

@@ -3,17 +3,17 @@ import Layout from "../layouts/Layout.astro";
 ---
 
 <Layout title="404 | Alu">
-  <div class="main-content error-page">
+  <main id="main-content" class="main-content error-page">
     <h1>404!</h1>
     <p>The content you have requested could not be found!</p>
-  </div>
+  </main>
 </Layout>
 
 <style>
   .error-page {
     color: white;
   }
-  .main-content {
+  #main-content {
     display: flex;
     justify-content: center;
     align-items: center;

src/pages/[lang]/games.astro

@@ -13,14 +13,14 @@ export function getStaticPaths() {
 
 <Layout title={t("pages.games")}>
   <h1 class="title-text">{t("games.title")}</h1>
-  <div class="grid">
+  <main id="main-content" class="grid">
     {
       Object.keys(games).map((key) => {
         const game = (games as any)[key];
         return <GameItem name={game.name} image={game.image} slugName={game.slug} />;
       })
     }
-  </div>
+  </main>
 </Layout>
 
 <style>

src/pages/[lang]/index.astro

@@ -13,7 +13,7 @@ export function getStaticPaths() {
 ---
 
 <Layout title={t("pages.home")}>
-  <div class="main-content">
+  <main id="main-content">
     <h1 class="title-text">{t("menu.welcome")}</h1>
     <div class="form-wrapper">
       <form class="url-input-form" id="url-input-form">
@@ -67,7 +67,7 @@ export function getStaticPaths() {
         </p>
       </div>
     </div>
-  </div>
+  </main>
   <ProxyRegistrar />
   <script>
     import { initTransport, registerSW } from "@components/ts/TransportManager";
@@ -142,7 +142,7 @@ export function getStaticPaths() {
 
 
 <style is:global>
-  .main-content {
+  #main-content {
     width: 100%;
     margin-top: 50px;
   }

src/pages/[lang]/settings.astro

@@ -15,6 +15,7 @@ export function getStaticPaths() {
 ---
 
 <Layout title={t("pages.settings")}>
+  <main id="main-content">
     <h1 class="title-text">{t("settings.title")}</h1>
     <div class="content-hidden">
       <div id="content-setting-tab-proxy">
@@ -53,6 +54,7 @@ export function getStaticPaths() {
       </div>
       <div id="current-content"></div>
     </div>
+  </main>
   <script is:inline>
     window.loadedContentStorage = {};
     window.currentlySelectedTab;