From 2323f09eb0d6efdaa700748c4ed6b15d1fa94388 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 14 Feb 2024 11:09:54 -0500
Subject: [PATCH] A11Y: change composer role to dialog, improve aria-labels
 (#25666)

---
 .../app/components/composer-container.hbs     |  4 +-
 .../discourse/app/services/composer.js        | 39 +++++++++++++++++++
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/composer-container.hbs b/app/assets/javascripts/discourse/app/components/composer-container.hbs
index 6c84efd5cb1..97c3a2a2504 100644
--- a/app/assets/javascripts/discourse/app/components/composer-container.hbs
+++ b/app/assets/javascripts/discourse/app/components/composer-container.hbs
@@ -22,8 +22,8 @@
 
     {{#if this.composer.model.viewOpenOrFullscreen}}
       <div
-        role="form"
-        aria-label={{i18n this.composer.saveLabel}}
+        role="dialog"
+        aria-label={{this.composer.ariaLabel}}
         class="reply-area
           {{if this.composer.canEditTags 'with-tags' 'without-tags'}}
           {{if
diff --git a/app/assets/javascripts/discourse/app/services/composer.js b/app/assets/javascripts/discourse/app/services/composer.js
index 534a587dd54..8374d280abf 100644
--- a/app/assets/javascripts/discourse/app/services/composer.js
+++ b/app/assets/javascripts/discourse/app/services/composer.js
@@ -483,6 +483,45 @@ export default class ComposerService extends Service {
     return uploadIcon(this.currentUser.staff, this.siteSettings);
   }
 
+  @discourseComputed(
+    "model.action",
+    "isWhispering",
+    "model.privateMessage",
+    "model.post.username"
+  )
+  ariaLabel(modelAction, isWhispering, privateMessage, postUsername) {
+    switch (modelAction) {
+      case "createSharedDraft":
+        return I18n.t("composer.create_shared_draft");
+      case "editSharedDraft":
+        return I18n.t("composer.edit_shared_draft");
+      case "createTopic":
+        return I18n.t("composer.composer_actions.create_topic.label");
+      case "privateMessage":
+        return I18n.t("user.new_private_message");
+      case "edit":
+        return I18n.t("composer.composer_actions.edit");
+      case "reply":
+        if (isWhispering) {
+          return `${I18n.t("composer.create_whisper")} ${this.site.get(
+            "whispers_allowed_groups_names"
+          )}`;
+        }
+        if (privateMessage) {
+          return I18n.t("composer.create_pm");
+        }
+        if (postUsername) {
+          return I18n.t("composer.composer_actions.reply_to_post.label", {
+            postUsername,
+          });
+        } else {
+          return I18n.t("composer.composer_actions.reply_to_topic.label");
+        }
+      default:
+        return I18n.t("keyboard_shortcuts_help.composing.title");
+    }
+  }
+
   // Use this to open the composer when you are not sure whether it is
   // already open and whether it already has a draft being worked on. Supports
   // options to append text once the composer is open if required.