MCPcopy Index your code
hub / github.com/ionic-team/ionic-framework / trapKeyboardFocus

Function trapKeyboardFocus

core/src/utils/overlays.ts:186–374  ·  view source on GitHub ↗
(ev: Event, doc: Document)

Source from the content-addressed store, hash-verified

184 * Should NOT include: Toast
185 */
186const trapKeyboardFocus = (ev: Event, doc: Document) => {
187 const lastOverlay = getPresentedOverlay(
188 doc,
189 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover'
190 );
191 const target = ev.target as HTMLElement | null;
192
193 /**
194 * If no active overlay, ignore this event.
195 *
196 * If this component uses the shadow dom,
197 * this global listener is pointless
198 * since it will not catch the focus
199 * traps as they are inside the shadow root.
200 * We need to add a listener to the shadow root
201 * itself to ensure the focus trap works.
202 */
203 if (!lastOverlay || !target) {
204 return;
205 }
206
207 /**
208 * If the ion-disable-focus-trap class
209 * is present on an overlay, then this component
210 * instance has opted out of focus trapping.
211 * An example of this is when the sheet modal
212 * has a backdrop that is disabled. The content
213 * behind the sheet should be focusable until
214 * the backdrop is enabled.
215 */
216 if (lastOverlay.classList.contains(FOCUS_TRAP_DISABLE_CLASS)) {
217 return;
218 }
219
220 const trapScopedFocus = () => {
221 /**
222 * If we are focusing the overlay, clear
223 * the last focused element so that hitting
224 * tab activates the first focusable element
225 * in the overlay wrapper.
226 */
227 if (lastOverlay === target) {
228 lastOverlay.lastFocus = undefined;
229 /**
230 * Toasts can be presented from an overlay.
231 * However, focus should still be returned to
232 * the overlay when clicking a toast. Normally,
233 * focus would be returned to the last focusable
234 * descendant in the overlay which may not always be
235 * the button that the toast was presented from. In this case,
236 * the focus may be returned to an unexpected element.
237 * To account for this, we make sure to return focus to the
238 * last focused element in the overlay if focus is
239 * moved to the toast.
240 */
241 } else if (target.tagName === 'ION-TOAST') {
242 focusElementInOverlay(lastOverlay.lastFocus, lastOverlay);
243

Callers 1

connectListenersFunction · 0.85

Calls 3

getPresentedOverlayFunction · 0.85
trapShadowFocusFunction · 0.85
trapScopedFocusFunction · 0.85

Tested by

no test coverage detected