[MM-62980][MM-62970] Login and Password Reset accessibility fixes (#31028)

* [MM-62980] Set aria-describedby for Input component when again custom message is set

* [MM-62970] Change password reset send link input to Input

* Fix i18n

* Fix e2e

* fix snapshots

---------

Co-authored-by: yasserfaraazkhan <attitude3cena.yf@gmail.com>

e2e-tests/cypress/tests/integration/channels/signin_authentication/authentication_spec.js

@@ -55,7 +55,7 @@ describe('Authentication', () => {
         cy.url().should('contain', '/reset_password');
 
         // # Enter an email that doesn't have an account on the server (but that you CAN receive email at)
-        cy.findByPlaceholderText('Email').type('test@test.com');
+        cy.get('#passwordResetEmailInput').type('test@test.com');
 
         cy.findByText('Reset my password').should('be.visible').click();
 

e2e-tests/playwright/lib/src/ui/pages/reset_password.ts

@@ -22,7 +22,7 @@ export default class ResetPasswordPage {
 
         this.title = page.locator('h1:has-text("Password Reset")');
         this.subtitle = page.locator('text=To reset your password, enter the email address you used to sign up');
-        this.emailInput = page.locator(`[placeholder="Email"]`);
+        this.emailInput = page.locator('#passwordResetEmailInput');
         this.resetButton = page.locator('#passwordResetButton');
         this.formContainer = page.locator('.signup-team__container');
 

webapp/channels/src/components/password_reset_send_link/password_reset_send_link.tsx

@@ -9,7 +9,7 @@ import type {ActionResult} from 'mattermost-redux/types/actions';
 import {isEmail} from 'mattermost-redux/utils/helpers';
 
 import BackButton from 'components/common/back_button';
-import LocalizedPlaceholderInput from 'components/localized_placeholder_input';
+import Input from 'components/widgets/inputs/input/input';
 
 export interface Props {
     intl: IntlShape;
@@ -134,15 +134,18 @@ export class PasswordResetSendLink extends React.PureComponent<Props, State> {
                                 />
                             </p>
                             <div className={formClass}>
-                                <LocalizedPlaceholderInput
+                                <Input
                                     id='passwordResetEmailInput'
                                     type='email'
-                                    className='form-control'
                                     name='email'
-                                    placeholder={defineMessage({
+                                    label={defineMessage({
                                         id: 'password_send.email',
                                         defaultMessage: 'Email',
                                     })}
+                                    placeholder={defineMessage({
+                                        id: 'password_send.email.placeholder',
+                                        defaultMessage: 'Enter the email address you used to sign up',
+                                    })}
                                     ref={this.emailInput}
                                     spellCheck='false'
                                     autoFocus={true}

webapp/channels/src/components/widgets/inputs/input/input.tsx

@@ -210,7 +210,7 @@ const Input = React.forwardRef((
                     value={value}
                     placeholder={placeholderValue}
                     aria-label={ariaLabel}
-                    aria-describedby={error ? errorId : undefined}
+                    aria-describedby={customInputLabel ? errorId : undefined}
                     aria-invalid={error || hasError || limitExceeded > 0}
                     rows={3}
                     name={name}
@@ -230,7 +230,7 @@ const Input = React.forwardRef((
                 value={value}
                 placeholder={placeholderValue}
                 aria-label={ariaLabel}
-                aria-describedby={error ? errorId : undefined}
+                aria-describedby={customInputLabel ? errorId : undefined}
                 aria-invalid={error || hasError || limitExceeded > 0}
                 name={name}
                 disabled={disabled}

webapp/channels/src/i18n/en.json

@@ -4840,6 +4840,7 @@
   "password_send.checkInbox": "Please check your inbox.",
   "password_send.description": "To reset your password, enter the email address you used to sign up",
   "password_send.email": "Email",
+  "password_send.email.placeholder": "Enter the email address you used to sign up",
   "password_send.error": "Please enter a valid email address.",
   "password_send.link": "If the account exists, a password reset email will be sent to:",
   "password_send.reset": "Reset my password",