[A11y] fix tablist issues (#5060)

src/pretix/plugins/banktransfer/static/pretixplugins/banktransfer/swisscross.css

@@ -1,8 +1,7 @@
 .banktransfer-swiss-cross-overlay {
     position: relative;
     width: 150px;
-    height: 150px;
+    margin: 0 auto;
-    margin: 0 auto 10px;
 }
 .banktransfer-swiss-cross {
     position: absolute;

src/pretix/plugins/banktransfer/templates/pretixplugins/banktransfer/pending.html

@@ -44,34 +44,28 @@
         </p>
     </div>
     {% if settings.bank_details_type == "sepa" and any_barcodes %}
-        <div class="col-md-6 col-sm-6 hidden-xs text-center js-only blank-after">
+        <div class="tabcontainer col-md-6 col-sm-6 hidden-xs text-center js-only blank-after">
-            <ul class="nav nav-tabs" id="banktransfer_qrcodes_tabs" role="tablist">
+            <div id="banktransfer_qrcodes_tabs_content" class="tabpanels blank-after">
                 {% if swiss_qrbill %}
-                    <li class="active"><a href="#banktransfer_qrcodes_qrbill" role="tab" id="banktransfer_qrcodes_qrbill_tab" data-toggle="tab" aria-controls="banktransfer_qrcodes_qrbill" aria-expanded="true">QR-bill</a></li>
+                    <div id="banktransfer_qrcodes_qrbill"
-                {% endif %}
+                        role="tabpanel"
-                {% if eu_barcodes %}
+                        tabindex="0"
-                    <li {% if not swiss_qrbill %}class="active"{% endif %}><a href="#banktransfer_qrcodes_girocode" role="tab" id="banktransfer_qrcodes_girocode_tab" data-toggle="tab" aria-controls="banktransfer_qrcodes_girocode" aria-expanded="{% if swiss_qrbill %}false{% else %}true{% endif %}">EPC-QR</a></li>
+                        aria-labelledby="banktransfer_qrcodes_qrbill_tab"
-                    <li class=""><a href="#banktransfer_qrcodes_bezahlcode" role="tab" id="banktransfer_qrcodes_bezahlcode_tab" data-toggle="tab" aria-controls="banktransfer_qrcodes_bezahlcode" aria-expanded="false">BezahlCode</a></li>
+                    >
-                {% endif %}
+                        <div class="banktransfer-swiss-cross-overlay" role="figure" aria-labelledby="banktransfer_qrcodes_qrbill_tab banktransfer_qrcodes_label">
-            </ul>
-            <div class="tab-content" id="banktransfer_qrcodes_tabs_content">
-                {% if swiss_qrbill %}
-                    <div id="banktransfer_qrcodes_qrbill" class="tab-pane fade active in" role="tabpanel" aria-labelledby="banktransfer_qrcodes_qrbill_tab">
-                        <p class="small">
-                            {% trans "Scan the qr-code with your banking app" %}
-                        </p>
-                        <p class="banktransfer-swiss-cross-overlay">
                             <svg class="banktransfer-swiss-cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.8 19.8"><path stroke="#fff" stroke-width="1.436" d="M.7.7h18.4v18.4H.7z"/><path fill="#fff" d="M8.3 4h3.3v11H8.3z"/><path fill="#fff" d="M4.4 7.9h11v3.3h-11z"/></svg>
                             <script type="text/plain" data-size="150" data-replace-with-qr data-desc="{% trans 'Scan this image with your banking app’s QR-Reader to start the payment process.' %}">{{swiss_qrbill}}</script>
-                        </p>
+                        </div>
                     </div>
                 {% endif %}
                 {% if eu_barcodes %}
-                    <div id="banktransfer_qrcodes_girocode" class="tab-pane fade {% if not swiss_qrbill %}active in{% endif %}" role="tabpanel" aria-labelledby="banktransfer_qrcodes_girocode_tab">
+                    <div id="banktransfer_qrcodes_girocode"
-                        <p class="small">
+                        role="tabpanel"
-                            {% trans "Scan the qr-code with your banking app" %}
+                        tabindex="0"
-                        </p>
+                        {{ swiss_qrbill|yesno:'hidden,' }}
-                        <p>
+                        aria-labelledby="banktransfer_qrcodes_girocode_tab"
+                    >
+                        <div role="figure" aria-labelledby="banktransfer_qrcodes_girocode_tab banktransfer_qrcodes_label">
                             <script type="text/plain" data-size="150" data-replace-with-qr data-desc="{% trans 'Scan this image with your banking app’s QR-Reader to start the payment process.' %}">BCD
 002
 2
@@ -85,20 +79,55 @@ SCT
 {{ code }}
 
 </script>
-                        </p>
+                        </div>
                     </div>
-                    <div id="banktransfer_qrcodes_bezahlcode" class="tab-pane fade" role="tabpanel" aria-labelledby="banktransfer_qrcodes_bezahlcode_tab">
+                    <div id="banktransfer_qrcodes_bezahlcode"
-                        <p class="small">
+                        role="tabpanel"
-                            {% trans "Scan the qr-code with your banking app" %}
+                        tabindex="0"
-                        </p>
+                        hidden
-                        <p>
+                        aria-labelledby="banktransfer_qrcodes_bezahlcode_tab"
-                            <a aria-label="{% trans "Open BezahlCode in your banking app to start the payment process." %}" href="bank://singlepaymentsepa?name={{ settings.bank_details_sepa_name|urlencode }}&iban={{ settings.bank_details_sepa_iban }}&bic={{ settings.bank_details_sepa_bic }}&amount={{ amount|commadecimal }}&reason={{ code }}&currency={{ event.currency }}">
+                    >
+                        <a aria-label="{% trans "Open BezahlCode in your banking app to start the payment process." %}" href="bank://singlepaymentsepa?name={{ settings.bank_details_sepa_name|urlencode }}&iban={{ settings.bank_details_sepa_iban }}&bic={{ settings.bank_details_sepa_bic }}&amount={{ amount|commadecimal }}&reason={{ code }}&currency={{ event.currency }}">
+                            <div role="figure" aria-labelledby="banktransfer_qrcodes_bezahlcode_tab banktransfer_qrcodes_label">
                                 <script type="text/plain" data-size="150" data-replace-with-qr data-desc="{% trans 'Scan this image with your banking app’s QR-Reader to start the payment process.' %}">bank://singlepaymentsepa?name={{ settings.bank_details_sepa_name|urlencode }}&iban={{ settings.bank_details_sepa_iban }}&bic={{ settings.bank_details_sepa_bic }}&amount={{ amount|commadecimal }}&reason={{ code }}&currency={{ event.currency }}</script>
-                            </a>
+                            </div>
-                        </p>
+                        </a>
                     </div>
                 {% endif %}
             </div>
+            <div id="banktransfer_qrcodes_tabs" role="tablist" aria-labelledby="banktransfer_qrcodes_label" class="blank-after btn-group">
+            {% if swiss_qrbill %}
+                <button
+                    class="btn btn-default"
+                    id="banktransfer_qrcodes_qrbill_tab"
+                    type="button"
+                    role="tab"
+                    aria-controls="banktransfer_qrcodes_qrbill"
+                    aria-selected="true"
+                    tabindex="-1">QR-bill</button>
+            {% endif %}
+            {% if eu_barcodes %}
+                <button
+                    class="btn btn-default"
+                    id="banktransfer_qrcodes_girocode_tab"
+                    type="button"
+                    role="tab"
+                    aria-controls="banktransfer_qrcodes_girocode"
+                    aria-selected="{{ swiss_qrbill|yesno:"false,true" }}"
+                    tabindex="-1">EPC-QR</button>
+                <button
+                    class="btn btn-default"
+                    id="banktransfer_qrcodes_bezahlcode_tab"
+                    type="button"
+                    role="tab"
+                    aria-controls="banktransfer_qrcodes_bezahlcode"
+                    aria-selected="false"
+                    tabindex="-1">BezahlCode</button>
+            {% endif %}
+            </div>
+            <p class="text-muted" id="banktransfer_qrcodes_label">
+                {% trans "Scan the QR code with your banking app" %}
+            </p>
         </div>
     {% endif %}
 </div>

src/pretix/static/pretixpresale/js/ui/main.js

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

src/pretix/static/pretixpresale/scss/main.scss

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