ARIA - add aria-label on topic input and post textarea (#10057)

Add reply form role with label as create/reply, and aria-labels on text inputs
This commit is contained in:
Jeff Wong 2020-06-17 05:55:19 -10:00 committed by GitHub
parent 76b05ef8ad
commit 81a3129ffb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 11 additions and 3 deletions

View File

@ -0,0 +1,5 @@
import TextArea from "@ember/component/text-area";
export default TextArea.extend({
attributeBindings: ["aria-label"]
});

View File

@ -12,7 +12,8 @@ export default TextField.extend({
"autocapitalize", "autocapitalize",
"autofocus", "autofocus",
"maxLength", "maxLength",
"dir" "dir",
"aria-label"
], ],
init() { init() {

View File

@ -3,6 +3,7 @@
id="reply-title" id="reply-title"
maxLength=titleMaxLength maxLength=titleMaxLength
placeholderKey=composer.titlePlaceholder placeholderKey=composer.titlePlaceholder
aria-label=(I18n composer.titlePlaceholder)
disabled=disabled disabled=disabled
autocomplete="discourse"}} autocomplete="discourse"}}

View File

@ -33,12 +33,13 @@
</div> </div>
{{conditional-loading-spinner condition=loading}} {{conditional-loading-spinner condition=loading}}
{{textarea {{d-textarea
autocomplete="discourse" autocomplete="discourse"
tabindex=tabindex tabindex=tabindex
value=value value=value
class="d-editor-input" class="d-editor-input"
placeholder=placeholderTranslated placeholder=placeholderTranslated
aria-label=placeholderTranslated
disabled=disabled disabled=disabled
input=change}} input=change}}
{{popup-input-tip validation=validation}} {{popup-input-tip validation=validation}}

View File

@ -10,7 +10,7 @@
messageCount=messageCount messageCount=messageCount
addLinkLookup=(action "addLinkLookup")}} addLinkLookup=(action "addLinkLookup")}}
{{#if model.viewOpenOrFullscreen}} {{#if model.viewOpenOrFullscreen}}
<div class="reply-area {{if canEditTags "with-tags"}}"> <div role="form" aria-label={{I18n saveLabel}} class="reply-area {{if canEditTags "with-tags"}}">
<div class="composer-fields"> <div class="composer-fields">
{{plugin-outlet name="composer-open" args=(hash model=model)}} {{plugin-outlet name="composer-open" args=(hash model=model)}}
<div class="reply-to"> <div class="reply-to">