A11Y: Fix several minor issues (#14436)

app/assets/javascripts/discourse/app/helpers/topic-link.js

@@ -17,7 +17,7 @@ registerUnbound("topic-link", (topic, args) => {
   return htmlSafe(
     `<a href='${url}'
         role='heading'
-        level='2'
+        aria-level='2'
         class='${classes.join(" ")}'
         data-topic-id='${topic.id}'>${title}</a>`
   );

app/assets/javascripts/discourse/app/raw-views/topic-list-header-column.js

@@ -55,7 +55,7 @@ export default EmberObject.extend({
     if (this.isSorting) {
       return this.parent.ascending ? "ascending" : "descending";
     } else {
-      return "none";
+      return false;
     }
   },
 });

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" role="heading">
+    <a href={{post.url}} {{action "logClick" post.topic_id}} class="search-link" role="heading" aria-level="2">
       {{raw "topic-status" topic=post.topic showPrivateMessageIcon=true}}
       <span class="topic-title">
         {{#if post.useTopicTitleHeadline}}

app/assets/javascripts/discourse/app/widgets/header-contents.js

@@ -8,6 +8,6 @@ createWidget("header-contents", {
     {{#if attrs.topic}}
       {{header-topic-info attrs=attrs}}
     {{/if}}
-    <div class="panel clearfix">{{yield}}</div>
+    <div class="panel clearfix" role="navigation">{{yield}}</div>
   `,
 });

app/assets/javascripts/discourse/app/widgets/header.js

@@ -213,10 +213,6 @@ createWidget(
 createWidget("header-icons", {
   tagName: "ul.icons.d-header-icons",
 
-  buildAttributes() {
-    return { role: "navigation" };
-  },
-
   html(attrs) {
     if (this.siteSettings.login_required && !this.currentUser) {
       return [];

app/assets/javascripts/select-kit/addon/components/period-chooser.js

@@ -1,5 +1,6 @@
 import { oneWay, readOnly } from "@ember/object/computed";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import I18n from "I18n";
 
 export default DropdownSelectBoxComponent.extend({
   classNames: ["period-chooser"],
@@ -20,6 +21,7 @@ export default DropdownSelectBoxComponent.extend({
     fullDay: "fullDay",
     customStyle: true,
     headerComponent: "period-chooser/period-chooser-header",
+    headerAriaLabel: I18n.t("period_chooser.aria_label"),
   },
 
   actions: {

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

@@ -9,7 +9,6 @@ export default Component.extend(UtilsMixin, {
   attributeBindings: [
     "role",
     "tabindex",
-    "ariaLevel:aria-level",
     "selectedValue:data-value",
     "selectedNames:data-name",
     "buttonTitle:title",
@@ -20,8 +19,6 @@ export default Component.extend(UtilsMixin, {
 
   role: "listbox",
 
-  ariaLevel: 1,
-
   tabindex: 0,
 
   selectedValue: computed("value", function () {

app/assets/javascripts/select-kit/addon/templates/components/period-chooser/period-chooser-header.hbs

@@ -1,4 +1,4 @@
-<h2 class="selected-name" title={{title}}>
+<h2 class="selected-name" title={{title}} role="option">
   {{period-title value
     showDateRange=true
     fullDay=selectKit.options.fullDay

app/assets/javascripts/select-kit/addon/templates/components/selected-name.hbs

@@ -1,5 +1,5 @@
 {{#if selectKit.options.showFullTitle}}
-  <div lang={{lang}} title={{title}} data-value={{value}} data-name={{name}} class="select-kit-selected-name selected-name choice">
+  <div lang={{lang}} title={{title}} data-value={{value}} data-name={{name}} role="option" class="select-kit-selected-name selected-name choice">
     {{#if item.icon}}
       {{d-icon item.icon}}
     {{/if}}
@@ -20,7 +20,7 @@
   </div>
 {{else}}
   {{#if item.icon}}
-    <div role="textbox" lang={{lang}} class="select-kit-selected-name selected-name choice">
+    <div role="option" lang={{lang}} class="select-kit-selected-name selected-name choice">
       {{d-icon item.icon}}
     </div>
   {{/if}}

config/locales/client.en.yml

@@ -267,6 +267,8 @@ en:
     character_count:
       one: "%{count} character"
       other: "%{count} characters"
+    period_chooser:
+      aria_label: "Filter by period"
 
     related_messages:
       title: "Related Messages"