A11Y: Add more descriptive labels for some dropdowns (#14402)

app/assets/javascripts/discourse/app/components/search-result-entry.js

@@ -4,4 +4,6 @@ export default Component.extend({
   tagName: "div",
   classNames: ["fps-result"],
   classNameBindings: ["bulkSelectEnabled"],
+  attributeBindings: ["role"],
+  role: "listitem",
 });

app/assets/javascripts/discourse/app/templates/components/search-advanced-options.hbs

@@ -27,6 +27,9 @@
             everyTag=true
             unlimitedTagCount=true
             onChange=(action "onChangeSearchTermForTags")
+            options=(hash
+              headerAriaLabel=(i18n "search.advanced.with_tags.aria_label")
+            )
           }}
           {{#if showAllTagsCheckbox}}
             <section class="field">
@@ -124,6 +127,7 @@
           onChange=(action "onChangeSearchTermForStatus")
           options=(hash
             none="user.locale.any"
+            headerAriaLabel=(i18n "search.advanced.statuses.label")
             clearable=true
           )
         }}
@@ -136,13 +140,14 @@
       </label>
       <div class="controls">
         {{user-chooser
-        id="search-posted-by"
+          id="search-posted-by"
-        value=searchedTerms.username
+          value=searchedTerms.username
-        onChange=(action "onChangeSearchTermForUsername")
+          onChange=(action "onChangeSearchTermForUsername")
-        options=(hash
+          options=(hash
-        maximum=1
+            headerAriaLabel=(i18n "search.advanced.posted_by.aria_label")
-        excludeCurrentUser=false
+            maximum=1
-        )
+            excludeCurrentUser=false
+          )
         }}
       </div>
     </div>
@@ -156,6 +161,9 @@
           content=postTimeOptions
           value=searchedTerms.time.when
           onChange=(action "onChangeWhenTime")
+          options=(hash
+            headerAriaLabel=(i18n "search.advanced.post.time.aria_label")
+          )
         }}
         {{date-input
           date=searchedTerms.time.days

app/assets/javascripts/discourse/app/templates/components/search-result-entries.hbs

@@ -1,4 +1,4 @@
-<div class="fps-result-entries">
+<div class="fps-result-entries" role="list">
   {{#each posts as |post|}}
     {{search-result-entry post=post bulkSelectEnabled=bulkSelectEnabled selected=selected highlightQuery=highlightQuery}}
   {{/each}}

app/assets/javascripts/discourse/app/templates/components/search-result-entry.hbs

@@ -10,7 +10,7 @@
       {{track-selected selectedList=selected selectedId=post.topic class="bulk-select"}}
     {{/if}}
 
-    <a href={{post.url}} {{action "logClick" post.topic_id}} class="search-link">
+    <a href={{post.url}} {{action "logClick" post.topic_id}} class="search-link" role="heading">
       {{raw "topic-status" topic=post.topic showPrivateMessageIcon=true}}
       <span class="topic-title">
         {{#if post.useTopicTitleHeadline}}

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

@@ -1,7 +1,7 @@
 {{#d-section pageClass="search" class="search-container"}}
   {{scroll-tracker name="full-page-search" tag=searchTerm class="hidden"}}
 
-  <div class="search-header">
+  <div class="search-header" role="search">
     <h1 class="search-page-heading">
       {{#if hasResults}}
         <div class="result-count" id="search-result-count" aria-live="polite">
@@ -68,7 +68,7 @@
   <div class="search-advanced">
     {{#if hasResults}}
       {{#if usingDefaultSearchType}}
-        <div class={{searchInfoClassNames}}>
+        <div class={{searchInfoClassNames}} role="region" ariaLabel={{i18n "search.sort_or_bulk_actions"}}>
           {{#if canBulkSelect}}
             {{d-button icon="list" class="btn-default bulk-select" title="topics.bulk.toggle" action=(action "toggleBulkSelect")}}
             {{bulk-select-button selected=selected category=category action=(action "search")}}
@@ -89,6 +89,7 @@
               castInteger=true
               onChange=(action (mut sortOrder))
               id="search-sort-by"
+              ariaLabel="Some label"
             }}
           </div>
         </div>
@@ -100,7 +101,7 @@
     {{#if searching}}
       {{loading-spinner size="medium"}}
     {{else}}
-      <div class="search-results">
+      <div class="search-results" role="region">
         {{#load-more selector=".fps-result" action=(action "loadMore")}}
           {{#if usingDefaultSearchType}}
             {{search-result-entries

app/assets/javascripts/select-kit/addon/components/multi-select/multi-select-header.js

@@ -6,10 +6,12 @@ import { reads } from "@ember/object/computed";
 export default SelectKitHeaderComponent.extend({
   tagName: "summary",
   classNames: ["multi-select-header"],
+  attributeBindings: ["ariaLabel:aria-label"],
   layout,
 
   caretUpIcon: reads("selectKit.options.caretUpIcon"),
   caretDownIcon: reads("selectKit.options.caretDownIcon"),
+  ariaLabel: reads("selectKit.options.headerAriaLabel"),
   caretIcon: computed(
     "selectKit.isExpanded",
     "caretUpIcon",

app/assets/javascripts/select-kit/addon/components/select-kit/single-select-header.js

@@ -1,4 +1,5 @@
 import { computed } from "@ember/object";
+import { or } from "@ember/object/computed";
 import SelectKitHeaderComponent from "select-kit/components/select-kit/select-kit-header";
 import UtilsMixin from "select-kit/mixins/utils";
 import layout from "select-kit/templates/components/select-kit/single-select-header";
@@ -8,7 +9,9 @@ export default SelectKitHeaderComponent.extend(UtilsMixin, {
   tagName: "summary",
   layout,
   classNames: ["single-select-header"],
-  attributeBindings: ["name", "name:aria-label"],
+  attributeBindings: ["name", "ariaLabel:aria-label"],
+
+  ariaLabel: or("selectKit.options.headerAriaLabel", "name"),
 
   focusIn(event) {
     event.stopImmediatePropagation();

app/assets/javascripts/select-kit/addon/templates/components/topic-notifications-button.hbs

@@ -8,6 +8,7 @@
         icon=icon
         showFullTitle=showFullTitle
         showCaret=showCaret
+        headerAriaLabel=(i18n "topic.notifications.title")
       )
     }}
     <span class="text">{{html-safe notificationReasonText}}</span>
@@ -21,6 +22,7 @@
       icon=icon
       showFullTitle=showFullTitle
       showCaret=showCaret
+      headerAriaLabel=(i18n "topic.notifications.title")
     )
   }}
 {{/if}}

config/locales/client.en.yml

@@ -2335,6 +2335,7 @@ en:
       select_all: "Select All"
       clear_all: "Clear All"
       too_short: "Your search term is too short."
+      sort_or_bulk_actions: "Sort or bulk select results"
       result_count:
         one: "<span>%{count} result for</span><span class='term'>%{term}</span>"
         other: "<span>%{count}%{plus} results for</span><span class='term'>%{term}</span>"
@@ -2371,6 +2372,7 @@ en:
         title: Advanced filters
         posted_by:
           label: Posted by
+          aria_label: Filter by post author
         in_category:
           label: Categorized
         in_group:
@@ -2379,6 +2381,7 @@ en:
           label: With Badge
         with_tags:
           label: Tagged
+          aria_label: Filter using tags
         filters:
           label: Only return topics/posts...
           title: Matching in title only
@@ -2413,6 +2416,7 @@ en:
             placeholder: maximum
           time:
             label: Posted
+            aria_label: Filter by posted date
             before: before
             after: after
         views: