Skip to content

Commit e49923e

Browse files
janteuberjanteuber
authored
Merge pull request #597 from FatchipRobert/MAG2-360-WCAG-changes
MAG2-360 - Accessibility changes
2 parents ecd3aae + 3dee7ed commit e49923e

17 files changed

+44
-45
lines changed

‎view/frontend/templates/onepage/amazon_review.phtml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,13 @@
3131
<div class="block-content">
3232
<?php if ($block->getShippingAddress()): ?>
3333
<div class="box box-order-shipping-method">
34-
<strong class="box-title"><span><?php echo $block->escapeHtml(__('Shipping Method')) ?></span></strong>
34+
<strong class="box-title"><span id="shippinglabel"><?php echo $block->escapeHtml(__('Shipping Method')) ?></span></strong>
3535
<div class="box-content">
3636
<form method="post" id="shipping-method-form" action="<?php echo $block->escapeUrl($block->getShippingMethodSubmitUrl()); ?>" class="form" onsubmit="return false;">
3737
<?php if ($groups = $block->getShippingRateGroups()): ?>
3838
<?php $currentRate = $block->getCurrentShippingRate(); ?>
3939
<div class="field shipping required">
40-
<select name="shipping_method" id="shipping-method" class="select">
40+
<select name="shipping_method" id="shipping-method" class="select" aria-labelledby="shippinglabel">
4141
<?php if (!$currentRate): ?>
4242
<option value=""><?php echo $block->escapeHtml(__('Please select a shipping method...')); ?></option>
4343
<?php endif; ?>

‎view/frontend/templates/onepage/review.phtml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,13 @@
3232
<div class="block-content">
3333
<?php if ($block->getShippingAddress()): ?>
3434
<div class="box box-order-shipping-method">
35-
<strong class="box-title"><span><?php echo $block->escapeHtml(__('Shipping Method')) ?></span></strong>
35+
<strong class="box-title"><span id="shippinglabel"><?php echo $block->escapeHtml(__('Shipping Method')) ?></span></strong>
3636
<div class="box-content">
3737
<form method="post" id="shipping-method-form" action="<?php echo $block->escapeUrl($block->getShippingMethodSubmitUrl()); ?>" class="form">
3838
<?php if ($groups = $block->getShippingRateGroups()): ?>
3939
<?php $currentRate = $block->getCurrentShippingRate(); ?>
4040
<div class="field shipping required">
41-
<select name="shipping_method" id="shipping-method" class="select">
41+
<select name="shipping_method" id="shipping-method" class="select" aria-labelledby="shippinglabel">
4242
<?php if (!$currentRate): ?>
4343
<option value=""><?php echo $block->escapeHtml(__('Please select a shipping method...')); ?></option>
4444
<?php endif; ?>

‎view/frontend/web/css/payone.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,3 +44,14 @@
4444
#payone-paypal-button-minibasket {
4545
margin-top: 1em;
4646
}
47+
48+
LEGEND.payone.visually-hidden {
49+
position: absolute;
50+
overflow: hidden;
51+
clip: rect(0 0 0 0);
52+
height: 1px;
53+
width: 1px;
54+
margin: -1px;
55+
padding: 0;
56+
border: 0;
57+
}

‎view/frontend/web/template/payment/amazonpayv2.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
</div>
4444
<!-- ko if: requestTelephone() -->
4545
<fieldset data-bind="attr: {class: 'fieldset payment items ccard ' + getCode()}">
46+
<legend class="visually-hidden payone" data-bind="text: getTitle()"></legend>
4647
<div class="field number required">
4748
<label data-bind="attr: {for: getCode() + '_telephone'}" class="label">
4849
<span><!-- ko i18n: 'Telephone'--><!-- /ko --></span>
@@ -52,7 +53,6 @@
5253
data-bind="attr: {
5354
autocomplete: 'off',
5455
id: getCode() + '_telephone',
55-
title: $t('Telephone'),
5656
'data-container': getCode() + '-telephone'},
5757
value: telephone,
5858
valueUpdate: 'keyup' "/>

‎view/frontend/web/template/payment/bnpl_debit.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
</div>
4444
<form action="#" method="post" data-bind="attr: {id: getCode() + '_form'}">
4545
<fieldset data-bind="attr: {class: 'fieldset payment items ccard ' + getCode()}">
46+
<legend class="visually-hidden payone" data-bind="text: getTitle()"></legend>
4647
<!-- ko if: requestTelephone() -->
4748
<div class="field number required">
4849
<label data-bind="attr: {for: getCode() + '_telephone'}" class="label">
@@ -53,7 +54,6 @@
5354
data-bind="attr: {
5455
autocomplete: 'off',
5556
id: getCode() + '_telephone',
56-
title: $t('Telephone'),
5757
'data-container': getCode() + '-telephone'},
5858
value: telephone,
5959
valueUpdate: 'keyup' "/>
@@ -105,7 +105,7 @@
105105
</label>
106106
<div class="control">
107107
<input type="text" name="payment[iban]" class="input-text" value=""
108-
data-bind="attr: {autocomplete: 'off', id: getCode() + '_iban', title: $t('IBAN'), 'data-container': getCode() + '-iban'},
108+
data-bind="attr: {autocomplete: 'off', id: getCode() + '_iban', 'data-container': getCode() + '-iban'},
109109
value: iban,
110110
valueUpdate: 'keyup' "/>
111111
</div>

‎view/frontend/web/template/payment/bnpl_installment.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
</div>
4444
<form action="#" method="post" data-bind="attr: {id: getCode() + '_form'}">
4545
<fieldset data-bind="attr: {class: 'fieldset payment items ccard ' + getCode()}">
46+
<legend class="visually-hidden payone" data-bind="text: getTitle()"></legend>
4647
<!-- ko if: requestTelephone() -->
4748
<div class="field number required" data-bind="attr: {id: getCode() + '_telephone'}">
4849
<label data-bind="attr: {for: getCode() + '_telephone'}" class="label">
@@ -53,7 +54,6 @@
5354
data-bind="attr: {
5455
autocomplete: 'off',
5556
id: getCode() + '_telephone',
56-
title: $t('Telephone'),
5757
'data-container': getCode() + '-telephone'},
5858
value: telephone,
5959
valueUpdate: 'keyup' "/>
@@ -105,7 +105,7 @@
105105
</label>
106106
<div class="control">
107107
<input type="text" name="payment[iban]" class="input-text" value=""
108-
data-bind="attr: {autocomplete: 'off', id: getCode() + '_iban', title: $t('IBAN'), 'data-container': getCode() + '-iban'},
108+
data-bind="attr: {autocomplete: 'off', id: getCode() + '_iban', 'data-container': getCode() + '-iban'},
109109
value: iban,
110110
valueUpdate: 'keyup' "/>
111111
</div>

‎view/frontend/web/template/payment/bnpl_invoice.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
</div>
4444
<form action="#" method="post" data-bind="attr: {id: getCode() + '_form'}">
4545
<fieldset data-bind="attr: {class: 'fieldset payment items ccard ' + getCode()}">
46+
<legend class="visually-hidden payone" data-bind="text: getTitle()"></legend>
4647
<!-- ko if: requestTelephone() -->
4748
<div class="field number required">
4849
<label data-bind="attr: {for: getCode() + '_telephone'}" class="label">
@@ -53,7 +54,6 @@
5354
data-bind="attr: {
5455
autocomplete: 'off',
5556
id: getCode() + '_telephone',
56-
title: $t('Telephone'),
5757
'data-container': getCode() + '-telephone'},
5858
value: telephone,
5959
valueUpdate: 'keyup' "/>
@@ -109,7 +109,6 @@
109109
data-bind="attr: {
110110
autocomplete: 'off',
111111
id: getCode() + '_vatid',
112-
title: $t('VAT-ID'),
113112
'data-container': getCode() + '-vatid'},
114113
value: vatid,
115114
valueUpdate: 'keyup' "/>

‎view/frontend/web/template/payment/creditcard.html‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
value: pseudocardpan">
4949

5050
<fieldset data-bind="attr: {class: 'fieldset payment items ccard ' + getCode(), id: 'payone_form_cc'}">
51+
<legend class="visually-hidden payone" data-bind="text: getTitle()"></legend>
5152
<!-- ko if: useSaveDataMode() -->
5253
<div data-bind="foreach: getSavedPaymentData()">
5354
<div class="payment-method">
@@ -72,7 +73,7 @@
7273
<!--/ko-->
7374
<div data-bind="attr: {id: getCode() + '_new_data_container'}" class="fieldset ccard">
7475
<!-- ko if: isAutoCardtypeDetectionEnabled() -->
75-
<input name="payment[cc_type]" type="hidden" value="" data-bind="attr: {id: getCode() + '_credit_card_type', value: getCreditcardTypes()[0].id, 'data-container': getCode() + '_credit_card_type'}" />
76+
<input name="payment[cc_type]" type="hidden" value="" data-bind="attr: {id: getCode() + '_credit_card_type', value: getCreditcardTypes()[0].id, 'data-container': getCode() + '_credit_card_type'}, 'autocomplete': 'off'" />
7677
<!--/ko-->
7778
<!-- ko if: !isAutoCardtypeDetectionEnabled() -->
7879
<div class="field">
@@ -102,31 +103,26 @@
102103
data-bind="attr: {
103104
autocomplete: 'off',
104105
id: getCode() + '_cardholder',
105-
title: $t('Cardholder'),
106106
'data-container': getCode() + '-cardholder'},
107107
value: cardholder,
108108
valueUpdate: 'keyup' "/>
109109
</div>
110110
</div>
111111

112112
<div class="field number required">
113-
<label class="label">
114-
<span><!-- ko i18n: 'Credit Card Number'--><!-- /ko --></span>
115-
<!-- ko if: isAutoCardtypeDetectionEnabled() -->
116-
<!-- ko foreach: getCreditcardTypes() -->
117-
<img class="cc-icon" data-bind="attr: {id: $parent.getCode() + '_cc_icon_' + id.toLowerCase(), src: 'https://cdn.pay1.de/cc/' + id.toLowerCase() + '/s/default.png'}"/>
118-
<!--/ko-->
119-
<!--/ko-->
120-
</label>
113+
<span class="label"><!-- ko i18n: 'Credit Card Number'--><!-- /ko --></span>
114+
<!-- ko if: isAutoCardtypeDetectionEnabled() -->
115+
<!-- ko foreach: getCreditcardTypes() -->
116+
<img class="cc-icon" data-bind="attr: {id: $parent.getCode() + '_cc_icon_' + id.toLowerCase(), src: 'https://cdn.pay1.de/cc/' + id.toLowerCase() + '/s/default.png'}"/>
117+
<!--/ko-->
118+
<!--/ko-->
121119
<div class="control">
122120
<span id="cardpan" class="inputIframe"></span>
123121
</div>
124122
</div>
125123

126124
<div class="field date required" data-bind="attr: {id: getCode() + '_cc_type_exp_div'}">
127-
<label class="label">
128-
<span><!-- ko i18n: 'Expiration Date'--><!-- /ko --></span>
129-
</label>
125+
<span class="label"><!-- ko i18n: 'Expiration Date'--><!-- /ko --></span>
130126
<div class="control">
131127
<div class="fields group group-2">
132128
<div class="field no-label month">
@@ -145,9 +141,7 @@
145141

146142
<!-- ko if: showCvc() -->
147143
<div class="field cvv required" data-bind="attr: {id: getCode() + '_cc_type_cvv_div'}">
148-
<label class="label">
149-
<span><!-- ko i18n: 'Card Verification Number'--><!-- /ko --></span>
150-
</label>
144+
<span class="label"><!-- ko i18n: 'Card Verification Number'--><!-- /ko --></span>
151145
<div class="control">
152146
<span id="cardcvc2" class="inputIframe"></span>
153147
</div>

‎view/frontend/web/template/payment/debit.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444

4545
<form class="debit_form" id="debit_form" action="#" method="post" data-bind="attr: {id: getCode() + '_debit_form'}">
4646
<fieldset data-bind="attr: {class: 'fieldset payment items ccard ' + getCode(), id: 'payone_form_debit'}">
47+
<legend class="visually-hidden payone" data-bind="text: getTitle()"></legend>
4748
<div class="field">
4849
<label data-bind="attr: {for: getCode() + '_country'}" class="label">
4950
<span><!-- ko i18n: 'Bank country'--><!-- /ko --></span>
@@ -70,7 +71,6 @@
7071
data-bind="attr: {
7172
autocomplete: 'off',
7273
id: getCode() + '_iban',
73-
title: $t('IBAN'),
7474
'data-container': getCode() + '-iban'},
7575
value: iban,
7676
valueUpdate: 'keyup' "/>
@@ -87,7 +87,6 @@
8787
data-bind="attr: {
8888
autocomplete: 'off',
8989
id: getCode() + '_bic',
90-
title: $t('BIC'),
9190
'data-container': getCode() + '-bic'},
9291
value: bic,
9392
valueUpdate: 'keyup' "/>

‎view/frontend/web/template/payment/obt_eps.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444

4545
<form class="debit_form" action="#" method="post" data-bind="attr: {id: getCode() + '_form'}">
4646
<fieldset data-bind="attr: {class: 'fieldset payment items ' + getCode()}">
47+
<legend class="visually-hidden payone" data-bind="text: getTitle()"></legend>
4748
<div class="field">
4849
<label data-bind="attr: {for: getCode() + '_bank_group'}" class="label">
4950
<span><!-- ko i18n: 'Bank group'--><!-- /ko --></span>

0 commit comments

Comments
 (0)