[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>

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",