feat[dev]: ✨ implement A11y improvements to sd-flag

[yoezlem]

Description

This task describes the Storybook implementation for the sd-flag component as part of the A11y improvements outlined in Epic #1465.

A11y improvements for sd-step-group and sd-step can be found here: sd-flag Notes.

---

Comment

Problem: The contrast ratio in sd-flag--neutral-500 is not high enough (2.21:1).
Solution: Use a ratio of at least 4.5:1.

Note

• The heading in a teaser should be the first item in the DOM. A heading introduces a new thematic region and separates the following content from the previous region. Although chips and flags are visually the first items in the teaser, they should come after the heading in the DOM.

Related WCAG criteria

• https://www.w3.org/WAI/WCAG22/quickref/#meaningful-sequence

Template Ticket

• Pick up the template ticket when working on the component story for A11y improvement, as it references the component and will be resolved once the component is made accessible:
  feat[dev]: ✨ implement A11y improvements for Flag Template #1530

DoR

• Item has business value
• Item has been estimated by the team
• Item is clear and well-defined
• Item dependencies have been identified

DoD

• Documentation has been created/updated (if applicable)
• Migration Guide has been created/updated (if applicable)
• Relevant E2E tests (Features, A11y, Bug fixes) are created/updated
• Relevant stories (Features, A11y) are created/updated
• Implementation works successfully on feature branch