CGM_Public/pretix_original
2
0
Fork 1
mirror of https://github.com/pretix/pretix.git synced 2026-05-03 14:54:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

[A11y] add skip-link to main content (#5087)

Browse Source 
* [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
This commit is contained in:
Richard Schreiber
2025-05-13 13:37:21 +02:00
committed by GitHub
parent 6d0368a1bb
commit caf291630c
3 changed files with 31 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/pretix/presale/templates/pretixpresale/base.html
View File

@@ -44,6 +44,9 @@
</head>
<body class="nojs" data-locale="{{ request.LANGUAGE_CODE }}" data-now="{% now "U.u" %}" data-datetimeformat="{{ js_datetime_format }}" data-timeformat="{{ js_time_format }}" data-dateformat="{{ js_date_format }}" data-datetimelocale="{{ js_locale }}" data-currency="{{ request.event.currency }}">
{{ html_page_header|safe }}
<nav id="skip-to-main" role="navigation" aria-label="{% trans "Skip link" context "skip-to-main-nav" %}" class="sr-only on-focus-visible">
<p><a href="#content">{% trans "Skip to main content" %}</a></p>
</nav>
<header>
{% if ie_deprecation_warning %}
<div class="old-browser-warning">

4
src/pretix/static/pretixpresale/js/ui/main.js
View File

@@ -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 () {

24
src/pretix/static/pretixpresale/scss/main.scss
View File

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