From caf291630cf9d444ed5de80608bc6bca62bc617f Mon Sep 17 00:00:00 2001 From: Richard Schreiber Date: Tue, 13 May 2025 13:37:21 +0200 Subject: [PATCH] [A11y] add skip-link to main content (#5087) * [A11y] add skip-link to main content * fix contrast for skip-link * fix overlay with back-to-organizer-link * add fallback if no main-element * update nav-label --- .../presale/templates/pretixpresale/base.html | 3 +++ src/pretix/static/pretixpresale/js/ui/main.js | 4 ++++ .../static/pretixpresale/scss/main.scss | 24 +++++++++++++++++++ 3 files changed, 31 insertions(+) diff --git a/src/pretix/presale/templates/pretixpresale/base.html b/src/pretix/presale/templates/pretixpresale/base.html index 3c6b5ed842..a967247be2 100644 --- a/src/pretix/presale/templates/pretixpresale/base.html +++ b/src/pretix/presale/templates/pretixpresale/base.html @@ -44,6 +44,9 @@ {{ html_page_header|safe }} +
{% if ie_deprecation_warning %}
diff --git a/src/pretix/static/pretixpresale/js/ui/main.js b/src/pretix/static/pretixpresale/js/ui/main.js index 1ae8458c66..c678fc4122 100644 --- a/src/pretix/static/pretixpresale/js/ui/main.js +++ b/src/pretix/static/pretixpresale/js/ui/main.js @@ -263,6 +263,10 @@ function setup_basics(el) { el.find(".js-only").removeClass("js-only"); el.find(".js-hidden").hide(); + // make sure to always have a #content for skip-link to work + if (!document.querySelector("#content")) { + (document.querySelector('main') || document.querySelector('.page-header + *')).id = "content" + } el.find("div.collapsed").removeClass("collapsed").addClass("collapse"); el.find(".has-error, .alert-danger").each(function () { diff --git a/src/pretix/static/pretixpresale/scss/main.scss b/src/pretix/static/pretixpresale/scss/main.scss index 89bcb99af2..c018fe16ae 100644 --- a/src/pretix/static/pretixpresale/scss/main.scss +++ b/src/pretix/static/pretixpresale/scss/main.scss @@ -69,6 +69,30 @@ html { } } +.on-focus-visible:focus, .on-focus-visible:focus-within { + height: auto; + width: auto; + overflow: auto; + clip: auto; +} +#skip-to-main { + /* padding is needed to make focus-outline visible */ + padding: 8px; + background-color: inherit; + p { + margin: 0; + } + a { + padding: .125em .5em; + display: inline-block; + color: var(--pretix-link-contrast-color); + outline-color: inherit; + } + a:active, a:hover, a:focus { + color: var(--pretix-link-hover-contrast-color); + } +} + /* fixe for bootstrap using px-values for fontsize */ .panel-title { font-size: ($font-size-base * 1.125);