CGM_Public/pretix_original
2
0
Fork 1
mirror of https://github.com/pretix/pretix.git synced 2026-05-06 15:24:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

[A11y] fix tablist issues (#5060)

Browse Source
This commit is contained in:
Richard Schreiber
2025-05-05 12:16:04 +02:00
committed by GitHub
parent f71eb195c4
commit 3dedfd6ee0
4 changed files with 108 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -314,6 +314,49 @@ function setup_basics(el) {
$(this).parent().parent().find('.addon-variation-description').stop().slideDown();
}
});
// tabs - see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/ for reference
el.find('.tabcontainer').each(function() {
var currentTab;
function setCurrentTab(tab) {
if (tab == currentTab) return;
if (currentTab) {
currentTab.setAttribute('aria-selected', 'false');
currentTab.tabIndex = -1;
currentTab.classList.remove('active');
document.getElementById(currentTab.getAttribute('aria-controls')).setAttribute('hidden', 'hidden');
}
tab.setAttribute('aria-selected', 'true');
tab.removeAttribute('tabindex');
tab.classList.add('active');
document.getElementById(tab.getAttribute('aria-controls')).removeAttribute('hidden');
currentTab = tab;
}
var tabs = $('button[role=tab]').on('keydown', function(event) {
if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].indexOf(event.key) == -1) {
return;
}
event.stopPropagation();
event.preventDefault();
if (event.key == 'ArrowLeft') {
setCurrentTab(currentTab.previousElementSibling || lastTab);
} else if (event.key == 'ArrowRight') {
setCurrentTab(currentTab.nextElementSibling || firstTab);
} else if (event.key == 'Home') {
setCurrentTab(firstTab);
} else if (event.key == 'End') {
setCurrentTab(lastTab);
}
currentTab.focus();
}).on('click', function (event) {
setCurrentTab(this);
});
var firstTab = tabs.first().get(0);
var lastTab = tabs.last().get(0);
setCurrentTab(tabs.filter('[aria-selected=true]').get(0));
});
}
function setup_week_calendar() {

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

@@ -112,9 +112,10 @@ a, .btn-link {
*/
/* bootstrap sets outline-offset with :active:focus so we need to match specifity of selector */
/* see line 26, pretix/static/bootstrap/scss/bootstrap/_buttons.scss */
button:focus, a:focus, .btn:focus, summary:focus,
button:focus, a:focus, .btn:focus, summary:focus, div:focus,
/*button:active, a:active, .btn:active, summary:active,*/
button:active:focus, a:active:focus, .btn:active:focus, summary:active:focus,
button:active:focus, a:active:focus, .btn:active:focus, summary:active:focus, div:active:focus,
button.active:focus, a.active:focus, .btn.active:focus,
input:focus, .form-control:focus, .btn-checkbox:has(input:focus),
.input-item-count-group:has(input:focus), .input-group-price:has(input:focus) {
outline: 2px solid $link-hover-color;