Class TJSFocusIndicator

Provides a reusable absolute and block / flexbox positioned focus indicator for accessibility / keyboard navigation across components. TJSFocusIndicator is used in the standard library for menus like TJSMenu / TJSContextMenu and for folders like TJSIconFolder and TJSSvgFolder. 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.

// 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
Index
constructor
$destroy $on $set

  • Type Parameters

    • K extends string

    Parameters

    Returns () => void

Settings
Member Visibility

On This Page
Constructors
Methods