diff --git a/packages/components/src/navigable-container/container.tsx b/packages/components/src/navigable-container/container.tsx index c5f92f8effcad..44e990a6e4a19 100644 --- a/packages/components/src/navigable-container/container.tsx +++ b/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 ) { diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx index bd240ef9ac04b..be5c4bfaf41ec 100644 --- a/packages/components/src/navigator/navigator-screen/component.tsx +++ b/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; } diff --git a/packages/compose/src/hooks/use-constrained-tabbing/index.js b/packages/compose/src/hooks/use-constrained-tabbing/index.js index 94e0080b211cd..b9aca94222db6 100644 --- a/packages/compose/src/hooks/use-constrained-tabbing/index.js +++ b/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; } diff --git a/packages/compose/src/hooks/use-focus-on-mount/index.js b/packages/compose/src/hooks/use-focus-on-mount/index.js index c5176b17e9cea..00b5cd50f0b58 100644 --- a/packages/compose/src/hooks/use-focus-on-mount/index.js +++ b/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 ); diff --git a/packages/dom/CHANGELOG.md b/packages/dom/CHANGELOG.md index 5c7749c8fb9a3..27f08a230a746 100644 --- a/packages/dom/CHANGELOG.md +++ b/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) diff --git a/packages/dom/src/dom/is-edge.js b/packages/dom/src/dom/is-edge.js index 64df2bc139be5..366c5b8155c8d 100644 --- a/packages/dom/src/dom/is-edge.js +++ b/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; } diff --git a/packages/dom/src/focusable.js b/packages/dom/src/focusable.js index 373dc54522cde..ed0326fd26413 100644 --- a/packages/dom/src/focusable.js +++ b/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} */ - /* eslint-enable jsdoc/no-undefined-types */ const elements = context.querySelectorAll( buildSelector( sequential ) ); return Array.from( elements ).filter( ( element ) => { diff --git a/packages/dom/src/tabbable.js b/packages/dom/src/tabbable.js index 25bc81f215458..2944715042324 100644 --- a/packages/dom/src/tabbable.js +++ b/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 ); }