Structural slot for the error-badge template
CngxTabErrorBadge
Directivev0.1.0WCAG AA
projects/common/tabs/slots/tab-error-badge.directive.ts
Import#
import { CngxTabErrorBadge } from '@cngx/common/tabs'
Description#
Structural slot for the error-badge template. 3-stage cascade:
per-instance directive >
CNGX_TABS_CONFIG.templates.errorBadge >
CNGX_TABS_GLYPHS.errorBadge.
<cngx-tab-group>
<ng-template cngxTabErrorBadge let-tab="tab">
<span class="my-badge-pill">
{{ tab.errorAggregator()?.count() }}
</span>
</ng-template>
</cngx-tab-group>Metadata#
CngxTabErrorBadge
The slot replaces only the visible error badge on the tab. The error state is communicated to assistive tech by the library, so the template stays decorative.
- Visibility is library-gated. The slot renders only when the tab's
errorAggregator?.shouldShow()istrue; the consumer never gates it. - The SR channel is library-owned. The error is announced through the tab's
aria-describedbySR-only descriptor. The built-in glyph isaria-hidden; the badge is a visual cue, not the only channel. - Do not rely on colour alone. Pair the badge with a shape or icon so the cue survives colour-blindness and forced-colours; the SR descriptor carries the meaning regardless.
- Keep the template decorative. Do not add SR-only text (double-speaks) or interactive elements.