FEATURE: screenreader landmarks for main, suggested topics

In order to avoid a boatload of attributeBindings, I moved the root
element of the suggested-topics component into the template. Also,
autoformat their hbs files.

Testing info: https://www.scottohara.me/blog/2018/03/03/landmarks.html#using-screen-readers-to-navigate-landmarks

Additionally, flag modals with aria-modal=true to avoid the screenreader
accidentally escaping the modal. There's no need to ever toggle the
attribute to false, because we display:none the modal root when it's
closed.

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

@@ -10,7 +10,7 @@ export default Component.extend({
     "modalStyle",
     "hasPanels"
   ],
-  attributeBindings: ["data-keyboard"],
+  attributeBindings: ["data-keyboard", "aria-modal"],
   dismissable: true,
   title: null,
   subtitle: null,
@@ -28,6 +28,8 @@ export default Component.extend({
 
   // We handle ESC ourselves
   "data-keyboard": "false",
+  // Inform screenreaders of the modal
+  "aria-modal": "true",
 
   @on("didInsertElement")
   setUp() {

app/assets/javascripts/discourse/components/related-messages.js

@@ -2,8 +2,7 @@ import discourseComputed from "discourse-common/utils/decorators";
 import Component from "@ember/component";
 
 export default Component.extend({
-  elementId: "related-messages",
-  classNames: ["suggested-topics"],
+  tagName: "",
 
   @discourseComputed("topic")
   targetUser(topic) {

app/assets/javascripts/discourse/components/suggested-topics.js

@@ -5,8 +5,7 @@ import { categoryBadgeHTML } from "discourse/helpers/category-link";
 import Site from "discourse/models/site";
 
 export default Component.extend({
-  elementId: "suggested-topics",
-  classNames: ["suggested-topics"],
+  tagName: "",
 
   suggestedTitleLabel: computed("topic", function() {
     const href = this.currentUser && this.currentUser.pmPath(this.topic);

app/assets/javascripts/discourse/templates/application.hbs

@@ -9,7 +9,7 @@
 
 {{plugin-outlet name="below-site-header" args=(hash currentPath=router._router.currentPath)}}
 
-<div id="main-outlet" class="wrap">
+<div id="main-outlet" class="wrap" role="main">
   {{plugin-outlet name="above-main-container"}}
   <div class="container">
     {{#if showTop}}

app/assets/javascripts/discourse/templates/components/related-messages.hbs

@@ -1,14 +1,25 @@
-<h3 class="suggested-topics-title">
-  {{i18n "related_messages.title"}}
-</h3>
+<div id="related-messages" class="suggested-topics" role="complementary" aria-labelledby="related-messages-title">
+  <h3 class="suggested-topics-title" id="related-messages-title">
+    {{i18n "related_messages.title"}}
+  </h3>
 
-<div class="topics">
-  {{basic-topic-list
-    hideCategory="true"
-    showPosters="true"
-    topics=topic.relatedMessages}}
+  <div class="topics">
+    {{basic-topic-list
+      hideCategory="true"
+      showPosters="true"
+      topics=topic.relatedMessages
+    }}
+  </div>
+
+  {{#if targetUser}}
+    <h3 class="see-all-pms-message">
+      {{html-safe
+        (i18n
+          "related_messages.see_all"
+          path=searchLink
+          username=targetUser.username
+        )
+      }}
+    </h3>
+  {{/if}}
 </div>
-
-{{#if targetUser}}
-  <h3 class="see-all-pms-message">{{html-safe (i18n "related_messages.see_all" path=searchLink username=targetUser.username)}}</h3>
-{{/if}}

app/assets/javascripts/discourse/templates/components/suggested-topics.hbs

@@ -1,16 +1,22 @@
-<h3 class="suggested-topics-title">
-  {{i18n suggestedTitleLabel}}
-</h3>
+<div id="suggested-topics" class="suggested-topics"
+    role="complementary" aria-labelledby="suggested-topics-title">
+  <h3 id="suggested-topics-title" class="suggested-topics-title">
+    {{i18n suggestedTitleLabel}}
+  </h3>
 
-<div class="topics">
-  {{#if topic.isPrivateMessage}}
-    {{basic-topic-list
-      hideCategory="true"
-      showPosters="true"
-      topics=topic.suggestedTopics}}
-  {{else}}
-    {{basic-topic-list topics=topic.suggestedTopics}}
-  {{/if}}
+  <div class="topics">
+    {{#if topic.isPrivateMessage}}
+      {{basic-topic-list
+        hideCategory="true"
+        showPosters="true"
+        topics=topic.suggestedTopics
+      }}
+    {{else}}
+      {{basic-topic-list topics=topic.suggestedTopics}}
+    {{/if}}
+  </div>
+
+  <h3 class="suggested-topics-message">
+    {{html-safe browseMoreMessage}}
+  </h3>
 </div>
-
-<h3 class="suggested-topics-message">{{html-safe browseMoreMessage}}</h3>

app/views/layouts/application.html.erb

@@ -67,7 +67,7 @@
     <%= render_google_tag_manager_body_code %>
     <noscript data-path="<%= request.env['PATH_INFO'] %>">
       <%= render partial: 'header' %>
-      <div id="main-outlet" class="wrap">
+      <div id="main-outlet" class="wrap" role="main">
         <!-- preload-content: -->
         <%= yield %>
         <!-- :preload-content -->