MM-52641 MM-52645 Playwright/Accessibility: Initial setup and accessibility fix on login page (#23254)

* MM-52641 Playwright/Accessibility: initial setup

* upgrade Playwright to 1.36.1

* fix accessibility at login page

* fix lint

* update snapshot

webapp/channels/src/components/header_footer_route/header.tsx

@@ -21,12 +21,15 @@ export type HeaderProps = {
 const Header = ({alternateLink, backButtonURL, onBackButtonClick}: HeaderProps) => {
     const {EnableCustomBrand, SiteName} = useSelector(getConfig);
 
+    const ariaLabel = EnableCustomBrand === 'true' && SiteName ? SiteName : 'Mattermost';
+
     return (
         <div className='hfroute-header'>
             <div className='header-main'>
                 <Link
                     className='header-logo-link'
                     to='/'
+                    aria-label={ariaLabel}
                 >
                     {EnableCustomBrand === 'true' || SiteName !== 'Mattermost' ? SiteName : <Logo/>}
                 </Link>

webapp/channels/src/components/start_trial_form_modal/__snapshots__/start_trial_form_modal.test.tsx.snap

@@ -76,6 +76,7 @@ Object {
                     class="Input_wrapper"
                   >
                     <input
+                      aria-label="Name"
                       class="Input form-control large"
                       id="input_name"
                       name="name"
@@ -101,6 +102,7 @@ Object {
                     class="Input_wrapper"
                   >
                     <input
+                      aria-label="Business Email"
                       class="Input form-control large Input__focus"
                       id="input_email"
                       name="email"
@@ -134,6 +136,7 @@ Object {
                     class="Input_wrapper"
                   >
                     <input
+                      aria-label="Company Name"
                       class="Input form-control large"
                       id="input_company_name"
                       name="company_name"

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

@@ -179,6 +179,7 @@ const Input = React.forwardRef((
                         className={classNames('Input form-control', inputSize, inputClassName, {Input__focus: showLegend})}
                         value={value}
                         placeholder={focused ? (label && placeholder) || label : label || placeholder}
+                        aria-label={label || placeholder}
                         name={name}
                         disabled={disabled}
                         {...otherProps}

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

@@ -51,6 +51,10 @@ const PasswordInput = React.forwardRef((
     const customMessageInfo: CustomMessageInputType | null = info ? {type: ItemStatus.INFO, value: info} : null;
     const customMessage = error ? customMessageError : customMessageInfo;
 
+    const placeHolder = createMode ?
+        formatMessage({id: 'widget.passwordInput.createPassword', defaultMessage: 'Choose a Password'}) :
+        formatMessage({id: 'widget.passwordInput.password', defaultMessage: 'Password'});
+
     return (
         <Input
             className={classNames('password-input', className)}
@@ -62,6 +66,7 @@ const PasswordInput = React.forwardRef((
                 <button
                     id='password_toggle'
                     type='button'
+                    aria-label={placeHolder}
                     className='password-input-toggle'
                     onClick={toggleShowPassword}
                     disabled={disabled}
@@ -73,11 +78,7 @@ const PasswordInput = React.forwardRef((
             onChange={onChange}
             onBlur={onBlur}
             onFocus={onFocus}
-            placeholder={createMode ? (
-                formatMessage({id: 'widget.passwordInput.createPassword', defaultMessage: 'Choose a Password'})
-            ) : (
-                formatMessage({id: 'widget.passwordInput.password', defaultMessage: 'Password'})
-            )}
+            placeholder={placeHolder}
             hasError={hasError}
             customMessage={error || info ? customMessage : undefined}
             disabled={disabled}

webapp/channels/src/root.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
 
-    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0'>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <meta name='robots' content='noindex, nofollow'>
     <meta name='referrer' content='no-referrer'>