Skip to content

Improve accessibility in Adyen SFCC cartridge #1352

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Okostina wants to merge 6 commits into
base: develop
Choose a base branch
from
Open

Improve accessibility in Adyen SFCC cartridge #1352

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0fc1ce6
Enhance accessibility and improve user experience in Adyen SFCC cartr…
okostina93 Jun 9, 2025
2726cb8
Update paymentForm.isml
Okostina Jun 15, 2025
44b1570
Update adyenActionModal.isml
Okostina Jun 15, 2025
26004b2
Enhance accessibility in Adyen SFRA templates
okostina93 Jul 2, 2025
c846ec3
Merge branch 'enhancement/accessibility' of https://github.com/Okosti…
okostina93 Jul 2, 2025
77a8bd2
Implement tab navigation for Adyen payment options
okostina93 Jul 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/cartridges/app_adyen_SFRA/cartridge/templates/default/account/payment/paymentForm.isml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
class="payment-form"
method="POST"
id="payment-form" ${pdict.paymentForm.attributes}>
<div id="cardError" class="card-error alert alert-danger">
<div id="cardError" class="card-error alert alert-danger" role="alert">
<span>${Resource.msg('error.card.information.error', 'creditCard', null)}</span>
</div>
<script type="text/javascript">
Expand All @@ -45,10 +45,10 @@
<!-- Cancel and Save Buttons -->
<div class="row">
<div class="col">
<a href="${URLUtils.url('PaymentInstruments-List')}" class="btn btn-block btn-outline-primary">${Resource.msg('button.cancel','account',null)}</a>
<a href="${URLUtils.url('PaymentInstruments-List')}" class="btn btn-block btn-outline-primary" aria-label="Cancel and return to payment list">${Resource.msg('button.cancel','account',null)}</a>
</div>
<div class="col">
<button type="submit" name="save" class="btn btn-save btn-block btn-primary" value="add-new-payment">
<button type="submit" name="save" class="btn btn-save btn-block btn-primary" value="add-new-payment" aria-label="Save payment method">
${Resource.msg('button.save','account',null)}
</button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/cartridges/app_adyen_SFRA/cartridge/templates/default/adyen/checkoutReviewButtons.isml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<div class="row">
<div class="col-12 next-step-button">
<div class="mb-sm-3">
<button class="btn btn-primary btn-block" type="submit" name="place-order" value="place-order">
<button class="btn btn-primary btn-block" type="submit" name="place-order" value="place-order" aria-label="Place order">
${Resource.msg('button.submit.checkout.review', 'adyen', null)}
</button>
<form method="post" id="showConfirmationForm" name="showConfirmationForm" action="${pdict.showConfirmationUrl}">
Expand Down
7 changes: 4 additions & 3 deletions src/cartridges/app_adyen_SFRA/cartridge/templates/default/adyenActionModal.isml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
<div class="modal fade" id="action-modal" role="dialog">
<div class="modal fade" id="action-modal" role="dialog" aria-modal="true" aria-labelledby="action-modal">
<div class="modal-dialog" id="adyenModalDialog">
<div id="action-container">
<h2 id="action-modal-title" class="sr-only">Action Required</h2>
<div class='invisible' id="cancelQrMethodsButton">
<button id='cancelQrMethodsButtonStyling' onclick="location.href='${URLUtils.https('Checkout-Begin')}';">
<button id='cancelQrMethodsButtonStyling' onclick="location.href='${URLUtils.https('Checkout-Begin')}';" aria-label="Cancel QR Payment">
<img src="${URLUtils.staticURL('images/cancel.svg')}" alt="Cancel" />
</button>
</div>
</div>
<div id="amazon-container"></div>
<div id="giftcard-container"></div>
</div>
</div>
</div>
4 changes: 2 additions & 2 deletions src/cartridges/app_adyen_SFRA/cartridge/templates/default/cart/checkoutButtons.isml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,12 @@
<div id="amazonPayAddressDetails">
<div class="addressHeaders">
<label>${Resource.msg('amazonpay.paymentMethod', 'adyen', null)}</label>
<button class="editAddressBtn">${Resource.msg('amazonpay.editButton', 'adyen', null)}</button>
<button class="editAddressBtn" aria-label="Edit payment address">${Resource.msg('amazonpay.editButton', 'adyen', null)}</button>
</div>
<address id="paymentStr"></address>
<div class="addressHeaders">
<label>${Resource.msg('amazonpay.shippingAddress', 'adyen', null)}</label>
<button class="editAddressBtn">${Resource.msg('amazonpay.editButton', 'adyen', null)}</button>
<button class="editAddressBtn" aria-label="Edit shipping address">${Resource.msg('amazonpay.editButton', 'adyen', null)}</button>
</div>
<address id="address"></address>
</div>
Expand Down
7 changes: 6 additions & 1 deletion ...RA/cartridge/templates/default/checkout/billing/paymentOptions/adyenComponentContent.isml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
<!--- Generic Component--->
<div class="tab-pane active adyen-component-content" id="adyen-component-content" role="tabpanel">
<div
class="tab-pane active adyen-component-content"
id="adyen-component-content"
role="tabpanel"
aria-labelledby="tab-adyen-component"
>
<fieldset class="payment-form-fields">
<input type="hidden" class="form-control"
name="${pdict.forms.billingForm.paymentMethod.htmlName}"
Expand Down
12 changes: 11 additions & 1 deletion ...n_SFRA/cartridge/templates/default/checkout/billing/paymentOptions/adyenComponentTab.isml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
<li class="nav-item" data-method-id="${paymentOption.ID}">
<a class="nav-link adyen-tab active" data-toggle="tab" href="#adyen-component-content" role="tab">
<a
class="nav-link adyen-tab active"
id="tab-adyen-component"
data-toggle="tab"
href="#adyen-component-content"
role="tab"
aria-controls="adyen-component-content"
aria-selected="true"
tabindex="0"
aria-label="Select ${paymentOption.name}"
>
<img class="adyen-option"
src="${URLUtils.staticURL('/images/payment-types.png')}"
height="32"
Expand Down
2 changes: 1 addition & 1 deletion ...yen_SFRA/cartridge/templates/default/checkout/billing/paymentOptions/adyenPosContent.isml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!--- Adyen Point of Sale--->
<div class="tab-pane adyen-pos-content" id="adyen-pos-content" role="tabpanel">
<div class="tab-pane adyen-pos-content" id="adyen-pos-content" role="tabpanel" aria-labelledby="tab-adyen-pos">
<fieldset class="payment-form-fields">
<input type="hidden" class="form-control"
name="${pdict.forms.billingForm.paymentMethod.htmlName}"
Expand Down
12 changes: 11 additions & 1 deletion ...p_adyen_SFRA/cartridge/templates/default/checkout/billing/paymentOptions/adyenPosTab.isml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
<li class="nav-item" data-method-id="${paymentOption.ID}">
<a class="nav-link adyen-tab" data-toggle="tab" href="#adyen-pos-content" role="tab">
<a
class="nav-link adyen-tab"
id="tab-adyen-pos"
data-toggle="tab"
href="#adyen-pos-content"
role="tab"
aria-controls="adyen-pos-content"
aria-selected="false"
Copy link
Member

@shanikantsingh shanikantsingh Jul 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"aria-selected" and "tabindex" denotes the current state of the tab and should be updated based on user interaction. The initial value could be hard coded but when user selects another tab then the value for "aria-selected" and "tabindex" needs to be updated accordingly for all tabs to match the current state. Please read more about usage of aria-selected in this blog. https://www.a11y-collective.com/blog/aria-selected/

Copy link
Contributor Author

@Okostina Okostina Jul 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

proposed a new change below

tabindex="-1"
aria-label="Select ${paymentOption.name}"
>
<img class="adyen-option"
src="${URLUtils.staticURL('/images/pos.png')}"
height="32"
Expand Down
Loading