File

projects/storefrontlib/layout/a11y/keyboard-focus/trap/trap-focus.service.ts

Extends

TabFocusService

Index

Properties

Protected focus

Methods

Protected getTrapEnd
Protected getTrapStart
hasFocusableChildren
moveFocus
findFocusable
Protected findNext
Protected findNextScrollable
Protected getActiveChild
Protected getChildren
Protected isActive
moveTab
findFirstFocusable
Protected getPersisted
hasPersistedFocus
handleEscape
shouldFocus
clear
get
getPersistenceGroup
set

Methods

Protected getTrapEnd

getTrapEnd(trap: TrapFocusType)

Defined in projects/storefrontlib/layout/a11y/keyboard-focus/trap/trap-focus.service.ts:64

Parameters :

Name	Type	Optional
trap	`TrapFocusType`	No

Returns : boolean

Protected getTrapStart

getTrapStart(trap: TrapFocusType)

Defined in projects/storefrontlib/layout/a11y/keyboard-focus/trap/trap-focus.service.ts:60

Parameters :

Name	Type	Optional
trap	`TrapFocusType`	No

Returns : boolean

hasFocusableChildren

hasFocusableChildren(host: HTMLElement)

Defined in projects/storefrontlib/layout/a11y/keyboard-focus/trap/trap-focus.service.ts:19

Indicates whether any of the child elements of the host are focusable.

Parameters :

Name	Type	Optional	Description
host	`HTMLElement`	No	`HTMLElement` that is used to query the focusable elements.

Returns : boolean

moveFocus

moveFocus(host: HTMLElement, config: TrapFocusConfig, increment: MOVE_FOCUS, event: UIEvent)

Defined in projects/storefrontlib/layout/a11y/keyboard-focus/trap/trap-focus.service.ts:28

Focus the next or previous element of all available focusable elements. The focus is trapped in case there's no next or previous available element. The focus will automatically move the start or end of the list.

Parameters :

Name	Type	Optional
host	`HTMLElement`	No
config	`TrapFocusConfig`	No
increment	`MOVE_FOCUS`	No
event	`UIEvent`	No

Returns : void

findFocusable

findFocusable(host: HTMLElement, locked, invisible)

Inherited from TabFocusService

Defined in TabFocusService:136

Returns all focusable child elements of the host element.

Parameters :

Name	Type	Optional	Default value	Description
host	`HTMLElement`	No		The host element is used to query child focusable elements.
locked		No	`false`	Indicates if locked elements (tabindex=-1) should be returned, defaults to false.
invisible		No	`false`	Indicates if invisible child elements should be returned, defaults to false.

Returns : HTMLElement[]

Protected findNext

findNext(host: HTMLElement, config: TabFocusConfig, increment: MOVE_FOCUS)

Inherited from TabFocusService

Defined in TabFocusService:74

Parameters :

Name	Type	Optional
host	`HTMLElement`	No
config	`TabFocusConfig`	No
increment	`MOVE_FOCUS`	No

Returns : HTMLElement

Protected findNextScrollable

findNextScrollable(host: HTMLElement, config: TabFocusConfig, increment: MOVE_FOCUS)

Inherited from TabFocusService

Defined in TabFocusService:36

builds out virtual slides out of the full scrollable area, to allow for maximum flexibility for the underlying layout without using hardcoded slide sizes.

Parameters :

Name	Type	Optional
host	`HTMLElement`	No
config	`TabFocusConfig`	No
increment	`MOVE_FOCUS`	No

Returns : HTMLElement

Protected getActiveChild

getActiveChild(host: HTMLElement, config: TabFocusConfig)

Inherited from TabFocusService

Defined in TabFocusService:102

Returns the active focusable child element. If there's no active focusable child element, the first focusable child is returned.

Parameters :

Name	Type	Optional
host	`HTMLElement`	No
config	`TabFocusConfig`	No

Returns : HTMLElement

Protected getChildren

getChildren(host: HTMLElement, config: TabFocusConfig)

Inherited from TabFocusService

Defined in TabFocusService:118

Parameters :

Name	Type	Optional
host	`HTMLElement`	No
config	`TabFocusConfig`	No

Returns : HTMLElement[]

Protected isActive

isActive(el: HTMLElement)

Inherited from TabFocusService

Defined in TabFocusService:144

Parameters :

Name	Type	Optional
el	`HTMLElement`	No

Returns : boolean

moveTab

moveTab(host: HTMLElement, config: TabFocusConfig, increment: MOVE_FOCUS, event: KeyboardEvent)

Inherited from TabFocusService

Defined in TabFocusService:12

Moves to the next (or previous) tab.

Parameters :

Name	Type	Optional
host	`HTMLElement`	No
config	`TabFocusConfig`	No
increment	`MOVE_FOCUS`	No
event	`KeyboardEvent`	No

Returns : void

findFirstFocusable

findFirstFocusable(host: HTMLElement, config: AutoFocusConfig)

Inherited from AutoFocusService

Defined in AutoFocusService:16

Returns the first focusable child element of the host element.

Parameters :

Name	Type	Optional	Default value
host	`HTMLElement`	No
config	`AutoFocusConfig`	No	`{ autofocus: true }`

Returns : HTMLElement

Protected getPersisted

getPersisted(host: HTMLElement, group?: string)

Inherited from AutoFocusService

Defined in AutoFocusService:43

Returns the element that has a persisted focus state.

groups and remain the persistence

Parameters :

Name	Type	Optional	Description
host	`HTMLElement`	No	the `HTMLElement` used to query for focusable children
group	`string`	Yes	the optional group for the persistent state, to separate different focus groups and remain the persistence

Returns : HTMLElement

hasPersistedFocus

hasPersistedFocus(host: HTMLElement, config: PersistFocusConfig)

Inherited from AutoFocusService

Defined in AutoFocusService:32

Indicates whether any of the focusable child elements is focused.

Parameters :

Name	Type	Optional
host	`HTMLElement`	No
config	`PersistFocusConfig`	No

Returns : boolean

handleEscape

handleEscape(host: HTMLElement, config: EscapeFocusConfig, event: KeyboardEvent)

Inherited from EscapeFocusService

Defined in EscapeFocusService:18

Parameters :

Name	Type	Optional
host	`HTMLElement`	No
config	`EscapeFocusConfig`	No
event	`KeyboardEvent`	No

Returns : void

shouldFocus

shouldFocus(config: EscapeFocusConfig)

Inherited from EscapeFocusService

Defined in EscapeFocusService:14

Parameters :

Name	Type	Optional
config	`EscapeFocusConfig`	No

Returns : boolean

clear

clear(group?: string)

Inherited from PersistFocusService

Defined in PersistFocusService:38

Clears the persisted keyboard focus state globally or for the given group.

Parameters :

Name	Type	Optional
group	`string`	Yes

Returns : void

get

get(group?: string)

Inherited from PersistFocusService

Defined in PersistFocusService:21

Parameters :

Name	Type	Optional
group	`string`	Yes

Returns : string

getPersistenceGroup

getPersistenceGroup(host: HTMLElement, config?: PersistFocusConfig)

Inherited from PersistFocusService

Defined in PersistFocusService:46

Returns the group for the host element based on the configured group or by the data-cx-focus-group attribute stored on the host.

Parameters :

Name	Type	Optional
host	`HTMLElement`	No
config	`PersistFocusConfig`	Yes

Returns : string

set

set(key: string, group?: string)

Inherited from PersistFocusService

Defined in PersistFocusService:29

Persist the keyboard focus state for the given key. The focus is stored globally or for the given group.

Parameters :

Name	Type	Optional
key	`string`	No
group	`string`	Yes

Returns : void

Properties

Protected focus

Default value : new Map<string, string>()

Inherited from PersistFocusService

Defined in PersistFocusService:19

import { Injectable } from '@angular/core';
import {
  MOVE_FOCUS,
  TrapFocus,
  TrapFocusConfig,
  TrapFocusType,
} from '../keyboard-focus.model';
import { TabFocusService } from '../tab/tab-focus.service';

@Injectable({
  providedIn: 'root',
})
export class TrapFocusService extends TabFocusService {
  /**
   * Indicates whether any of the child elements of the host are focusable.
   *
   * @param host `HTMLElement` that is used to query the focusable elements.
   */
  hasFocusableChildren(host: HTMLElement): boolean {
    return this.findFocusable(host).length > 0;
  }

  /**
   * Focus the next or previous element of all available focusable elements.
   * The focus is _trapped_ in case there's no next or previous available element.
   * The focus will automatically move the start or end of the list.
   */
  moveFocus(
    host: HTMLElement,
    config: TrapFocusConfig,
    increment: MOVE_FOCUS,
    event: UIEvent
  ): void {
    const focusable: HTMLElement[] = this.findFocusable(host);

    let index = focusable.findIndex((v) => v === event.target) + increment;

    const shouldMoveFocus =
      (index >= 0 && index < focusable.length) ||
      (index < 0 && this.getTrapStart(config.trap)) ||
      (index >= focusable.length && this.getTrapEnd(config.trap));

    if (shouldMoveFocus) {
      if (index >= focusable.length) {
        index = 0;
      }
      if (index < 0) {
        index = focusable.length - 1;
      }

      event.preventDefault();
      event.stopPropagation();

      const el = focusable[index];

      el.focus();
    }
  }

  protected getTrapStart(trap: TrapFocusType): boolean {
    return trap === true || trap === TrapFocus.start;
  }

  protected getTrapEnd(trap: TrapFocusType): boolean {
    return trap === true || trap === TrapFocus.end;
  }
}

File

Extends

Index

Properties

Methods

Methods

Properties

result-matching ""

No results matching ""