Toolbar

<div forToolbar aria-label="Formatting">
  <button forToolbarButton>Undo</button>
  <button forToolbarButton>Redo</button>
  <span forToolbarSeparator></span>
  <div forToggleGroup multiple>
    <button forToggleGroupItem value="bold">B</button>
    <button forToggleGroupItem value="italic">I</button>
  </div>
  <span forToolbarSeparator></span>
  <a forToolbarLink href="/help">Help</a>
</div>

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { ForToggleGroup, ForToggleGroupItem } from 'forty-cdk/toggle';
import {
  ForToolbar,
  ForToolbarButton,
  ForToolbarLink,
  ForToolbarSeparator,
} from 'forty-cdk/toolbar';

@Component({
  selector: 'app-toolbar-default-example',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
    ForToolbar,
    ForToolbarButton,
    ForToolbarLink,
    ForToolbarSeparator,
    ForToggleGroup,
    ForToggleGroupItem,
  ],
  template: `
    <div forToolbar class="toolbar" aria-label="Text formatting">
      <button forToolbarButton class="toolbar-btn">Undo</button>
      <button forToolbarButton class="toolbar-btn">Redo</button>

      <span forToolbarSeparator class="toolbar-sep"></span>

      <div forToggleGroup class="toolbar-grp" multiple [(value)]="style" aria-label="Text style">
        <button forToggleGroupItem class="toolbar-btn toolbar-icon" value="bold" aria-label="Bold">
          B
        </button>
        <button
          forToggleGroupItem
          class="toolbar-btn toolbar-icon"
          value="italic"
          aria-label="Italic"
        >
          I
        </button>
        <button
          forToggleGroupItem
          class="toolbar-btn toolbar-icon"
          value="underline"
          aria-label="Underline"
        >
          U
        </button>
      </div>

      <span forToolbarSeparator class="toolbar-sep"></span>

      <div forToggleGroup class="toolbar-grp" [(value)]="align" aria-label="Alignment">
        <button
          forToggleGroupItem
          class="toolbar-btn toolbar-icon"
          value="left"
          aria-label="Align left"
        >
          L
        </button>
        <button
          forToggleGroupItem
          class="toolbar-btn toolbar-icon"
          value="center"
          aria-label="Align center"
        >
          C
        </button>
        <button
          forToggleGroupItem
          class="toolbar-btn toolbar-icon"
          value="right"
          aria-label="Align right"
        >
          R
        </button>
      </div>

      <span forToolbarSeparator class="toolbar-sep"></span>

      <a
        forToolbarLink
        class="toolbar-link"
        href="https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/"
        target="_blank"
        rel="noreferrer noopener"
      >
        Docs
      </a>
    </div>
  `,
})
export class ToolbarDefaultExample {
  protected readonly style = signal<readonly string[]>(['bold']);
  protected readonly align = signal<readonly string[]>(['left']);
}

ForToolbar

Root directive. role="toolbar". Owns roving tabindex and arrow-key navigation.

ForToolbarButton

Plain push button. Apply on <button> so Enter / Space activate via native semantics.

ForToolbarLink

Hyperlink. Apply on <a>; Enter follows the link via native semantics.

ForToolbarSeparator

Visual divider. Defaults orientation to the toolbar's cross-axis; reflects role="separator" + aria-orientation + data-orientation.

Implements the WAI-ARIA Toolbar pattern.

• Single Tab stop that follows focus. The toolbar takes one place in the tab order; only the entry-point item carries tabindex="0". Before any interaction the entry point is the first enabled item; once you move focus with the arrows (or Home / End), the tab stop follows the last focused item, so Shift+Tab back into the toolbar restores it (matching APG and the Tabs / Tree primitives). Arrow keys move focus inside, Home / End jump to the first / last enabled item.
• Always label the toolbar. Pass the reactive [ariaLabel] input (or a native aria-labelledby pointing at a visible label element) so screen-reader users know what the toolbar acts on. Not optional: APG requires it.
• Disabled items stay focusable. Both <button forToolbarButton> and <a forToolbarLink> expose aria-disabled="true" and suppress click rather than setting the native disabled attribute. Removing an item from the focus order would deviate from APG; users can still hear "disabled". An item disabled while it holds focus (an Undo button with nothing left to undo) keeps the arrow keys, Home and End, so the user can move on without leaving the toolbar.
• Toggle groups don't change roles. Inside a toolbar, [forToggleGroup] keeps role="group" (semantically a related set of buttons). The toolbar role lives only on the outer container.
• Cross-axis separators. [forToolbarSeparator] defaults to the orientation perpendicular to the toolbar so the line is visible. Override by setting orientation explicitly.

forty-cdk ships no styles: put your own class on each piece and key your CSS off the data-* attributes listed under API, not off the for* selectors (Styling forty-cdk explains why).

.toolbar {
  display: flex;
  gap: 0.25rem;
}

.toolbar[data-orientation='vertical'] {
  flex-direction: column;
}

.toolbar-btn[data-disabled],
.toolbar-link[data-disabled] {
  opacity: 0.4;
  pointer-events: none;
}

Subclass the root and re-provide FOR_TOOLBAR_CONTEXT with useExisting pointing at the subclass, since Angular does not inherit a directive's providers; Wrapping non-form roots walks the pattern.