[A11y] Fix cookie-consent-form labels + help-text markup (#5113)

* [A11y] Fix cookie-consent-form labels + help-text markup

* remove method=dialog for now
This commit is contained in:
Richard Schreiber
2025-05-15 13:21:04 +02:00
committed by GitHub
parent 6b331888e9
commit bf3ee608ba
2 changed files with 40 additions and 27 deletions

View File

@@ -55,6 +55,7 @@
<div class="modal-card-content">
<h3 id="cookie-consent-modal-label"></h3>
<div id="cookie-consent-modal-description">
<form class="form-horizontal">
{% with request.event|default:request.organizer as sh %}
<h3>{{ sh.settings.cookie_consent_dialog_title }}</h3>
{{ sh.settings.cookie_consent_dialog_text|rich_text }}
@@ -70,40 +71,42 @@
</summary>
<div class="checkbox">
<label>
<input type="checkbox" disabled checked="">
{% trans "Required cookies" %}<br>
<span class="text-muted">
{% trans "Functional cookies (e.g. shopping cart, login, payment, language preference) and technical cookies (e.g. security purposes)" %}
</span>
<input type="checkbox" disabled checked="" aira-describedby="cookie-consent-checkbox-required-description">
{% trans "Required cookies" %}
</label>
</div>
<div class="help-block" id="cookie-consent-checkbox-required-description">
<p>{% trans "Functional cookies (e.g. shopping cart, login, payment, language preference) and technical cookies (e.g. security purposes)" %}</p>
</div>
{% for cp in cookie_providers %}
<div class="checkbox">
<label>
<input type="checkbox" name="{{ cp.identifier }}">
{{ cp.provider_name }}<br>
<span class="text-muted">
{% for c in cp.usage_classes %}
{% if forloop.counter0 > 0 %}&middot; {% endif %}
{% if c.value == 1 %}
{% trans "Functionality" context "cookie_usage" %}
{% elif c.value == 2 %}
{% trans "Analytics" context "cookie_usage" %}
{% elif c.value == 3 %}
{% trans "Marketing" context "cookie_usage" %}
{% elif c.value == 4 %}
{% trans "Social features" context "cookie_usage" %}
{% endif %}
{% endfor %}
{% if cp.privacy_url %}
&middot;
<a href="{% safelink cp.privacy_url %}" target="_blank">
{% trans "Privacy policy" %}
</a>
{% endif %}
</span>
<input type="checkbox" name="{{ cp.identifier }}" aira-describedby="cookie-consent-checkbox-{{ cp.identifier }}-description">
{{ cp.provider_name }}
</label>
</div>
<div class="help-block" id="cookie-consent-checkbox-{{ cp.identifier }}-description">
<p>
{% for c in cp.usage_classes %}
{% if forloop.counter0 > 0 %}&middot; {% endif %}
{% if c.value == 1 %}
{% trans "Functionality" context "cookie_usage" %}
{% elif c.value == 2 %}
{% trans "Analytics" context "cookie_usage" %}
{% elif c.value == 3 %}
{% trans "Marketing" context "cookie_usage" %}
{% elif c.value == 4 %}
{% trans "Social features" context "cookie_usage" %}
{% endif %}
{% endfor %}
{% if cp.privacy_url %}
&middot;
<a href="{% safelink cp.privacy_url %}" target="_blank">
{% trans "Privacy policy" %}
</a>
{% endif %}
</p>
</div>
{% endfor %}
</details>
<div class="row">
@@ -130,6 +133,7 @@
</p>
{% endif %}
{% endwith %}
<form>
</div>
</div>
</div>

View File

@@ -53,6 +53,15 @@ a.btn, button.btn {
}
}
}
.checkbox + .help-block {
padding-left: 20px;
margin-top: 0;
margin-bottom: 0;
p {
margin-bottom: 0;
}
}
output {
padding-top: $padding-base-vertical;
}