From 3d376c71b69080cb9561d7683a46d82eddfa98a9 Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Wed, 9 Nov 2022 10:12:35 -0800
Subject: [PATCH] A11Y: Improve accessibility for saved status message (#18950)

Toggling channel settings shows a status message when saved. This status message is not accessible to screen readers. This commit ensures that the status message is made accessible.
---
 .../components/chat-channel-settings-view.hbs        | 12 +++++++++---
 .../assets/stylesheets/common/chat-channel-info.scss |  4 ++++
 plugins/chat/config/locales/client.en.yml            |  4 ++++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/plugins/chat/assets/javascripts/discourse/templates/components/chat-channel-settings-view.hbs b/plugins/chat/assets/javascripts/discourse/templates/components/chat-channel-settings-view.hbs
index 26c7cd45152..875e816ec05 100644
--- a/plugins/chat/assets/javascripts/discourse/templates/components/chat-channel-settings-view.hbs
+++ b/plugins/chat/assets/javascripts/discourse/templates/components/chat-channel-settings-view.hbs
@@ -6,7 +6,9 @@
     <div class="chat-form__control">
       <ComboBox @content={{this.mutedOptions}} @value={{this.channel.current_user_membership.muted}} @valueProperty="value" @class="channel-settings-view__muted-selector" @onChange={{action (fn this.saveNotificationSettings "muted")}} />
       {{#if this.savedMuted}}
-        <span class="channel-settings-view__saved">✓ {{i18n "saved"}}</span>
+        <span class="channel-settings-view__saved" role="status" aria-label={{i18n "chat.channel_settings.save_label.mute_channel"}}>
+          {{d-icon "check"}} {{i18n "saved"}}
+        </span>
       {{/if}}
     </div>
   </div>
@@ -19,7 +21,9 @@
       <div class="chat-form__control">
         <ComboBox @content={{this.notificationLevels}} @value={{this.channel.current_user_membership.desktop_notification_level}} @valueProperty="value" @class="channel-settings-view__desktop-notification-level-selector" @onChange={{action (fn this.saveNotificationSettings "desktop_notification_level")}} />
         {{#if this.savedDesktopNotificationLevel}}
-          <span class="channel-settings-view__saved">✓ {{i18n "saved"}}</span>
+          <span class="channel-settings-view__saved" role="status" aria-label={{i18n "chat.channel_settings.save_label.desktop_notification"}}>
+            {{d-icon "check"}} {{i18n "saved"}}
+          </span>
         {{/if}}
       </div>
     </div>
@@ -31,7 +35,9 @@
       <div class="chat-form__control">
         <ComboBox @content={{this.notificationLevels}} @value={{this.channel.current_user_membership.mobile_notification_level}} @valueProperty="value" @class="channel-settings-view__mobile-notification-level-selector" @onChange={{action (fn this.saveNotificationSettings "mobile_notification_level")}} />
         {{#if this.savedMobileNotificationLevel}}
-          <span class="channel-settings-view__saved">✓ {{i18n "saved"}}</span>
+          <span class="channel-settings-view__saved" role="status" aria-label={{i18n "chat.channel_settings.save_label.mobile_notification"}}>
+            {{d-icon "check"}} {{i18n "saved"}}
+          </span>
         {{/if}}
       </div>
     </div>
diff --git a/plugins/chat/assets/stylesheets/common/chat-channel-info.scss b/plugins/chat/assets/stylesheets/common/chat-channel-info.scss
index e6c448ab4ab..67985b146b5 100644
--- a/plugins/chat/assets/stylesheets/common/chat-channel-info.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-channel-info.scss
@@ -46,6 +46,10 @@
 .channel-settings-view__saved {
   color: var(--success);
   padding-left: 0.5rem;
+
+  .d-icon-check {
+    margin-right: 0.25rem;
+  }
 }
 
 .channel-settings-view__desktop-notification-level-selector,
diff --git a/plugins/chat/config/locales/client.en.yml b/plugins/chat/config/locales/client.en.yml
index d987b6d32f9..af7167e0520 100644
--- a/plugins/chat/config/locales/client.en.yml
+++ b/plugins/chat/config/locales/client.en.yml
@@ -46,6 +46,10 @@ en:
         leave_channel: "Leave channel"
         join: "Join"
         leave: "Leave"
+        save_label: 
+          mute_channel: "Mute channel preference saved"
+          desktop_notification: "Desktop notification preference saved"
+          mobile_notification: "Mobile push notification preference saved"
       channel_archive:
         title: "Archive Channel"
         instructions: "<p>Archiving a channel puts it into read-only mode and moves all messages from the channel into a new or existing topic. No new messages can be sent, and no existing messages can be edited or deleted.</p><p>Are you sure you want to archive the <strong>%{channelTitle}</strong> channel?</p>"