Class TJSFocusIndicator

Provides a reusable absolute and block / flexbox positioned focus indicator for accessibility / keyboard navigation across components. TJSFocusIndicator is used in menus like TJSMenu / TJSContextMenu and for folders like TJSIconFolder and TJSSvgFolder in the standard library. This focus indicator is also available for 3rd party implementation for external consumers. By default, the span element is configured for block / flexbox usage. Set the prop absolute to true and absolute positioning is enabled. In this case make sure the parent element containing TJSFocusIndicator has relative positioning. There are several CSS variables that are available to alter the appearance.

Example

// The following is an example of use case from {@link TJSMenu} which uses absolute positioning:

<ol>
  <li class="tjs-menu-item"
      role=menuitem
      tabindex=0>
    <TJSFocusIndicator absolute={true} />
  </li>
</ol>

<styl>
  .tjs-menu-item {
    display: flex;
    position: relative;
  }

  .tjs-menu-item:focus-visible, .tjs-menu-item:focus-within:has(:focus-visible) {
     --tjs-focus-indicator-background: currentColor;
  }
</styl>
Hierarchy

Indexable

  • [prop: string]: any

Constructors

constructor

Methods

$destroy $on $set

Constructors

constructor

Methods

$destroy

$on

$set

Settings

Member Visibility

On This Page

Constructors
Methods