GrTabs

variant is read from GrConfigProvider (componentDefaults.GrTabs.variant) — the look is set once for the whole application.

The height of a tab repeats the scale of GrButton — 28 / 32 / 40 / 44 px for xs / sm / md / lg: tabs often stand in one row with a button, and a difference of a few pixels there reads as a layout error. The match is held by the src/__tests__/componentSize.test.ts gate, because it has already diverged silently once.

Hence the consequence: size="lg" gives 44px — the size WCAG 2.5.5 and the Apple HIG require for a target under a finger.

The icon field of a tab is an icon to the left of the label; it is decorative (aria-hidden), and the name of the tab is given by the text. The icon is set with a Vue component or with an icon class (i-lucide-* — the application sets up the rule for it: in the engine factory or through a provider, otherwise a Vue component; see “Icons”).

The #tab slot replaces the content as a whole and receives { tab, active, disabled }:

<GrTabs v-model="tab" :tabs="tabs">
  <template #tab="{ tab, active }">
    <GrAvatar :src="tab.avatar" size="xs" />
    <span :class="active ? 'font-700' : ''">{{ tab.label }}</span>
  </template>
</GrTabs>

<GrTabs v-model="tab" :tabs="tabs" closable @close="close" />

closable switches closing on for the whole row; a closable: false on an individual tab removes it (a pinned tab among closable ones), and a closable: true on a tab switches that one on alone when the row has no prop. A disabled tab is closed by nothing: aria-disabled is about all interaction, and closing is interaction too.

The cross is not a button. role="tab" declares its descendants presentational, so a nested <button> is lost for a screen reader (axe: nested-interactive). The cross is an aria-hidden <span>, and a click on it is handled by the handler of the tab itself: there is still one interactive element in the row. From the keyboard closing is Delete or Backspace on the focused tab; that the key works is reported by aria-keyshortcuts="Delete" on closable tabs. It is the focused tab that closes, not the selected one: with activation-mode="manual" the two legitimately differ.

The list stays with the consumer. The component emits only close(value) and touches neither tabs nor modelValue: the closing may not take place (“save the changes?”), and the tab would have switched for nothing.

function close(value: string) {
  const index = tabs.value.findIndex(tab => tab.value === value)
  tabs.value.splice(index, 1)

  if (current.value === value)
    current.value = tabs.value[index]?.value ?? tabs.value[index - 1]?.value ?? ''
}

The focus after closing is returned by the component itself — but only when the list really did get shorter and only if the closed tab held the focus. Otherwise closing from the keyboard would drop the focus into <body> together with the button that vanished.

The #tab slot does not take the cross away: it lives outside the slot, so markup of your own for a tab does not lose the closing.

When tabs is empty, role="tablist" is not rendered at all — in its place there is a block with text from the locale (gr.tabs.empty). The role is obliged to own tab children, and a text node inside it is a violation of aria-required-children rather than an empty state. The block holds the height of a tab, so that the neighbouring blocks do not jump when the last one is closed.

<GrTabs v-model="tab" :tabs="tabs" empty-text="No open files" />

emptyText overrides the text of the locale, and the #empty slot overrides both.

A horizontal row scrolls rather than wrapping onto a line: wrapping breaks the row and takes the tabs under the panel. The scrollbar is hidden — the row is run by the arrows, and the active tab pulls itself into the visible part, including when it was selected from the outside.

That there is more beyond the edge is given away by a fade: the edge behind which there are still tabs goes out — at the start of the row the right one, at the end the left one, in the middle both. If everything fits, nothing goes out. Without that sign the tabs beyond the edge remained reachable, but there was no way to learn that they were there.

The fade is made with a mask rather than with a gradient backdrop, and that follows from the background of the strip being different in the variants: pills carries its own opaque --gr-muted, while line is transparent and lies on the background of the parent, which the component does not know. A gradient has nowhere to take the colour of the backdrop for line; a mask fades the content regardless of what is beneath it.

The width of the fade is the --gr-tabs-scroll-fade hook (1.5rem by default). The same value sets the scroll-padding of the row: a tab pulled into the visible part does not stand under the fade, and the focus ring stays readable.

A vertical row does not scroll — it grows downwards — and has no fade.

The container needs no tabindex of its own: the tabs inside are reachable with the arrows, and the focus scrolls the row along with it — the “a scrolling block is reachable from the keyboard” rule is met through them rather than through a tab-order stop on the tablist itself.

<GrTabs v-model="tab" :tabs="tabs" activation-mode="manual" />

automatic (the default) — an arrow switches the tab at once: the selection follows the focus, as the APG requires. manual — an arrow moves only the focus, and the selection is confirmed with Enter or Space. The second mode is needed by tabs with heavy loading: stepping through with the arrows would otherwise pull every panel.

orientation="vertical" unfolds the list into a column, announces aria-orientation and moves the navigation to ↑/↓ instead of ←/→.

In a column the content of a tab is aligned to the start: the icons stand in an even line, the label takes up the rest, and the badge and the cross sit at the end. The vertical layout is a column of settings sections, and centred it read as a menu of buttons. In a row the tabs are still centred.

The native disabled removed a tab both from the tab order and from being announced by a screen reader — the user did not learn of its existence. The APG for tablist recommends the opposite: the tab stays reachable and announced, and the unavailability is expressed by aria-disabled. It does not accept the selection in the process and is skipped by the arrows.

idBase sets the id scheme: a tab gets <idBase>-tab-<value> and aria-controls="<idBase>-panel-<value>". The same idBase is passed into GrTabPanels — otherwise the aria-controls ↔ aria-labelledby pairing does not add up (in a dev build the panel will warn about that).

The array of references to the buttons is cleaned when Vue gives a null for a node that has vanished, and it is trimmed to the length of the list of tabs. Without that, buttons detached from the DOM stayed in it, and a focus() over the shortened list silently fell through into <body>.