feat: skip to main content button

e2e-tests/accessibility.spec.ts

@@ -7,4 +7,4 @@ test('check a11y for the whole page', async ({ page }) => {
     await injectAxe(page)
     await createRandomPage(page)
     await checkA11y(page)
-})
+})

src/main/frontend/components/sidebar.cljs

@@ -602,7 +602,12 @@
       {:class (util/classnames [{:ls-left-sidebar-open left-sidebar-open?
                                  :ls-right-sidebar-open sidebar-open?
                                  :ls-wide-mode wide-mode?}])}
-
+      [:button#skip-to-main
+       {:click #(.focus (gdom/getElement "#main-content-container"))
+        :on-key-press (fn [e]
+                        (when (= (.-key e) "Enter")
+                          (.focus (gdom/getElement "#main-content-container"))))}
+       "Skip to main content"]
       [:div.#app-container
        [:div#left-container
         {:class (if (state/sub :ui/sidebar-open?) "overflow-hidden" "w-full")}

src/main/frontend/components/sidebar.css

@@ -25,6 +25,20 @@
   flex: 0 0 100%;
 }
 
+#skip-to-main {
+  @apply fixed p-2 rounded;
+
+  left: 50%;
+  transform: translate(-50%, 0);
+  background-color: var(--ls-secondary-background-color);
+  top: -100px;
+  z-index: 10000;
+
+  &:focus {
+    top: 20px;
+  }
+}
+
 #left-container {
   @apply flex flex-1 flex-col relative h-screen;
 }