Slack: Make messages accessible as list items. Enables screen reader users to navigate between them using list item quick nav.

Author: jcsteh

SlackA11yFixes.user.js

@@ -44,7 +44,7 @@ function onNodeAdded(target) {
 		target.setAttribute("role", "presentation");
 		return;
 	}
-	// Report incoming messages.
+	// Report incoming messages and make them list items.
 	if (target.matches("#msgs_div .message") && !target.classList.contains("unprocessed")) {
 		// Just shove text into a live region that's already used for stuff like this.
 		// It'd better/less hacky if the messages area itself were a live region,
@@ -53,8 +53,12 @@ function onNodeAdded(target) {
 		sender = target.querySelector(".message_sender").textContent;
 		body = target.querySelector(".message_body").textContent;
 		message(sender + " " + body);
+		target.setAttribute("role", "listitem");
 	}
 	var elem;
+	// Make existing messages lit items.
+	for (elem of target.querySelectorAll("#msgs_div .message"))
+		elem.setAttribute("role", "listitem");
 	for (elem of target.querySelectorAll(".copy_only")) {
 		// This includes text such as the brackets around message times.
 		// These chunks of text are block elements, even though they're on the same line.

readme.md

@@ -65,6 +65,7 @@ This script improves the accessibility of [Slack](https://www.slack.com/).
 It does the following:
 
 - Reorders some elements which appear in the wrong place for accessibility. For example, using this script, the input area appears near the bottom of the page as it does visually instead of at the top.
+- Makes messages accessible as list items.
 - Makes message timestamps appear on a single line instead of crossing several lines.
 - Makes star controls (and their statuses) accessible.
 - Makes the close link for the about channel pane accessible.