entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 10 Releases Wiki Activity

templates: add progressbar role to form steps (#40921)

This commit is contained in:
Frédéric Péters 2023-05-07 10:01:10 +02:00
parent ddbf32d982
commit 2e979748c3
1 changed files with 37 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
templates/wcs/front/formdata_steps.html
View File

@ -1,34 +1,41 @@
{% load i18n %} {% load i18n %}
<header id="steps" class="wcs-steps steps-{{page_labels|length}}"> <header id="steps" class="wcs-steps steps-{{page_labels|length}}">
<h2>{% trans "Steps" %}</h2> <h2 id="steps--title">{% trans "Steps" %}</h2>
{% block steps-list %} <div role="progressbar"
<ol class="wcs-steps--list"> aria-labelledby="steps--title"
{% for page_label in page_labels %} aria-valuemin="1"
{% spaceless %} aria-valuenow="{{ current_page_no }}"
<li aria-valuemax="{{ page_labels|length }}"
class="wcs-step aria-valuetext="Étape {{ current_page_no }} : {{ page_labels|get:current_page_index }}">
{% if forloop.first %}first{% endif %} {% block steps-list %}
{% if forloop.last %}last{% endif %} <ol class="wcs-steps--list">
{% if forloop.counter == current_page_no %}current{% endif %} {% for page_label in page_labels %}
{% if forloop.counter < current_page_no %}step-before{% endif %} {% spaceless %}
{% if forloop.counter > current_page_no %}step-after{% endif %}" > <li
<abbr class="wcs-step
aria-label="Étape {{ forloop.counter }} sur {{ page_labels|length }}:" {% if forloop.first %}first{% endif %}
title="Étape {{ forloop.counter }} sur {{ page_labels|length }}" {% if forloop.last %}last{% endif %}
class="marker wcs-step--marker"> {% if forloop.counter == current_page_no %}current{% endif %}
<span class="wcs-step--marker-nb"> {% if forloop.counter < current_page_no %}step-before{% endif %}
{{ forloop.counter }} {% if forloop.counter > current_page_no %}step-after{% endif %}" >
<abbr
aria-label="Étape {{ forloop.counter }} sur {{ page_labels|length }}:"
title="Étape {{ forloop.counter }} sur {{ page_labels|length }}"
class="marker wcs-step--marker">
<span class="wcs-step--marker-nb">
{{ forloop.counter }}
</span>
<span class="wcs-step--marker-total">
{{ page_labels|length }}
</span>
</abbr>
<span class="label wcs-step--label">{{ page_label }}
{% if forloop.counter == current_page_no %}<span class="sr-only">(étape courante)</span>{% endif %}
</span> </span>
<span class="wcs-step--marker-total"> </li>
{{ page_labels|length }} {% endspaceless %}
</span> {% endfor %}
</abbr> </ol>
<span class="label wcs-step--label">{{ page_label }} {% endblock %}
{% if forloop.counter == current_page_no %}<span class="sr-only">(étape courante)</span>{% endif %} </div>
</span>
</li>
{% endspaceless %}
{% endfor %}
</ol>
{% endblock %}
</header> </header>