From efc8094bc275e157b02f6debe9106a9efce0d0e8 Mon Sep 17 00:00:00 2001
From: Devin Binnie <52460000+devinbinnie@users.noreply.github.com>
Date: Fri, 6 Jun 2025 16:44:19 -0400
Subject: [PATCH] [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
---
 .../setting_item_max.test.tsx.snap            | 71 +++++++++++++++----
 .../src/components/setting_item_max.tsx       | 38 ++++++++--
 .../render_emoticons_as_emoji.test.tsx.snap   |  3 +
 .../general/user_settings_general.tsx         | 53 +++++++++++---
 .../__snapshots__/index.test.tsx.snap         |  6 ++
 .../email_notification_setting.test.tsx.snap  |  6 ++
 .../manage_auto_responder.test.tsx.snap       |  6 ++
 webapp/channels/src/i18n/en.json              |  4 ++
 8 files changed, 160 insertions(+), 27 deletions(-)

diff --git a/webapp/channels/src/components/__snapshots__/setting_item_max.test.tsx.snap b/webapp/channels/src/components/__snapshots__/setting_item_max.test.tsx.snap
index b9d7fa68ee..09266dc9f8 100644
--- a/webapp/channels/src/components/__snapshots__/setting_item_max.test.tsx.snap
+++ b/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
-            className="col-sm-12 has-error"
-            id="clientError"
+          <div
+            className="form-group"
           >
-            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
-            className="col-sm-12 has-error"
-            id="serverError"
+          <div
+            className="form-group"
           >
-            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"
diff --git a/webapp/channels/src/components/setting_item_max.tsx b/webapp/channels/src/components/setting_item_max.tsx
index b34c051547..cb80eb2433 100644
--- a/webapp/channels/src/components/setting_item_max.tsx
+++ b/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}
-                            {clientError}
+                            <div
+                                role='alert'
+                            >
+                                {serverError}
+                                {clientError}
+                            </div>
                             {submit}
                             <button
                                 id={'cancelSetting'}
diff --git a/webapp/channels/src/components/user_settings/display/render_emoticons_as_emoji/__snapshots__/render_emoticons_as_emoji.test.tsx.snap b/webapp/channels/src/components/user_settings/display/render_emoticons_as_emoji/__snapshots__/render_emoticons_as_emoji.test.tsx.snap
index 018ebb9222..4020f6420f 100644
--- a/webapp/channels/src/components/user_settings/display/render_emoticons_as_emoji/__snapshots__/render_emoticons_as_emoji.test.tsx.snap
+++ b/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"
diff --git a/webapp/channels/src/components/user_settings/general/user_settings_general.tsx b/webapp/channels/src/components/user_settings/general/user_settings_general.tsx
index b183f11433..88e6a2ca14 100644
--- a/webapp/channels/src/components/user_settings/general/user_settings_general.tsx
+++ b/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}
-                areAllSectionsInactive={this.props.activeSection === ''}
-                title={formatMessage(holders.profilePicture)}
-                describe={minMessage}
-                section={'picture'}
-                updateSection={this.updateSection}
-                max={max}
-            />
+            <>
+                <SettingItem
+                    active={active}
+                    areAllSectionsInactive={this.props.activeSection === ''}
+                    title={formatMessage(holders.profilePicture)}
+                    describe={minMessage}
+                    section={'picture'}
+                    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();
diff --git a/webapp/channels/src/components/user_settings/notifications/desktop_and_mobile_notification_setting/__snapshots__/index.test.tsx.snap b/webapp/channels/src/components/user_settings/notifications/desktop_and_mobile_notification_setting/__snapshots__/index.test.tsx.snap
index e929bd4d0a..fb52f893b0 100644
--- a/webapp/channels/src/components/user_settings/notifications/desktop_and_mobile_notification_setting/__snapshots__/index.test.tsx.snap
+++ b/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"
diff --git a/webapp/channels/src/components/user_settings/notifications/email_notification_setting/__snapshots__/email_notification_setting.test.tsx.snap b/webapp/channels/src/components/user_settings/notifications/email_notification_setting/__snapshots__/email_notification_setting.test.tsx.snap
index 58ca0fe931..86da0e06fd 100644
--- a/webapp/channels/src/components/user_settings/notifications/email_notification_setting/__snapshots__/email_notification_setting.test.tsx.snap
+++ b/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]}
diff --git a/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/__snapshots__/manage_auto_responder.test.tsx.snap b/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/__snapshots__/manage_auto_responder.test.tsx.snap
index b1e207b416..6bb3c932a9 100644
--- a/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/__snapshots__/manage_auto_responder.test.tsx.snap
+++ b/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]}
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index 5a07324901..8160758a1f 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/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",