Skip to content

Commit be8032f

Browse files
Phil23Phil23
committed
Merge branch 'next-33689/semantic-form-headings' into 'trunk'
NEXT-33689 - Improved registration form accessibility See merge request shopware/6/product/platform!14501
2 parents c61702c + d6810c8 commit be8032f

File tree

7 files changed

+50
-15
lines changed

7 files changed

+50
-15
lines changed

‎changelog/_unreleased/2024-08-13-registration-form-fieldset-improvement.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: Improved registration form accessibility
3+
issue: NEXT-33689
4+
---
5+
# Storefront
6+
* Added new block `component_account_register_personal_legend` to `register.html.twig`.
7+
* Added new legend element with class `register-personal-title` to register form in `register.html.twig` which is only visible to screen readers.
8+
* Added new label `registerPersonalLegend` for the legend of the personal information fieldset.
9+
* Changed form sections in `register.html.twig` from `div` to `fieldset`.
10+
* Changed card titles of form sections from `div` to `legend`.
11+
* Changed the font-size of `form-text` to use `rem` instead of the Bootstrap default value which is based on `em`.

‎src/Storefront/Resources/app/storefront/src/scss/component/_forms.scss

+4
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@ https://getbootstrap.com/docs/5.2/forms/overview
3636
margin-bottom: $spacer;
3737
}
3838

39+
.form-text {
40+
font-size: 0.875rem;
41+
}
42+
3943
.forms-boolean {
4044
display: block;
4145
border: 1px solid $border-color;

‎src/Storefront/Resources/app/storefront/src/scss/page/account/_register.scss

+8
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
11
.register-form .privacy-notice {
22
margin-bottom: $spacer;
33
}
4+
5+
.register-different-shipping {
6+
margin-top: $spacer;
7+
}
8+
9+
.register-shipping {
10+
margin-top: $spacer-xl;
11+
}

‎src/Storefront/Resources/snippet/de_DE/storefront.de-DE.json

+1
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@
127127
"registerAdvantage3": "Bestellübersicht und Versandinformationen",
128128
"registerAdvantage4": "Verwalten Sie Ihr Newsletter-Abonnement",
129129
"registerPersonalHeader": "Ich bin Neukunde!",
130+
"registerPersonalLegend": "Persönliche Informationen",
130131
"registerAddressBillingHeader": "Ihre Adresse",
131132
"registerAddressShippingHeader": "Abweichende Lieferadresse",
132133
"personalTypeLabel": "Kontotyp",

‎src/Storefront/Resources/snippet/en_GB/storefront.en-GB.json

+1
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@
127127
"registerAdvantage3": "Order overview and shipping information",
128128
"registerAdvantage4": "Manage your newsletter subscription",
129129
"registerPersonalHeader": "I'm a new customer!",
130+
"registerPersonalLegend": "Personal information",
130131
"registerAddressBillingHeader": "Your address",
131132
"registerAddressShippingHeader": "Alternative shipping address",
132133
"personalTypeLabel": "Account type",

‎src/Storefront/Resources/views/storefront/component/account/register.html.twig

+17-10
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,14 @@
4242
{% endblock %}
4343

4444
{% block component_account_register_personal %}
45-
<div class="register-personal mb-3">
45+
<fieldset class="register-personal mb-3">
46+
47+
{% block component_account_register_personal_legend %}
48+
<legend class="register-personal-title visually-hidden">
49+
{{ 'account.registerPersonalLegend'|trans|sw_sanitize }}
50+
</legend>
51+
{% endblock %}
52+
4653
{% block component_account_register_personal_fields %}
4754
{% block component_account_register_personal_address_fields %}
4855
{% if feature('v6.7.0.0') %}
@@ -251,18 +258,18 @@
251258
</div>
252259
{% endblock %}
253260
{% endblock %}
254-
</div>
261+
</fieldset>
255262
{% endblock %}
256263

257264
{% block component_account_register_address %}
258265
<div class="register-address mb-5">
259266
{% block component_account_register_address_fields %}
260267
{% block component_account_register_address_billing %}
261-
<div class="register-billing">
268+
<fieldset class="register-billing">
262269
{% block component_account_register_address_billing_header %}
263-
<div class="card-title">
270+
<legend class="card-title">
264271
{{ 'account.registerAddressBillingHeader'|trans|sw_sanitize }}
265-
</div>
272+
</legend>
266273
{% endblock %}
267274

268275
{% block component_account_register_address_billing_fields %}
@@ -272,7 +279,7 @@
272279
showNoShippingPostfix: true,
273280
} %}
274281
{% endblock %}
275-
</div>
282+
</fieldset>
276283
{% endblock %}
277284

278285
{% block component_account_register_address_different_shipping %}
@@ -302,11 +309,11 @@
302309
{% endblock %}
303310

304311
{% block component_account_register_address_shipping %}
305-
<div class="register-shipping js-form-field-toggle-shipping-address d-none mb-4">
312+
<fieldset class="register-shipping js-form-field-toggle-shipping-address d-none mb-4">
306313
{% block component_account_register_address_shipping_header %}
307-
<div class="card-title">
314+
<legend class="card-title">
308315
{{ 'account.registerAddressShippingHeader'|trans|sw_sanitize }}
309-
</div>
316+
</legend>
310317
{% endblock %}
311318

312319
{% block component_account_register_address_shipping_fields %}
@@ -337,7 +344,7 @@
337344
} %}
338345
{% endblock %}
339346
{% endblock %}
340-
</div>
347+
</fieldset>
341348
{% endblock %}
342349
</div>
343350
{% endblock %}

‎src/Storefront/Resources/views/storefront/component/privacy-notice.html.twig

+8-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
{% block component_privacy_notice %}
2-
<div class="form-text privacy-notice">
2+
<fieldset class="form-text privacy-notice">
33
{% block component_privacy_title %}
4-
<strong>{{ 'general.privacyTitle'|trans|sw_sanitize }}</strong><br>
4+
<legend class="form-text privacy-notice-title">
5+
<strong>{{ 'general.privacyTitle'|trans|sw_sanitize }}</strong>
6+
</legend>
7+
<br>
58
{% endblock %}
69

710
{% block component_privacy_dpi %}
@@ -32,15 +35,15 @@
3235
{% else %}
3336
<div class="data-protection-information">
3437
{% block component_privacy_label %}
35-
<label>
38+
<div>
3639
{{ 'general.privacyNoticeText'|trans({
3740
'%privacyUrl%': path('frontend.cms.page', { id: config('core.basicInformation.privacyPage') }),
3841
'%tosUrl%': path('frontend.cms.page', { id: config('core.basicInformation.tosPage') })
3942
})|raw }}
40-
</label>
43+
</div>
4144
{% endblock %}
4245
</div>
4346
{% endif %}
4447
{% endblock %}
45-
</div>
48+
</fieldset>
4649
{% endblock %}

0 commit comments

Comments
 (0)