[MM-62992][MM-62994][MM-62995] Profile Settings accessibility fixes (#31236)

* [MM-62995] Add aria-live for Profile Picture upload

* [MM-62992][MM-62994] Add error icon and screen reader text to SettingItemMax

* Fix e2e

* PR feedback

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

@@ -26,6 +26,9 @@ exports[`components/SettingItemMax should match snapshot 1`] = `
         className="setting-list-item"
       >
         <hr />
+        <div
+          role="alert"
+        />
         <SaveButton
           disabled={false}
           onClick={[Function]}
@@ -74,14 +77,33 @@ exports[`components/SettingItemMax should match snapshot, on clientError 1`] = `
       >
         <hr />
         <div
-          className="form-group"
+          role="alert"
         >
-          <label
+          <div
-            className="col-sm-12 has-error"
+            className="form-group"
-            id="clientError"
           >
-            clientError
+            <label
-          </label>
+              className="col-sm-12 has-error"
+            >
+              <i
+                className="icon icon-alert-circle-outline"
+                role="img"
+              />
+              <span
+                className="sr-only"
+              >
+                <MemoizedFormattedMessage
+                  defaultMessage="Error"
+                  id="setting_item_max.error"
+                />
+              </span>
+              <span
+                id="clientError"
+              >
+                clientError
+              </span>
+            </label>
+          </div>
         </div>
         <SaveButton
           disabled={false}
@@ -131,14 +153,33 @@ exports[`components/SettingItemMax should match snapshot, on serverError 1`] = `
       >
         <hr />
         <div
-          className="form-group"
+          role="alert"
         >
-          <label
+          <div
-            className="col-sm-12 has-error"
+            className="form-group"
-            id="serverError"
           >
-            serverError
+            <label
-          </label>
+              className="col-sm-12 has-error"
+            >
+              <i
+                className="icon icon-alert-circle-outline"
+                role="presentation"
+              />
+              <span
+                className="sr-only"
+              >
+                <MemoizedFormattedMessage
+                  defaultMessage="Error"
+                  id="setting_item_max.error"
+                />
+              </span>
+              <span
+                id="serverError"
+              >
+                serverError
+              </span>
+            </label>
+          </div>
         </div>
         <SaveButton
           disabled={false}
@@ -187,6 +228,9 @@ exports[`components/SettingItemMax should match snapshot, with new saveTextButto
         className="setting-list-item"
       >
         <hr />
+        <div
+          role="alert"
+        />
         <SaveButton
           defaultMessage="CustomText"
           disabled={false}
@@ -235,6 +279,9 @@ exports[`components/SettingItemMax should match snapshot, without submit 1`] = `
         className="setting-list-item"
       >
         <hr />
+        <div
+          role="alert"
+        />
         <button
           className="btn btn-tertiary"
           id="cancelSetting"

webapp/channels/src/components/setting_item_max.tsx

@@ -125,10 +125,21 @@ export default class SettingItemMax extends React.PureComponent<Props> {
             clientError = (
                 <div className='form-group'>
                     <label
-                        id='clientError'
                         className='col-sm-12 has-error'
                     >
-                        {this.props.clientError}
+                        <i
+                            className='icon icon-alert-circle-outline'
+                            role='img'
+                        />
+                        <span className='sr-only'>
+                            <FormattedMessage
+                                id='setting_item_max.error'
+                                defaultMessage='Error'
+                            />
+                        </span>
+                        <span id='clientError'>
+                            {this.props.clientError}
+                        </span>
                     </label>
                 </div>
             );
@@ -139,10 +150,21 @@ export default class SettingItemMax extends React.PureComponent<Props> {
             serverError = (
                 <div className='form-group'>
                     <label
-                        id='serverError'
                         className='col-sm-12 has-error'
                     >
-                        {this.props.serverError}
+                        <i
+                            className='icon icon-alert-circle-outline'
+                            role='presentation'
+                        />
+                        <span className='sr-only'>
+                            <FormattedMessage
+                                id='setting_item_max.error'
+                                defaultMessage='Error'
+                            />
+                        </span>
+                        <span id='serverError'>
+                            {this.props.serverError}
+                        </span>
                     </label>
                 </div>
             );
@@ -241,8 +263,12 @@ export default class SettingItemMax extends React.PureComponent<Props> {
                         <div className='setting-list-item'>
                             <hr/>
                             {this.props.submitExtra}
-                            {serverError}
+                            <div
-                            {clientError}
+                                role='alert'
+                            >
+                                {serverError}
+                                {clientError}
+                            </div>
                             {submit}
                             <button
                                 id={'cancelSetting'}

webapp/channels/src/components/user_settings/display/render_emoticons_as_emoji/__snapshots__/render_emoticons_as_emoji.test.tsx.snap

@@ -68,6 +68,9 @@ exports[`components/user_settings/display/render_emoticons_as_emoji/render_emoti
           class="setting-list-item"
         >
           <hr />
+          <div
+            role="alert"
+          />
           <button
             class="btn btn-primary "
             data-testid="saveSetting"

webapp/channels/src/components/user_settings/general/user_settings_general.tsx

@@ -1676,18 +1676,53 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
             );
         }
         return (
-            <SettingItem
+            <>
-                active={active}
+                <SettingItem
-                areAllSectionsInactive={this.props.activeSection === ''}
+                    active={active}
-                title={formatMessage(holders.profilePicture)}
+                    areAllSectionsInactive={this.props.activeSection === ''}
-                describe={minMessage}
+                    title={formatMessage(holders.profilePicture)}
-                section={'picture'}
+                    describe={minMessage}
-                updateSection={this.updateSection}
+                    section={'picture'}
-                max={max}
+                    updateSection={this.updateSection}
-            />
+                    max={max}
+                />
+                <div
+                    className='sr-only'
+                    aria-live='polite'
+                    aria-atomic='true'
+                >
+                    {this.renderPictureStatus()}
+                </div>
+            </>
         );
     };
 
+    renderPictureStatus = () => {
+        if (this.state.loadingPicture) {
+            return (
+                <FormattedMessage
+                    id='user.settings.general.picture.uploading'
+                    defaultMessage='Uploading...'
+                />
+            );
+        } else if (this.state.pictureFile) {
+            return (
+                <FormattedMessage
+                    id='user.settings.general.picture.selected'
+                    defaultMessage='Picture selected, ready to save'
+                />
+            );
+        } else if (this.submitActive) {
+            return (
+                <FormattedMessage
+                    id='user.settings.general.picture.uploaded'
+                    defaultMessage='Picture uploaded'
+                />
+            );
+        }
+        return null;
+    };
+
     render() {
         const nameSection = this.createNameSection();
         const nicknameSection = this.createNicknameSection();

webapp/channels/src/components/user_settings/notifications/desktop_and_mobile_notification_setting/__snapshots__/index.test.tsx.snap

@@ -163,6 +163,9 @@ exports[`DesktopNotificationSettings should match snapshot, on max setting 1`] =
           class="setting-list-item"
         >
           <hr />
+          <div
+            role="alert"
+          />
           <button
             class="btn btn-primary "
             data-testid="saveSetting"
@@ -376,6 +379,9 @@ exports[`DesktopNotificationSettings should not show desktop thread notification
           class="setting-list-item"
         >
           <hr />
+          <div
+            role="alert"
+          />
           <button
             class="btn btn-primary "
             data-testid="saveSetting"

webapp/channels/src/components/user_settings/notifications/email_notification_setting/__snapshots__/email_notification_setting.test.tsx.snap

@@ -189,6 +189,9 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
             className="setting-list-item"
           >
             <hr />
+            <div
+              role="alert"
+            />
             <SaveButton
               disabled={false}
               onClick={[Function]}
@@ -606,6 +609,9 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
             className="setting-list-item"
           >
             <hr />
+            <div
+              role="alert"
+            />
             <SaveButton
               disabled={false}
               onClick={[Function]}

webapp/channels/src/components/user_settings/notifications/manage_auto_responder/__snapshots__/manage_auto_responder.test.tsx.snap

@@ -120,6 +120,9 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
             className="setting-list-item"
           >
             <hr />
+            <div
+              role="alert"
+            />
             <SaveButton
               disabled={false}
               onClick={[Function]}
@@ -370,6 +373,9 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
             className="setting-list-item"
           >
             <hr />
+            <div
+              role="alert"
+            />
             <SaveButton
               disabled={false}
               onClick={[Function]}

webapp/channels/src/i18n/en.json

@@ -5213,6 +5213,7 @@
   "self_hosted_signup.signup_consequences": "You will be billed today. Your license will be applied automatically. <a>See how billing works.</a>",
   "self_hosted_signup.total": "Total",
   "setting_item_max.cancel": "Cancel",
+  "setting_item_max.error": "Error",
   "setting_item_min.edit": "Edit",
   "setting_picture.cancel": "Cancel",
   "setting_picture.help.profile": "Upload a picture in BMP, JPG, JPEG, or PNG format. Maximum file size: {max}",
@@ -5910,6 +5911,9 @@
   "user.settings.general.nicknameExtra": "Use Nickname for a name you might be called that is different from your first name and username. This is most often used when two or more people have similar sounding names and usernames.",
   "user.settings.general.notificationsExtra": "By default, you will receive mention notifications when someone types your first name. Go to {notify} settings to change this default.",
   "user.settings.general.notificationsLink": "Notifications",
+  "user.settings.general.picture.selected": "Picture selected, ready to save",
+  "user.settings.general.picture.uploaded": "Picture uploaded",
+  "user.settings.general.picture.uploading": "Uploading...",
   "user.settings.general.position": "Position",
   "user.settings.general.positionExtra": "Use Position for your role or job title. This will be shown in your profile popover.",
   "user.settings.general.profilePicture": "Profile Picture",