Slack: Make current direct message title accessible as a heading.

jcsteh · jcsteh · commit c4a6e55efe04 · 2017-08-23T09:29:25.000+10:00
diff --git a/SlackA11yFixes.user.js b/SlackA11yFixes.user.js
@@ -10,7 +10,12 @@
 // @include https://*.slack.com/*
 // ==/UserScript==
 
-function initial() {
+function makeHeading(elem, level) {
+	elem.setAttribute("role", "heading");
+	elem.setAttribute("aria-level", level);
+}
+
+	function initial() {
 	var elem;
 	// In DOM order, the footer is earlier than the messages.
 	// Put it below for a11y (as it appears visually).
@@ -86,15 +91,13 @@ function onNodeAdded(target) {
 		elem.setAttribute("aria-label", "star");
 		setStarred(elem);
 	}
-	// Make the current channel title a level 2 heading.
-	if (elem = target.querySelector("#channel_title")) {
-		elem.setAttribute("role", "heading");
-		elem.setAttribute("aria-level", "2");
+	// Make the current channel/direct message title a level 2 heading.
+	for (elem of target.querySelectorAll("#channel_title, #im_title")) {
+		makeHeading(elem, 2);
 	}
 	// Make level3 headings for day separators in message history, individual search results, individual threads in All Threads.
 	for (elem of target.querySelectorAll(".day_divider, .search_result_header, .thread_header")) {
-		elem.setAttribute("role", "heading");
-		elem.setAttribute("aria-level", "3");
+		makeHeading(elem, 3);
 	}
 	// Kill some extraneous white space.
 	for (elem of target.querySelectorAll(".message_gutter, .message_content > i.copy_only br")) {
diff --git a/readme.md b/readme.md
@@ -76,7 +76,7 @@ It does the following:
 - Makes options for each message (Start a thread, Share message, etc.) accessible.
  To access these, move the mouse to the text of a message.
  They then appear above the author's name as buttons.
-- Makes the current channel title, day separators in the message history, the headers of individual search results and the headers of individual threads in All Threads accessible as headings.
+- Makes the current channel/direct message title, day separators in the message history, the headers of individual search results and the headers of individual threads in All Threads accessible as headings.
 - Reports incoming messages automatically (using a live region).
 - Hides an editable area which isn't shown visually.
 - Reports suggestions in various autocompletes such as the Quick Switcher and direct messages menu.
