Improve autocomplete accessibility for names in forms

Changed the autocomplete attributes for input fields: 'first_name' & 'last_name' to comply with the WCAG-standards for autocompletion.
[MAILPOET-4408]
This commit is contained in:
Berkay Simsek
2022-06-08 15:24:11 +02:00
committed by Veljko V
parent 764f657935
commit 0dc35da401
2 changed files with 8 additions and 3 deletions

View File

@@ -35,10 +35,15 @@ class Text {
$type = 'text'; $type = 'text';
$automationId = ' '; $automationId = ' ';
$id = ''; $id = '';
$autocomplete = 'on';
if ($block['id'] === 'email') { if ($block['id'] === 'email') {
$type = 'email'; $type = 'email';
$autocomplete = 'email'; $autocomplete = 'email';
} else if ($block['id'] === 'first_name') {
$autocomplete = 'given-name';
} else if ($block['id'] === 'last_name') {
$autocomplete = 'family-name';
} else {
$autocomplete = 'on';
} }
if (in_array($block['id'], ['email', 'last_name', 'first_name'], true)) { if (in_array($block['id'], ['email', 'last_name', 'first_name'], true)) {

View File

@@ -25,8 +25,8 @@ class ManageSubscriptionFormRendererTest extends \MailPoetTest {
$form = $this->formRenderer->renderForm($subscriber); $form = $this->formRenderer->renderForm($subscriber);
expect($form)->regExp('/<form class="mailpoet-manage-subscription" method="post" action="[a-z0-9:\/\._]+wp-admin\/admin-post.php" novalidate>/'); expect($form)->regExp('/<form class="mailpoet-manage-subscription" method="post" action="[a-z0-9:\/\._]+wp-admin\/admin-post.php" novalidate>/');
expect($form)->stringContainsString('<input type="hidden" name="data[email]" value="subscriber@test.com" />'); expect($form)->stringContainsString('<input type="hidden" name="data[email]" value="subscriber@test.com" />');
expect($form)->regExp('/<input type="text" autocomplete="on" class="mailpoet_text" name="data\[[a-zA-Z0-9=_]+\]" title="First name" value="Fname" data-automation-id="form_first_name" data-parsley-names=\'\[&quot;Please specify a valid name.&quot;,&quot;Addresses in names are not permitted, please add your name instead\.&quot;\]\'\/>/'); expect($form)->regExp('/<input type="text" autocomplete="given-name" class="mailpoet_text" name="data\[[a-zA-Z0-9=_]+\]" title="First name" value="Fname" data-automation-id="form_first_name" data-parsley-names=\'\[&quot;Please specify a valid name.&quot;,&quot;Addresses in names are not permitted, please add your name instead\.&quot;\]\'\/>/');
expect($form)->regExp('/<input type="text" autocomplete="on" class="mailpoet_text" name="data\[[a-zA-Z0-9=_]+\]" title="Last name" value="Lname" data-automation-id="form_last_name" data-parsley-names=\'\[&quot;Please specify a valid name.&quot;,&quot;Addresses in names are not permitted, please add your name instead\.&quot;\]\'\/>/'); expect($form)->regExp('/<input type="text" autocomplete="family-name" class="mailpoet_text" name="data\[[a-zA-Z0-9=_]+\]" title="Last name" value="Lname" data-automation-id="form_last_name" data-parsley-names=\'\[&quot;Please specify a valid name.&quot;,&quot;Addresses in names are not permitted, please add your name instead\.&quot;\]\'\/>/');
expect($form)->regExp('/<input type="checkbox" class="mailpoet_checkbox" name="data\[[a-zA-Z0-9=_]+\]\[\]" value="1" checked="checked" \/> Test segment/'); expect($form)->regExp('/<input type="checkbox" class="mailpoet_checkbox" name="data\[[a-zA-Z0-9=_]+\]\[\]" value="1" checked="checked" \/> Test segment/');
expect($form)->regExp('/<input type="text" autocomplete="on" class="mailpoet_text" name="data\[[a-zA-Z0-9=_]+\]" title="custom field 1" value="some value" \/>/'); expect($form)->regExp('/<input type="text" autocomplete="on" class="mailpoet_text" name="data\[[a-zA-Z0-9=_]+\]" title="custom field 1" value="some value" \/>/');
expect($form)->regExp('/<input type="text" autocomplete="on" class="mailpoet_text" name="data\[[a-zA-Z0-9=_]+\]" title="custom field 2" value="another value" \/>/'); expect($form)->regExp('/<input type="text" autocomplete="on" class="mailpoet_text" name="data\[[a-zA-Z0-9=_]+\]" title="custom field 2" value="another value" \/>/');