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 variations toggle-button missing aria-controls (#5237)

Browse Source
This commit is contained in:
Richard Schreiber
2025-06-11 10:46:53 +02:00
committed by GitHub
parent 6c9f66487d
commit e8abe5cad8
3 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/pretix/presale/templates/pretixpresale/event/fragment_addon_choice.html
View File

@@ -96,8 +96,8 @@
{% if not event.settings.show_variations_expanded %} {% if not event.settings.show_variations_expanded %}
<button type="button" data-toggle="variations" class="btn btn-default btn-block js-only" <button type="button" data-toggle="variations" class="btn btn-default btn-block js-only"
data-label-alt="{% trans "Hide variants" %}" data-label-alt="{% trans "Hide variants" %}"
aria-expanded="false" aria-expanded="false" aria-controls="cp-{{ form.pos.pk }}-item-{{ item.pk }}-variations"
aria-label="{% blocktrans trimmed with item=item.name count=item.available_variations|length %}Show {{count}} variants of {{item}}{% endblocktrans %}"> aria-describedby="cp-{{ form.pos.pk }}-item-{{ item.pk }}-legend">
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i> <i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
<span>{% trans "Show variants" %}</span> <span>{% trans "Show variants" %}</span>
</button> </button>
@@ -105,7 +105,7 @@
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="variations {% if not event.settings.show_variations_expanded %}variations-collapsed{% endif %}"> <div class="variations {% if not event.settings.show_variations_expanded %}variations-collapsed{% endif %}" id="cp-{{ form.pos.pk }}-item-{{ item.pk }}-variations">
{% for var in item.available_variations %} {% for var in item.available_variations %}
<article aria-labelledby="cp-{{ form.pos.pk }}-item-{{ item.pk }}-{{ var.pk }}-legend"{% if var.description %} aria-describedby="cp-{{ form.pos.pk }}-item-{{ item.pk }}-{{ var.pk }}-description"{% endif %} class="row-fluid product-row variation" <article aria-labelledby="cp-{{ form.pos.pk }}-item-{{ item.pk }}-{{ var.pk }}-legend"{% if var.description %} aria-describedby="cp-{{ form.pos.pk }}-item-{{ item.pk }}-{{ var.pk }}-description"{% endif %} class="row-fluid product-row variation"
{% if not item.free_price %} {% if not item.free_price %}

6
src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
View File

@@ -101,8 +101,8 @@
{% endif %} {% endif %}
<button type="button" data-toggle="variations" class="btn btn-default btn-block js-only" <button type="button" data-toggle="variations" class="btn btn-default btn-block js-only"
data-label-alt="{% trans "Hide variants" %}" data-label-alt="{% trans "Hide variants" %}"
aria-expanded="false" aria-expanded="false" aria-controls="{{ form_prefix }}item-{{ item.pk }}-variations"
aria-label="{% blocktrans trimmed with item=item.name count=item.available_variations|length %}Show {{count}} variants of {{ item }}{% endblocktrans %}"> aria-describedby="{{ form_prefix }}item-{{ item.pk }}-legend">
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i> <i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
<span>{% trans "Show variants" %}</span> <span>{% trans "Show variants" %}</span>
</button> </button>
@@ -110,7 +110,7 @@
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="variations {% if not event.settings.show_variations_expanded %}variations-collapsed{% endif %}"> <div class="variations {% if not event.settings.show_variations_expanded %}variations-collapsed{% endif %}" id="{{ form_prefix }}item-{{ item.pk }}-variations">
{% for var in item.available_variations %} {% for var in item.available_variations %}
<article aria-labelledby="{{ form_prefix }}item-{{ item.pk }}-{{ var.pk }}-legend"{% if var.description %} aria-describedby="{{ form_prefix }}item-{{ item.pk }}-{{ var.pk }}-description"{% endif %} class="row product-row variation" id="{{ form_prefix }}item-{{ item.pk }}-{{ var.pk }}" <article aria-labelledby="{{ form_prefix }}item-{{ item.pk }}-{{ var.pk }}-legend"{% if var.description %} aria-describedby="{{ form_prefix }}item-{{ item.pk }}-{{ var.pk }}-description"{% endif %} class="row product-row variation" id="{{ form_prefix }}item-{{ item.pk }}-{{ var.pk }}"
{% if not item.free_price %} {% if not item.free_price %}

4
src/pretix/static/pretixbase/js/details.js
View File

@@ -117,7 +117,7 @@ setup_collapsible_details = function (el) {
el.find("article button[data-toggle=variations]").click(function (e) { el.find("article button[data-toggle=variations]").click(function (e) {
var $button = $(this); var $button = $(this);
var $details = $button.closest("article"); var $details = $button.closest("article");
var $detailsNotSummary = $(".variations", $details); var $detailsNotSummary = $button.attr("aria-controls") ? $('#' + $button.attr("aria-controls")) : $(".variations", $details);
var isOpen = !$detailsNotSummary.prop("hidden"); var isOpen = !$detailsNotSummary.prop("hidden");
if ($detailsNotSummary.is(':animated')) { if ($detailsNotSummary.is(':animated')) {
e.preventDefault(); e.preventDefault();
@@ -125,7 +125,7 @@ setup_collapsible_details = function (el) {
} }
var altLabel = $button.attr("data-label-alt"); var altLabel = $button.attr("data-label-alt");
$button.attr("data-label-alt", $button.text()); $button.attr("data-label-alt", $button.text().trim());
$button.find("span").text(altLabel); $button.find("span").text(altLabel);
$button.attr("aria-expanded", !isOpen); $button.attr("aria-expanded", !isOpen);