Add a separate badge indicator component

[gcamacho079]

Description

Creates a <craft-badge-indicator/> component that can be used in navigation contexts to indicate whether there are notifications associated with the item. Includes a numbered and non-numbered variant.

When using the dot-only variant, you can attach a label to the dot to communicate its purpose to assistive technology. Example: a notification dot in the global navigation has taken on the img role and uses “Has Notifications” as its alternative text.

In cases like this, the link should reference the badge ID via aria-labelledby or aria-describedby if the notification text is not otherwise associated with the link’s accessible name.

Related issues

Resolves ACC-28, ACC-9

[linear]

ACC-28 Create badge indicator component

[brianjhanson]

Do you think we could collapse badgeCountSuffix and altText into a single label attribute that is always rendered?

With that, usage would look something like

<!-- Render an indicator without a number -->
<craft-badge-indicator label="Updates available" />

<!-- With a number -->
<craft-badge-indicator number="30" label="deprecation warnings" />

I'm just thinking that might make it easier so you don't have to remember "If I have a number, I need to use badgeCountSuffix but if I don't, I need to use altText."

Other than that, I pushed up a few minor tweaks:

• Using BEM conventions for the classes. I know it doesn't matter in a web component context, but it makes it a little easier for me to scan. I could be convinced to embrace the future though.
• Added a prefix to the ID, so the auto generated one will be badge-# instead of just #
• Reduced the padding around the number a bit

[gcamacho079]

Do you think we could collapse badgeCountSuffix and altText into a single label attribute that is always rendered?

@brianjhanson I was struggling with that one. I originally coded it that way, but I felt like separating them had the following benefits:

• Including “suffix” in the property name makes it clear that the number shouldn’t be included in the label. Basically trying to prevent the following scenario: <craft-badge-indicator number="30" label="30 deprecation warnings">
• The altText property hints that the badge-only indicator functions like an image. This is different from how the numbered badge indicator renders (number text with a visually hidden contextual component). I think using separate properties would make the component documentation clearer, since we can provide examples of when the altText might not be needed (e.g., when the link/button points to contextual text elsewhere). I feel like lumping them into a single property makes explaining best practices a bit more confusing. For example, a non-numbered badge could be decorative in some scenarios, whereas I can’t imagine any scenario in which the suffix should be left off a numbered badge.