Slack: Report suggestions in various autocompletes such as the Quick Switcher and direct messages menu.

jcsteh · jcsteh · commit efacf9ad66e0 · 2017-08-23T09:24:32.000+10:00
This is currently done with a live region, since ARIA autocompletes don't work so well for autocompletes where the first item is selected as you type.
diff --git a/SlackA11yFixes.user.js b/SlackA11yFixes.user.js
@@ -36,9 +36,16 @@ function setStarred(elem) {
 		elem.classList.contains("starred") ? "true" : "false");
 }
 
-function message(text) {
+function message(text, suppressRepeats) {
 	var live = document.getElementById("aria_live_announcer");
-	live.textContent = text;
+	if (suppressRepeats && live.textContent == text) {
+		return;
+	}
+	// Use a new div so this is treated as an addition, not a text change.
+	// Otherwise, the browser will attempt to calculate a diff between old and new text,
+	// which could result in partial reporting or nothing depending on the previous text.
+	live.innerHTML = "<div></div>";
+	live.firstChild.textContent = text;
 }
 
 function onNodeAdded(target) {
@@ -102,6 +109,13 @@ function onClassModified(target) {
 	if (classes.contains("star")) {
 		// Starred state changed.
 		setStarred(target);
+	} else 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.
+		// This gets fired every time you type, even if the item doesn't change.
+		// Therefore, suppress repeated reports.
+		message(target.textContent, true);
 	}
 }
 
diff --git a/readme.md b/readme.md
@@ -79,6 +79,7 @@ It does the following:
 - 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.
 - 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.
 
 ### Telegram accessibility fixes
 [Download Telegram Accessibility Fixes](https://github.com/nvaccess/axSGrease/raw/master/TelegramA11yFixes.user.js)
