@wordpress/dom - npm Package Compare versions

Comparing version 3.2.4 to 3.2.5

build-module/focusable.js

@@ -19,4 +19,18 @@ /**
  */
-const SELECTOR = ['[tabindex]', 'a[href]', 'button:not([disabled])', 'input:not([type="hidden"]):not([disabled])', 'select:not([disabled])', 'textarea:not([disabled])', 'iframe', 'object', 'embed', 'area[href]', '[contenteditable]:not([contenteditable=false])'].join(',');
+
 /**
+ * Returns a CSS selector used to query for focusable elements.
+ *
+ * @param {boolean} sequential If set, only query elements that are sequentially
+ *                             focusable. Non-interactive elements with a
+ *                             negative `tabindex` are focusable but not
+ *                             sequentially focusable.
+ *                             https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute
+ *
+ * @return {string} CSS selector.
+ */
+function buildSelector(sequential) {
+  return [sequential ? '[tabindex]:not([tabindex^="-"])' : '[tabindex]', 'a[href]', 'button:not([disabled])', 'input:not([type="hidden"]):not([disabled])', 'select:not([disabled])', 'textarea:not([disabled])', 'iframe:not([tabindex^="-"])', 'object', 'embed', 'area[href]', '[contenteditable]:not([contenteditable=false])'].join(',');
+}
+/**
  * Returns true if the specified element is visible (i.e. neither display: none
@@ -30,2 +44,3 @@ * nor visibility: hidden).
 
+
 function isVisible(element) {
@@ -35,15 +50,2 @@ return element.offsetWidth > 0 || element.offsetHeight > 0 || element.getClientRects().length > 0;
 /**
- * Returns true if the specified element should be skipped from focusable elements.
- * For now it rather specific for `iframes` and  if tabindex attribute is set to -1.
- *
- * @param {Element} element DOM element to test.
- *
- * @return {boolean} Whether element should be skipped from focusable elements.
- */
-
-
-function skipFocus(element) {
-  return element.nodeName.toLowerCase() === 'iframe' && element.getAttribute('tabindex') === '-1';
-}
-/**
  * Returns true if the specified area element is a valid focusable element, or
@@ -75,3 +77,10 @@ * false otherwise. Area is only focusable if within a map where a named map
  *
- * @param {Element} context Element in which to search.
+ * @param {Element} context              Element in which to search.
+ * @param {Object}  [options]
+ * @param {boolean} [options.sequential] If set, only return elements that are
+ *                                       sequentially focusable.
+ *                                       Non-interactive elements with a
+ *                                       negative `tabindex` are focusable but
+ *                                       not sequentially focusable.
+ *                                       https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute
  *
@@ -82,3 +91,5 @@ * @return {Element[]} Focusable elements.
 
-export function find(context) {
+export function find(context, {
+  sequential = false
+} = {}) {
   /* eslint-disable jsdoc/no-undefined-types */
@@ -89,5 +100,5 @@
   /* eslint-enable jsdoc/no-undefined-types */
-  const elements = context.querySelectorAll(SELECTOR);
+  const elements = context.querySelectorAll(buildSelector(sequential));
   return Array.from(elements).filter(element => {
-    if (!isVisible(element) || skipFocus(element)) {
+    if (!isVisible(element)) {
       return false;
@@ -94,0 +105,0 @@ }

build-module/tabbable.js

@@ -187,7 +187,7 @@ /**
   const focusables = findFocusable(element.ownerDocument.body);
-  const index = focusables.indexOf(element); // Remove all focusables before and inside `element`.
+  const index = focusables.indexOf(element); // Remove all focusables before and including `element`.
 
-  const remaining = focusables.slice(index + 1).filter(node => !element.contains(node));
+  const remaining = focusables.slice(index + 1);
   return first(filterTabbable(remaining));
 }
 //# sourceMappingURL=tabbable.js.map

build-types/focusable.d.ts

 /**
  * Returns all focusable elements within a given context.
  *
- * @param {Element} context Element in which to search.
+ * @param {Element} context              Element in which to search.
+ * @param {Object}  [options]
+ * @param {boolean} [options.sequential] If set, only return elements that are
+ *                                       sequentially focusable.
+ *                                       Non-interactive elements with a
+ *                                       negative `tabindex` are focusable but
+ *                                       not sequentially focusable.
+ *                                       https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute
  *
  * @return {Element[]} Focusable elements.
  */
-export function find(context: Element): Element[];
+export function find(context: Element, { sequential }?: {
+    sequential?: boolean | undefined;
+} | undefined): Element[];
 //# sourceMappingURL=focusable.d.ts.map

build/focusable.js

@@ -26,4 +26,18 @@ "use strict";
  */
-const SELECTOR = ['[tabindex]', 'a[href]', 'button:not([disabled])', 'input:not([type="hidden"]):not([disabled])', 'select:not([disabled])', 'textarea:not([disabled])', 'iframe', 'object', 'embed', 'area[href]', '[contenteditable]:not([contenteditable=false])'].join(',');
+
 /**
+ * Returns a CSS selector used to query for focusable elements.
+ *
+ * @param {boolean} sequential If set, only query elements that are sequentially
+ *                             focusable. Non-interactive elements with a
+ *                             negative `tabindex` are focusable but not
+ *                             sequentially focusable.
+ *                             https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute
+ *
+ * @return {string} CSS selector.
+ */
+function buildSelector(sequential) {
+  return [sequential ? '[tabindex]:not([tabindex^="-"])' : '[tabindex]', 'a[href]', 'button:not([disabled])', 'input:not([type="hidden"]):not([disabled])', 'select:not([disabled])', 'textarea:not([disabled])', 'iframe:not([tabindex^="-"])', 'object', 'embed', 'area[href]', '[contenteditable]:not([contenteditable=false])'].join(',');
+}
+/**
  * Returns true if the specified element is visible (i.e. neither display: none
@@ -37,2 +51,3 @@ * nor visibility: hidden).
 
+
 function isVisible(element) {
@@ -42,15 +57,2 @@ return element.offsetWidth > 0 || element.offsetHeight > 0 || element.getClientRects().length > 0;
 /**
- * Returns true if the specified element should be skipped from focusable elements.
- * For now it rather specific for `iframes` and  if tabindex attribute is set to -1.
- *
- * @param {Element} element DOM element to test.
- *
- * @return {boolean} Whether element should be skipped from focusable elements.
- */
-
-
-function skipFocus(element) {
-  return element.nodeName.toLowerCase() === 'iframe' && element.getAttribute('tabindex') === '-1';
-}
-/**
  * Returns true if the specified area element is a valid focusable element, or
@@ -82,3 +84,10 @@ * false otherwise. Area is only focusable if within a map where a named map
  *
- * @param {Element} context Element in which to search.
+ * @param {Element} context              Element in which to search.
+ * @param {Object}  [options]
+ * @param {boolean} [options.sequential] If set, only return elements that are
+ *                                       sequentially focusable.
+ *                                       Non-interactive elements with a
+ *                                       negative `tabindex` are focusable but
+ *                                       not sequentially focusable.
+ *                                       https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute
  *
@@ -89,3 +98,5 @@ * @return {Element[]} Focusable elements.
 
-function find(context) {
+function find(context, {
+  sequential = false
+} = {}) {
   /* eslint-disable jsdoc/no-undefined-types */
@@ -96,5 +107,5 @@
   /* eslint-enable jsdoc/no-undefined-types */
-  const elements = context.querySelectorAll(SELECTOR);
+  const elements = context.querySelectorAll(buildSelector(sequential));
   return Array.from(elements).filter(element => {
-    if (!isVisible(element) || skipFocus(element)) {
+    if (!isVisible(element)) {
       return false;
@@ -101,0 +112,0 @@ }

build/tabbable.js

@@ -202,7 +202,7 @@ "use strict";
   const focusables = (0, _focusable.find)(element.ownerDocument.body);
-  const index = focusables.indexOf(element); // Remove all focusables before and inside `element`.
+  const index = focusables.indexOf(element); // Remove all focusables before and including `element`.
 
-  const remaining = focusables.slice(index + 1).filter(node => !element.contains(node));
+  const remaining = focusables.slice(index + 1);
   return (0, _lodash.first)(filterTabbable(remaining));
 }
 //# sourceMappingURL=tabbable.js.map

package.json

 {
 	"name": "@wordpress/dom",
-	"version": "3.2.4",
+	"version": "3.2.5",
 	"description": "DOM utilities module for WordPress.",
@@ -37,3 +37,3 @@ "author": "The WordPress Contributors",
 	},
-	"gitHead": "8f7f052bc04e3f4eb50f479ced14be1489b9fa79"
+	"gitHead": "157f4ae53ab98e574af01f72213ae5a9613159ff"
 }

src/focusable.js

@@ -20,15 +20,28 @@ /**
 
-const SELECTOR = [
-	'[tabindex]',
-	'a[href]',
-	'button:not([disabled])',
-	'input:not([type="hidden"]):not([disabled])',
-	'select:not([disabled])',
-	'textarea:not([disabled])',
-	'iframe',
-	'object',
-	'embed',
-	'area[href]',
-	'[contenteditable]:not([contenteditable=false])',
-].join( ',' );
+/**
+ * Returns a CSS selector used to query for focusable elements.
+ *
+ * @param {boolean} sequential If set, only query elements that are sequentially
+ *                             focusable. Non-interactive elements with a
+ *                             negative `tabindex` are focusable but not
+ *                             sequentially focusable.
+ *                             https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute
+ *
+ * @return {string} CSS selector.
+ */
+function buildSelector( sequential ) {
+	return [
+		sequential ? '[tabindex]:not([tabindex^="-"])' : '[tabindex]',
+		'a[href]',
+		'button:not([disabled])',
+		'input:not([type="hidden"]):not([disabled])',
+		'select:not([disabled])',
+		'textarea:not([disabled])',
+		'iframe:not([tabindex^="-"])',
+		'object',
+		'embed',
+		'area[href]',
+		'[contenteditable]:not([contenteditable=false])',
+	].join( ',' );
+}
 
@@ -52,17 +65,2 @@ /**
 /**
- * Returns true if the specified element should be skipped from focusable elements.
- * For now it rather specific for `iframes` and  if tabindex attribute is set to -1.
- *
- * @param {Element} element DOM element to test.
- *
- * @return {boolean} Whether element should be skipped from focusable elements.
- */
-function skipFocus( element ) {
-	return (
-		element.nodeName.toLowerCase() === 'iframe' &&
-		element.getAttribute( 'tabindex' ) === '-1'
-	);
-}
-
-/**
  * Returns true if the specified area element is a valid focusable element, or
@@ -93,14 +91,21 @@ * false otherwise. Area is only focusable if within a map where a named map
  *
- * @param {Element} context Element in which to search.
+ * @param {Element} context              Element in which to search.
+ * @param {Object}  [options]
+ * @param {boolean} [options.sequential] If set, only return elements that are
+ *                                       sequentially focusable.
+ *                                       Non-interactive elements with a
+ *                                       negative `tabindex` are focusable but
+ *                                       not sequentially focusable.
+ *                                       https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute
  *
  * @return {Element[]} Focusable elements.
  */
-export function find( context ) {
+export function find( context, { sequential = false } = {} ) {
 	/* eslint-disable jsdoc/no-undefined-types */
 	/** @type {NodeListOf<HTMLElement>} */
 	/* eslint-enable jsdoc/no-undefined-types */
-	const elements = context.querySelectorAll( SELECTOR );
+	const elements = context.querySelectorAll( buildSelector( sequential ) );
 
 	return Array.from( elements ).filter( ( element ) => {
-		if ( ! isVisible( element ) || skipFocus( element ) ) {
+		if ( ! isVisible( element ) ) {
 			return false;
@@ -107,0 +112,0 @@ }

src/tabbable.js

@@ -184,8 +184,6 @@ /**
 
-	// Remove all focusables before and inside `element`.
-	const remaining = focusables
-		.slice( index + 1 )
-		.filter( ( node ) => ! element.contains( node ) );
+	// Remove all focusables before and including `element`.
+	const remaining = focusables.slice( index + 1 );
 
 	return first( filterTabbable( remaining ) );
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

511503

increased by0.73%

Lines of code

6543

increased by0.54%

No dependency changes