Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@instructure/ui-a11y-utils

Package Overview
Dependencies
Maintainers
0
Versions
1278
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@instructure/ui-a11y-utils - npm Package Compare versions

Comparing version 8.56.5-pr-snapshot-1728655013879 to 8.56.5-pr-snapshot-1729507712924

2

CHANGELOG.md

@@ -6,3 +6,3 @@ # Change Log

## [8.56.5-pr-snapshot-1728655013879](https://github.com/instructure/instructure-ui/compare/v8.56.4...v8.56.5-pr-snapshot-1728655013879) (2024-10-11)
## [8.56.5-pr-snapshot-1729507712924](https://github.com/instructure/instructure-ui/compare/v8.56.4...v8.56.5-pr-snapshot-1729507712924) (2024-10-21)

@@ -9,0 +9,0 @@ **Note:** Version bump only for package @instructure/ui-a11y-utils

23

lib/FocusRegion.js

@@ -9,3 +9,6 @@ "use strict";

var _keycode = _interopRequireDefault(require("keycode"));
var _uiDomUtils = require("@instructure/ui-dom-utils");
var _contains = require("@instructure/ui-dom-utils/lib/contains.js");
var _addEventListener = require("@instructure/ui-dom-utils/lib/addEventListener.js");
var _ownerDocument2 = require("@instructure/ui-dom-utils/lib/ownerDocument.js");
var _findTabbable = require("@instructure/ui-dom-utils/lib/findTabbable.js");
var _uid = require("@instructure/uid");

@@ -56,3 +59,3 @@ var _console = require("@instructure/console");

this._documentClickTarget = event.target;
this._contextContainsTarget = (0, _uiDomUtils.contains)(this._contextElement, this._documentClickTarget);
this._contextContainsTarget = (0, _contains.contains)(this._contextElement, this._documentClickTarget);
};

@@ -67,3 +70,3 @@ this.handleDocumentClick = event => {

this.handleFrameClick = (event, frame) => {
if (!(0, _uiDomUtils.contains)(this._contextElement, frame)) {
if (!(0, _contains.contains)(this._contextElement, frame)) {
// dismiss if frame is not within the region

@@ -79,3 +82,3 @@ this.handleDismiss(event, true);

// from happening (listening for a `cancel` event doesn't seem to work in firefox)
const activeElement = (_ownerDocument = (0, _uiDomUtils.ownerDocument)(this._contextElement)) === null || _ownerDocument === void 0 ? void 0 : _ownerDocument.activeElement;
const activeElement = (_ownerDocument = (0, _ownerDocument2.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';

@@ -121,12 +124,12 @@ if (fileInputFocused) {

get keyboardFocusable() {
return ((0, _uiDomUtils.findTabbable)(this._contextElement) || []).length > 0;
return ((0, _findTabbable.findTabbable)(this._contextElement) || []).length > 0;
}
activate() {
if (!this._active) {
const doc = (0, _uiDomUtils.ownerDocument)(this._contextElement);
const doc = (0, _ownerDocument2.ownerDocument)(this._contextElement);
this._keyboardFocusRegion.activate();
this._screenReaderFocusRegion.activate();
if (this._options.shouldCloseOnDocumentClick) {
this._listeners.push((0, _uiDomUtils.addEventListener)(doc, 'mousedown', this.captureDocumentMousedown));
this._listeners.push((0, _uiDomUtils.addEventListener)(doc, 'click', this.handleDocumentClick));
this._listeners.push((0, _addEventListener.addEventListener)(doc, 'mousedown', this.captureDocumentMousedown));
this._listeners.push((0, _addEventListener.addEventListener)(doc, 'click', this.handleDocumentClick));
Array.from(doc.getElementsByTagName('iframe')).forEach(el => {

@@ -136,3 +139,3 @@ // listen for mouseup events on any iframes in the document

if (frameDoc) {
this._listeners.push((0, _uiDomUtils.addEventListener)(frameDoc, 'mouseup', event => {
this._listeners.push((0, _addEventListener.addEventListener)(frameDoc, 'mouseup', event => {
this.handleFrameClick(event, el);

@@ -144,3 +147,3 @@ }));

if (this._options.shouldCloseOnEscape) {
this._listeners.push((0, _uiDomUtils.addEventListener)(doc, 'keyup', this.handleKeyUp));
this._listeners.push((0, _addEventListener.addEventListener)(doc, 'keyup', this.handleKeyUp));
}

@@ -147,0 +150,0 @@ this._active = true;

6

lib/hasVisibleChildren.js

@@ -10,4 +10,4 @@ "use strict";

var _react = _interopRequireDefault(require("react"));
var _uiReactUtils = require("@instructure/ui-react-utils");
var _uiA11yContent = require("@instructure/ui-a11y-content");
var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
/*

@@ -40,3 +40,3 @@ * The MIT License (MIT)

_react.default.Children.forEach(children, child => {
if (child && !(0, _uiReactUtils.matchComponentTypes)(child, [_uiA11yContent.ScreenReaderContent])) {
if (child && !(0, _matchComponentTypes.matchComponentTypes)(child, [_ScreenReaderContent.ScreenReaderContent])) {
visible = true;

@@ -43,0 +43,0 @@ }

50

lib/KeyboardFocusRegion.js

@@ -8,3 +8,11 @@ "use strict";

exports.default = exports.KeyboardFocusRegion = void 0;
var _uiDomUtils = require("@instructure/ui-dom-utils");
var _findDOMNode = require("@instructure/ui-dom-utils/lib/findDOMNode.js");
var _findTabbable = require("@instructure/ui-dom-utils/lib/findTabbable.js");
var _findFocusable = require("@instructure/ui-dom-utils/lib/findFocusable.js");
var _ownerWindow = require("@instructure/ui-dom-utils/lib/ownerWindow.js");
var _getActiveElement = require("@instructure/ui-dom-utils/lib/getActiveElement.js");
var _addEventListener = require("@instructure/ui-dom-utils/lib/addEventListener.js");
var _ownerDocument = require("@instructure/ui-dom-utils/lib/ownerDocument.js");
var _containsActiveElement = require("@instructure/ui-dom-utils/lib/containsActiveElement.js");
var _requestAnimationFrame = require("@instructure/ui-dom-utils/lib/requestAnimationFrame.js");
var _console = require("@instructure/console");

@@ -73,4 +81,4 @@ var _keycode = _interopRequireDefault(require("keycode"));

// after, seems fine.
this._raf.push((0, _uiDomUtils.requestAnimationFrame)(() => {
if ((0, _uiDomUtils.containsActiveElement)(this._contextElement)) {
this._raf.push((0, _requestAnimationFrame.requestAnimationFrame)(() => {
if ((0, _containsActiveElement.containsActiveElement)(this._contextElement)) {
return;

@@ -94,3 +102,3 @@ }

};
this._contextElement = (0, _uiDomUtils.findDOMNode)(element);
this._contextElement = (0, _findDOMNode.findDOMNode)(element);
this._options = options || {

@@ -102,7 +110,7 @@ shouldContainFocus: true,

if (this._options.shouldReturnFocus) {
this._focusLaterElement = (0, _uiDomUtils.getActiveElement)(this.doc);
this._focusLaterElement = (0, _getActiveElement.getActiveElement)(this.doc);
}
}
get focused() {
return (0, _uiDomUtils.containsActiveElement)(this._contextElement);
return (0, _containsActiveElement.containsActiveElement)(this._contextElement);
}

@@ -114,6 +122,6 @@ get shouldContainFocus() {

get focusable() {
return (0, _uiDomUtils.findFocusable)(this._contextElement, () => true, true) || [];
return (0, _findFocusable.findFocusable)(this._contextElement, () => true, true) || [];
}
get tabbable() {
return (0, _uiDomUtils.findTabbable)(this._contextElement) || [];
return (0, _findTabbable.findTabbable)(this._contextElement) || [];
}

@@ -133,10 +141,10 @@ get firstTabbable() {

get doc() {
return (0, _uiDomUtils.ownerDocument)(this._contextElement);
return (0, _ownerDocument.ownerDocument)(this._contextElement);
}
get win() {
return (0, _uiDomUtils.ownerWindow)(this._contextElement);
return (0, _ownerWindow.ownerWindow)(this._contextElement);
}
get defaultFocusElement() {
const defaultFocusElement = this._options.defaultFocusElement;
const element = (0, _uiDomUtils.findDOMNode)(typeof defaultFocusElement === 'function' ? defaultFocusElement() : defaultFocusElement);
const element = (0, _findDOMNode.findDOMNode)(typeof defaultFocusElement === 'function' ? defaultFocusElement() : defaultFocusElement);
if (element && this._contextElement && this._contextElement.contains(element)) {

@@ -154,3 +162,3 @@ return element;

updateElement(element) {
this._contextElement = (0, _uiDomUtils.findDOMNode)(element);
this._contextElement = (0, _findDOMNode.findDOMNode)(element);
}

@@ -169,3 +177,3 @@ focusDefaultElement() {

// Blur the active element to place focus on the document body
(0, _uiDomUtils.getActiveElement)(this.doc) && (0, _uiDomUtils.getActiveElement)(this.doc).blur();
(0, _getActiveElement.getActiveElement)(this.doc) && (0, _getActiveElement.getActiveElement)(this.doc).blur();
(0, _console.logError)(true, `

@@ -195,3 +203,3 @@ [KeyboardFocusRegion] No \`defaultFocusElement\` was provided and

} else {
this._raf.push((0, _uiDomUtils.requestAnimationFrame)(() => {
this._raf.push((0, _requestAnimationFrame.requestAnimationFrame)(() => {
this.tryFocusOnPositionedElement(positionContainer, focusElement, tries - 1);

@@ -205,3 +213,3 @@ }));

}
this._raf.push((0, _uiDomUtils.requestAnimationFrame)(() => {
this._raf.push((0, _requestAnimationFrame.requestAnimationFrame)(() => {
this.focusDefaultElement();

@@ -230,10 +238,10 @@ }));

if (shouldContainFocus) {
this._listeners.push((0, _uiDomUtils.addEventListener)(this.doc, 'keydown', this.handleKeyDown));
this._listeners.push((0, _addEventListener.addEventListener)(this.doc, 'keydown', this.handleKeyDown));
} else {
this._listeners.push((0, _uiDomUtils.addEventListener)(this.firstTabbable || defaultFocusElement, 'keydown', this.handleFirstTabbableKeyDown));
this._listeners.push((0, _uiDomUtils.addEventListener)(this.lastTabbable || defaultFocusElement, 'keydown', this.handleLastTabbableKeyDown));
this._listeners.push((0, _addEventListener.addEventListener)(this.firstTabbable || defaultFocusElement, 'keydown', this.handleFirstTabbableKeyDown));
this._listeners.push((0, _addEventListener.addEventListener)(this.lastTabbable || defaultFocusElement, 'keydown', this.handleLastTabbableKeyDown));
}
this._listeners.push((0, _uiDomUtils.addEventListener)(this.doc, 'click', this.handleClick, true));
this._listeners.push((0, _uiDomUtils.addEventListener)(this.win, 'blur', this.handleWindowBlur, false));
this._listeners.push((0, _uiDomUtils.addEventListener)(this.doc, 'focus', this.handleFocus, true));
this._listeners.push((0, _addEventListener.addEventListener)(this.doc, 'click', this.handleClick, true));
this._listeners.push((0, _addEventListener.addEventListener)(this.win, 'blur', this.handleWindowBlur, false));
this._listeners.push((0, _addEventListener.addEventListener)(this.doc, 'focus', this.handleFocus, true));
this._active = true;

@@ -240,0 +248,0 @@ }

20

lib/scopeTab.js

@@ -8,3 +8,7 @@ "use strict";

exports.scopeTab = scopeTab;
var _uiDomUtils = require("@instructure/ui-dom-utils");
var _findDOMNode = require("@instructure/ui-dom-utils/lib/findDOMNode.js");
var _findTabbable = require("@instructure/ui-dom-utils/lib/findTabbable.js");
var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
var _containsActiveElement = require("@instructure/ui-dom-utils/lib/containsActiveElement.js");
var _getActiveElement = require("@instructure/ui-dom-utils/lib/getActiveElement.js");
/*

@@ -35,4 +39,4 @@ * The MIT License (MIT)

function scopeTab(element, event, onLeavingFinalTabbable) {
const node = (0, _uiDomUtils.findDOMNode)(element);
const tabbable = (0, _uiDomUtils.findTabbable)(node);
const node = (0, _findDOMNode.findDOMNode)(element);
const tabbable = (0, _findTabbable.findTabbable)(node);
if (!tabbable.length) {

@@ -45,4 +49,4 @@ event.preventDefault();

// (a case that happens with Menu for KO a11y)
if ((0, _uiDomUtils.containsActiveElement)(element)) {
const activeElement = (0, _uiDomUtils.getActiveElement)();
if ((0, _containsActiveElement.containsActiveElement)(element)) {
const activeElement = (0, _getActiveElement.getActiveElement)();
if (activeElement && tabbable.indexOf(activeElement) === -1) {

@@ -53,7 +57,7 @@ tabbable.push(activeElement);

const finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];
const leavingFinalTabbable = (0, _uiDomUtils.isActiveElement)(finalTabbable) ||
const leavingFinalTabbable = (0, _isActiveElement.isActiveElement)(finalTabbable) ||
// handle immediate shift+tab after opening with mouse
(0, _uiDomUtils.isActiveElement)(node) ||
(0, _isActiveElement.isActiveElement)(node) ||
// already left final tabbable
!(0, _uiDomUtils.containsActiveElement)(element);
!(0, _containsActiveElement.containsActiveElement)(element);
if (!leavingFinalTabbable) return;

@@ -60,0 +64,0 @@ if (typeof onLeavingFinalTabbable === 'function') {

20

package.json
{
"name": "@instructure/ui-a11y-utils",
"version": "8.56.5-pr-snapshot-1728655013879",
"version": "8.56.5-pr-snapshot-1729507712924",
"description": "A collection of utilities for managing focus and screen reader behavior",

@@ -26,8 +26,8 @@ "author": "Instructure, Inc. Engineering and Product Design",

"@babel/runtime": "^7.23.2",
"@instructure/console": "8.56.5-pr-snapshot-1728655013879",
"@instructure/ui-a11y-content": "8.56.5-pr-snapshot-1728655013879",
"@instructure/ui-dom-utils": "8.56.5-pr-snapshot-1728655013879",
"@instructure/ui-react-utils": "8.56.5-pr-snapshot-1728655013879",
"@instructure/ui-testable": "8.56.5-pr-snapshot-1728655013879",
"@instructure/uid": "8.56.5-pr-snapshot-1728655013879",
"@instructure/console": "8.56.5-pr-snapshot-1729507712924",
"@instructure/ui-a11y-content": "8.56.5-pr-snapshot-1729507712924",
"@instructure/ui-dom-utils": "8.56.5-pr-snapshot-1729507712924",
"@instructure/ui-react-utils": "8.56.5-pr-snapshot-1729507712924",
"@instructure/ui-testable": "8.56.5-pr-snapshot-1729507712924",
"@instructure/uid": "8.56.5-pr-snapshot-1729507712924",
"keycode": "^2.2.1",

@@ -37,5 +37,5 @@ "prop-types": "^15.8.1"

"devDependencies": {
"@instructure/ui-babel-preset": "8.56.5-pr-snapshot-1728655013879",
"@instructure/ui-color-utils": "8.56.5-pr-snapshot-1728655013879",
"@instructure/ui-test-utils": "8.56.5-pr-snapshot-1728655013879"
"@instructure/ui-babel-preset": "8.56.5-pr-snapshot-1729507712924",
"@instructure/ui-color-utils": "8.56.5-pr-snapshot-1729507712924",
"@instructure/ui-test-utils": "8.56.5-pr-snapshot-1729507712924"
},

@@ -42,0 +42,0 @@ "peerDependencies": {

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc