@wordpress/dom 3.2.2-next.5df0cd52b7.0 → 3.2.5

package/src/focusable.js

@@ -17,19 +17,32 @@
  *  - https://w3c.github.io/html/editing.html#data-model
  */
 
-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
@@ -47,21 +60,6 @@ function isVisible( element ) {
 	);
 }
 
-/**
- * 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
  * false otherwise. Area is only focusable if within a map where a named map
@@ -88,18 +86,25 @@ function isValidFocusableArea( element ) {
 /**
  * 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 ) {
+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;
 		}
 

package/src/phrasing-content.js

@@ -32,7 +32,7 @@ const textContentSchema = {
 	s: {},
 	del: {},
 	ins: {},
-	a: { attributes: [ 'href', 'target', 'rel' ] },
+	a: { attributes: [ 'href', 'target', 'rel', 'id' ] },
 	code: {},
 	abbr: { attributes: [ 'title' ] },
 	sub: {},

package/src/tabbable.js

@@ -181,10 +181,8 @@ export function findNext( element ) {
 	const focusables = findFocusable( element.ownerDocument.body );
 	const index = focusables.indexOf( element );
 
-	// 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 ) );
 }

package/src/test/dom.js

@@ -84,6 +84,14 @@ describe( 'DOM', () => {
 			expect( isHorizontalEdge( div, true ) ).toBe( true );
 			expect( isHorizontalEdge( div, false ) ).toBe( true );
 		} );
+
+		it( 'should return true for input types that do not have selection ranges', () => {
+			const input = document.createElement( 'input' );
+			input.setAttribute( 'type', 'checkbox' );
+			parent.appendChild( input );
+			expect( isHorizontalEdge( input, true ) ).toBe( true );
+			expect( isHorizontalEdge( input, false ) ).toBe( true );
+		} );
 	} );
 
 	describe( 'placeCaretAtHorizontalEdge', () => {