[A11y] Improve filterform focus management

src/pretix/presale/templates/pretixpresale/event/index.html

@@ -108,7 +108,7 @@
                     {% include "pretixpresale/fragment_event_list_filter.html" with request=request %}
                 </div>
             {% endif %}
-            <div class="panel-body">
+            <div class="panel-body" id="events-filter-result">
                 {% cache_large 15 subevent_list subevent_list_cache_key %}
                     {% if subevent_list.list_type == "calendar" %}
                         {% include "pretixpresale/event/fragment_subevent_calendar.html" %}

src/pretix/presale/templates/pretixpresale/fragment_event_list_filter.html

@@ -5,7 +5,7 @@
 {% load getitem %}
 
 {% if filter_form.fields %}
-    <form class="event-list-filter-form" method="get" data-save-scrollpos>
+    <form class="event-list-filter-form" method="get" data-save-scrollpos data-focus-after-submit="events-filter-result">
         <input type="hidden" name="filtered" value="1">
         {% for f, v in request_get_items %}
             {% if f not in filter_form.fields and f != "page" %}

src/pretix/presale/templates/pretixpresale/organizers/calendar.html

@@ -33,7 +33,7 @@
                 {% include "pretixpresale/fragment_event_list_filter.html" with request=request %}
             </div>
         {% endif %}
-        <div class="panel-body">
+        <div class="panel-body" id="events-filter-result">
             <nav aria-label="{% trans "calendar navigation" %}">
                 <ul class="row calendar-nav">
                     <li class="text-left flip">

src/pretix/presale/templates/pretixpresale/organizers/calendar_day.html

@@ -33,7 +33,7 @@
                 {% include "pretixpresale/fragment_event_list_filter.html" with request=request %}
             </div>
         {% endif %}
-        <div class="panel-body">
+        <div class="panel-body" id="events-filter-result">
             <nav aria-label="{% trans "calendar navigation" %}">
                 <ul class="row calendar-nav">
                     <li class="text-left flip">

src/pretix/presale/templates/pretixpresale/organizers/calendar_week.html

@@ -33,7 +33,7 @@
                 {% include "pretixpresale/fragment_event_list_filter.html" with request=request %}
             </div>
         {% endif %}
-        <div class="panel-body">
+        <div class="panel-body" id="events-filter-result">
             <nav aria-label="{% trans "calendar navigation" %}">
                 <ul class="row calendar-nav">
                     <li class="text-left flip">

src/pretix/presale/templates/pretixpresale/organizers/index.html

@@ -45,7 +45,7 @@
         </div>
     {% endif %}
         {% if events %}
-            <div class="panel-body">
+            <div class="panel-body" id="events-filter-result">
                 <div class="event-list full-width-list alternating-rows">
                 {% for e in events %}{% eventurl e "presale:event.index" as url %}
                     <article class="row" aria-labelledby="event-{{ e.pk }}-label" aria-describedby="event-{{ e.pk }}-desc">

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

@@ -135,6 +135,29 @@ let form_handlers = function (el) {
         }
         wait();
     });
+
+	// usually a hash in the action-url of a form is enough to make the browser jump to the focus-point
+	// filter-form on subevents needs to be a bit more clever as we only want the list/calendar to be focused
+	// when the form was actually submitted, not when an URL-with-hash is shared/loaded without form-submit
+    el.find("form[data-focus-after-submit]").each(function (i, form) {
+    	$(form).on("submit", function (e) {
+    		var currentElement = document.activeElement;
+    		if (currentElement && !$(currentElement).is(':submit')) {
+    			window.sessionStorage.setItem("autofocus", currentElement.id);
+    		} else {
+    			window.sessionStorage.setItem("autofocus", form.getAttribute("data-focus-after-submit"));
+    		}
+    	});
+    });
+    if (window.sessionStorage.getItem("autofocus")) {
+    	var afElement = document.getElementById(window.sessionStorage.getItem("autofocus"));
+    	if (afElement) {
+    		afElement.tabIndex = 0;
+    		afElement.focus();
+    	}
+    	window.sessionStorage.removeItem("autofocus");
+    }
+
 	el.find('.input-item-count-dec, .input-item-count-inc').on('click', function (e) {
 		e.preventDefault()
 		let step = parseFloat(this.getAttribute('data-step'))