Skip to content

SL-346: add accessibility improvements for EAA compliance #320

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
GytisZum wants to merge 1 commit into
base: SL-358/payment-field
Choose a base branch
from
Open

SL-346: add accessibility improvements for EAA compliance #320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions src/Service/SettingsTranslationService.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ private function getCommonTranslations()
{
return [
'saveChanges' => $this->module->l('Save Changes', self::FILE_NAME),
'saving' => $this->module->l('Saving...', self::FILE_NAME),
'enable' => $this->module->l('Enable', self::FILE_NAME),
'disable' => $this->module->l('Disable', self::FILE_NAME),
'search' => $this->module->l('Search...', self::FILE_NAME),
Expand Down
23 changes: 22 additions & 1 deletion views/css/admin/logs_tab.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,10 +73,31 @@
border-bottom: solid 1px grey;
pointer-events: all;
display: flex;
justify-content: center;
justify-content: space-between;
align-items: center;
max-height: 10vh;
}

.log-modal-close {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
padding: 0.25rem 0.5rem;
line-height: 1;
color: #6b7280;
margin-right: 0.5rem;
}

.log-modal-close:hover {
color: #111827;
}

.log-modal-close:focus {
outline: 2px solid #2196F3;
outline-offset: 2px;
}

.log-modal-content {
padding: 15px;
height: 50vh;
Expand Down
6 changes: 6 additions & 0 deletions views/css/admin/payment_method.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,12 @@
width: 0;
}

/* Visible focus indicator for keyboard navigation */
.container-checkbox input:focus ~ .checkmark {
outline: 2px solid #2196F3;
outline-offset: 2px;
}

/* Create a custom checkbox */
.checkmark {
position: absolute;
Expand Down
31 changes: 29 additions & 2 deletions views/js/admin/log.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,44 @@
*/

$(document).ready(function () {
function closeModal($modal) {
$modal.removeClass('open');
var triggerButton = $modal.data('triggerButton');
if (triggerButton) {
triggerButton.focus();
}
}
Comment on lines +24 to +30
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

The closeModal function correctly handles closing the modal and returning focus to the trigger button. This is a crucial accessibility pattern for modal dialogs, ensuring keyboard users can easily navigate back to their previous context.


$('.log-modal-overlay').on('click', function (event) {
$('.modal.open').removeClass('open');
closeModal($(this).closest('.modal'));
event.preventDefault();
});

$('.js-log-modal-close').on('click', function (event) {
closeModal($(this).closest('.modal'));
event.preventDefault();
});

$(document).on('keydown', function (event) {
if (event.key === 'Escape') {
var $openModal = $('.modal.open');
if ($openModal.length) {
closeModal($openModal);
event.preventDefault();
}
}
Comment on lines +42 to +49
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Implementing the 'Escape' key to close the modal is an excellent accessibility feature, providing an intuitive way for keyboard users to dismiss the dialog.

});

$('.js-log-button').on('click', function (event) {
var logId = $(this).data('log-id');
var informationType = $(this).data('information-type');
var $modal = $('#' + $(this).data('target'));

$modal.data('triggerButton', $(this));

// NOTE: opening modal
$('#' + $(this).data('target')).addClass('open');
$modal.addClass('open');
$modal.find('.js-log-modal-close').focus();
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Setting focus to the close button when the modal opens is a good practice for accessibility, as it immediately places the user's focus within the modal and provides an obvious way to exit.


// NOTE: if information has been set already we don't need to call ajax again.
if (!$('#log-modal-' + logId + '-' + informationType + ' .log-modal-content-data').hasClass('hidden')) {
Expand Down
4 changes: 2 additions & 2 deletions views/js/admin/settings-app/src/components/settings/api-credentials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ export function ApiCredentials() {
<button
type="button"
onClick={() => setShowApiPassword(!showApiPassword)}
className="sp-absolute sp-right-3 sp-top-1/2 sp--translate-y-1/2 sp-text-muted-foreground hover:sp-text-foreground sp-transition-colors"
className="sp-absolute sp-right-3 sp-top-1/2 sp--translate-y-1/2 sp-text-muted-foreground hover:sp-text-foreground sp-transition-colors sp-p-1 sp-min-w-[24px] sp-min-h-[24px] sp-flex sp-items-center sp-justify-center"
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding sp-p-1 sp-min-w-[24px] sp-min-h-[24px] sp-flex sp-items-center sp-justify-center to the password toggle button improves its clickable area and visual consistency, which enhances usability and accessibility for users with motor impairments or those using touch interfaces.

aria-label={showApiPassword ? t('hidePassword') : t('showPassword')}
>
{showApiPassword ? <EyeOff className="sp-h-4 sp-w-4" /> : <Eye className="sp-h-4 sp-w-4" />}
Expand Down Expand Up @@ -330,7 +330,7 @@ export function ApiCredentials() {
</Card>}

<div className="sp-flex sp-justify-end">
<Button className="sp-min-w-[120px]" onClick={saveCredentials} disabled={saving}>
<Button className="sp-min-w-[120px]" onClick={saveCredentials} disabled={saving} aria-label={saving ? t('saving') : undefined}>
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding a dynamic aria-label to the save button that indicates its 'saving' state provides crucial feedback for screen reader users, improving the accessibility of the form submission process.

{saving ? <Loader2 className="sp-h-4 sp-w-4 sp-animate-spin" /> : t('saveChanges')}
</Button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion views/js/admin/settings-app/src/components/settings/email-notifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export function EmailNotifications() {
</Card>

<div className="sp-flex sp-justify-end">
<Button className="sp-min-w-[120px]" onClick={saveEmailSettings} disabled={saving}>
<Button className="sp-min-w-[120px]" onClick={saveEmailSettings} disabled={saving} aria-label={saving ? t('saving') : undefined}>
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding a dynamic aria-label to the save button that indicates its 'saving' state provides crucial feedback for screen reader users, improving the accessibility of the form submission process.

{saving ? <Loader2 className="sp-h-4 sp-w-4 sp-animate-spin" /> : t('saveChanges')}
</Button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion views/js/admin/settings-app/src/components/settings/general-settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@ export function GeneralSettings() {
</Card>

<div className="sp-flex sp-justify-end">
<Button className="sp-min-w-[120px]" onClick={saveGeneralSettings} disabled={saving}>
<Button className="sp-min-w-[120px]" onClick={saveGeneralSettings} disabled={saving} aria-label={saving ? t('saving') : undefined}>
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding a dynamic aria-label to the save button that indicates its 'saving' state provides crucial feedback for screen reader users, improving the accessibility of the form submission process.

{saving ? <Loader2 className="sp-h-4 sp-w-4 sp-animate-spin" /> : t('saveChanges')}
</Button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions views/js/admin/settings-app/src/components/settings/payment-methods.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ function MultiSelect({
<button
type="button"
className="sp-flex sp-min-h-[36px] sp-w-full sp-items-center sp-justify-between sp-rounded-md sp-border sp-border-border sp-bg-card sp-px-3 sp-py-1.5 sp-text-left sp-text-sm sp-transition-colors hover:sp-bg-secondary/50 focus-visible:sp-outline-none focus-visible:sp-ring-2 focus-visible:sp-ring-ring"
aria-label={label}
aria-label={selected.length === 0 ? `${label}: ${placeholder}` : `${label}: ${selected.length} ${t('selected')}`}
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

The dynamic aria-label for the MultiSelect button, which changes based on whether items are selected, is a significant accessibility improvement. It provides clear and concise information to screen reader users about the state of the selection.

>
{selected.length === 0 ? (
<span className="sp-text-muted-foreground">{placeholder}</span>
Expand Down Expand Up @@ -293,7 +293,7 @@ export function PaymentMethods() {

{paymentMethods.length > 0 && (
<div className="sp-flex sp-justify-end">
<Button className="sp-min-w-[120px]" onClick={savePaymentMethods} disabled={saving}>
<Button className="sp-min-w-[120px]" onClick={savePaymentMethods} disabled={saving} aria-label={saving ? t('saving') : undefined}>
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding a dynamic aria-label to the save button that indicates its 'saving' state provides crucial feedback for screen reader users, improving the accessibility of the form submission process.

{saving ? <Loader2 className="sp-h-4 sp-w-4 sp-animate-spin" /> : t('saveChanges')}
</Button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion views/js/admin/settings-app/src/components/settings/payment-processing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -305,7 +305,7 @@ export function PaymentProcessing() {
</Card>

<div className="sp-flex sp-justify-end">
<Button className="sp-min-w-[120px]" onClick={savePaymentProcessing} disabled={saving}>
<Button className="sp-min-w-[120px]" onClick={savePaymentProcessing} disabled={saving} aria-label={saving ? t('saving') : undefined}>
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding a dynamic aria-label to the save button that indicates its 'saving' state provides crucial feedback for screen reader users, improving the accessibility of the form submission process.

{saving ? <Loader2 className="sp-h-4 sp-w-4 sp-animate-spin" /> : t('saveChanges')}
</Button>
</div>
Expand Down
12 changes: 7 additions & 5 deletions views/templates/admin/logs/log_modal.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,22 +19,23 @@
*@copyright SIX Payment Services
*@license SIX Payment Services
*}
<div
<button
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Changing the div to a button for the log view trigger is a significant semantic improvement. Buttons are inherently interactive and accessible, correctly conveying their purpose to assistive technologies.

type="button"
class="btn btn-default button js-log-button"
data-toggle="modal"
data-log-id="{$log_id|escape:'htmlall':'UTF-8'}"
data-information-type="{$log_information_type|escape:'htmlall':'UTF-8'}"
data-target="log-modal-{$log_id|escape:'htmlall':'UTF-8'}-{$log_information_type|escape:'htmlall':'UTF-8'}"
>
{l s='View' mod='saferpayofficial'}
</div>
</button>

<div id="log-modal-{$log_id|escape:'htmlall':'UTF-8'}-{$log_information_type|escape:'htmlall':'UTF-8'}" class="modal">
<div id="log-modal-{$log_id|escape:'htmlall':'UTF-8'}-{$log_information_type|escape:'htmlall':'UTF-8'}" class="modal" role="dialog" aria-modal="true" aria-labelledby="log-modal-title-{$log_id|escape:'htmlall':'UTF-8'}-{$log_information_type|escape:'htmlall':'UTF-8'}">
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding role="dialog" aria-modal="true" aria-labelledby="log-modal-title-..." to the modal div correctly identifies it as a modal dialog for assistive technologies, enhancing its accessibility and usability.

<div class="log-modal-overlay"></div>

<div class="log-modal-window">
<div class="log-modal-title">
<h4>
<h4 id="log-modal-title-{$log_id|escape:'htmlall':'UTF-8'}-{$log_information_type|escape:'htmlall':'UTF-8'}">
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Assigning an id to the h4 element and referencing it with aria-labelledby on the modal div correctly associates the modal's title with the dialog, making it accessible to screen readers.

{if $log_information_type === 'request'}
{$log_id|escape:'htmlall':'UTF-8'}: {l s='Request data' mod='saferpayofficial'}
{elseif $log_information_type === 'response'}
Expand All @@ -43,10 +44,11 @@
{$log_id|escape:'htmlall':'UTF-8'}: {l s='Context data' mod='saferpayofficial'}
{/if}
</h4>
<button type="button" class="log-modal-close js-log-modal-close" aria-label="{l s='Close' mod='saferpayofficial'}">&times;</button>
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding a dedicated close button with aria-label="Close" provides a clear and accessible mechanism for users to dismiss the modal, which is essential for good user experience and accessibility.

</div>

<div class="log-modal-content">
<div class="log-modal-content-spinner hidden"></div>
<div class="log-modal-content-spinner hidden" role="status" aria-label="{l s='Loading' mod='saferpayofficial'}"></div>
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding role="status" aria-label="Loading" to the spinner div makes the loading indicator accessible to screen readers, informing users that content is being loaded.

<pre class="log-modal-content-data hidden"></pre>
</div>
</div>
Expand Down
5 changes: 3 additions & 2 deletions views/templates/front/credit_card.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@

<tr>
<td>
<img src="{$card_img|escape:'htmlall':'UTF-8'}">
<img src="{$card_img|escape:'htmlall':'UTF-8'}" alt="{$payment_method|escape:'htmlall':'UTF-8'}">
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding the alt attribute to the <img> tag provides alternative text for the image, which is crucial for screen reader users to understand the content and purpose of the image.

</td>
<td>
{$payment_method|escape:'htmlall':'UTF-8'}
Expand All @@ -38,7 +38,8 @@
</td>
<td>
<a class="button lnk_view btn btn-default"
href="{$link->getModuleLink('saferpayofficial', {$controller|escape:'htmlall':'UTF-8'}, ['saved_card_id' => $saved_card_id|escape:'htmlall':'UTF-8'])|escape:'htmlall':'UTF-8' }">
href="{$link->getModuleLink('saferpayofficial', {$controller|escape:'htmlall':'UTF-8'}, ['saved_card_id' => $saved_card_id|escape:'htmlall':'UTF-8'])|escape:'htmlall':'UTF-8' }"
aria-label="{l s='Remove card' mod='saferpayofficial'} {$card_number|escape:'htmlall':'UTF-8'}">
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding a descriptive aria-label to the 'Remove' link, including the card number, significantly improves accessibility by providing screen reader users with clear context about which card will be removed.

<span>
{l s='Remove' mod='saferpayofficial'}
</span>
Expand Down
6 changes: 5 additions & 1 deletion views/templates/front/credit_cards.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,11 @@
{block name='page_content'}
<div class="card">
<table class="table">
<caption class="sr-only">{l s='Saved credit cards' mod='saferpayofficial'}</caption>
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding a visually hidden <caption> with sr-only class provides an accessible name for the table, which is important for screen reader users to understand the table's content.

<thead>
<tr>
<th>
<span class="sr-only">{l s='Card type' mod='saferpayofficial'}</span>
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding a visually hidden <span> with sr-only class inside the <th> provides a meaningful header for the column, which is essential for screen reader users to understand the table structure.

</th>
<th>
{l s='Credit card' mod='saferpayofficial'}
Expand All @@ -43,16 +45,18 @@
{l s='Valid till' mod='saferpayofficial'}
</th>
<th>
{l s='Card' mod='saferpayofficial'}
{l s='Card number' mod='saferpayofficial'}
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Changing the table header from 'Card' to 'Card number' improves clarity for all users, including those using assistive technologies.

</th>
<th>
{l s='Action' mod='saferpayofficial'}
</th>
</tr>
</thead>
<tbody>
{foreach $rows as $row}
{$row|cleanHtml nofilter}
{/foreach}
</tbody>
Comment on lines +55 to +59
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Wrapping the table rows in <tbody> tags is a good semantic HTML practice, improving the structure and readability of the table.

</table>
</div>
{/block}
8 changes: 4 additions & 4 deletions views/templates/front/hosted-templates/partials/all_errors.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,18 @@
*@copyright SIX Payment Services
*@license SIX Payment Services
*}
<div style="display:none" class="alert alert-danger initialize-error" role="alert">
<div style="display:none" class="alert alert-danger initialize-error" role="alert" aria-live="assertive">
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding aria-live="assertive" to the alert div ensures that screen readers immediately announce error messages when they appear, providing critical feedback to users.

{include file="module:saferpayofficial/views/templates/front/hosted-templates/partials/initialize_error.tpl"}
</div>

<div style="display: none" class="alert alert-danger submission-error" role="alert">
<div style="display: none" class="alert alert-danger submission-error" role="alert" aria-live="assertive">
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding aria-live="assertive" to the alert div ensures that screen readers immediately announce error messages when they appear, providing critical feedback to users.

{include file="module:saferpayofficial/views/templates/front/hosted-templates/partials/submission_error.tpl"}
</div>

<div style="display:none" class="alert alert-danger internal-error" role="alert">
<div style="display:none" class="alert alert-danger internal-error" role="alert" aria-live="assertive">
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding aria-live="assertive" to the alert div ensures that screen readers immediately announce error messages when they appear, providing critical feedback to users.

{include file="module:saferpayofficial/views/templates/front/hosted-templates/partials/internal_error.tpl"}
</div>

<div style="display: none" class="alert alert-danger validation-error" role="alert">
<div style="display: none" class="alert alert-danger validation-error" role="alert" aria-live="assertive">
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding aria-live="assertive" to the alert div ensures that screen readers immediately announce error messages when they appear, providing critical feedback to users.

{include file="module:saferpayofficial/views/templates/front/hosted-templates/partials/validation_error.tpl"}
</div>
8 changes: 4 additions & 4 deletions views/templates/front/hosted-templates/partials/all_errors_16.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,18 @@
*@copyright SIX Payment Services
*@license SIX Payment Services
*}
<div style="display:none" class="alert alert-danger initialize-error" role="alert">
<div style="display:none" class="alert alert-danger initialize-error" role="alert" aria-live="assertive">
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding aria-live="assertive" to the alert div ensures that screen readers immediately announce error messages when they appear, providing critical feedback to users.

{include file="./initialize_error.tpl"}
</div>

<div style="display: none" class="alert alert-danger submission-error" role="alert">
<div style="display: none" class="alert alert-danger submission-error" role="alert" aria-live="assertive">
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding aria-live="assertive" to the alert div ensures that screen readers immediately announce error messages when they appear, providing critical feedback to users.

{include file="./submission_error.tpl"}
</div>

<div style="display:none" class="alert alert-danger internal-error" role="alert">
<div style="display:none" class="alert alert-danger internal-error" role="alert" aria-live="assertive">
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding aria-live="assertive" to the alert div ensures that screen readers immediately announce error messages when they appear, providing critical feedback to users.

{include file="./internal_error.tpl"}
</div>

<div style="display: none" class="alert alert-danger validation-error" role="alert">
<div style="display: none" class="alert alert-danger validation-error" role="alert" aria-live="assertive">
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding aria-live="assertive" to the alert div ensures that screen readers immediately announce error messages when they appear, providing critical feedback to users.

{include file="./validation_error.tpl"}
</div>
24 changes: 16 additions & 8 deletions views/templates/front/hosted-templates/template1.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,21 +34,25 @@

<div class="container" id="main">
<div class="form-group">
<input class="form-control" id="fields-holder-name" readonly placeholder="{l s='Holder name' mod='saferpayofficial'}">
<label for="fields-holder-name" class="sr-only">{l s='Holder name' mod='saferpayofficial'}</label>
<input class="form-control" id="fields-holder-name" readonly placeholder="{l s='Holder name' mod='saferpayofficial'}" aria-label="{l s='Holder name' mod='saferpayofficial'}">
Comment on lines +37 to +38
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding a visually hidden <label> and aria-label to the input field ensures that screen reader users receive proper context for the input, improving form accessibility.

</div>

<div class="form-group row">
<div class="col-sm-12">
<input class="form-control" id="fields-card-number" readonly placeholder="{l s='0000 0000 0000 0000' mod='saferpayofficial'}">
<label for="fields-card-number" class="sr-only">{l s='Card number' mod='saferpayofficial'}</label>
<input class="form-control" id="fields-card-number" readonly placeholder="{l s='0000 0000 0000 0000' mod='saferpayofficial'}" aria-label="{l s='Card number' mod='saferpayofficial'}">
Comment on lines +43 to +44
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding a visually hidden <label> and aria-label to the input field ensures that screen reader users receive proper context for the input, improving form accessibility.

</div>
</div>

<div class="row">
<div class="col-sm-6 col-xs-12 form-group">
<input class="form-control" id="fields-expiration" readonly placeholder="{l s='MM/YYYY' mod='saferpayofficial'}">
<label for="fields-expiration" class="sr-only">{l s='Expiration date' mod='saferpayofficial'}</label>
<input class="form-control" id="fields-expiration" readonly placeholder="{l s='MM/YYYY' mod='saferpayofficial'}" aria-label="{l s='Expiration date' mod='saferpayofficial'}">
Comment on lines +50 to +51
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding a visually hidden <label> and aria-label to the input field ensures that screen reader users receive proper context for the input, improving form accessibility.

</div>
<div class="col-sm-6 col-xs-12 form-group">
<input class="form-control" id="fields-cvc" readonly placeholder="{l s='000' mod='saferpayofficial'}">
<label for="fields-cvc" class="sr-only">{l s='CVC code' mod='saferpayofficial'}</label>
<input class="form-control" id="fields-cvc" readonly placeholder="{l s='000' mod='saferpayofficial'}" aria-label="{l s='CVC code' mod='saferpayofficial'}">
Comment on lines +54 to +55
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding a visually hidden <label> and aria-label to the input field ensures that screen reader users receive proper context for the input, improving form accessibility.

</div>
</div>

Expand All @@ -67,21 +71,25 @@

<div class="container" id="main">
<div class="form-group">
<input class="form-control" id="fields-holder-name" readonly placeholder="{l s='Holder name' mod='saferpayofficial'}">
<label for="fields-holder-name" class="sr-only">{l s='Holder name' mod='saferpayofficial'}</label>
<input class="form-control" id="fields-holder-name" readonly placeholder="{l s='Holder name' mod='saferpayofficial'}" aria-label="{l s='Holder name' mod='saferpayofficial'}">
Comment on lines +74 to +75
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding a visually hidden <label> and aria-label to the input field ensures that screen reader users receive proper context for the input, improving form accessibility.

</div>

<div class="form-group row">
<div class="col-sm-12">
<input class="form-control" id="fields-card-number" readonly placeholder="{l s='0000 0000 0000 0000' mod='saferpayofficial'}">
<label for="fields-card-number" class="sr-only">{l s='Card number' mod='saferpayofficial'}</label>
<input class="form-control" id="fields-card-number" readonly placeholder="{l s='0000 0000 0000 0000' mod='saferpayofficial'}" aria-label="{l s='Card number' mod='saferpayofficial'}">
Comment on lines +80 to +81
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding a visually hidden <label> and aria-label to the input field ensures that screen reader users receive proper context for the input, improving form accessibility.

</div>
</div>

<div class="row">
<div class="col-sm-6 col-xs-12 form-group">
<input class="form-control" id="fields-expiration" readonly placeholder="{l s='MM/YYYY' mod='saferpayofficial'}">
<label for="fields-expiration" class="sr-only">{l s='Expiration date' mod='saferpayofficial'}</label>
<input class="form-control" id="fields-expiration" readonly placeholder="{l s='MM/YYYY' mod='saferpayofficial'}" aria-label="{l s='Expiration date' mod='saferpayofficial'}">
Comment on lines +87 to +88
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding a visually hidden <label> and aria-label to the input field ensures that screen reader users receive proper context for the input, improving form accessibility.

</div>
<div class="col-sm-6 col-xs-12 form-group">
<input class="form-control" id="fields-cvc" readonly placeholder="{l s='000' mod='saferpayofficial'}">
<label for="fields-cvc" class="sr-only">{l s='CVC code' mod='saferpayofficial'}</label>
<input class="form-control" id="fields-cvc" readonly placeholder="{l s='000' mod='saferpayofficial'}" aria-label="{l s='CVC code' mod='saferpayofficial'}">
Comment on lines +91 to +92
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 20, 2026

Choose a reason for hiding this comment

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

medium

Adding a visually hidden <label> and aria-label to the input field ensures that screen reader users receive proper context for the input, improving form accessibility.

</div>
</div>

Expand Down
Loading
Loading