@instructure/ui-a11y-utils 11.7.3-snapshot-7 → 11.7.3-snapshot-26

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
+## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
 
-**Note:** Version bump only for package @instructure/ui-a11y-utils
+
+### Bug Fixes
+
+* **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
 
 
 

package/es/FocusRegion.js

@@ -41,70 +41,19 @@ import { KeyboardFocusRegion } from "./KeyboardFocusRegion.js";
  * @module FocusRegion
  */
 class FocusRegion {
+  _contextElement = null;
+  _options;
+  _screenReaderFocusRegion;
+  _keyboardFocusRegion;
+  _id;
+  _mouseDownListener;
+  _clickListener;
+  _mouseUpListener;
+  _keyUpListener;
+  _active = false;
+  _documentClickTarget = null;
+  _contextContainsTarget = false;
   constructor(element, options) {
-    this._contextElement = null;
-    this._options = void 0;
-    this._screenReaderFocusRegion = void 0;
-    this._keyboardFocusRegion = void 0;
-    this._id = void 0;
-    this._mouseDownListener = void 0;
-    this._clickListener = void 0;
-    this._mouseUpListener = void 0;
-    this._keyUpListener = void 0;
-    this._active = false;
-    this._documentClickTarget = null;
-    this._contextContainsTarget = false;
-    this.handleDismiss = (event, documentClick) => {
-      var _this$_options$onDism, _this$_options;
-      (_this$_options$onDism = (_this$_options = this._options).onDismiss) === null || _this$_options$onDism === void 0 ? void 0 : _this$_options$onDism.call(_this$_options, event, documentClick);
-    };
-    this.captureDocumentMousedown = event => {
-      this._documentClickTarget = event.target;
-      this._contextContainsTarget = contains(this._contextElement, this._documentClickTarget);
-      // Preemptively remove aria-hidden before focus moves to the clicked element
-      // outside the region, preventing the "aria-hidden on focused ancestor" warning.
-      if (!this._contextContainsTarget && this._options.shouldCloseOnDocumentClick) {
-        this._screenReaderFocusRegion.deactivate();
-      }
-    };
-    this.handleDocumentClick = event => {
-      // we used event.pointerType === 'mouse' here, but it is not supported in Safari
-      // https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType
-      // TODO: Check this in the future, because the linked Webkit bug is marked as fixed in 2025-09
-      if (this._options.shouldCloseOnDocumentClick && event.button === 0 && event.detail > 0 &&
-      // if event.detail is 0 then this is a keyboard and not a mouse press
-      !this._contextContainsTarget &&
-      //this prevents clicking on Tooltip from closing the parent dialog
-      !(canUseDOM && this._documentClickTarget instanceof HTMLElement && this._documentClickTarget.closest('[role="tooltip"]'))) {
-        this.handleDismiss(event, true);
-      }
-    };
-    this.handleFrameClick = (event, frame) => {
-      if (!contains(this._contextElement, frame)) {
-        // dismiss if frame is not within the region
-        this.handleDismiss(event, true);
-      }
-    };
-    this.handleKeyUp = event => {
-      if (this._options.shouldCloseOnEscape && event.keyCode === keycode.codes.esc && !event.defaultPrevented) {
-        var _ownerDocument;
-        // If a dialog contains an <input type="file"/> element and the user opens the file picker and closes it with the
-        // escape key then Firefox passes through that event which could close the parent dialog. This code prevents that
-        // from happening (listening for a `cancel` event doesn't seem to work in firefox)
-        const activeElement = (_ownerDocument = ownerDocument(this._contextElement)) === null || _ownerDocument === void 0 ? void 0 : _ownerDocument.activeElement;
-        const fileInputFocused = (activeElement === null || activeElement === void 0 ? void 0 : activeElement.tagName) === 'INPUT' && activeElement.type === 'file';
-        if (fileInputFocused) {
-          ;
-          activeElement.blur();
-        } else {
-          //This should prevent a Tooltip from closing when inside of a Modal
-          if (this._options.isTooltip) {
-            event.stopPropagation();
-          }
-          this.handleDismiss(event);
-        }
-      }
-    };
     this._options = options || {
       shouldCloseOnDocumentClick: true,
       shouldCloseOnEscape: true,
@@ -132,6 +81,55 @@ class FocusRegion {
       this._screenReaderFocusRegion.updateElement(element);
     }
   }
+  handleDismiss = (event, documentClick) => {
+    this._options.onDismiss?.(event, documentClick);
+  };
+  captureDocumentMousedown = event => {
+    this._documentClickTarget = event.target;
+    this._contextContainsTarget = contains(this._contextElement, this._documentClickTarget);
+    // Preemptively remove aria-hidden before focus moves to the clicked element
+    // outside the region, preventing the "aria-hidden on focused ancestor" warning.
+    if (!this._contextContainsTarget && this._options.shouldCloseOnDocumentClick) {
+      this._screenReaderFocusRegion.deactivate();
+    }
+  };
+  handleDocumentClick = event => {
+    // we used event.pointerType === 'mouse' here, but it is not supported in Safari
+    // https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType
+    // TODO: Check this in the future, because the linked Webkit bug is marked as fixed in 2025-09
+    if (this._options.shouldCloseOnDocumentClick && event.button === 0 && event.detail > 0 &&
+    // if event.detail is 0 then this is a keyboard and not a mouse press
+    !this._contextContainsTarget &&
+    //this prevents clicking on Tooltip from closing the parent dialog
+    !(canUseDOM && this._documentClickTarget instanceof HTMLElement && this._documentClickTarget.closest('[role="tooltip"]'))) {
+      this.handleDismiss(event, true);
+    }
+  };
+  handleFrameClick = (event, frame) => {
+    if (!contains(this._contextElement, frame)) {
+      // dismiss if frame is not within the region
+      this.handleDismiss(event, true);
+    }
+  };
+  handleKeyUp = event => {
+    if (this._options.shouldCloseOnEscape && event.keyCode === keycode.codes.esc && !event.defaultPrevented) {
+      // If a dialog contains an <input type="file"/> element and the user opens the file picker and closes it with the
+      // escape key then Firefox passes through that event which could close the parent dialog. This code prevents that
+      // from happening (listening for a `cancel` event doesn't seem to work in firefox)
+      const activeElement = ownerDocument(this._contextElement)?.activeElement;
+      const fileInputFocused = activeElement?.tagName === 'INPUT' && activeElement.type === 'file';
+      if (fileInputFocused) {
+        ;
+        activeElement.blur();
+      } else {
+        //This should prevent a Tooltip from closing when inside of a Modal
+        if (this._options.isTooltip) {
+          event.stopPropagation();
+        }
+        this.handleDismiss(event);
+      }
+    }
+  };
   get id() {
     return this._id;
   }
@@ -169,13 +167,12 @@ class FocusRegion {
         }
       });
     } else {
-      var _this$_mouseDownListe, _this$_clickListener, _this$_mouseUpListene;
-      (_this$_mouseDownListe = this._mouseDownListener) === null || _this$_mouseDownListe === void 0 ? void 0 : _this$_mouseDownListe.remove();
-      this._mouseDownListener = void 0;
-      (_this$_clickListener = this._clickListener) === null || _this$_clickListener === void 0 ? void 0 : _this$_clickListener.remove();
-      this._clickListener = void 0;
-      (_this$_mouseUpListene = this._mouseUpListener) === null || _this$_mouseUpListene === void 0 ? void 0 : _this$_mouseUpListene.remove();
-      this._mouseUpListener = void 0;
+      this._mouseDownListener?.remove();
+      this._mouseDownListener = undefined;
+      this._clickListener?.remove();
+      this._clickListener = undefined;
+      this._mouseUpListener?.remove();
+      this._mouseUpListener = undefined;
     }
     if (shouldCloseOnEscape) {
       if (!this._keyUpListener) {
@@ -186,9 +183,8 @@ class FocusRegion {
         this._keyUpListener = addEventListener(doc, 'keyup', this.handleKeyUp, useCapture);
       }
     } else {
-      var _this$_keyUpListener;
-      (_this$_keyUpListener = this._keyUpListener) === null || _this$_keyUpListener === void 0 ? void 0 : _this$_keyUpListener.remove();
-      this._keyUpListener = void 0;
+      this._keyUpListener?.remove();
+      this._keyUpListener = undefined;
     }
   }
   activate() {
@@ -202,15 +198,14 @@ class FocusRegion {
   deactivate({
     keyboard = true
   } = {}) {
-    var _this$_mouseDownListe2, _this$_clickListener2, _this$_mouseUpListene2, _this$_keyUpListener2;
-    (_this$_mouseDownListe2 = this._mouseDownListener) === null || _this$_mouseDownListe2 === void 0 ? void 0 : _this$_mouseDownListe2.remove();
-    this._mouseDownListener = void 0;
-    (_this$_clickListener2 = this._clickListener) === null || _this$_clickListener2 === void 0 ? void 0 : _this$_clickListener2.remove();
-    this._clickListener = void 0;
-    (_this$_mouseUpListene2 = this._mouseUpListener) === null || _this$_mouseUpListene2 === void 0 ? void 0 : _this$_mouseUpListene2.remove();
-    this._mouseUpListener = void 0;
-    (_this$_keyUpListener2 = this._keyUpListener) === null || _this$_keyUpListener2 === void 0 ? void 0 : _this$_keyUpListener2.remove();
-    this._keyUpListener = void 0;
+    this._mouseDownListener?.remove();
+    this._mouseDownListener = undefined;
+    this._clickListener?.remove();
+    this._clickListener = undefined;
+    this._mouseUpListener?.remove();
+    this._mouseUpListener = undefined;
+    this._keyUpListener?.remove();
+    this._keyUpListener = undefined;
     if (keyboard) {
       this._keyboardFocusRegion.deactivate();
     }

package/es/FocusRegionManager.js

@@ -1,4 +1,3 @@
-var _FocusRegionManager;
 /*
  * The MIT License (MIT)
  *
@@ -38,123 +37,128 @@ let ENTRIES = [];
  * - Return focus to the marked element
  * @module FocusManager
  */
-class FocusRegionManager {}
-_FocusRegionManager = FocusRegionManager;
-FocusRegionManager.focusRegion = (element, idOrOptions = {}) => {
-  let entry;
-  if (typeof idOrOptions === 'string') {
-    entry = _FocusRegionManager.getEntry(element, idOrOptions);
-  } else {
-    entry = _FocusRegionManager.addEntry(element, idOrOptions);
-  }
-  if (entry && entry.region && typeof entry.region.focus === 'function') {
-    entry.region.focus();
-    return entry.region;
-  } else {
-    error(false, `[FocusRegionManager] Could not focus region with element: ${element}`);
-  }
-  return;
-};
-FocusRegionManager.activateRegion = (element, options) => {
-  const _FocusRegionManager$a = _FocusRegionManager.addEntry(element, options),
-    region = _FocusRegionManager$a.region;
-  return region;
-};
-FocusRegionManager.getActiveEntry = () => {
-  return ENTRIES.find(({
-    region
-  }) => region.focused);
-};
-FocusRegionManager.findEntry = (element, id) => {
-  let index;
-  if (id) {
-    index = ENTRIES.findIndex(entry => entry.id === id);
-  } else {
-    index = ENTRIES.findIndex(entry => entry.element === element);
-  }
-  return index;
-};
-FocusRegionManager.getEntry = (element, id) => {
-  return ENTRIES[_FocusRegionManager.findEntry(element, id)];
-};
-FocusRegionManager.addEntry = (element, options = {}) => {
-  const region = new FocusRegion(element, options);
-  const activeEntry = _FocusRegionManager.getActiveEntry();
-  const keyboardFocusable = region.keyboardFocusable;
-  ENTRIES.forEach(({
-    region
-  }) => {
-    if (region) {
-      // If the active region is triggering a new focus region that does not have
-      // keyboard focusable content, don't deactivate the active region's keyboard
-      // focus region
-      const keyboard = region.focused && !keyboardFocusable ? {
-        keyboard: false
-      } : void 0;
-      region.deactivate(keyboard);
+class FocusRegionManager {
+  static focusRegion = (element, idOrOptions = {}) => {
+    let entry;
+    if (typeof idOrOptions === 'string') {
+      entry = FocusRegionManager.getEntry(element, idOrOptions);
+    } else {
+      entry = FocusRegionManager.addEntry(element, idOrOptions);
     }
-  });
-  region.activate();
-  if (options.shouldFocusOnOpen) {
-    region.focus();
-  }
-  const entry = {
-    id: region.id,
-    element,
-    region,
-    children: [],
-    parent: activeEntry
+    if (entry && entry.region && typeof entry.region.focus === 'function') {
+      entry.region.focus();
+      return entry.region;
+    } else {
+      error(false, `[FocusRegionManager] Could not focus region with element: ${element}`);
+    }
+    return;
+  };
+  static activateRegion = (element, options) => {
+    const {
+      region
+    } = FocusRegionManager.addEntry(element, options);
+    return region;
+  };
+  static getActiveEntry = () => {
+    return ENTRIES.find(({
+      region
+    }) => region.focused);
+  };
+  static findEntry = (element, id) => {
+    let index;
+    if (id) {
+      index = ENTRIES.findIndex(entry => entry.id === id);
+    } else {
+      index = ENTRIES.findIndex(entry => entry.element === element);
+    }
+    return index;
+  };
+  static getEntry = (element, id) => {
+    return ENTRIES[FocusRegionManager.findEntry(element, id)];
+  };
+  static addEntry = (element, options = {}) => {
+    const region = new FocusRegion(element, options);
+    const activeEntry = FocusRegionManager.getActiveEntry();
+    const {
+      keyboardFocusable
+    } = region;
+    ENTRIES.forEach(({
+      region
+    }) => {
+      if (region) {
+        // If the active region is triggering a new focus region that does not have
+        // keyboard focusable content, don't deactivate the active region's keyboard
+        // focus region
+        const keyboard = region.focused && !keyboardFocusable ? {
+          keyboard: false
+        } : undefined;
+        region.deactivate(keyboard);
+      }
+    });
+    region.activate();
+    if (options.shouldFocusOnOpen) {
+      region.focus();
+    }
+    const entry = {
+      id: region.id,
+      element,
+      region,
+      children: [],
+      parent: activeEntry
+    };
+    ENTRIES.push(entry);
+    if (activeEntry) {
+      activeEntry.children.push(entry);
+    }
+    return entry;
   };
-  ENTRIES.push(entry);
-  if (activeEntry) {
-    activeEntry.children.push(entry);
-  }
-  return entry;
-};
-FocusRegionManager.removeEntry = (element, id) => {
-  const index = _FocusRegionManager.findEntry(element, id);
-  const entry = ENTRIES[index];
-  if (index > -1) {
-    ENTRIES.splice(index, 1);
-  }
-  return entry;
-};
-FocusRegionManager.isFocused = (element, id) => {
-  const entry = _FocusRegionManager.getActiveEntry();
-  if (id) {
-    return entry && entry.region && entry.id === id;
-  } else {
-    return entry && entry.region && entry.element === element;
-  }
-};
-FocusRegionManager.clearEntries = () => {
-  ENTRIES = [];
-};
-FocusRegionManager.blurRegion = (element, id) => {
-  const entry = _FocusRegionManager.removeEntry(element, id);
-  if (entry) {
-    const children = entry.children,
-      region = entry.region,
-      parent = entry.parent;
+  static removeEntry = (element, id) => {
+    const index = FocusRegionManager.findEntry(element, id);
+    const entry = ENTRIES[index];
+    if (index > -1) {
+      ENTRIES.splice(index, 1);
+    }
+    return entry;
+  };
+  static isFocused = (element, id) => {
+    const entry = FocusRegionManager.getActiveEntry();
+    if (id) {
+      return entry && entry.region && entry.id === id;
+    } else {
+      return entry && entry.region && entry.element === element;
+    }
+  };
+  static clearEntries = () => {
+    ENTRIES = [];
+  };
+  static blurRegion = (element, id) => {
+    const entry = FocusRegionManager.removeEntry(element, id);
+    if (entry) {
+      const {
+        children,
+        region,
+        parent
+      } = entry;
 
-    // deactivate the region...
-    region && region.deactivate();
+      // deactivate the region...
+      region && region.deactivate();
 
-    // and any regions created from it
-    if (children) {
-      children.forEach(({
-        id,
-        element
-      }) => {
-        const entry = _FocusRegionManager.removeEntry(element, id);
-        entry && entry.region && entry.region.deactivate();
-      });
-    }
+      // and any regions created from it
+      if (children) {
+        children.forEach(({
+          id,
+          element
+        }) => {
+          const entry = FocusRegionManager.removeEntry(element, id);
+          entry && entry.region && entry.region.deactivate();
+        });
+      }
 
-    // activate the region's parent if it exists
-    parent && parent.region && parent.region.activate();
-    region && region.blur(); // this should focus the parent region
-  }
-};
+      // activate the region's parent if it exists
+      parent && parent.region && parent.region.activate();
+      region && region.blur(); // this should focus the parent region
+    }
+  };
+}
 export default FocusRegionManager;
 export { FocusRegionManager };

package/es/KeyboardFocusRegion.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 /*
  * The MIT License (MIT)
  *
@@ -38,61 +39,15 @@ import { scopeTab } from "./scopeTab.js";
  * @module KeyboardFocusRegion
  */
 class KeyboardFocusRegion {
+  _options;
+  _focusLaterElement = null;
+  _needToFocus = false;
+  _listeners = [];
+  _raf = [];
+  _active = false;
+  _wasDocumentClick;
+  _contextElement;
   constructor(element, options) {
-    this._options = void 0;
-    this._focusLaterElement = null;
-    this._needToFocus = false;
-    this._listeners = [];
-    this._raf = [];
-    this._active = false;
-    this._wasDocumentClick = void 0;
-    this._contextElement = void 0;
-    this.handleKeyDown = event => {
-      if (event.keyCode === keycode.codes.tab) {
-        scopeTab(this._contextElement, event);
-      }
-    };
-    this.handleClick = () => {
-      this._wasDocumentClick = true;
-    };
-    this.handleWindowBlur = () => {
-      if (this._wasDocumentClick) {
-        this._wasDocumentClick = false;
-        return;
-      }
-      this._needToFocus = true;
-    };
-    this.handleFocus = () => {
-      if (this._needToFocus) {
-        this._needToFocus = false;
-        if (!this._contextElement) {
-          return;
-        }
-        // need to see how jQuery shims document.on('focusin') so we don't need the
-        // setTimeout, firefox doesn't support focusin, if it did, we could focus
-        // the element outside of a setTimeout. Side-effect of this implementation
-        // is that the document.body gets focus, and then we focus our element right
-        // after, seems fine.
-        this._raf.push(requestAnimationFrame(() => {
-          if (containsActiveElement(this._contextElement)) {
-            return;
-          }
-          this.focusDefaultElement();
-        }));
-      }
-    };
-    this.handleFirstTabbableKeyDown = event => {
-      if (event.keyCode === keycode.codes.tab && event.shiftKey) {
-        var _this$_options$onBlur, _this$_options;
-        (_this$_options$onBlur = (_this$_options = this._options).onBlur) === null || _this$_options$onBlur === void 0 ? void 0 : _this$_options$onBlur.call(_this$_options, event);
-      }
-    };
-    this.handleLastTabbableKeyDown = event => {
-      if (event.keyCode === keycode.codes.tab && !event.shiftKey) {
-        var _this$_options$onBlur2, _this$_options2;
-        (_this$_options$onBlur2 = (_this$_options2 = this._options).onBlur) === null || _this$_options$onBlur2 === void 0 ? void 0 : _this$_options$onBlur2.call(_this$_options2, event);
-      }
-    };
     this._contextElement = findDOMNode(element);
     this._options = options || {
       shouldContainFocus: true,
@@ -107,7 +62,9 @@ class KeyboardFocusRegion {
     return containsActiveElement(this._contextElement);
   }
   get shouldContainFocus() {
-    const shouldContainFocus = this._options.shouldContainFocus;
+    const {
+      shouldContainFocus
+    } = this._options;
     return shouldContainFocus === true || Array.isArray(shouldContainFocus) && shouldContainFocus.includes('keyboard');
   }
   get focusable() {
@@ -135,7 +92,9 @@ class KeyboardFocusRegion {
     return ownerWindow(this._contextElement);
   }
   get defaultFocusElement() {
-    const defaultFocusElement = this._options.defaultFocusElement;
+    const {
+      defaultFocusElement
+    } = this._options;
     const element = findDOMNode(typeof defaultFocusElement === 'function' ? defaultFocusElement() : defaultFocusElement);
     if (element && this._contextElement && this._contextElement.contains(element)) {
       return element;
@@ -215,9 +174,55 @@ class KeyboardFocusRegion {
       this._focusLaterElement = null;
     }
   }
+  handleKeyDown = event => {
+    if (event.keyCode === keycode.codes.tab) {
+      scopeTab(this._contextElement, event);
+    }
+  };
+  handleClick = () => {
+    this._wasDocumentClick = true;
+  };
+  handleWindowBlur = () => {
+    if (this._wasDocumentClick) {
+      this._wasDocumentClick = false;
+      return;
+    }
+    this._needToFocus = true;
+  };
+  handleFocus = () => {
+    if (this._needToFocus) {
+      this._needToFocus = false;
+      if (!this._contextElement) {
+        return;
+      }
+      // need to see how jQuery shims document.on('focusin') so we don't need the
+      // setTimeout, firefox doesn't support focusin, if it did, we could focus
+      // the element outside of a setTimeout. Side-effect of this implementation
+      // is that the document.body gets focus, and then we focus our element right
+      // after, seems fine.
+      this._raf.push(requestAnimationFrame(() => {
+        if (containsActiveElement(this._contextElement)) {
+          return;
+        }
+        this.focusDefaultElement();
+      }));
+    }
+  };
+  handleFirstTabbableKeyDown = event => {
+    if (event.keyCode === keycode.codes.tab && event.shiftKey) {
+      this._options.onBlur?.(event);
+    }
+  };
+  handleLastTabbableKeyDown = event => {
+    if (event.keyCode === keycode.codes.tab && !event.shiftKey) {
+      this._options.onBlur?.(event);
+    }
+  };
   activate() {
-    const defaultFocusElement = this.defaultFocusElement,
-      shouldContainFocus = this.shouldContainFocus;
+    const {
+      defaultFocusElement,
+      shouldContainFocus
+    } = this;
     if (!this._active) {
       if (defaultFocusElement || shouldContainFocus) {
         if (shouldContainFocus) {