@microsoft/fluentui-jsx-a11y/counter-badge-needs-count

💼 This rule is enabled in the ✅ recommended config.

🔧 This rule is automatically fixable by the --fix CLI option.

A counter badge is a badge that displays a numerical count.

Rule Details

Ensure that the CounterBadge component is accessible.

Examples of incorrect code for this rule:

<CounterBadge appearance="filled" size="extra-large" />

<CounterBadge icon={<PasteIcon />} />

Examples of correct code for this rule:

If the badge contains a custom icon, that icon must be given alternative text with aria-label, unless it is purely presentational:

<CounterBadge icon={<PasteIcon aria-label="paste" />} count={5} />

<CounterBadge dot />

<CounterBadge>5</CounterBadge>