Slack: Update to work with the recent message list changes.

Tuukka Ojala · jcsteh · commit c11166ed2a0c · 2018-01-29T02:54:29.000+10:00
- Fix new messages not being announced automatically
- There's no need to assign the listitem role anymore
- Slack has made the star button accessible themselves
- Fix headings for day separators
diff --git a/SlackA11yFixes.user.js b/SlackA11yFixes.user.js
@@ -35,12 +35,6 @@ function makeHeading(elem, level) {
 	}
 }
 
-// Make the starred status accessible.
-function setStarred(elem) {
-	elem.setAttribute("aria-pressed",
-		elem.classList.contains("starred") ? "true" : "false");
-}
-
 function message(text, suppressRepeats) {
 	var live = document.getElementById("aria_live_announcer");
 	if (suppressRepeats && live.textContent == text) {
@@ -66,37 +60,28 @@ function onNodeAdded(target) {
 		return;
 	}
 	// Report incoming messages and make them list items.
-	if (target.matches("#msgs_div .message:last-child, #threads_msgs .message:last-child, #convo_container .message:last-child") && !target.classList.contains("unprocessed")) {
+	if (target.matches("#messages_container .c-virtual_list__item:last-child, #threads_msgs .message:last-child, #convo_container .message:last-child") && !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,
 		// but doing this results in double/triple speaking for some reason.
 		// We also don't want the time reported in this case.
-		sender = target.querySelector(".message_sender").textContent;
-		body = target.querySelector(".message_body").textContent;
+		sender = target.querySelector(".c-message__sender").textContent;
+		body = target.querySelector(".c-message__body").textContent;
 		message(sender + " " + body);
-		target.setAttribute("role", "listitem");
 	}
 	var elem;
-	// Make existing messages list items.
-	for (elem of target.querySelectorAll("#msgs_div .message, #threads_msgs .message, #convo_container .message, #search_results_container .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.
 		// Remove the elements from the tree so the text becomes inline.
 		elem.setAttribute("role", "presentation");
 	}
-	// Channel/message star controls.
-	for (elem of target.querySelectorAll(".star")) {
-		elem.setAttribute("aria-label", "star");
-		setStarred(elem);
-	}
 	// 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")) {
+	for (elem of target.querySelectorAll(".c-message_list__day_divider__label__pill, .search_result_header, .thread_header")) {
 		makeHeading(elem, 3);
 	}
 	// Kill some extraneous white space.
@@ -109,10 +94,7 @@ function onClassModified(target) {
 	var classes = target.classList;
 	if (!classes)
 		return;
-	if (classes.contains("star")) {
-		// Starred state changed.
-		setStarred(target);
-	} else if (classes.contains("highlighted")) {
+	if (classes.contains("highlighted")) {
 		// Autocomplete selection.
 		// We use a live region because ARIA autocompletes don't work so well
 		// for a control which selects the first item as you type.
diff --git a/readme.md b/readme.md
@@ -70,9 +70,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 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.
