Reference generated from the custom elements manifest — 2 properties, 1 slots, 0 events.
PLAYGROUND1 CONTROL
PREVIEW / al-focus-trap / ALTITUDE
Loading preview
CancelContinue
FLAGS
CODE — HTML / REACT
Guidance
NOT YET AUTHORED · 20 COMPONENTS COVERED
NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.
FIGMA PARITYALTITUDE DESIGN SYSTEM
NOT IN FIGMAAltitude Design System
This component exists in code and has no Figma component set.
DECIDED BY
NEVER SYNCED
FIGMA SIDE
NEVER OBSERVED
LAST CONFIRMED SYNC
NEVER
PUBLIC SURFACE
2 ATTR · 1 SLOT · 0 EVENT · 0 PART
The two sides have never been confirmed equal, so there is no baseline to compare against.
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEfocus-trap--DefaultPASS
Advanced statesAXE1 further storyPASS
Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED
Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 2 STORIES.
import '@southleft/al-web-components/components/focus-trap';
import { ALFocusTrap } from '@southleft/al-react';
API — 2 PROPS2 DOCUMENTED
PROPTYPEDEFAULT
isActivebooleanIs the focus trap active?—
transitionDelaynumberDelay in milliseconds before the focus trap is activated.
- Can be set by the component using focus trap, when there is a css transition that needs to complete before the focus trap activates.0
SLOTS1
SLOTDESCRIPTION
(default)The content to trap in the focus trap
EVENTS0
THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.
PUBLIC METHODS3
METHODDESCRIPTION
handleOnKeydown()Wrap Tab / Shift+Tab at the live edges of the trap. 1. Recompute the focusable set on *every* Tab, so it is never stale 2. Keep the public first/last properties in sync for consumers 3. Wrap when focus is at (or has somehow left) an edge
applyFocusTrap()Place initial focus when the trap opens. 1. Query all focusable elements within the focus trap, including those nested within the shadow DOM. 2. If there are no focusable elements, make the slotted content itself focusable and use it. 3. Record the current edges (Tab recomputes them; these are for consumers). 4. Prefer the selected item, then the first focusable element. 5. Send focus to the initial focus element.
removeFocusTrap()Release the trap. - The keydown listener lives on this element for its whole lifetime, so there is nothing to detach; `isActive` gates it.