Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

A11Y: makes search results count readable by screen reader (#12437)

This commit is contained in:
Joffrey JAFFEUX 2021-03-18 18:44:26 +01:00 committed by GitHub
parent 033d6b6437
commit 67e1ae3f7d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/discourse/app/components/text-field.js
View File

@ -15,6 +15,7 @@ export default TextField.extend({
"maxLength", "maxLength",
"dir", "dir",
"aria-label", "aria-label",
"aria-controls",
], ],
init() { init() {

11
app/assets/javascripts/discourse/app/templates/full-page-search.hbs
View File

@ -4,7 +4,14 @@
<div class="search-advanced"> <div class="search-advanced">
{{#unless site.mobileView}} {{#unless site.mobileView}}
<div class="search-bar"> <div class="search-bar">
{{search-text-field value=searchTerm class="full-page-search search no-blur search-query" aria-label=(i18n "search.full_page_title") enter=(action "search") hasAutofocus=hasAutofocus}} {{search-text-field
value=searchTerm
class="full-page-search search no-blur search-query"
aria-label=(i18n "search.full_page_title")
enter=(action "search")
hasAutofocus=hasAutofocus
aria-controls="search-result-count"
}}
{{d-button action=(action "search") icon="search" class="btn-primary search-cta" ariaLabel="search.search_button" disabled=searchButtonDisabled}} {{d-button action=(action "search") icon="search" class="btn-primary search-cta" ariaLabel="search.search_button" disabled=searchButtonDisabled}}
</div> </div>
{{/unless}} {{/unless}}
@ -48,7 +55,7 @@
</div> </div>
<div class="search-info"> <div class="search-info">
<div class="result-count"> <div class="result-count" id="search-result-count" aria-live="polite">
{{html-safe resultCountLabel}} {{html-safe resultCountLabel}}
</div> </div>
<div class="sort-by"> <div class="sort-by">