@instructure/ui-a11y-utils 8.33.2-snapshot-0 → 8.33.2

package/CHANGELOG.md

@@ -3,14 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.33.2-snapshot-0](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2-snapshot-0) (2023-01-13)
+## [8.33.2](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2) (2023-01-25)
 
 **Note:** Version bump only for package @instructure/ui-a11y-utils
 
-
-
-
-
 ## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
 
 **Note:** Version bump only for package @instructure/ui-a11y-utils

package/es/FocusRegion.js

@@ -21,13 +21,13 @@
  * 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 } from '@instructure/ui-dom-utils';
 import { uid } from '@instructure/uid';
 import { logError as error } from '@instructure/console';
 import { ScreenReaderFocusRegion } from './ScreenReaderFocusRegion';
 import { KeyboardFocusRegion } from './KeyboardFocusRegion';
-
 class FocusRegion {
   constructor(element, options) {
     this._contextElement = null;
@@ -38,37 +38,30 @@ class FocusRegion {
     this._id = void 0;
     this._listeners = [];
     this._active = 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.captureDocumentClick = event => {
       const target = event.target;
       this._preventCloseOnDocumentClick = event.button !== 0 || contains(this._contextElement, target);
     };
-
     this.handleDocumentClick = event => {
       if (this._options.shouldCloseOnDocumentClick && !this._preventCloseOnDocumentClick) {
         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) {
         this.handleDismiss(event);
       }
     };
-
     this._options = options || {
       shouldCloseOnDocumentClick: true,
       shouldCloseOnEscape: true
@@ -78,54 +71,41 @@ class FocusRegion {
     this._keyboardFocusRegion = new KeyboardFocusRegion(element, options);
     this._id = uid();
   }
-
   updateElement(element, options) {
     this._contextElement = element;
-
     if (options) {
       this._options = options;
     }
-
     if (this._keyboardFocusRegion) {
       this._keyboardFocusRegion.updateElement(element);
     }
-
     if (this._screenReaderFocusRegion) {
       this._screenReaderFocusRegion.updateElement(element);
     }
   }
-
   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)
-
+  }
 
+  // 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;
   }
-
   activate() {
     if (!this._active) {
       const doc = ownerDocument(this._contextElement);
-
       this._keyboardFocusRegion.activate();
-
       this._screenReaderFocusRegion.activate();
-
       if (this._options.shouldCloseOnDocumentClick) {
         this._listeners.push(addEventListener(doc, 'click', this.captureDocumentClick, true));
-
         this._listeners.push(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._listeners.push(addEventListener(frameDoc, 'mouseup', event => {
               this.handleFrameClick(event, el);
@@ -133,51 +113,37 @@ class FocusRegion {
           }
         });
       }
-
       if (this._options.shouldCloseOnEscape) {
         this._listeners.push(addEventListener(doc, 'keyup', this.handleKeyUp));
       }
-
       this._active = true;
     }
   }
-
   deactivate() {
     let _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {},
-        _ref$keyboard = _ref.keyboard,
-        keyboard = _ref$keyboard === void 0 ? true : _ref$keyboard;
-
+      _ref$keyboard = _ref.keyboard,
+      keyboard = _ref$keyboard === void 0 ? true : _ref$keyboard;
     if (this._active) {
       this._listeners.forEach(listener => {
         listener.remove();
       });
-
       this._listeners = [];
-
       if (keyboard) {
         this._keyboardFocusRegion.deactivate();
       }
-
       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 {
 /**

package/es/FocusRegionManager.js

@@ -21,62 +21,50 @@
  * 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';
 let ENTRIES = [];
-
 class FocusRegionManager {}
-
 FocusRegionManager.focusRegion = function (element) {
   let idOrOptions = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
   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;
-
+    region = _FocusRegionManager$a.region;
   return region;
 };
-
 FocusRegionManager.getActiveEntry = () => {
   return ENTRIES.find(_ref => {
     let region = _ref.region;
     return 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 = function (element) {
   let options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
   const region = new FocusRegion(element, options);
@@ -84,7 +72,6 @@ FocusRegionManager.addEntry = function (element) {
   const keyboardFocusable = region.keyboardFocusable;
   ENTRIES.forEach(_ref2 => {
     let region = _ref2.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
@@ -96,11 +83,9 @@ FocusRegionManager.addEntry = function (element) {
     }
   });
   region.activate();
-
   if (options.shouldFocusOnOpen) {
     region.focus();
   }
-
   const entry = {
     id: region.id,
     element,
@@ -109,59 +94,51 @@ FocusRegionManager.addEntry = function (element) {
     parent: activeEntry
   };
   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; // deactivate the region...
+      region = entry.region,
+      parent = entry.parent;
 
-    region && region.deactivate(); // and any regions created from it
+    // deactivate the region...
+    region && region.deactivate();
 
+    // and any regions created from it
     if (children) {
       children.forEach(_ref3 => {
         let id = _ref3.id,
-            element = _ref3.element;
+          element = _ref3.element;
         const entry = FocusRegionManager.removeEntry(element, id);
         entry && entry.region && entry.region.deactivate();
       });
-    } // activate the region's parent if it exists
-
+    }
 
+    // activate the region's parent if it exists
     parent && parent.region && parent.region.activate();
     region && region.blur(); // this should focus the parent region
   }

package/es/KeyboardFocusRegion.js

@@ -21,11 +21,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { findDOMNode, findTabbable, findFocusable, ownerWindow, getActiveElement, addEventListener, ownerDocument, containsActiveElement, requestAnimationFrame } from '@instructure/ui-dom-utils';
 import { logError as error } from '@instructure/console';
 import keycode from 'keycode';
 import { scopeTab } from './scopeTab';
-
 class KeyboardFocusRegion {
   constructor(element, options) {
     this._options = void 0;
@@ -36,141 +36,110 @@ class KeyboardFocusRegion {
     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
+        }
+        // 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,
       shouldReturnFocus: true,
       defaultFocusElement: null
     };
-
     if (this._options.shouldReturnFocus) {
       this._focusLaterElement = getActiveElement(this.doc);
     }
   }
-
   get focused() {
     return containsActiveElement(this._contextElement);
   }
-
   get shouldContainFocus() {
     const shouldContainFocus = this._options.shouldContainFocus;
     return shouldContainFocus === true || Array.isArray(shouldContainFocus) && shouldContainFocus.includes('keyboard');
   }
-
   get focusable() {
     return findFocusable(this._contextElement, () => true, true) || [];
   }
-
   get tabbable() {
     return findTabbable(this._contextElement) || [];
   }
-
   get firstTabbable() {
     return this.tabbable[0];
   }
-
   get lastTabbable() {
     return this.tabbable.pop();
   }
-
   get firstFocusable() {
     return this.focusable[0];
   }
-
   get lastFocusable() {
     return this.focusable.pop();
   }
-
   get doc() {
     return ownerDocument(this._contextElement);
   }
-
   get win() {
     return ownerWindow(this._contextElement);
   }
-
   get defaultFocusElement() {
     const defaultFocusElement = this._options.defaultFocusElement;
     const element = findDOMNode(typeof defaultFocusElement === 'function' ? defaultFocusElement() : defaultFocusElement);
-
     if (element && this._contextElement && this._contextElement.contains(element)) {
       return element;
     }
-
     if (this.firstTabbable) {
       return this.firstTabbable;
     }
-
     if (this._contextElement && this.focusable.includes(this._contextElement)) {
       return this._contextElement;
     }
-
     return null;
   }
-
   updateElement(element) {
     this._contextElement = findDOMNode(element);
   }
-
   focusDefaultElement() {
     if (this.defaultFocusElement) {
       ;
@@ -186,22 +155,18 @@ class KeyboardFocusRegion {
       }
     }
   }
-
   focus() {
     if (this.focused) {
       return;
     }
-
     this._raf.push(requestAnimationFrame(() => {
       this.focusDefaultElement();
     }));
   }
-
   blur() {
     if (this._options.shouldReturnFocus && this._focusLaterElement) {
       try {
         ;
-
         this._focusLaterElement.focus();
       } catch (e) {
         error(false, `
@@ -209,53 +174,39 @@ class KeyboardFocusRegion {
           but it is not in the DOM anymore: ${e}
           `);
       }
-
       this._focusLaterElement = null;
     }
   }
-
   activate() {
     const defaultFocusElement = this.defaultFocusElement,
-          shouldContainFocus = this.shouldContainFocus;
-
+      shouldContainFocus = this.shouldContainFocus;
     if (!this._active) {
       if (defaultFocusElement || shouldContainFocus) {
         if (shouldContainFocus) {
           this._listeners.push(addEventListener(this.doc, 'keydown', this.handleKeyDown));
         } else {
           this._listeners.push(addEventListener(this.firstTabbable || defaultFocusElement, 'keydown', this.handleFirstTabbableKeyDown));
-
           this._listeners.push(addEventListener(this.lastTabbable || defaultFocusElement, 'keydown', this.handleLastTabbableKeyDown));
         }
-
         this._listeners.push(addEventListener(this.doc, 'click', this.handleClick, true));
-
         this._listeners.push(addEventListener(this.win, 'blur', this.handleWindowBlur, false));
-
         this._listeners.push(addEventListener(this.doc, 'focus', this.handleFocus, true));
-
         this._active = true;
       }
     }
   }
-
   deactivate() {
     if (this._active) {
       this._listeners.forEach(listener => {
         listener.remove();
       });
-
       this._listeners = [];
-
       this._raf.forEach(request => request.cancel());
-
       this._raf = [];
       this._active = false;
     }
   }
-
 }
-
 export default KeyboardFocusRegion;
 export {
 /**