Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Accessibility] Add required indicator to form login (#48743) 

* Add accessibility attributes to form login

* Add accessibility attributes to lost password form

* Add accessibility attributes to reset password form

* Bump form login templates

* Add accessibility attributes to register form

* Update login forms with aria-required attribute

* Hide asterisk for screen readers in the register form

* Add changelog file
This commit is contained in:
Gabriel Manussakis 2024-07-02 11:37:33 -03:00 committed by GitHub
parent 0d4b177b22
commit e086ba7d32
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 33 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/woocommerce/changelog/fix-43658-add-required-indication-to-login-form Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: enhancement
Add required indication to login forms

10
plugins/woocommerce/templates/auth/form-login.php
View File

@ -12,7 +12,7 @@
* *
* @see https://woocommerce.com/document/template-structure/ * @see https://woocommerce.com/document/template-structure/
* @package WooCommerce\Templates\Auth * @package WooCommerce\Templates\Auth
* @version 7.0.1 * @version 9.2.0
*/ */
defined( 'ABSPATH' ) || exit; defined( 'ABSPATH' ) || exit;
@ -37,12 +37,12 @@ do_action( 'woocommerce_auth_page_header' ); ?>
<form method="post" class="wc-auth-login"> <form method="post" class="wc-auth-login">
<p class="form-row form-row-wide"> <p class="form-row form-row-wide">
<label for="username"><?php esc_html_e( 'Username or email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <label for="username"><?php esc_html_e( 'Username or email address', 'woocommerce' ); ?>&nbsp;<span class="required" aria-hidden="true">*</span><span class="screen-reader-text"><?php esc_html_e( 'Required', 'woocommerce' ); ?></span></label>
<input type="text" class="input-text" name="username" id="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( $_POST['username'] ) : ''; ?>" /><?php //@codingStandardsIgnoreLine ?> <input type="text" class="input-text" name="username" id="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( $_POST['username'] ) : ''; ?>" required aria-required="true" /><?php //@codingStandardsIgnoreLine ?>
</p> </p>
<p class="form-row form-row-wide"> <p class="form-row form-row-wide">
<label for="password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <label for="password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required" aria-hidden="true">*</span><span class="screen-reader-text"><?php esc_html_e( 'Required', 'woocommerce' ); ?></span></label>
<input class="input-text" type="password" name="password" id="password" /> <input class="input-text" type="password" name="password" id="password" required aria-required="true" />
</p> </p>
<p class="wc-auth-actions"> <p class="wc-auth-actions">
<?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?> <?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?>

10
plugins/woocommerce/templates/global/form-login.php
View File

@ -12,7 +12,7 @@
* *
* @see https://woocommerce.com/document/template-structure/ * @see https://woocommerce.com/document/template-structure/
* @package WooCommerce\Templates * @package WooCommerce\Templates
* @version 7.0.1 * @version 9.2.0
*/ */
if ( ! defined( 'ABSPATH' ) ) { if ( ! defined( 'ABSPATH' ) ) {
@ -31,12 +31,12 @@ if ( is_user_logged_in() ) {
<?php echo ( $message ) ? wpautop( wptexturize( $message ) ) : ''; // @codingStandardsIgnoreLine ?> <?php echo ( $message ) ? wpautop( wptexturize( $message ) ) : ''; // @codingStandardsIgnoreLine ?>
<p class="form-row form-row-first"> <p class="form-row form-row-first">
<label for="username"><?php esc_html_e( 'Username or email', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <label for="username"><?php esc_html_e( 'Username or email', 'woocommerce' ); ?>&nbsp;<span class="required" aria-hidden="true">*</span><span class="screen-reader-text"><?php esc_html_e( 'Required', 'woocommerce' ); ?></span></label>
<input type="text" class="input-text" name="username" id="username" autocomplete="username" /> <input type="text" class="input-text" name="username" id="username" autocomplete="username" required aria-required="true" />
</p> </p>
<p class="form-row form-row-last"> <p class="form-row form-row-last">
<label for="password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <label for="password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required" aria-hidden="true">*</span><span class="screen-reader-text"><?php esc_html_e( 'Required', 'woocommerce' ); ?></span></label>
<input class="input-text woocommerce-Input" type="password" name="password" id="password" autocomplete="current-password" /> <input class="input-text woocommerce-Input" type="password" name="password" id="password" autocomplete="current-password" required aria-required="true" />
</p> </p>
<div class="clear"></div> <div class="clear"></div>

22
plugins/woocommerce/templates/myaccount/form-login.php
View File

@ -12,7 +12,7 @@
* *
* @see https://woocommerce.com/document/template-structure/ * @see https://woocommerce.com/document/template-structure/
* @package WooCommerce\Templates * @package WooCommerce\Templates
* @version 7.0.1 * @version 9.2.0
*/ */
if ( ! defined( 'ABSPATH' ) ) { if ( ! defined( 'ABSPATH' ) ) {
@ -36,12 +36,12 @@ do_action( 'woocommerce_before_customer_login_form' ); ?>
<?php do_action( 'woocommerce_login_form_start' ); ?> <?php do_action( 'woocommerce_login_form_start' ); ?>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="username"><?php esc_html_e( 'Username or email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <label for="username"><?php esc_html_e( 'Username or email address', 'woocommerce' ); ?>&nbsp;<span class="required" aria-hidden="true">*</span><span class="screen-reader-text"><?php esc_html_e( 'Required', 'woocommerce' ); ?></span></label>
<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" required aria-required="true" /><?php // @codingStandardsIgnoreLine ?>
</p> </p>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <label for="password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required" aria-hidden="true">*</span><span class="screen-reader-text"><?php esc_html_e( 'Required', 'woocommerce' ); ?></span></label>
<input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" id="password" autocomplete="current-password" /> <input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" id="password" autocomplete="current-password" required aria-required="true" />
</p> </p>
<?php do_action( 'woocommerce_login_form' ); ?> <?php do_action( 'woocommerce_login_form' ); ?>
@ -76,22 +76,22 @@ do_action( 'woocommerce_before_customer_login_form' ); ?>
<?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?> <?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="reg_username"><?php esc_html_e( 'Username', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <label for="reg_username"><?php esc_html_e( 'Username', 'woocommerce' ); ?>&nbsp;<span class="required" aria-hidden="true">*</span><span class="screen-reader-text"><?php esc_html_e( 'Required', 'woocommerce' ); ?></span></label>
<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="reg_username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="reg_username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" required aria-required="true" /><?php // @codingStandardsIgnoreLine ?>
</p> </p>
<?php endif; ?> <?php endif; ?>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="reg_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <label for="reg_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?>&nbsp;<span class="required" aria-hidden="true">*</span><span class="screen-reader-text"><?php esc_html_e( 'Required', 'woocommerce' ); ?></span></label>
<input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" id="reg_email" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> <input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" id="reg_email" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" required aria-required="true" /><?php // @codingStandardsIgnoreLine ?>
</p> </p>
<?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?> <?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="reg_password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <label for="reg_password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required" aria-hidden="true">*</span><span class="screen-reader-text"><?php esc_html_e( 'Required', 'woocommerce' ); ?></span></label>
<input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" id="reg_password" autocomplete="new-password" /> <input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" id="reg_password" autocomplete="new-password" required aria-required="true" />
</p> </p>
<?php else : ?> <?php else : ?>

6
plugins/woocommerce/templates/myaccount/form-lost-password.php
View File

@ -12,7 +12,7 @@
* *
* @see https://woocommerce.com/document/template-structure/ * @see https://woocommerce.com/document/template-structure/
* @package WooCommerce\Templates * @package WooCommerce\Templates
* @version 9.0.0 * @version 9.2.0
*/ */
defined( 'ABSPATH' ) || exit; defined( 'ABSPATH' ) || exit;
@ -25,8 +25,8 @@ do_action( 'woocommerce_before_lost_password_form' );
<p><?php echo apply_filters( 'woocommerce_lost_password_message', esc_html__( 'Lost your password? Please enter your username or email address. You will receive a link to create a new password via email.', 'woocommerce' ) ); ?></p><?php // @codingStandardsIgnoreLine ?> <p><?php echo apply_filters( 'woocommerce_lost_password_message', esc_html__( 'Lost your password? Please enter your username or email address. You will receive a link to create a new password via email.', 'woocommerce' ) ); ?></p><?php // @codingStandardsIgnoreLine ?>
<p class="woocommerce-form-row woocommerce-form-row--first form-row form-row-first"> <p class="woocommerce-form-row woocommerce-form-row--first form-row form-row-first">
<label for="user_login"><?php esc_html_e( 'Username or email', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <label for="user_login"><?php esc_html_e( 'Username or email', 'woocommerce' ); ?>&nbsp;<span class="required" aria-hidden="true">*</span><span class="screen-reader-text"><?php esc_html_e( 'Required', 'woocommerce' ); ?></span></label>
<input class="woocommerce-Input woocommerce-Input--text input-text" type="text" name="user_login" id="user_login" autocomplete="username" aria-required="true" /> <input class="woocommerce-Input woocommerce-Input--text input-text" type="text" name="user_login" id="user_login" autocomplete="username" required aria-required="true" />
</p> </p>
<div class="clear"></div> <div class="clear"></div>

10
plugins/woocommerce/templates/myaccount/form-reset-password.php
View File

@ -12,7 +12,7 @@
* *
* @see https://woocommerce.com/document/template-structure/ * @see https://woocommerce.com/document/template-structure/
* @package WooCommerce\Templates * @package WooCommerce\Templates
* @version 7.0.1 * @version 9.2.0
*/ */
defined( 'ABSPATH' ) || exit; defined( 'ABSPATH' ) || exit;
@ -25,12 +25,12 @@ do_action( 'woocommerce_before_reset_password_form' );
<p><?php echo apply_filters( 'woocommerce_reset_password_message', esc_html__( 'Enter a new password below.', 'woocommerce' ) ); ?></p><?php // @codingStandardsIgnoreLine ?> <p><?php echo apply_filters( 'woocommerce_reset_password_message', esc_html__( 'Enter a new password below.', 'woocommerce' ) ); ?></p><?php // @codingStandardsIgnoreLine ?>
<p class="woocommerce-form-row woocommerce-form-row--first form-row form-row-first"> <p class="woocommerce-form-row woocommerce-form-row--first form-row form-row-first">
<label for="password_1"><?php esc_html_e( 'New password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <label for="password_1"><?php esc_html_e( 'New password', 'woocommerce' ); ?>&nbsp;<span class="required" aria-hidden="true">*</span><span class="screen-reader-text"><?php esc_html_e( 'Required', 'woocommerce' ); ?></span></label>
<input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password_1" id="password_1" autocomplete="new-password" /> <input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password_1" id="password_1" autocomplete="new-password" required aria-required="true" />
</p> </p>
<p class="woocommerce-form-row woocommerce-form-row--last form-row form-row-last"> <p class="woocommerce-form-row woocommerce-form-row--last form-row form-row-last">
<label for="password_2"><?php esc_html_e( 'Re-enter new password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <label for="password_2"><?php esc_html_e( 'Re-enter new password', 'woocommerce' ); ?>&nbsp;<span class="required" aria-hidden="true">*</span><span class="screen-reader-text"><?php esc_html_e( 'Required', 'woocommerce' ); ?></span></label>
<input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password_2" id="password_2" autocomplete="new-password" /> <input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password_2" id="password_2" autocomplete="new-password" required aria-required="true" />
</p> </p>
<input type="hidden" name="reset_key" value="<?php echo esc_attr( $args['key'] ); ?>" /> <input type="hidden" name="reset_key" value="<?php echo esc_attr( $args['key'] ); ?>" />