Trello: Make activity item headers accessible as headings.

Author: jcsteh

TrelloA11yFixes.user.js

@@ -13,6 +13,11 @@
 // Used when we need to generate ids for ARIA.
 var idCounter = 0;
 
+function makeHeading(elem, level) {
+	elem.setAttribute("role", "heading");
+	elem.setAttribute("aria-level", level);
+}
+
 function tweakCard(card) {
 	// Make this a focusable list item.
 	card.setAttribute("tabindex", "-1");
@@ -48,13 +53,17 @@ function onNodeAdded(target) {
 			header.setAttribute("id", id);
 			list.setAttribute("aria-labelledby", id);
 			// Make the header's container into a heading.
-			header.parentNode.setAttribute("role", "heading");
-			header.parentNode.setAttribute("aria-level", "2");
+			makeHeading(header, 2);
 		}
 	}
 	for (var card of target.querySelectorAll(".list-card")) {
 		tweakCard(card);
 	}
+	for (var activityCreator of target.querySelectorAll(".phenom-creator")) {
+		// Make the creator of an activity item into a heading
+		// to facilitate quick jumping between activity items.
+		makeHeading(activityCreator, 4);
+	}
 }
 
 function onClassModified(target) {

readme.md

@@ -95,6 +95,6 @@ It does the following:
  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.
-- Makes list headers accessible as headings.
+- Makes list headers and activity item headers accessible as headings.
 - Prevents loss of position for screen reader users when pressing the control key.
 - Adds a shift+m keyboard shortcut to quickly move a card.