A11Y: correctly sets role=dialog and aria-labelledby for d-modals (#11850)

app/assets/javascripts/discourse/app/components/d-modal.js

@@ -1,3 +1,4 @@
+import { computed } from "@ember/object";
 import Component from "@ember/component";
 import I18n from "I18n";
 import afterTransition from "discourse/lib/after-transition";
@@ -12,10 +13,16 @@ export default Component.extend({
     "modalStyle",
     "hasPanels",
   ],
-  attributeBindings: ["data-keyboard", "aria-modal"],
+  attributeBindings: [
+    "data-keyboard",
+    "aria-modal",
+    "role",
+    "ariaLabelledby:aria-labelledby",
+  ],
   dismissable: true,
   title: null,
   subtitle: null,
+  role: "dialog",
 
   init() {
     this._super(...arguments);
@@ -33,6 +40,10 @@ export default Component.extend({
   // Inform screenreaders of the modal
   "aria-modal": "true",
 
+  ariaLabelledby: computed("title", function () {
+    return this.title ? "discourse-modal-title" : null;
+  }),
+
   @on("didInsertElement")
   setUp() {
     $("html").on("keyup.discourse-modal", (e) => {

app/assets/javascripts/discourse/app/templates/components/d-modal.hbs

@@ -8,7 +8,7 @@
 
         {{#if title}}
           <div class="title">
-            <h3>{{title}}</h3>
+            <h3 id="discourse-modal-title">{{title}}</h3>
 
             {{#if subtitle}}
               <p>{{subtitle}}</p>