Add initial work on Trello Accessibility Fixes.

So far, it does the following:

- Makes lists and cards accessible as lists and list items, respectively.
- Focuses the active card when moving between lists and cards with the arrow keys.
 If you are using a screen reader, you will need to ensure that the arrow keys are passed to the application to make use of this.
 For NVDA, you can achieve this by switching to focus mode to move through cards.
- Labels badges in cards.

Author: jcsteh

TrelloA11yFixes.user.js

@@ -0,0 +1,72 @@
+// ==UserScript==
+// @name           Trello Accessibility Fixes
+// @namespace      http://axSgrease.nvaccess.org/
+// @description    Improves the accessibility of Trello.
+// @author         James Teh <jamie@nvaccess.org>
+// @copyright 2017 NV Access Limited
+// @license GNU General Public License version 2.0
+// @version        2017.1
+// @grant GM_log
+// @include https://trello.com/b/*
+// ==/UserScript==
+
+// Used when we need to generate ids for ARIA.
+var idCounter = 0;
+
+function onNodeAdded(target) {
+	if (target.classList.contains("badge")) {
+		// Label badges.
+		var label = target.getAttribute("title");
+		// Include the badge count (if any) in the label.
+		label += target.textContent;
+		target.setAttribute("aria-label", label);
+		return;
+	}
+	for (var list of target.querySelectorAll(".list")) {
+		list.setAttribute("role", "list");
+		var header = list.querySelector(".list-header-name");
+		if (header) {
+			// Label the list with its header.
+			var id = "axsg-lh" + idCounter++;
+			header.setAttribute("id", id);
+			list.setAttribute("aria-labelledby", id);
+		}
+	}
+	for (var card of target.querySelectorAll(".list-card")) {
+		// Make this a focusable list item.
+		card.setAttribute("tabindex", "-1");
+		card.setAttribute("role", "listitem");
+	}
+}
+
+function onClassModified(target) {
+	var classes = target.classList;
+	if (!classes)
+		return;
+	if (classes.contains("active-card")) {
+		// When the active card changes, focus it.
+		target.focus();
+	}
+}
+
+var observer = new MutationObserver(function(mutations) {
+	for (var mutation of mutations) {
+		try {
+			if (mutation.type === "childList") {
+				for (var node of mutation.addedNodes) {
+					if (node.nodeType != Node.ELEMENT_NODE)
+						continue;
+					onNodeAdded(node);
+				}
+			} else if (mutation.type === "attributes") {
+				if (mutation.attributeName == "class")
+					onClassModified(mutation.target);
+			}
+		} catch (e) {
+			// Catch exceptions for individual mutations so other mutations are still handled.
+			GM_log("Exception while handling mutation: " + e);
+		}
+	}
+});
+observer.observe(document, {childList: true, attributes: true,
+	subtree: true, attributeFilter: ["class"]});

readme.md

@@ -84,3 +84,15 @@ This script improves the accessibility of the [Telegram instant messaging](https
 It so far does the following:
 
 - Marks the chat history as a live region so new messages are announced automatically.
+
+### Trello Accessibility Fixes
+[Download Trello Accessibility Fixes](https://github.com/nvaccess/axSGrease/raw/master/TrelloA11yFixes.user.js)
+
+This script improves the accessibility of [Trello](https://trello.com/).
+It does the following:
+
+- Makes lists and cards accessible as lists and list items, respectively.
+- Focuses the active card when moving between lists and cards with the arrow keys.
+ If you are using a screen reader, you will need to ensure that the arrow keys are passed to the application to make use of this.
+ For NVDA, you can achieve this by switching to focus mode to move through cards.
+- Labels badges in cards.