feat(component): Add Tag component

[hannahiss]

Note: Please transform - [ ] into - (NA) in the description when things are not applicable

Related issues

#2845

Fixes #3124

Description

Add the tag component, composed of two types : Tag and Input tag. Implement the version 1.3.0 of Tags with new colors, functional icons, etc. Add some accessibility explanations.

Motivation & Context

New Tag component

Types of change

• New feature (non-breaking change which adds functionality)

Live previews

• https://deploy-preview-3062--boosted.netlify.app/docs/components/tags/

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	8502337
🔍 Latest deploy log	https://app.netlify.com/projects/boosted/deploys/68df963321d7970008c82904
😎 Deploy Preview	https://deploy-preview-3062--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Aniort]

hello,
in "Overview", in the § "For accessibility and semantics reasons,.."
we must add at the end: "When the purpose of the tags is not clear enough (in particular without the visually context), an aria-label must be added to the <ul> tag to explain the tags function.

[vprothais]

hello, in "Overview", in the § "For accessibility and semantics reasons,.." we must add at the end: "When the purpose of the tags is not clear enough (in particular without the visually context), an aria-label must be added to the <ul> tag to explain the tags function.

@Aniort , you told us yesterday that we should use a visually hidden content in the first li on the list instead of an aria-label on the ul. In the end you prefer the aria-label ?

[Copilot]

Pull Request Overview

This PR implements the Tag component for the OUDS Web design system, providing two types of tags: informative tags and interactive input tags. The implementation follows the OUDS design guidelines with support for various colors, states, icons, and accessibility features.

Key Changes

• Complete Tag component implementation with both static and interactive variants
• Comprehensive documentation with examples covering all tag features
• Updated site navigation and migration guides to reflect the new component

Reviewed Changes

Copilot reviewed 12 out of 14 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
scss/_tags.scss	Complete rewrite of tag component styles with new design system tokens and interactive variants
site/src/content/docs/components/tags.mdx	Full documentation implementation with examples and accessibility guidance
scss/_variables.scss	Removal of old tag-related variables
site/src/pages/index.astro	Updated homepage to showcase new tag component
site/src/layouts/partials/ExamplesMain.astro	Applied consistent tag styling
site/src/content/docs/migrations/migration.mdx	Added tag component to migration notes
site/src/content/docs/migrations/migration-from-boosted.mdx	Updated migration guide with tag changes
site/src/components/shortcodes/Example.astro	Added showToolbar prop for flexible example display
site/src/components/shortcodes/Code.astro	Improved code block spacing
site/src/components/shortcodes/BootstrapCompatibility.astro	Applied consistent tag styling
site/data/sidebar.yml	Removed draft status from Tags component
.bundlewatch.config.json	Updated bundle size limits to accommodate new component

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[vprothais]

The "or" at the end of this sentence could be misleading, adding visually accessible content is ok for screen readers, but won't be useful for people having trouble with color vision. We should do the first, and the second if needed.

[vprothais]

Is this Todo still relevant, should we do that now or is it done and we should remove the comment ?

[MaxLardenois]

Added a reminder here: #3152

[Aniort]

hello
some point to add/correct :

• add the text in bold in input tag/overview "For accessibility reasons, when inserting tags into a list, wrap the list in a semantic container (usually a <ul> or <ol>). If possible, display a semantically informative text to describe the tags' group purpose. If the purpose of the tags is not clear enough (especially without visual context) or not present, an aria-label must be added to the container to explain the function of the tags. Each input tag should contain a .visually-hidden text after the button text to indicate the action that will be performed when the tag is clicked."
• add the text in bold in tag/overview "**For accessibility reasons, when inserting tags into a list, wrap the list in a semantic container (usually a <ul> or <ol>). If possible, display a semantically informative text to describe the tags' group purpose. If the purpose of the tags is not clear enough (especially without visual context) or not present, an aria-label must be added to the container to explain the function of the tags."

[MaxLardenois]

Need to add a review to comment?

[MaxLardenois]

Added a reminder here: #3152