A11Y: Add aria label to composer messages `Esc` button (#18372)

This commit is contained in:
Penar Musaraj 2022-09-27 08:52:09 -04:00 committed by GitHub
parent 049f8569d8
commit 250c0bccbd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 32 additions and 18 deletions

View File

@ -128,7 +128,7 @@ export default Component.extend({
this._yourselfConfirm || this._yourselfConfirm ||
composer.store.createRecord("composer-message", { composer.store.createRecord("composer-message", {
id: "yourself_confirm", id: "yourself_confirm",
templateName: "custom-body", templateName: "education",
title: I18n.t("composer.yourself_confirm.title"), title: I18n.t("composer.yourself_confirm.title"),
body: I18n.t("composer.yourself_confirm.body"), body: I18n.t("composer.yourself_confirm.body"),
}); });

View File

@ -1,3 +0,0 @@
<a href {{action this.closeMessage this.message}} class="close">{{d-icon "times"}}</a>
{{#if this.message.title}}<h3>{{this.message.title}}</h3>{{/if}}
<p>{{html-safe this.message.body}}</p>

View File

@ -1,4 +1,6 @@
<a href {{action this.closeMessage this.message}} class="close">{{d-icon "times"}}</a> <a href {{action this.closeMessage this.message}} class="close" aria-label={{i18n "composer.esc_label"}}>
{{i18n "composer.esc"}} {{d-icon "times"}}
</a>
{{html-safe this.message.body}} {{html-safe this.message.body}}

View File

@ -1,2 +1,9 @@
<a href {{action this.closeMessage this.message}} class="close">{{d-icon "times"}}</a> <a href {{action this.closeMessage this.message}} class="close" aria-label={{i18n "composer.esc_label"}}>
{{i18n "composer.esc"}} {{d-icon "times"}}
</a>
{{#if this.message.title}}
<h3>{{this.message.title}}</h3>
{{/if}}
{{html-safe this.message.body}} {{html-safe this.message.body}}

View File

@ -1,4 +1,6 @@
<a href {{action this.closeMessage this.message}} class="close">{{d-icon "times"}}</a> <a href {{action this.closeMessage this.message}} class="close" aria-label={{i18n "composer.esc_label"}}>
{{i18n "composer.esc"}} {{d-icon "times"}}
</a>
{{html-safe this.message.body}} {{html-safe this.message.body}}

View File

@ -1,2 +1,5 @@
<a href {{action this.closeMessage this.message}} class="close">{{d-icon "times"}}</a> <a href {{action this.closeMessage this.message}} class="close" aria-label={{i18n "composer.esc_label"}}>
{{i18n "composer.esc"}} {{d-icon "times"}}
</a>
{{html-safe this.message.body}} {{html-safe this.message.body}}

View File

@ -1,4 +1,7 @@
<a href {{action this.closeMessage this.message}} class="close">{{d-icon "times"}}</a> <a href {{action this.closeMessage this.message}} class="close" aria-label={{i18n "composer.esc_label"}}>
{{i18n "composer.esc"}} {{d-icon "times"}}
</a>
<h3>{{i18n "composer.similar_topics"}}</h3> <h3>{{i18n "composer.similar_topics"}}</h3>
<ul class="topics"> <ul class="topics">

View File

@ -126,16 +126,14 @@
top: 10px; top: 10px;
color: var(--primary); color: var(--primary);
opacity: 0.5; opacity: 0.5;
font-size: $font-up-1; font-size: var(--font-0);
&:before { .d-icon {
content: "esc"; font-size: var(--font-up-1);
font-size: $font-down-1; margin-left: 0.25em;
margin-right: 0.5em; }
&:hover {
opacity: 1;
} }
}
a.close:hover {
opacity: 1;
} }
ul { ul {

View File

@ -2166,6 +2166,8 @@ en:
similar_topics: "Your topic is similar to..." similar_topics: "Your topic is similar to..."
drafts_offline: "drafts offline" drafts_offline: "drafts offline"
edit_conflict: "edit conflict" edit_conflict: "edit conflict"
esc: "esc"
esc_label: "Click or press Esc to dismiss"
group_mentioned_limit: group_mentioned_limit:
one: "<b>Warning!</b> You mentioned <a href='%{group_link}'>%{group}</a>, however this group has more members than the administrator configured mention limit of %{count} user. Nobody will be notified." one: "<b>Warning!</b> You mentioned <a href='%{group_link}'>%{group}</a>, however this group has more members than the administrator configured mention limit of %{count} user. Nobody will be notified."