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.

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>

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,

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