Framework: Add a whenAttrChangedOnAncestor option to prevent a tweak from being applied when an attribute changes on an ancestor.

jcsteh · jcsteh · commit 1a37f2b0ef98 · 2022-02-24T13:38:21.000+10:00
diff --git a/framework/axSGreaseSkeleton.js b/framework/axSGreaseSkeleton.js
@@ -3,7 +3,7 @@
 // @namespace      http://axSgrease.nvaccess.org/
 // @description    Improves the accessibility of some site.
 // @author         James Teh <jteh@mozilla.com>
-// @copyright 2019 Mozilla Corporation, Derek Riemer
+// @copyright 2019-2022 Mozilla Corporation, Derek Riemer
 // @license Mozilla Public License version 2.0
 // @version        2019.1
 // @include https://some.site/*
@@ -83,13 +83,15 @@ function applyTweak(el, tweak) {
 	}
 }
 
-function applyTweaks(root, tweaks, checkRoot) {
+function applyTweaks(root, tweaks, checkRoot, forAttrChange=false) {
 	for (let tweak of tweaks) {
-		for (let el of root.querySelectorAll(tweak.selector)) {
-			try {
-				applyTweak(el, tweak);
-			} catch (e) {
-				console.log("Exception while applying tweak for '" + tweak.selector + "': " + e);
+		if (!forAttrChange || tweak.whenAttrChangedOnAncestor !== false) {
+			for (let el of root.querySelectorAll(tweak.selector)) {
+				try {
+					applyTweak(el, tweak);
+				} catch (e) {
+					console.log("Exception while applying tweak for '" + tweak.selector + "': " + e);
+				}
 			}
 		}
 		if (checkRoot && root.matches(tweak.selector)) {
@@ -113,7 +115,7 @@ let observer = new MutationObserver(function(mutations) {
 					applyTweaks(node, DYNAMIC_TWEAKS, true);
 				}
 			} else if (mutation.type === "attributes") {
-				applyTweaks(mutation.target, DYNAMIC_TWEAKS, true);
+				applyTweaks(mutation.target, DYNAMIC_TWEAKS, true, true);
 			}
 		} catch (e) {
 			// Catch exceptions for individual mutations so other mutations are still handled.
diff --git a/framework/readme.md b/framework/readme.md
@@ -26,6 +26,10 @@ if `DYNAMIC_TWEAK_ATTRIBS` is empty, no attributes will be observed.
 In the `LOAD_TWEAKS` and `DYNAMIC_TWEAKS` arrays, each tweak is an object with these keys:
 
 - `selector`: A CSS selector for the element(s) you want to tweak.
+- whenAttrChangedOnAncestor: Whether to apply this tweak when an attribute change occurs on an ancestor.
+    By default, the tweak will apply for attribute changes on both the node itself, as well as for an attribute change on any ancestor.
+    This can be problematic if, for example, you're using the style attribute to make a decision about focus, but the style changes on an ancestor.
+    In that case, you can set this to false.
 - `tweak`: Either:
     1. A function which is passed a single element to tweak.
         For example:
