diff --git a/e2e-tests/accessibility.spec.ts b/e2e-tests/accessibility.spec.ts index 14575a8ed..8de2818a3 100644 --- a/e2e-tests/accessibility.spec.ts +++ b/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) -}) \ No newline at end of file +}) diff --git a/src/main/frontend/components/sidebar.cljs b/src/main/frontend/components/sidebar.cljs index 8950bb2cd..36d4debe0 100644 --- a/src/main/frontend/components/sidebar.cljs +++ b/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")} diff --git a/src/main/frontend/components/sidebar.css b/src/main/frontend/components/sidebar.css index 275c8d718..59355e53d 100644 --- a/src/main/frontend/components/sidebar.css +++ b/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; }