Card: address accessibility review feedback

[liuliu-dev]

Addresses accessibility-review feedback from Tetralogical (github/accessibility#10648) for the experimental Card component. Part of https://github.com/github/primer/issues/6672

Changelog

Default example - metadata content

Default story no longer uses "Updated 2 hours ago" (which would have pulled in RelativeTime's outstanding accessibility issues). Replaced with <PeopleIcon /> 3 contributors. The metadata slot is also now documented in Card.docs.json and JSDoc to confirm it accepts any content, including other components.

Data-component attributes

Added data-component attributes per ADR-023 to Card, Card.Icon, Card.Image, Card.Heading, Card.Description, Card.Metadata, and Card.Menu.

Grouping content for accessibility — new as prop

Cards can now opt into being a <section> landmark via a new as prop. The prop is typed so as="section" requires aria-label or aria-labelledby.

// default: renders as <div>, no accessible name required
<Card>…</Card>

// section landmark: enforces an accessible name
<Card as="section" aria-labelledby="my-card-heading">
  <Card.Heading id="my-card-heading">Repo name</Card.Heading>
  …
</Card>

Interactive content

New WithMenu feature story showing an action menu inside a Card with an accessible name on the trigger (aria-label="More options for primer/react").

Custom content variant

CustomContent story now uses an <h3> heading instead of <strong>, resolving the WCAG 2.2 SC 1.3.1 violation.

Props section

Card.docs.json and JSDoc now document Card.Description, Card.Menu, and Card.Metadata.

Empty props

children is now required on Card. Empty cards log a dev warning and return null. Tests cover both paths.

Inline style attributes on wrapping divs

Added Card.stories.module.css with a WidthConstraintContainer class instead ofstyle={{…}} props in the stories.

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github-ui (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: c491a2d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

To publish a canary release for integration testing, apply the Canary Release label to this PR.

[Copilot]

Pull request overview

Updates the experimental Card component to address external accessibility review feedback by tightening runtime/dev-time validation, improving a11y-focused examples and docs, and aligning with the repo’s data-component instrumentation approach.

Changes:

• Added data-component attributes across Card and subcomponents; added an as prop to support rendering as a labelled <section> landmark (with runtime dev warnings for missing accessible name).
• Made children required and added a dev warning + null render for empty cards, with new unit test coverage.
• Improved Storybook examples and docs (new feature stories, removed inline styles in stories, expanded docs.json props coverage).

Show a summary per file

File	Description
packages/react/src/Card/Card.tsx	Adds children requirement, as="section" support + a11y warnings, and data-component attributes for Card + subcomponents.
packages/react/src/Card/Card.test.tsx	Adds tests for data-component, empty-children behavior, and as="section" landmark behavior/warnings.
packages/react/src/Card/Card.stories.tsx	Updates default/playground stories; uses CSS module decorator instead of inline max-width styles; updates metadata example content.
packages/react/src/Card/Card.stories.module.css	Introduces shared Storybook layout classes (width constraint, list layout, custom content layout).
packages/react/src/Card/Card.features.stories.tsx	Adds feature stories demonstrating menu usage, landmark section usage, list usage, and interactive content a11y labeling patterns.
packages/react/src/Card/Card.docs.json	Documents children requirement, as prop guidance, and props for Card.Description, Card.Menu, and Card.Metadata; adds new stories to docs.
.changeset/lucky-terms-sing.md	Declares a minor release for the new props/requirements and instrumentation updates.

Copilot's findings

• Files reviewed: 7/16 changed files
• Comments generated: 2

[primer-integration]

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/21133

[primer-integration]

Integration test results from github/github-ui:

  CI Running
  VRT Passed
  Projects Passed