@material/dom
Version:
DOM manipulation utilities for Material Components for the web
67 lines (66 loc) • 2.77 kB
TypeScript
/**
* @license
* Copyright 2020 Google Inc.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
/**
* Utility to trap focus in a given root element, e.g. for modal components such
* as dialogs. The root should have at least one focusable child element,
* for setting initial focus when trapping focus.
* Also tracks the previously focused element, and restores focus to that
* element when releasing focus.
*/
export declare class FocusTrap {
private readonly root;
private readonly options;
private elFocusedBeforeTrapFocus;
constructor(root: HTMLElement, options?: FocusOptions);
/**
* Traps focus in `root`. Also focuses on either `initialFocusEl` if set;
* otherwises sets initial focus to the first focusable child element.
*/
trapFocus(): void;
/**
* Releases focus from `root`. Also restores focus to the previously focused
* element.
*/
releaseFocus(): void;
/**
* Wraps tab focus within `el` by adding two hidden sentinel divs which are
* used to mark the beginning and the end of the tabbable region. When
* focused, these sentinel elements redirect focus to the first/last
* children elements of the tabbable region, ensuring that focus is trapped
* within that region.
*/
private wrapTabFocus;
/**
* Focuses on `initialFocusEl` if defined and a child of the root element.
* Otherwise, focuses on the first focusable child element of the root.
*/
private focusInitialElement;
private getFocusableElements;
private createSentinel;
}
/** Customization options. */
export interface FocusOptions {
initialFocusEl?: HTMLElement;
skipInitialFocus?: boolean;
skipRestoreFocus?: boolean;
}