Fix: Prevent label clicks and key presses from changing [aria-disabled] inputs (fixes #623) (#624)

Author: oliverfoster

js/a11y.js

@@ -2,6 +2,7 @@ import Adapt from 'core/js/adapt';
 import offlineStorage from 'core/js/offlineStorage';
 import device from 'core/js/device';
 import location from 'core/js/location';
+import AriaDisabled from './a11y/ariaDisabled';
 import BrowserConfig from './a11y/browserConfig';
 import BrowserFocus from 'core/js/a11y/browserFocus';
 import FocusOptions from 'core/js/a11y/focusOptions';
@@ -80,6 +81,7 @@ class A11y extends Backbone.Controller {
     this._htmlCharRegex = /&.*;/g;
     /** @type {Object} */
     this.config = null;
+    this._ariaDisabled = new AriaDisabled({ a11y: this });
     this._browserConfig = new BrowserConfig({ a11y: this });
     this._browserFocus = new BrowserFocus({ a11y: this });
     this._keyboardFocusOutline = new KeyboardFocusOutline({ a11y: this });

js/a11y/ariaDisabled.js

@@ -0,0 +1,61 @@
+import Adapt from 'core/js/adapt';
+
+/**
+ * Browser aria-disabled element interaction prevention
+ * @class
+ */
+export default class BrowserFocus extends Backbone.Controller {
+
+  initialize({ a11y }) {
+    this.a11y = a11y;
+    this._onKeyDown = this._onKeyDown.bind(this);
+    this._onClick = this._onClick.bind(this);
+    this.$body = $('body');
+    this.listenTo(Adapt, {
+      'accessibility:ready': this._attachEventListeners
+    });
+  }
+
+  _attachEventListeners() {
+    // 'Capture' events
+    this.$body[0].addEventListener('keydown', this._onKeyDown, true);
+    this.$body[0].addEventListener('click', this._onClick, true);
+  }
+
+  isAriaDisabled($element) {
+    // search element and parents for aria-disabled - see https://github.com/adaptlearning/adapt_framework/issues/3097
+    // search closest 'for' element for aria-disabled - see https://github.com/adaptlearning/adapt-contrib-core/issues/623
+    const $closestFor = $element.closest('[for]');
+    const isAriaDisabled = $element.closest('[aria-disabled=true]').length === 1 ||
+      ($closestFor.length && $(`#${$closestFor.attr('for')}`).is('[aria-disabled=true]'));
+    return isAriaDisabled;
+  }
+
+  /**
+   * Stop click handling on aria-disabled elements.
+   *
+   * @param {JQuery.Event} event
+   */
+  _onClick(event) {
+    if (!event.isTrusted) return;
+    const $element = $(event.target);
+    if (!this.isAriaDisabled($element)) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+
+  /**
+   * Stop enter and space handling on aria-disabled elements.
+   *
+   * @param {JQuery.Event} event
+   */
+  _onKeyDown(event) {
+    if (!event.isTrusted) return;
+    if (!['Enter', ' '].includes(event.key)) return;
+    const $element = $(event.target);
+    if (!this.isAriaDisabled($element)) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+
+}

js/a11y/browserFocus.js

@@ -61,23 +61,16 @@ export default class BrowserFocus extends Backbone.Controller {
   /**
    * Force focus when clicked on a tabbable element,
    * making sure `document.activeElement` is updated.
-   * Stop event handling on aria-disabled elements.
    *
    * @param {JQuery.Event} event
    */
   _onClick(event) {
     if (!event.isTrusted) return;
-    const $element = $(event.target);
-    // search element and parents for aria-disabled - see https://github.com/adaptlearning/adapt_framework/issues/3097
-    const isAriaDisabled = $element.closest('[aria-disabled=true]').length === 1;
-    if (isAriaDisabled) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-    }
     const config = this.a11y.config;
     if (!config._isEnabled || !config._options._isFocusOnClickEnabled) {
       return;
     }
+    const $element = $(event.target);
     const $stack = $([...$element.toArray(), ...$element.parents().toArray()]);
     const $focusable = $stack.filter(config._options._tabbableElements);
     if (!$focusable.length) {