UX: alert screen readers when there is an issue saving a post (#13182)

* UX: alert screen readers when there is an issue saving a post

Adds a "alert" role to various popup-input-tips.

This means screen reader users can now tell why a post refuses to save.

Also ensures like icon in the "try the like button" has screen reader support
This commit is contained in:
Sam 2021-05-27 18:19:05 +10:00 committed by GitHub
parent 1270c7ad15
commit 2f12c0f5bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 1 deletions

View File

@ -269,7 +269,11 @@ export default Component.extend({
if (tl === 0 || tl === 1) {
reason +=
"<br/>" +
I18n.t("composer.error.try_like", { heart: iconHTML("heart") });
I18n.t("composer.error.try_like", {
heart: iconHTML("heart", {
label: I18n.t("likes_lowercase", { count: 1 }),
}),
});
}
}

View File

@ -5,6 +5,7 @@ import { iconHTML } from "discourse-common/lib/icon-library";
export default Component.extend({
classNameBindings: [":popup-tip", "good", "bad", "lastShownAt::hide"],
attributeBindings: ["role"],
animateAttribute: null,
bouncePixels: 6,
bounceDelay: 100,
@ -12,6 +13,13 @@ export default Component.extend({
closeIcon: `${iconHTML("times-circle")}`.htmlSafe(),
tipReason: null,
@discourseComputed("bad")
role(bad) {
if (bad) {
return "alert";
}
},
click() {
this.set("shownAt", null);
this.set("validation.lastShownAt", null);