Structural slot for the rejection-decoration template
CngxTabRejectionIcon
Directivev0.1.0WCAG AA
projects/common/tabs/slots/tab-rejection-icon.directive.ts
Import#
import { CngxTabRejectionIcon } from '@cngx/common/tabs'
Description#
Structural slot for the rejection-decoration template. 3-stage
cascade: per-instance directive >
CNGX_TABS_CONFIG.templates.rejectionIcon >
CNGX_TABS_GLYPHS.rejectionIcon.
<cngx-tab-group>
<ng-template
cngxTabRejectionIcon
let-failedIndex="failedIndex"
let-originLabel="originLabel"
>
<my-icon name="rollback" />
@if (originLabel) {
<span class="cngx-sr-only">Rolled back to {{ originLabel }}</span>
}
</ng-template>
</cngx-tab-group>Metadata#
CngxTabRejectionIcon
The slot replaces only the visible rejection decoration on the tab the commit rolled back from. The outcome is communicated to assistive tech by the library, so the template stays decorative.
- Visibility is library-gated. The slot renders only on the tab matching
presenter.lastFailedIndex(); the consumer never gates it. - The SR channel is library-owned. The built-in glyph is
aria-hidden; the rollback is announced through the group's live region. originLabelcarries SR context. It names the safe-harbour tab the active state rolled back to (undefinedfor the synchronous-rejection edge case). Surface it inside acngx-sr-onlyspan when you want it spoken alongside the icon.- Keep the template decorative. Do not signal rejection by colour alone; pair with an icon or shape. No interactive elements.