From a5f2099884981fbd3e01f281dc489dea8aa342ce Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 16 Nov 2022 14:02:39 -0500
Subject: [PATCH] A11Y: add live area for search menu, labels (#19061)

---
 .../discourse/app/widgets/search-menu-results.js   | 14 +++++++++++++-
 .../discourse/app/widgets/search-menu.js           |  6 ++++++
 config/locales/client.en.yml                       |  1 +
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/discourse/app/widgets/search-menu-results.js b/app/assets/javascripts/discourse/app/widgets/search-menu-results.js
index 04c2e681739..3410030d5f3 100644
--- a/app/assets/javascripts/discourse/app/widgets/search-menu-results.js
+++ b/app/assets/javascripts/discourse/app/widgets/search-menu-results.js
@@ -90,6 +90,12 @@ function createSearchResult({ type, linkField, builder }) {
   return createWidget(`search-result-${type}`, {
     tagName: "ul.list",
 
+    buildAttributes() {
+      return {
+        "aria-label": `${type} ${I18n.t("search.results")}`,
+      };
+    },
+
     html(attrs) {
       return attrs.results.map((r) => {
         let searchResultId;
@@ -640,7 +646,13 @@ createWidget("search-menu-assistant-item", {
     const attributes = {};
     attributes.href = "#";
 
-    let content = [iconNode(attrs.icon || "search")];
+    let content = [
+      h(
+        "span",
+        { attributes: { "aria-label": I18n.t("search.title") } },
+        iconNode(attrs.icon || "search")
+      ),
+    ];
 
     if (prefix) {
       content.push(h("span.search-item-prefix", `${prefix} `));
diff --git a/app/assets/javascripts/discourse/app/widgets/search-menu.js b/app/assets/javascripts/discourse/app/widgets/search-menu.js
index 56012ab3178..0ce7af5bfcb 100644
--- a/app/assets/javascripts/discourse/app/widgets/search-menu.js
+++ b/app/assets/javascripts/discourse/app/widgets/search-menu.js
@@ -193,6 +193,12 @@ export default createWidget("search-menu", {
   services: ["search"],
   searchData,
 
+  buildAttributes() {
+    return {
+      "aria-live": "polite",
+    };
+  },
+
   buildKey: () => "search-menu",
 
   defaultState(attrs) {
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 40d7e4d6ed4..d7c8f50a941 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -2500,6 +2500,7 @@ en:
         other: "<span>%{count}%{plus} results for</span><span class='term'>%{term}</span>"
       title: "Search"
       full_page_title: "Search"
+      results: "results"
       no_results: "No results found."
       no_more_results: "No more results found."
       post_format: "#%{post_number} by %{username}"