DOM: fix return types of focus.tabbable methods (WordPress#60274)

Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>

packages/components/src/navigable-container/container.tsx

@@ -79,7 +79,7 @@ class NavigableContainer extends Component< NavigableContainerProps > {
 
 		const { onlyBrowserTabstops } = this.props;
 		const finder = onlyBrowserTabstops ? focus.tabbable : focus.focusable;
-		const focusables = finder.find( this.container ) as HTMLElement[];
+		const focusables = finder.find( this.container );
 
 		const index = this.getFocusableIndex( focusables, target );
 		if ( index > -1 && target ) {

packages/components/src/navigator/navigator-screen/component.tsx

@@ -115,9 +115,7 @@ function UnconnectedNavigatorScreen(
 		// If the previous query didn't run or find any element to focus, fallback
 		// to the first tabbable element in the screen (or the screen itself).
 		if ( ! elementToFocus ) {
-			const firstTabbable = (
-				focus.tabbable.find( wrapperRef.current ) as HTMLElement[]
-			 )[ 0 ];
+			const [ firstTabbable ] = focus.tabbable.find( wrapperRef.current );
 			elementToFocus = firstTabbable ?? wrapperRef.current;
 		}
 

packages/compose/src/hooks/use-constrained-tabbing/index.js

@@ -54,7 +54,7 @@ function useConstrainedTabbing() {
 				/** @type {HTMLElement} */ ( target ).contains( nextElement )
 			) {
 				event.preventDefault();
-				/** @type {HTMLElement} */ ( nextElement )?.focus();
+				nextElement?.focus();
 				return;
 			}
 

packages/compose/src/hooks/use-focus-on-mount/index.js

@@ -72,7 +72,7 @@ export default function useFocusOnMount( focusOnMount = 'firstElement' ) {
 				const firstTabbable = focus.tabbable.find( node )[ 0 ];
 
 				if ( firstTabbable ) {
-					setFocus( /** @type {HTMLElement} */ ( firstTabbable ) );
+					setFocus( firstTabbable );
 				}
 			}, 0 );
 

packages/dom/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- fix return types of `focus.tabbable` methods to be `HTMLElement` instead of `Element`.
+
 ## 3.54.0 (2024-03-21)
 
 ## 3.53.0 (2024-03-06)

packages/dom/src/dom/is-edge.js

@@ -37,7 +37,7 @@ export default function isEdge( container, isReverse, onlyVertical = false ) {
 		return container.value.length === container.selectionStart;
 	}
 
-	if ( ! ( /** @type {HTMLElement} */ ( container ).isContentEditable ) ) {
+	if ( ! container.isContentEditable ) {
 		return true;
 	}
 

packages/dom/src/focusable.js

@@ -98,9 +98,7 @@ function isValidFocusableArea( element ) {
  * @return {HTMLElement[]} Focusable elements.
  */
 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( buildSelector( sequential ) );
 
 	return Array.from( elements ).filter( ( element ) => {

packages/dom/src/tabbable.js

@@ -31,7 +31,7 @@ export function isTabbableIndex( element ) {
 	return getTabIndex( element ) !== -1;
 }
 
-/** @typedef {Element & { type?: string, checked?: boolean, name?: string }} MaybeHTMLInputElement */
+/** @typedef {HTMLElement & { type?: string, checked?: boolean, name?: string }} MaybeHTMLInputElement */
 
 /**
  * Returns a stateful reducer function which constructs a filtered array of
@@ -84,10 +84,10 @@ function createStatefulCollapseRadioGroup() {
  * sort where equal tabIndex should be left in order of their occurrence in the
  * document.
  *
- * @param {Element} element Element.
- * @param {number}  index   Array index of element.
+ * @param {HTMLElement} element Element.
+ * @param {number}      index   Array index of element.
  *
- * @return {{ element: Element, index: number }} Mapped object with element, index.
+ * @return {{ element: HTMLElement, index: number }} Mapped object with element, index.
  */
 function mapElementToObjectTabbable( element, index ) {
 	return { element, index };
@@ -97,9 +97,9 @@ function mapElementToObjectTabbable( element, index ) {
  * An array map callback, returning an element of the given mapped object's
  * element value.
  *
- * @param {{ element: Element }} object Mapped object with element.
+ * @param {{ element: HTMLElement }} object Mapped object with element.
  *
- * @return {Element} Mapped object element.
+ * @return {HTMLElement} Mapped object element.
  */
 function mapObjectTabbableToElement( object ) {
 	return object.element;
@@ -110,8 +110,8 @@ function mapObjectTabbableToElement( object ) {
  *
  * @see mapElementToObjectTabbable
  *
- * @param {{ element: Element, index: number }} a First object to compare.
- * @param {{ element: Element, index: number }} b Second object to compare.
+ * @param {{ element: HTMLElement, index: number }} a First object to compare.
+ * @param {{ element: HTMLElement, index: number }} b Second object to compare.
  *
  * @return {number} Comparator result.
  */
@@ -129,9 +129,9 @@ function compareObjectTabbables( a, b ) {
 /**
  * Givin focusable elements, filters out tabbable element.
  *
- * @param {Element[]} focusables Focusable elements to filter.
+ * @param {HTMLElement[]} focusables Focusable elements to filter.
  *
- * @return {Element[]} Tabbable elements.
+ * @return {HTMLElement[]} Tabbable elements.
  */
 function filterTabbable( focusables ) {
 	return focusables
@@ -144,7 +144,7 @@ function filterTabbable( focusables ) {
 
 /**
  * @param {Element} context
- * @return {Element[]} Tabbable elements within the context.
+ * @return {HTMLElement[]} Tabbable elements within the context.
  */
 export function find( context ) {
 	return filterTabbable( findFocusable( context ) );
@@ -156,18 +156,17 @@ export function find( context ) {
  * @param {Element} element The focusable element before which to look. Defaults
  *                          to the active element.
  *
- * @return {Element|undefined} Preceding tabbable element.
+ * @return {HTMLElement|undefined} Preceding tabbable element.
  */
 export function findPrevious( element ) {
 	return filterTabbable( findFocusable( element.ownerDocument.body ) )
 		.reverse()
-		.find( ( focusable ) => {
-			return (
+		.find(
+			( focusable ) =>
 				// eslint-disable-next-line no-bitwise
 				element.compareDocumentPosition( focusable ) &
 				element.DOCUMENT_POSITION_PRECEDING
-			);
-		} );
+		);
 }
 
 /**
@@ -176,16 +175,13 @@ export function findPrevious( element ) {
  * @param {Element} element The focusable element after which to look. Defaults
  *                          to the active element.
  *
- * @return {Element|undefined} Next tabbable element.
+ * @return {HTMLElement|undefined} Next tabbable element.
  */
 export function findNext( element ) {
 	return filterTabbable( findFocusable( element.ownerDocument.body ) ).find(
-		( focusable ) => {
-			return (
-				// eslint-disable-next-line no-bitwise
-				element.compareDocumentPosition( focusable ) &
-				element.DOCUMENT_POSITION_FOLLOWING
-			);
-		}
+		( focusable ) =>
+			// eslint-disable-next-line no-bitwise
+			element.compareDocumentPosition( focusable ) &
+			element.DOCUMENT_POSITION_FOLLOWING
 	);
 }