fix: sd badge a11y

[smfonseca]

Description:

Addresses the following tickets:

• 1466
• 1512
• 1546
• 1537

Definition of Reviewable:

• Documentation is created/updated
• Migration Guide is created/updated
• E2E tests (features, a11y, bug fixes) are created/updated

• Stories (features, a11y) are created/updated
• relevant tickets are linked

[github-actions]

🚀 Storybook has been deployed for branch fix_sd-badge-a11y

• View Storybook

[miguelxnxn]

I think it's incoherent to describe the different colour variants as "not having a semantic meaning" while also naming them "default", "success" and "error".

Whether the variant is defined semantically in Storybook/Figma or not, the use of certain colours (green and red) does impact how the user perceives the urgency of a badge, especially if several variants are used within the same context. Therefore, I suggest acknowledging colour interpretations or otherwise neutral colour names or brand-related terms.

Some examples:

• blue: "default", "blue"
• red: "alert", "urgent", "red", "high-prio"
• green: "accent", "green", "low-prio", "subtle", "positive"

[coraliefeil]

As far as I understand it the variant name is the issue and not the token name right?

sd-badge is the only component where this issue occurs ... changing the token name is rather hectic and I’m wondering if we could solve it pragmatically by just naming the color variants to "blue", "red", "green".

[miguelxnxn]

The token name wouldn't be the issue (from my perspective). Naming the variants by the colour names is a good solution if we don't want to define connotations there. I would warn about colour interpretation in the documentation.

[smfonseca]

We can change the variants name although this is a breaking change, therefore would need to tackle in a separate branch (FYI @mariohamann). @miguelxnxn can you then provide me a text to include in the variants description?
Ticket for updating the variants names is created.

[miguelxnxn]

Since there is no particular desire to encourage the use of the blue one and therefore set it as "default", I think "blue", "red" and "green" are the best options to avoid connotations. @smfonseca

[MartaPintoTeixeira]

In safari the md size number is not vertically aligned in the circle. Is this a browser issue? or can we fix it?

[smfonseca]

In safari the md size number is not vertically aligned in the circle. Is this a browser issue? or can we fix it?

Seems that the line-height was messing up the alignment in Safari. Should be fixed now, please check again 🔎@MartaPintoTeixeira.

[MartaPintoTeixeira]

Please change this copy on the 2nd template:
"Examples of sd-navigation-item working with sd-badge:"
change to: "Example of sd-navigation-item working with sd-badge:"

[MartaPintoTeixeira]

In figma we link to 4 Related Templates.
https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=2116-4928&node-type=frame&t=GObamI9yCWkPNV4b-0

Please double check.

[MartaPintoTeixeira]

In figma we have "sd-status-badge" on the related components. Can you add it?

[smfonseca]

In figma we have "sd-status-badge" on the related components. Can you add it?

The sd-status-badge doesn't exist in code yet. It's planned for iteration 18

[smfonseca]

In figma we link to 4 Related Templates. https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=2116-4928&node-type=frame&t=GObamI9yCWkPNV4b-0

Please double check.

The status badge with text template doesn't exist yet, but there's a ticket in the backlog to implement it.
The tab with badge is a template which @auroraVasconcelos is still working on, therefore I would ask @auroraVasconcelos to please link the template in the sd-badge once she's done.

[smfonseca]

Please change this copy on the 2nd template: "Examples of sd-navigation-item working with sd-badge:" change to: "Example of sd-navigation-item working with sd-badge:"

Updated