mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-21 03:19:56 +08:00
7fc946af4c
The zero width space added here as a layout fix seems to get noticed by screenreaders (tested in NVDA) and gets "read" as text. This means that instead of falling back to the button title, which is the normal behavior for textless buttons, the screenreader reads the blank space. This results in buttons like the post controls being read simply as "button" with no other description. Wrapping the space in `aria-hidden` corrects this, and results in the button title being read properly.
60 lines
1.5 KiB
Text
Vendored
60 lines
1.5 KiB
Text
Vendored
import Component from "@glimmer/component";
|
|
import { action } from "@ember/object";
|
|
import { service } from "@ember/service";
|
|
import { eq, or } from "truth-helpers";
|
|
import DButton from "discourse/components/d-button";
|
|
import { i18n } from "discourse-i18n";
|
|
|
|
export default class AdminWatchedWord extends Component {
|
|
@service dialog;
|
|
|
|
get tags() {
|
|
return this.args.word.replacement.split(",");
|
|
}
|
|
|
|
@action
|
|
async deleteWord() {
|
|
try {
|
|
await this.args.word.destroy();
|
|
this.args.action(this.args.word);
|
|
} catch (e) {
|
|
this.dialog.alert(
|
|
i18n("generic_error_with_reason", {
|
|
error: `http: ${e.status} - ${e.body}`,
|
|
})
|
|
);
|
|
}
|
|
}
|
|
|
|
<template>
|
|
<div class="watched-word">
|
|
<DButton
|
|
@action={{this.deleteWord}}
|
|
@icon="xmark"
|
|
class="btn-transparent delete-word-record"
|
|
/>
|
|
|
|
<span class="watched-word__content">{{@word.word}}</span>
|
|
|
|
{{#if (or (eq @actionKey "replace") (eq @actionKey "link"))}}
|
|
→
|
|
<span class="replacement">{{@word.replacement}}</span>
|
|
{{else if (eq @actionKey "tag")}}
|
|
→
|
|
{{#each this.tags as |tag|}}
|
|
<span class="tag">{{tag}}</span>
|
|
{{/each}}
|
|
{{/if}}
|
|
|
|
{{#if @word.case_sensitive}}
|
|
<span class="case-sensitive">
|
|
{{i18n "admin.watched_words.case_sensitive"}}
|
|
</span>
|
|
{{/if}}
|
|
|
|
{{#if @word.html}}
|
|
<span class="html">{{i18n "admin.watched_words.html"}}</span>
|
|
{{/if}}
|
|
</div>
|
|
</template>
|
|
}
|
