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

[A11y] Improve number inputs for screen-readers

Browse Source
This commit is contained in:
Richard Schreiber
2024-12-06 11:11:36 +01:00
committed by GitHub
parent 74edf10b04
commit ae29240e58
3 changed files with 34 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,13 +6,14 @@
{% load eventsignal %} {% load eventsignal %}
{% load rich_text %} {% load rich_text %}
{% for c in form.categories %} {% for c in form.categories %}
{% with category_idx=forloop.counter %}
<fieldset data-addon-max-count="{{ c.max_count }}"{% if c.multi_allowed %} data-addon-multi-allowed{% endif %}> <fieldset data-addon-max-count="{{ c.max_count }}"{% if c.multi_allowed %} data-addon-multi-allowed{% endif %}>
<legend>{{ c.category.name }}</legend> <legend>{{ c.category.name }}</legend>
{% if c.category.description %} {% if c.category.description %}
{{ c.category.description|rich_text }} {{ c.category.description|rich_text }}
{% endif %} {% endif %}
{% if c.min_count == c.max_count %} {% if c.min_count == c.max_count %}
<p class="addon-count-desc"> <p class="addon-count-desc" id="c-{{ form.pos.pk }}-{{ category_idx }}-addon-count-desc">
{% blocktrans trimmed count min_count=c.min_count %} {% blocktrans trimmed count min_count=c.min_count %}
You need to choose exactly one option from this category. You need to choose exactly one option from this category.
{% plural %} {% plural %}
@@ -21,7 +22,7 @@
</p> </p>
{% elif c.min_count == 0 and c.max_count >= c.items|length and not c.multi_allowed %} {% elif c.min_count == 0 and c.max_count >= c.items|length and not c.multi_allowed %}
{% elif c.min_count == 0 %} {% elif c.min_count == 0 %}
<p class="addon-count-desc"> <p class="addon-count-desc" id="c-{{ form.pos.pk }}-{{ category_idx }}-addon-count-desc">
{% blocktrans trimmed count max_count=c.max_count %} {% blocktrans trimmed count max_count=c.max_count %}
You can choose {{ max_count }} option from this category. You can choose {{ max_count }} option from this category.
{% plural %} {% plural %}
@@ -29,7 +30,7 @@
{% endblocktrans %} {% endblocktrans %}
</p> </p>
{% else %} {% else %}
<p class="addon-count-desc"> <p class="addon-count-desc" id="c-{{ form.pos.pk }}-{{ category_idx }}-addon-count-desc">
{% blocktrans trimmed with min_count=c.min_count max_count=c.max_count %} {% blocktrans trimmed with min_count=c.min_count max_count=c.max_count %}
You can choose between {{ min_count }} and {{ max_count }} options from You can choose between {{ min_count }} and {{ max_count }} options from
this category. this category.
@@ -58,7 +59,7 @@
</div> </div>
{% endif %} {% endif %}
{% if item.min_per_order and item.min_per_order > 1 %} {% if item.min_per_order and item.min_per_order > 1 %}
<p> <p id="cp-{{ form.pos.pk }}-item-{{ item.pk }}-min-order">
<small> <small>
{% blocktrans trimmed with num=item.min_per_order %} {% blocktrans trimmed with num=item.min_per_order %}
minimum amount to order: {{ num }} minimum amount to order: {{ num }}
@@ -196,12 +197,14 @@
{% endif %} {% endif %}
id="cp_{{ form.pos.pk }}_variation_{{ item.id }}_{{ var.id }}" id="cp_{{ form.pos.pk }}_variation_{{ item.id }}_{{ var.id }}"
name="cp_{{ form.pos.pk }}_variation_{{ item.id }}_{{ var.id }}" name="cp_{{ form.pos.pk }}_variation_{{ item.id }}_{{ var.id }}"
aria-label="{% blocktrans with item=item.name var=var %}Add {{ item }}, {{ var }} to cart{% endblocktrans %}"> aria-label="{% blocktrans with item=item.name var=var %}Add {{ item }}, {{ var }} to cart{% endblocktrans %}"
aria-describedby="c-{{ form.pos.pk }}-{{ category_idx }}-addon-count-desc">
<i class="fa fa-shopping-cart" aria-hidden="true"></i> <i class="fa fa-shopping-cart" aria-hidden="true"></i>
{% trans "Select" context "checkbox" %} {% trans "Select" context "checkbox" %}
</label> </label>
{% else %} {% else %}
<div class="input-item-count-group"> <fieldset class="input-item-count-group" aria-describedby="c-{{ form.pos.pk }}-{{ category_idx }}-addon-count-desc cp-{{ form.pos.pk }}-item-{{ item.pk }}-min-order">
<legend class="sr-only">{% blocktrans with item=item.name %}Add {{ item }}, {{ var }} to cart{% endblocktrans %}</legend>
<button type="button" data-step="-1" data-controls="cp_{{ form.pos.pk }}_variation_{{ item.id }}_{{ var.id }}" class="btn btn-default input-item-count-dec" aria-label="{% trans "Decrease quantity" %}">-</button> <button type="button" data-step="-1" data-controls="cp_{{ form.pos.pk }}_variation_{{ item.id }}_{{ var.id }}" class="btn btn-default input-item-count-dec" aria-label="{% trans "Decrease quantity" %}">-</button>
<input type="number" class="form-control input-item-count" placeholder="0" min="0" <input type="number" class="form-control input-item-count" placeholder="0" min="0"
{% if var.initial %}value="{{ var.initial }}"{% endif %} {% if var.initial %}value="{{ var.initial }}"{% endif %}
@@ -211,9 +214,9 @@
max="{{ c.max_count }}" max="{{ c.max_count }}"
id="cp_{{ form.pos.pk }}_variation_{{ item.id }}_{{ var.id }}" id="cp_{{ form.pos.pk }}_variation_{{ item.id }}_{{ var.id }}"
name="cp_{{ form.pos.pk }}_variation_{{ item.id }}_{{ var.id }}" name="cp_{{ form.pos.pk }}_variation_{{ item.id }}_{{ var.id }}"
aria-label="{% blocktrans with item=item.name var=var %}Quantity of {{ item }}, {{ var }} to order{% endblocktrans %}"> aria-label="{% trans "Quantity" %}">
<button type="button" data-step="1" data-controls="cp_{{ form.pos.pk }}_variation_{{ item.id }}_{{ var.id }}" class="btn btn-default input-item-count-inc" aria-label="{% trans "Increase quantity" %}">+</button> <button type="button" data-step="1" data-controls="cp_{{ form.pos.pk }}_variation_{{ item.id }}_{{ var.id }}" class="btn btn-default input-item-count-inc" aria-label="{% trans "Increase quantity" %}">+</button>
</div> </fieldset>
{% endif %} {% endif %}
</div> </div>
{% else %} {% else %}
@@ -250,7 +253,7 @@
{% include "pretixpresale/event/fragment_quota_left.html" with avail=item.cached_availability %} {% include "pretixpresale/event/fragment_quota_left.html" with avail=item.cached_availability %}
{% endif %} {% endif %}
{% if item.min_per_order and item.min_per_order > 1 %} {% if item.min_per_order and item.min_per_order > 1 %}
<p> <p id="cp-{{ form.pos.pk }}-item-{{ item.pk }}-min-order">
<small> <small>
{% blocktrans trimmed with num=item.min_per_order %} {% blocktrans trimmed with num=item.min_per_order %}
minimum amount to order: {{ num }} minimum amount to order: {{ num }}
@@ -341,12 +344,13 @@
name="cp_{{ form.pos.pk }}_item_{{ item.id }}" name="cp_{{ form.pos.pk }}_item_{{ item.id }}"
id="cp_{{ form.pos.pk }}_item_{{ item.id }}" id="cp_{{ form.pos.pk }}_item_{{ item.id }}"
aria-label="{% blocktrans with item=item.name %}Add {{ item }} to cart{% endblocktrans %}" aria-label="{% blocktrans with item=item.name %}Add {{ item }} to cart{% endblocktrans %}"
{% if item.description %} aria-describedby="cp-{{ form.pos.pk }}-item-{{ item.id }}-description"{% endif %}> aria-describedby="c-{{ form.pos.pk }}-{{ category_idx }}-addon-count-desc">
<i class="fa fa-shopping-cart" aria-hidden="true"></i> <i class="fa fa-shopping-cart" aria-hidden="true"></i>
{% trans "Select" context "checkbox" %} {% trans "Select" context "checkbox" %}
</label> </label>
{% else %} {% else %}
<div class="input-item-count-group"> <fieldset class="input-item-count-group" aria-describedby="c-{{ form.pos.pk }}-{{ category_idx }}-addon-count-desc cp-{{ form.pos.pk }}-item-{{ item.pk }}-min-order">
<legend class="sr-only">{% blocktrans with item=item.name %}Add {{ item }} to cart{% endblocktrans %}</legend>
<button type="button" data-step="-1" data-controls="cp_{{ form.pos.pk }}_item_{{ item.id }}" class="btn btn-default input-item-count-dec" aria-label="{% trans "Decrease quantity" %}">-</button> <button type="button" data-step="-1" data-controls="cp_{{ form.pos.pk }}_item_{{ item.id }}" class="btn btn-default input-item-count-dec" aria-label="{% trans "Decrease quantity" %}">-</button>
<input type="number" class="form-control input-item-count" placeholder="0" min="0" <input type="number" class="form-control input-item-count" placeholder="0" min="0"
{% if item.free_price %} {% if item.free_price %}
@@ -356,10 +360,9 @@
{% if item.initial %}value="{{ item.initial }}"{% endif %} {% if item.initial %}value="{{ item.initial }}"{% endif %}
name="cp_{{ form.pos.pk }}_item_{{ item.id }}" name="cp_{{ form.pos.pk }}_item_{{ item.id }}"
id="cp_{{ form.pos.pk }}_item_{{ item.id }}" id="cp_{{ form.pos.pk }}_item_{{ item.id }}"
aria-label="{% blocktrans with item=item.name %}Quantity of {{ item }} to order{% endblocktrans %}" aria-label="{% trans "Quantity" %}">
{% if item.description %} aria-describedby="cp-{{ form.pos.pk }}-item-{{ item.id }}-description"{% endif %}>
<button type="button" data-step="1" data-controls="cp_{{ form.pos.pk }}_item_{{ item.id }}" class="btn btn-default input-item-count-inc" aria-label="{% trans "Increase quantity" %}">+</button> <button type="button" data-step="1" data-controls="cp_{{ form.pos.pk }}_item_{{ item.id }}" class="btn btn-default input-item-count-inc" aria-label="{% trans "Increase quantity" %}">+</button>
</div> </fieldset>
{% endif %} {% endif %}
</div> </div>
{% else %} {% else %}
@@ -370,6 +373,7 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</fieldset> </fieldset>
{% endwith %}
{% empty %} {% empty %}
<em> <em>
{% trans "There are no add-ons available for this product." %} {% trans "There are no add-ons available for this product." %}

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

@@ -219,7 +219,8 @@
{% trans "Select" context "checkbox" %} {% trans "Select" context "checkbox" %}
</label> </label>
{% else %} {% else %}
<div class="input-item-count-group"> <fieldset class="input-item-count-group">
<legend class="sr-only">{% blocktrans with item=item.name %}Add {{ item }}, {{ var }} to cart{% endblocktrans %}</legend>
<button type="button" data-step="-1" data-controls="{{ form_prefix }}variation_{{ item.id }}_{{ var.id }}" class="btn btn-default input-item-count-dec" aria-label="{% trans "Decrease quantity" %}" <button type="button" data-step="-1" data-controls="{{ form_prefix }}variation_{{ item.id }}_{{ var.id }}" class="btn btn-default input-item-count-dec" aria-label="{% trans "Decrease quantity" %}"
{% if not ev.presale_is_running %}disabled{% endif %}>-</button> {% if not ev.presale_is_running %}disabled{% endif %}>-</button>
<input type="number" class="form-control input-item-count" placeholder="0" min="0" <input type="number" class="form-control input-item-count" placeholder="0" min="0"
@@ -230,10 +231,10 @@
max="{{ var.order_max }}" max="{{ var.order_max }}"
id="{{ form_prefix }}variation_{{ item.id }}_{{ var.id }}" id="{{ form_prefix }}variation_{{ item.id }}_{{ var.id }}"
name="{{ form_prefix }}variation_{{ item.id }}_{{ var.id }}" name="{{ form_prefix }}variation_{{ item.id }}_{{ var.id }}"
aria-label="{% blocktrans with item=item.name var=var.name %}Quantity of {{ item }}, {{ var }} to order{% endblocktrans %}"> aria-label="{% trans "Quantity" %}">
<button type="button" data-step="1" data-controls="{{ form_prefix }}variation_{{ item.id }}_{{ var.id }}" class="btn btn-default input-item-count-inc" aria-label="{% trans "Increase quantity" %}" <button type="button" data-step="1" data-controls="{{ form_prefix }}variation_{{ item.id }}_{{ var.id }}" class="btn btn-default input-item-count-inc" aria-label="{% trans "Increase quantity" %}"
{% if not ev.presale_is_running %}disabled{% endif %}>+</button> {% if not ev.presale_is_running %}disabled{% endif %}>+</button>
</div> </fieldset>
{% endif %} {% endif %}
</div> </div>
{% else %} {% else %}
@@ -370,7 +371,8 @@
{% trans "Select" context "checkbox" %} {% trans "Select" context "checkbox" %}
</label> </label>
{% else %} {% else %}
<div class="input-item-count-group"> <fieldset class="input-item-count-group">
<legend class="sr-only">{% blocktrans with item=item.name %}Add {{ item }} to cart{% endblocktrans %}</legend>
<button type="button" data-step="-1" data-controls="{{ form_prefix }}item_{{ item.id }}" class="btn btn-default input-item-count-dec" aria-label="{% trans "Decrease quantity" %}" <button type="button" data-step="-1" data-controls="{{ form_prefix }}item_{{ item.id }}" class="btn btn-default input-item-count-dec" aria-label="{% trans "Decrease quantity" %}"
{% if not ev.presale_is_running %}disabled{% endif %}>-</button> {% if not ev.presale_is_running %}disabled{% endif %}>-</button>
<input type="number" class="form-control input-item-count" placeholder="0" min="0" <input type="number" class="form-control input-item-count" placeholder="0" min="0"
@@ -382,11 +384,10 @@
max="{{ item.order_max }}" max="{{ item.order_max }}"
name="{{ form_prefix }}item_{{ item.id }}" name="{{ form_prefix }}item_{{ item.id }}"
id="{{ form_prefix }}item_{{ item.id }}" id="{{ form_prefix }}item_{{ item.id }}"
aria-label="{% blocktrans with item=item.name %}Quantity of {{ item }} to order{% endblocktrans %}" aria-label="{% trans "Quantity" %}">
{% if item.description %} aria-describedby="{{ form_prefix }}item-{{ item.id }}-description"{% endif %}>
<button type="button" data-step="1" data-controls="{{ form_prefix }}item_{{ item.id }}" class="btn btn-default input-item-count-inc" aria-label="{% trans "Increase quantity" %}" <button type="button" data-step="1" data-controls="{{ form_prefix }}item_{{ item.id }}" class="btn btn-default input-item-count-inc" aria-label="{% trans "Increase quantity" %}"
{% if not ev.presale_is_running %}disabled{% endif %}>+</button> {% if not ev.presale_is_running %}disabled{% endif %}>+</button>
</div> </fieldset>
{% endif %} {% endif %}
</div> </div>
{% else %} {% else %}

15
src/pretix/presale/templates/pretixpresale/event/voucher.html
View File

@@ -231,16 +231,17 @@
{% trans "Select" context "checkbox" %} {% trans "Select" context "checkbox" %}
</label> </label>
{% else %} {% else %}
<div class="input-item-count-group"> <fieldset class="input-item-count-group">
<legend class="sr-only">{% blocktrans with item=item.name %}Add {{ item }}, {{ var }} to cart{% endblocktrans %}</legend>
<button type="button" data-step="-1" data-controls="variation_{{ item.id }}_{{ var.id }}" class="btn btn-default input-item-count-dec" aria-label="{% trans "Decrease quantity" %}">-</button> <button type="button" data-step="-1" data-controls="variation_{{ item.id }}_{{ var.id }}" class="btn btn-default input-item-count-dec" aria-label="{% trans "Decrease quantity" %}">-</button>
<input type="number" class="form-control input-item-count" placeholder="0" min="0" <input type="number" class="form-control input-item-count" placeholder="0" min="0"
max="{{ var.order_max }}" max="{{ var.order_max }}"
id="variation_{{ item.id }}_{{ var.id }}" id="variation_{{ item.id }}_{{ var.id }}"
name="variation_{{ item.id }}_{{ var.id }}" name="variation_{{ item.id }}_{{ var.id }}"
{% if options == 1 %}value="1"{% endif %} {% if options == 1 %}value="1"{% endif %}
aria-label="{% blocktrans with item=item.name var=var.name %}Quantity of {{ item }}, {{ var }} to order{% endblocktrans %}"> aria-label="{% trans "Quantity" %}">
<button type="button" data-step="1" data-controls="variation_{{ item.id }}_{{ var.id }}" class="btn btn-default input-item-count-inc" aria-label="{% trans "Increase quantity" %}">+</button> <button type="button" data-step="1" data-controls="variation_{{ item.id }}_{{ var.id }}" class="btn btn-default input-item-count-inc" aria-label="{% trans "Increase quantity" %}">+</button>
</div> </fieldset>
{% endif %} {% endif %}
{% else %} {% else %}
<label> <label>
@@ -385,7 +386,8 @@
{% trans "Select" context "checkbox" %} {% trans "Select" context "checkbox" %}
</label> </label>
{% else %} {% else %}
<div class="input-item-count-group"> <fieldset class="input-item-count-group">
<legend class="sr-only">{% blocktrans with item=item.name %}Add {{ item }} to cart{% endblocktrans %}</legend>
<button type="button" data-step="-1" data-controls="item_{{ item.id }}" class="btn btn-default input-item-count-dec" aria-label="{% trans "Decrease quantity" %}">-</button> <button type="button" data-step="-1" data-controls="item_{{ item.id }}" class="btn btn-default input-item-count-dec" aria-label="{% trans "Decrease quantity" %}">-</button>
<input type="number" class="form-control input-item-count" <input type="number" class="form-control input-item-count"
placeholder="0" min="0" placeholder="0" min="0"
@@ -393,10 +395,9 @@
id="item_{{ item.id }}" id="item_{{ item.id }}"
name="item_{{ item.id }}" name="item_{{ item.id }}"
{% if options == 1 %}value="1"{% endif %} {% if options == 1 %}value="1"{% endif %}
aria-label="{% blocktrans with item=item.name %}Quantity of {{ item }} to order{% endblocktrans %}" aria-label="{% trans "Quantity" %}">
{% if item.description %} aria-describedby="item-{{ item.id }}-description"{% endif %}>
<button type="button" data-step="1" data-controls="item_{{ item.id }}" class="btn btn-default input-item-count-inc" aria-label="{% trans "Increase quantity" %}">+</button> <button type="button" data-step="1" data-controls="item_{{ item.id }}" class="btn btn-default input-item-count-inc" aria-label="{% trans "Increase quantity" %}">+</button>
</div> </fieldset>
{% endif %} {% endif %}
{% else %} {% else %}
<label> <label>