Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

export focusable element selector #7117

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from
Open

export focusable element selector #7117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8c2d2a6
export focusable element selector
bvandercar-vt Dec 9, 2024
106e880
update jsdoc
bvandercar-vt Dec 9, 2024
6a0a2b4
format fix
bvandercar-vt Dec 9, 2024
bd14efe
Merge branch 'develop' into bvandercar/export-focusable-element-selector
bvandercar-vt Jan 6, 2025
7c04025
refactor: export function not constant
bvandercar-vt Jan 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions packages/core/src/common/utils/domUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,3 +158,34 @@ export function clickElementOnKeyPress(keys: string[]) {
}
};
}

/**
* Selector for all possible focusable items.
*
* Derived from this SO question: {@link https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus}
*
* Note: Order may not be correct if children elements use tabindex values > 0.
*/
const SELECTOR_FOCUSABLE = [
'a[href]:not([tabindex="-1"])',
'button:not([disabled]):not([tabindex="-1"])',
'details:not([tabindex="-1"])',
'input:not([disabled]):not([tabindex="-1"])',
'select:not([disabled]):not([tabindex="-1"])',
'textarea:not([disabled]):not([tabindex="-1"])',
'[tabindex]:not([tabindex="-1"])',
].join(",");
ggdouglas marked this conversation as resolved.
Show resolved Hide resolved

/**
* Gets all focusable elements within the given element.
*
* Selector derived from this SO question: {@link https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus}
*
* Note: Order may not be correct if children elements use tabindex values > 0.
*
* @param {HTMLElement} element - The element to search within.
* @returns {HTMLElement[]} An array of focusable elements.
*/
export function getFocusableElements(element: HTMLElement): HTMLElement[] {
return Array.from(element.querySelectorAll(SELECTOR_FOCUSABLE));
}
1 change: 1 addition & 0 deletions packages/core/src/common/utils/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export {
elementIsOrContains,
elementIsTextInput,
getActiveElement,
getFocusableElements,
throttle,
throttleEvent,
throttleReactEventCallback,
Expand Down
20 changes: 4 additions & 16 deletions packages/core/src/components/overlay/overlayUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,31 +16,19 @@

import { OVERLAY_END_FOCUS_TRAP, OVERLAY_START_FOCUS_TRAP } from "../../common/classes";
import { getRef } from "../../common/refs";
import { getFocusableElements } from "../../common/utils/domUtils";

/**
* Returns the keyboard-focusable elements inside a given container element, ignoring focus traps
* rendered by Overlay/Overlay2.
*/
export function getKeyboardFocusableElements(container: HTMLElement | React.RefObject<HTMLElement>): HTMLElement[] {
const containerElement = getRef(container);

const focusableElements =
containerElement != null
? Array.from(
// Order may not be correct if children elements use tabindex values > 0.
// Selectors derived from this SO question:
// https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus
containerElement.querySelectorAll<HTMLElement>(
[
'a[href]:not([tabindex="-1"])',
'button:not([disabled]):not([tabindex="-1"])',
'details:not([tabindex="-1"])',
'input:not([disabled]):not([tabindex="-1"])',
'select:not([disabled]):not([tabindex="-1"])',
'textarea:not([disabled]):not([tabindex="-1"])',
'[tabindex]:not([tabindex="-1"])',
].join(","),
),
)
? // Note: Order may not be correct if children elements use tabindex values > 0.
getFocusableElements(containerElement)
: [];

return focusableElements.filter(
Expand Down
6 changes: 1 addition & 5 deletions packages/datetime/src/components/date-input/dateInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -732,11 +732,7 @@ function getKeyboardFocusableElements(popoverContentRef: React.MutableRefObject<
return [];
}

const elements = Array.from(
popoverContentRef.current.querySelectorAll<HTMLElement>(
"button:not([disabled]),input,[tabindex]:not([tabindex='-1'])",
),
);
const elements = Utils.getFocusableElements(popoverContentRef.current);
// Remove focus boundary div elements
elements.pop();
elements.shift();
Expand Down
6 changes: 1 addition & 5 deletions packages/datetime2/src/components/date-input3/dateInput3.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -611,11 +611,7 @@ function getKeyboardFocusableElements(popoverContentRef: React.MutableRefObject<
return [];
}

const elements = Array.from(
popoverContentRef.current.querySelectorAll<HTMLElement>(
"button:not([disabled]),input,[tabindex]:not([tabindex='-1'])",
),
);
const elements = Utils.getFocusableElements(popoverContentRef.current);
// Remove focus boundary div elements
elements.pop();
elements.shift();
Expand Down