From 20896ab5a3ea5787b019a117718493b8faa248f1 Mon Sep 17 00:00:00 2001
From: Nikos Papadakis <nikos@papadakis.xyz>
Date: Thu, 17 Aug 2023 13:24:09 +0300
Subject: [PATCH] app: add 'Skip to content' link for accessibility'

---
 app/lib/prymn_web/components/layouts/app.html.heex | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/lib/prymn_web/components/layouts/app.html.heex b/app/lib/prymn_web/components/layouts/app.html.heex
index 025e311..83b54a8 100644
--- a/app/lib/prymn_web/components/layouts/app.html.heex
+++ b/app/lib/prymn_web/components/layouts/app.html.heex
@@ -1,4 +1,10 @@
 <header class="px-4 sm:px-6 lg:px-8">
+  <a
+    href="#main"
+    class="absolute left-0 -translate-y-full bg-black p-2 text-white transition-transform focus:transform-none"
+  >
+    <%= gettext("Skip to content") %>
+  </a>
   <div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
     <div class="flex items-center gap-4">
       <a href="/">
@@ -30,7 +36,7 @@
     </div>
   </div>
 </header>
-<main class="px-4 py-20 sm:px-6 lg:px-8">
+<main id="main" class="px-4 py-20 sm:px-6 lg:px-8">
   <div class="mx-auto max-w-2xl">
     <.flash_group flash={@flash} />
     <%= @inner_content %>