How to use the @angular/cdk/a11y.ActiveDescendantKeyManager function in @angular/cdk

To help you get started, we’ve selected a few @angular/cdk 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 GetTerminus / terminus-ui / terminus-ui / autocomplete / src / autocomplete-panel / autocomplete-panel.component.ts View on Github external
public ngAfterContentInit(): void {
    this.keyManager = new ActiveDescendantKeyManager(this.options).withWrap();

    // Set the initial visibility state.
    this.setVisibility();
  }
github dynatrace-oss / barista / src / lib / select / select.ts View on Github external
private _initKeyManager(): void {
    this._keyManager = new ActiveDescendantKeyManager>(this.options)
      .withTypeAhead()
      .withVerticalOrientation()
      .withHorizontalOrientation('ltr');

    this._keyManager.tabOut.pipe(takeUntil(this._destroy)).subscribe(() => {
      // Restore focus to the trigger before closing. Ensures that the focus
      // position won't be lost if the user got focus into the overlay.
      this.focus();
      this.close();
    });

    this._keyManager.change.pipe(takeUntil(this._destroy)).subscribe(() => {
      if (this._panelOpen && this.panel) {
        this._scrollActiveOptionIntoView();
      } else if (!this._panelOpen && this._keyManager.activeItem) {
        this._keyManager.activeItem._selectViaInteraction();
github GetTerminus / terminus-ui / terminus-ui / autocomplete / src / autocomplete.component.ts View on Github external
private initKeyManager(): void {
    // We need to initialize with wrapping turned on
    this.keyManager = new ActiveDescendantKeyManager(this.options)
      .withTypeAhead()
      .withVerticalOrientation()
      .withHorizontalOrientation('ltr')
      .withWrap();
  }
github GetTerminus / terminus-ui / terminus-ui / selection-list / src / selection-list.component.ts View on Github external
private initKeyManager(): void {
    // We need to initialize with wrapping turned on
    this.keyManager = new ActiveDescendantKeyManager(this.options)
      .withTypeAhead()
      .withVerticalOrientation()
      .withHorizontalOrientation('ltr')
      .withWrap();

  }
github atinc / ngx-tethys / src / list / selection / selection-list.ts View on Github external
private _initializeFocusKeyManager() {
        this._keyManager = new ActiveDescendantKeyManager(this.options)
            .withWrap()
            // .withTypeAhead()
            // Allow disabled items to be focusable. For accessibility reasons, there must be a way for
            // screenreader users, that allows reading the different options of the list.
            .skipPredicate(() => false);
    }
github albertnadal / ng2-daterange-picker / node_modules / @angular / material / esm5 / autocomplete.es5.js View on Github external
function () {
        this._keyManager = new ActiveDescendantKeyManager(this.options).withWrap();
        // Set the initial visibiity state.
        this._setVisibility();
    };
    /**
github ngez / platform / projects / core / src / autocomplete / autocomplete.component.ts View on Github external
ngAfterViewInit() {
    this.keyboardEventsManager =
      new ActiveDescendantKeyManager(this.options).withWrap(true);
  }
github sbb-design-systems / sbb-angular / projects / sbb-angular / src / lib / autocomplete / autocomplete-option-list / autocomplete-option-list.component.ts View on Github external
ngAfterViewInit() {
    this.keyManager = new ActiveDescendantKeyManager(this.items)
      .withWrap()
      .withTypeAhead();
  }
github albertnadal / ng2-daterange-picker / node_modules / @angular / material / esm2015 / select.js View on Github external
_initKeyManager() {
        this._keyManager = new ActiveDescendantKeyManager(this.options).withTypeAhead();
        this._keyManager.tabOut.pipe(takeUntil(this._destroy)).subscribe(() => this.close());
        this._keyManager.change.pipe(takeUntil(this._destroy)).subscribe(() => {
            if (this._panelOpen && this.panel) {
                this._scrollActiveOptionIntoView();
            }
            else if (!this._panelOpen && !this.multiple && this._keyManager.activeItem) {
                this._keyManager.activeItem._selectViaInteraction();
            }
        });
    }
    /**