@instructure/ui-a11y-utils 11.7.8 → 11.7.9-pr-snapshot-1792147648392

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.7.9-pr-snapshot-1792147648392](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.9-pr-snapshot-1792147648392) (2026-10-16)
+
+### Build System
+
+* **many:** replace babel with swc ([7e36c54](https://github.com/instructure/instructure-ui/commit/7e36c54d240b4fa483801c03ab18e7f860f561e2))
+
+### BREAKING CHANGES
+
+* **many:** `@instructure/ui-babel-preset` and
+  `@instructure/browserslist-config-instui` are removed and will no longer be
+  published. Packages depend on `@swc/helpers` instead of `@babel/runtime`.
+
+
 ## [11.7.8](https://github.com/instructure/instructure-ui/compare/v11.7.7...v11.7.8) (2026-10-02)
 
 **Note:** Version bump only for package @instructure/ui-a11y-utils

package/es/FocusRegion.js

@@ -1,225 +1,151 @@
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
 import keycode from 'keycode';
 import { contains, addEventListener, ownerDocument, findTabbable, canUseDOM } from '@instructure/ui-dom-utils';
 import { uid } from '@instructure/uid';
 import { logError as error } from '@instructure/console';
 import { ScreenReaderFocusRegion } from './ScreenReaderFocusRegion.js';
 import { KeyboardFocusRegion } from './KeyboardFocusRegion.js';
-/**
- * ---
- * category: utilities/a11y
- * ---
- *
- * Class for focus operations, manages [ScreenReaderFocusRegion](ScreenReaderFocusRegion)
- * and [KeyboardFocusRegion](KeyboardFocusRegion) for the given DOM element.
- * - Scoping focus within a given context (DOM node),
- * - Mark active element for focus later
- * - Return focus to the marked element
- * @module FocusRegion
- */
 class FocusRegion {
-  _contextElement = null;
-  _options;
-  _screenReaderFocusRegion;
-  _keyboardFocusRegion;
-  _id;
-  _mouseDownListener;
-  _clickListener;
-  _mouseUpListener;
-  _keyUpListener;
-  _active = false;
-  _documentClickTarget = null;
-  _contextContainsTarget = false;
-  constructor(element, options) {
-    this._options = options || {
-      shouldCloseOnDocumentClick: true,
-      shouldCloseOnEscape: true,
-      isTooltip: false
-    };
-    this._id = uid();
-    // eslint-disable-next-line no-param-reassign
-    options.regionId = this._id;
-    this._contextElement = element;
-    this._screenReaderFocusRegion = new ScreenReaderFocusRegion(element, options);
-    this._keyboardFocusRegion = new KeyboardFocusRegion(element, options);
-  }
-  updateElement(element, options) {
-    this._contextElement = element;
-    if (options) {
-      this._options = options;
-      if (this._active) {
-        this.addOrRemoveListeners(options.shouldCloseOnDocumentClick, options.shouldCloseOnEscape);
-      }
+    constructor(element, options){
+        this._contextElement = null;
+        this._active = false;
+        this._documentClickTarget = null;
+        this._contextContainsTarget = false;
+        this.handleDismiss = (event, documentClick)=>{
+            this._options.onDismiss?.(event, documentClick);
+        };
+        this.captureDocumentMousedown = (event)=>{
+            this._documentClickTarget = event.target;
+            this._contextContainsTarget = contains(this._contextElement, this._documentClickTarget);
+            if (!this._contextContainsTarget && this._options.shouldCloseOnDocumentClick) {
+                this._screenReaderFocusRegion.deactivate();
+            }
+        };
+        this.handleDocumentClick = (event)=>{
+            if (this._options.shouldCloseOnDocumentClick && event.button === 0 && event.detail > 0 && !this._contextContainsTarget && !(canUseDOM && this._documentClickTarget instanceof HTMLElement && this._documentClickTarget.closest('[role="tooltip"]'))) {
+                this.handleDismiss(event, true);
+            }
+        };
+        this.handleFrameClick = (event, frame)=>{
+            if (!contains(this._contextElement, frame)) {
+                this.handleDismiss(event, true);
+            }
+        };
+        this.handleKeyUp = (event)=>{
+            if (this._options.shouldCloseOnEscape && event.keyCode === keycode.codes.esc && !event.defaultPrevented) {
+                const activeElement = ownerDocument(this._contextElement)?.activeElement;
+                const fileInputFocused = activeElement?.tagName === 'INPUT' && activeElement.type === 'file';
+                if (fileInputFocused) {
+                    ;
+                    activeElement.blur();
+                } else {
+                    if (this._options.isTooltip) {
+                        event.stopPropagation();
+                    }
+                    this.handleDismiss(event);
+                }
+            }
+        };
+        this._options = options || {
+            shouldCloseOnDocumentClick: true,
+            shouldCloseOnEscape: true,
+            isTooltip: false
+        };
+        this._id = uid();
+        options.regionId = this._id;
+        this._contextElement = element;
+        this._screenReaderFocusRegion = new ScreenReaderFocusRegion(element, options);
+        this._keyboardFocusRegion = new KeyboardFocusRegion(element, options);
     }
-    if (this._keyboardFocusRegion) {
-      this._keyboardFocusRegion.updateElement(element);
-    }
-    if (this._screenReaderFocusRegion) {
-      this._screenReaderFocusRegion.updateElement(element);
+    updateElement(element, options) {
+        this._contextElement = element;
+        if (options) {
+            this._options = options;
+            if (this._active) {
+                this.addOrRemoveListeners(options.shouldCloseOnDocumentClick, options.shouldCloseOnEscape);
+            }
+        }
+        if (this._keyboardFocusRegion) {
+            this._keyboardFocusRegion.updateElement(element);
+        }
+        if (this._screenReaderFocusRegion) {
+            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();
+    get id() {
+        return this._id;
     }
-  };
-  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);
+    get focused() {
+        return this._active;
     }
-  };
-  handleFrameClick = (event, frame) => {
-    if (!contains(this._contextElement, frame)) {
-      // dismiss if frame is not within the region
-      this.handleDismiss(event, true);
+    get keyboardFocusable() {
+        return (findTabbable(this._contextElement) || []).length > 0;
     }
-  };
-  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();
+    addOrRemoveListeners(shouldCloseOnDocumentClick, shouldCloseOnEscape) {
+        const doc = ownerDocument(this._contextElement);
+        if (shouldCloseOnDocumentClick) {
+            if (!this._mouseDownListener) {
+                this._mouseDownListener = addEventListener(doc, 'mousedown', this.captureDocumentMousedown);
+            }
+            if (!this._clickListener) {
+                this._clickListener = addEventListener(doc, 'click', this.handleDocumentClick);
+            }
+            Array.from(doc.getElementsByTagName('iframe')).forEach((el)=>{
+                const frameDoc = el.contentDocument;
+                if (frameDoc && !this._mouseUpListener) {
+                    this._mouseUpListener = addEventListener(frameDoc, 'mouseup', (event)=>{
+                        this.handleFrameClick(event, el);
+                    });
+                }
+            });
+        } else {
+            this._mouseDownListener?.remove();
+            this._mouseDownListener = undefined;
+            this._clickListener?.remove();
+            this._clickListener = undefined;
+            this._mouseUpListener?.remove();
+            this._mouseUpListener = undefined;
+        }
+        if (shouldCloseOnEscape) {
+            if (!this._keyUpListener) {
+                const useCapture = this._options.isTooltip;
+                this._keyUpListener = addEventListener(doc, 'keyup', this.handleKeyUp, useCapture);
+            }
+        } else {
+            this._keyUpListener?.remove();
+            this._keyUpListener = undefined;
         }
-        this.handleDismiss(event);
-      }
     }
-  };
-  get id() {
-    return this._id;
-  }
-
-  // Focused returns when the focus region is active. Checking focused with the active element
-  // is inconsistent across browsers (Safari/Firefox do not focus elements on click)
-  get focused() {
-    return this._active;
-  }
-  get keyboardFocusable() {
-    return (findTabbable(this._contextElement) || []).length > 0;
-  }
-
-  /**
-   * Adds or removes mouse/keyboard listeners based on the input parameters
-   * @param shouldCloseOnDocumentClick Should add listeners that close the region if there is an outside click?
-   * @param shouldCloseOnEscape Should the region be closed if ESC is pressed?
-   */
-  addOrRemoveListeners(shouldCloseOnDocumentClick, shouldCloseOnEscape) {
-    const doc = ownerDocument(this._contextElement);
-    if (shouldCloseOnDocumentClick) {
-      if (!this._mouseDownListener) {
-        this._mouseDownListener = addEventListener(doc, 'mousedown', this.captureDocumentMousedown);
-      }
-      if (!this._clickListener) {
-        this._clickListener = addEventListener(doc, 'click', this.handleDocumentClick);
-      }
-      Array.from(doc.getElementsByTagName('iframe')).forEach(el => {
-        // listen for mouseup events on any iframes in the document
-        const frameDoc = el.contentDocument;
-        if (frameDoc && !this._mouseUpListener) {
-          this._mouseUpListener = addEventListener(frameDoc, 'mouseup', event => {
-            this.handleFrameClick(event, el);
-          });
+    activate() {
+        if (!this._active) {
+            this._keyboardFocusRegion.activate();
+            this._screenReaderFocusRegion.activate();
+            this.addOrRemoveListeners(this._options.shouldCloseOnDocumentClick, this._options.shouldCloseOnEscape);
+            this._active = true;
         }
-      });
-    } else {
-      this._mouseDownListener?.remove();
-      this._mouseDownListener = undefined;
-      this._clickListener?.remove();
-      this._clickListener = undefined;
-      this._mouseUpListener?.remove();
-      this._mouseUpListener = undefined;
     }
-    if (shouldCloseOnEscape) {
-      if (!this._keyUpListener) {
-        //This will ensure that the Tooltip's Escape event listener is executed first
-        //because listeners in the capturing phase are called before other event listeners (like that of the Modal's Escape listener)
-        //so a Modal with a Tooltip will not get closed when closing the Tooltip with Escape
-        const useCapture = this._options.isTooltip;
-        this._keyUpListener = addEventListener(doc, 'keyup', this.handleKeyUp, useCapture);
-      }
-    } else {
-      this._keyUpListener?.remove();
-      this._keyUpListener = undefined;
+    deactivate({ keyboard = true } = {}) {
+        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();
+        }
+        this._screenReaderFocusRegion.deactivate();
+        this._active = false;
     }
-  }
-  activate() {
-    if (!this._active) {
-      this._keyboardFocusRegion.activate();
-      this._screenReaderFocusRegion.activate();
-      this.addOrRemoveListeners(this._options.shouldCloseOnDocumentClick, this._options.shouldCloseOnEscape);
-      this._active = true;
+    focus() {
+        error(this._active, `[FocusRegion] Cannot call '.focus()' on a region that is not currently active.`);
+        this._keyboardFocusRegion.focus();
     }
-  }
-  deactivate({
-    keyboard = true
-  } = {}) {
-    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();
+    blur() {
+        error(!this._active, `[FocusRegion] Cannot call '.blur()' on a region that is currently active.`);
+        this._keyboardFocusRegion.blur();
     }
-    this._screenReaderFocusRegion.deactivate();
-    this._active = false;
-  }
-  focus() {
-    error(this._active, `[FocusRegion] Cannot call '.focus()' on a region that is not currently active.`);
-    this._keyboardFocusRegion.focus();
-  }
-  blur() {
-    error(!this._active, `[FocusRegion] Cannot call '.blur()' on a region that is currently active.`);
-    this._keyboardFocusRegion.blur();
-  }
 }
 export default FocusRegion;
-export { FocusRegion };
+export { FocusRegion };

package/es/FocusRegionManager.js

@@ -1,164 +1,124 @@
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
 import { logError as error } from '@instructure/console';
 import { FocusRegion } from './FocusRegion.js';
 let ENTRIES = [];
-
-/**
- * ---
- * category: utilities/a11y
- * ---
- *
- * Class for focus operations, manages multiple [FocusRegion](FocusRegion)s.
- * - Scoping focus within a given context,
- * - Mark active element for focus later
- * - Return focus to the marked element
- * @module FocusManager
- */
 class FocusRegionManager {
-  static focusRegion = (element, idOrOptions = {}) => {
-    let entry;
-    if (typeof idOrOptions === 'string') {
-      entry = FocusRegionManager.getEntry(element, idOrOptions);
-    } else {
-      entry = FocusRegionManager.addEntry(element, idOrOptions);
+    static{
+        this.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;
+        };
     }
-    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}`);
+    static{
+        this.activateRegion = (element, options)=>{
+            const { region } = FocusRegionManager.addEntry(element, options);
+            return region;
+        };
     }
-    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);
+    static{
+        this.getActiveEntry = ()=>{
+            return ENTRIES.find(({ region })=>region.focused);
+        };
     }
-    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();
+    static{
+        this.findEntry = (element, id)=>{
+            let index;
+            if (id) {
+                index = ENTRIES.findIndex((entry)=>entry.id === id);
+            } else {
+                index = ENTRIES.findIndex((entry)=>entry.element === element);
+            }
+            return index;
+        };
     }
-    const entry = {
-      id: region.id,
-      element,
-      region,
-      children: [],
-      parent: activeEntry
-    };
-    ENTRIES.push(entry);
-    if (activeEntry) {
-      activeEntry.children.push(entry);
+    static{
+        this.getEntry = (element, id)=>{
+            return ENTRIES[FocusRegionManager.findEntry(element, id)];
+        };
     }
-    return entry;
-  };
-  static removeEntry = (element, id) => {
-    const index = FocusRegionManager.findEntry(element, id);
-    const entry = ENTRIES[index];
-    if (index > -1) {
-      ENTRIES.splice(index, 1);
+    static{
+        this.addEntry = (element, options = {})=>{
+            const region = new FocusRegion(element, options);
+            const activeEntry = FocusRegionManager.getActiveEntry();
+            const { keyboardFocusable } = region;
+            ENTRIES.forEach(({ region })=>{
+                if (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;
+        };
     }
-    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{
+        this.removeEntry = (element, id)=>{
+            const index = FocusRegionManager.findEntry(element, id);
+            const entry = ENTRIES[index];
+            if (index > -1) {
+                ENTRIES.splice(index, 1);
+            }
+            return entry;
+        };
     }
-  };
-  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();
-
-      // 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
+    static{
+        this.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{
+        this.clearEntries = ()=>{
+            ENTRIES = [];
+        };
+    }
+    static{
+        this.blurRegion = (element, id)=>{
+            const entry = FocusRegionManager.removeEntry(element, id);
+            if (entry) {
+                const { children, region, parent } = entry;
+                region && region.deactivate();
+                if (children) {
+                    children.forEach(({ id, element })=>{
+                        const entry = FocusRegionManager.removeEntry(element, id);
+                        entry && entry.region && entry.region.deactivate();
+                    });
+                }
+                parent && parent.region && parent.region.activate();
+                region && region.blur();
+            }
+        };
     }
-  };
 }
 export default FocusRegionManager;
-export { FocusRegionManager };
+export { FocusRegionManager };

package/es/FocusRegionOptions.js

@@ -1 +1 @@
-export {};
+export { };