refactor(webapp): harden GitLab icon factory with forwardRef, a11y, and tests

[FelixTJDietrich]

Description

Hardens the createGitLabIcon factory to match the @primer/octicons-react API surface and cleans up dead code. This completes the quality bar for the GitLab visual identity work from the provider abstraction layer.

Changes

gitlab-icons.tsx — Icon factory refactored

• forwardRef<SVGSVGElement> for DOM ref access
• Rest-prop spreading (...rest) for native SVG attributes (data-*, style, aria-*)
• Conditional accessibility: aria-hidden="true" for decorative icons, role="img" + aria-label for labelled icons
• Exported GitLabIconProps type extending Omit<SVGProps<SVGSVGElement>, "children">
• focusable="false" always set (prevents IE/Edge focus ring on SVG)

provider-icons.stories.tsx — New Accessibility story

• Demonstrates decorative vs labelled icon usage patterns
• Shows icon inside a labelled button (icon stays decorative)

GithubBadge.tsx — Deleted

• Dead deprecated re-export shim with zero imports

What was NOT changed (deliberate)

• IconComponent type stays narrow ({size?, className?}) — correct minimal interface for the dispatch layer
• No <title> element — role="img" + aria-label is sufficient per WAI-ARIA; <title> has inconsistent screen reader support
• No tanuki logo or pipeline icon — YAGNI, no consumer exists
• onemphasis/oninverse token naming — currently unused, separate cleanup

How to Test

• cd webapp && npm run storybook → "Provider/Icons" → verify all 6 stories render correctly, including new "Accessibility" story
• Verify ref forwarding works: const ref = createRef(); <GitLabMergeRequestIcon ref={ref} />
• Verify labelled mode: <GitLabMergeRequestIcon aria-label="Open MR" /> renders with role="img", no aria-hidden

Closes #724

[coderabbitai]

📝 Walkthrough

Walkthrough

Removed deprecated GithubBadge re-export and refactored GitLab merge request icon components to forward refs, expand SVG prop support via Omit pattern, and conditionally apply accessibility attributes (aria-hidden/role) based on label presence. Added comprehensive test coverage and accessibility documentation story.

Changes

Cohort / File(s)	Summary
Deprecated Code Removal webapp/src/components/shared/GithubBadge.tsx	Removed deprecated GithubBadge re-export module that aliased LabelBadge for backwards compatibility during migration.
GitLab Icon Component Enhancement webapp/src/lib/provider/gitlab-icons.tsx	Exported GitLabIconProps interface extending Omit<SVGProps<SVGSVGElement>, "children"> to enable full SVG attribute support; added forwardRef to forward ref to root SVG; refactored accessibility handling to conditionally set aria-hidden="true" only when no aria-label/aria-labelledby present and conditionally set role="img" when labelled; now spreads all props onto SVG element.
GitLab Icon Test Suite webapp/src/lib/provider/gitlab-icons.test.tsx	Added comprehensive Vitest suite covering SVG rendering attributes (viewBox, fill, path rules), size prop behavior with defaults and custom values, conditional accessibility attributes, prop forwarding (className/ref/data-\*/style), displayName verification, icon variants with distinct paths, and draft alias behavior.
GitLab Icon Accessibility Story webapp/src/lib/provider/provider-icons.stories.tsx	Added Accessibility Storybook story demonstrating three labeling patterns: decorative rendering without aria-label (aria-hidden="true"), non-decorative rendering with aria-label (role="img"), and icon-within-button context where button text supplies accessible name.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

A rabbit refactored the merge request icons so fine,
Now refs and SVG props align,
With accessibility in mind, conditional and bright,
The GitLab icons shine just right! 🐰✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Linked Issues check	❓ Inconclusive	The PR successfully implements core objectives: exports GitLabIconProps, adds accessibility handling (aria-hidden for decorative, role/aria-label for labelled), forwards refs via forwardRef, adds 16 comprehensive tests, and includes Storybook story. However, icon SVG assets, provider registration in ProviderIcon, and color tokens mentioned in #724 are not addressed in this refactor-focused PR.	Clarify whether this PR is a partial implementation (factory hardening) with icon assets/colors/provider mapping deferred to follow-up PRs, or whether those changes should be included here to fully close #724.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely describes the main refactoring of the GitLab icon factory with forwardRef, accessibility improvements, and comprehensive test coverage.
Out of Scope Changes check	✅ Passed	Changes are narrowly focused on refactoring the icon factory, enhancing accessibility, adding tests, and removing a deprecated shim. All modifications directly support the factory hardening objective; no unrelated changes detected.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch refactor/gitlab-icon-factory-quality

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull request overview

Refactors the GitLab icon factory in the webapp provider layer to align with the @primer/octicons-react component surface (ref forwarding, SVG prop passthrough, conditional a11y), and adds targeted rendering tests plus a Storybook a11y demo; also removes a dead deprecated re-export.

Changes:

• Refactor createGitLabIcon to use forwardRef, spread native SVG props, and apply conditional aria-hidden/role behavior.
• Add a new Vitest + Testing Library test suite covering structure, sizing, a11y behavior, prop forwarding, and icon variant differences.
• Add a Storybook “Accessibility” story demonstrating decorative vs labelled icon usage; delete unused GithubBadge shim.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
webapp/src/lib/provider/gitlab-icons.tsx	Harden GitLab icon factory with ref forwarding, SVG prop passthrough, and conditional accessibility attributes.
webapp/src/lib/provider/__tests__/gitlab-icons.test.tsx	Adds comprehensive render/a11y/prop-forwarding tests for the GitLab icons.
webapp/src/lib/provider/provider-icons.stories.tsx	Adds an Accessibility-focused Storybook example for GitLab icons.
webapp/src/components/shared/GithubBadge.tsx	Removes deprecated, unused re-export shim.

[github-actions]

📚 Documentation Preview

Preview has been removed (PR closed)

[FelixTJDietrich]

🎉 This PR is included in version 0.52.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀