How to use focus-trap - 10 common examples

To help you get started, we’ve selected a few focus-trap examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github WeTrustPlatform / paramount / src / components / Modal / ModalBase.web.tsx View on Github external
const activateFocus = () => {
      if (elementRef.current && !focusTrapRef.current) {
        // @ts-ignore
        focusTrapRef.current = createFocusTrap(elementRef.current, {
          initialFocus: elementRef.current,
          onDeactivate: () => {
            if (onRequestClose && visible && !isUnmountingRef.current) {
              onRequestClose();
            }
          },
        });

        focusTrapRef.current.activate();
      }
    };
github palmerhq / changecast / widget / src / widget.js View on Github external
iframe.allowFullscreen = true
  iframe.scrolling = 'no'
  iframe.tabIndex = 0
  iframe.setAttribute('role', 'dialog')
  iframe.setAttribute('aria-label', 'ChangeCast Changelog')
  iframe.setAttribute('aria-hidden', true)
  iframe.setAttribute('tabindex', -1)

  // hide overlay and iframe to start
  overlay.className = `${styles.overlay} ${styles.overlayHidden}`
  iframe.className = `${styles.iframe} ${styles.iframeHidden}`

  document.body.appendChild(overlay)
  document.body.appendChild(iframe)

  let focusTrap = createFocusTrap(iframe, {
    initialFocus: iframe,
  })

  // shared state
  let open = false
  let toggleNotifications = new Map()

  function openChangeCast() {
    open = true

    iframe.contentWindow.postMessage('open', '*')

    overlay.className = `${styles.overlay} ${styles.overlayOpen}`
    iframe.className = `${styles.iframe} ${styles.iframeOpen}`
    iframe.setAttribute('aria-hidden', false)
    iframe.removeAttribute('tabindex')
github Automattic / jetpack / _inc / client / components / modal / index.jsx View on Github external
componentDidMount() {
		jQuery( 'body' )
			.addClass( 'dops-modal-showing' )
			.on( 'touchmove.dopsmodal', false );
		jQuery( document ).keyup( this.handleEscapeKey );
		try {
			focusTrap.activate( ReactDOM.findDOMNode( this ), {
				// onDeactivate: this.maybeClose,
				initialFocus: this.props.initialFocus,
			} );
		} catch ( e ) {
			//noop
		}
	}
github SAP / fundamental-ngx / libs / core / src / lib / popover / popover-directive / popover-container.ts View on Github external
private setupFocusTrap(): void {
        if (this.focusTrapped) {
            try {
                this.focusTrap = focusTrap(this.elRef.nativeElement, {
                    clickOutsideDeactivates: true,
                    escapeDeactivates: false,
                    initialFocus: this.elRef.nativeElement
                });
                this.focusTrap.activate();
            } catch (e) {
                console.warn('Attempted to focus trap the popover, but no tabbable elements were found.');
            }
        }
    }
github JetBrains / ring-ui / components / dialog-ng / dialog-ng.js View on Github external
$onInit() {
    const {dialog, dialogInSidebar, $scope} = this.$inject;
    const dialogService = this.inSidebar ? dialogInSidebar : dialog;
    this.focusTrap = createFocusTrap(this.$inject.$element[0], {
      fallbackFocus: '[data-anchor="focus-trap-fallback"]',
      escapeDeactivates: false
    });

    this.dialogService = dialogService;
    this.previousBodyWidth = null;

    $scope.$on('$routeChangeSuccess', this.hide);
    $scope.$on('$routeUpdate', this.hide);
    $scope.$on('$destroy', dialogService.unregister);

    $scope.$watch(() => this.active, () => {
      if (this.active) {
        shortcuts.bindMap(this.getShortcuts(), {
          scope: this.DIALOG_NAMESPACE
        });
github Blazored / Modal / src / Blazored.Modal / Interop / Blazored.Modal.ts View on Github external
public activateFocusTrap(element: any, id: string): void {
        const trap = focusTrap(element, this._options);

        try {
            trap.activate();
            this._traps.push({ id, focusTrap: trap });
        } catch (e) {
            if (e instanceof Error && e.message === 'Your focus-trap needs to have at least one focusable element') {
                console.log('Focus trap not activated - No focusable elements found.');
            }
        }
    }
github SAP / fundamental-ngx / library / src / lib / combobox / combobox.component.ts View on Github external
private setupFocusTrap(): void {
        try {
            this.focusTrap = focusTrap(this.elRef.nativeElement, {
                clickOutsideDeactivates: true,
                returnFocusOnDeactivate: true,
                escapeDeactivates: false
            });
        } catch (e) {
            console.warn('Unsuccessful attempting to focus trap the Combobox.');
        }
    }
github phegman / v-scroll-lock / src / components / Modal.vue View on Github external
mounted() {
    document.addEventListener('keydown', this.handleEscapeKeyDown)

    this.focusTrap = createFocusTrap(this.$refs.modal as HTMLElement)
  }
github nvms / vue-atlas / src / Aside / VaAside.vue View on Github external
mounted () {
    document.querySelector('body').appendChild(this.$refs.aside)
    this.$once('hook:beforeDestroy', () => {
      document.querySelector('body').removeChild(this.$refs.aside)
    })

    this.focusTrap = createFocusTrap(this.$refs.aside, {
      clickOutsideDeactivates: true,
      returnFocusOnDeactivate: true,
      fallbackFocus: this.$refs.aside
    })
  },
  beforeDestroy () {
github src-zone / material / bundle / src / components / focus-trap / mdc.focus-trap.directive.ts View on Github external
constructor(public _elm: ElementRef, options: Options) {
        options.onActivate = () => { this._active = true; activeTrap = this; };
        options.onDeactivate = () => { this._active = false; activeTrap = null; };
        this.trap = createFocusTrap(_elm.nativeElement, options);
        this.trap.activate();
    }

focus-trap

Trap focus within a DOM node.

MIT
Latest version published 2 months ago

Package Health Score

89 / 100
Full package analysis