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);