IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-02 13:39:36 -06:00
Code Issues Packages Projects Releases Wiki Activity

A11Y: Improve accessibility for saved status message (#18950)

Browse Source 
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.
This commit is contained in:
Keegan George 2022-11-09 10:12:35 -08:00 committed by GitHub
parent b122298428
commit 3d376c71b6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
plugins/chat/assets/javascripts/discourse/templates/components/chat-channel-settings-view.hbs
View File

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

4
plugins/chat/assets/stylesheets/common/chat-channel-info.scss
View File

@ -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,

4
plugins/chat/config/locales/client.en.yml
View File

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