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.
This commit is contained in:
parent
b122298428
commit
3d376c71b6
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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>"
|
||||
|
|
Loading…
Reference in New Issue