Banner: Allow Banner.Title to be set as <p> - #8275
Conversation
🦋 Changeset detectedLatest commit: ad45be3 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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
Bot
added
staff
|
|
🤖 Lint and formatting issues have been automatically fixed and committed to this PR. |
TylerJDev
added
the
Canary Release
GitHub Actions
Failure
|
Integration test results from github/github-ui PR:
|
There was a problem hiding this comment.
Pull request overview
This PR updates Banner.Title in @primer/react to support rendering as a paragraph (as="p") in addition to heading levels (h2–h6), to avoid introducing unnecessary headings in document structure (accessibility-driven, additive API change).
Changes:
- Expanded
Banner.Title’sasprop type to include'p'and set a default generic of'h2'. - Added a unit test covering paragraph rendering.
- Updated component docs metadata and added a minor changeset entry.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/Banner/Banner.tsx | Extends Banner.Title element type union to include p and simplifies prop typing to ComponentPropsWithoutRef<As>. |
| packages/react/src/Banner/Banner.test.tsx | Adds a test for as="p" rendering, but currently asserts an invalid ARIA role. |
| packages/react/src/Banner/Banner.docs.json | Documents 'p' support and records default as value ('h2'). |
| .changeset/tidy-banners-title-element.md | Adds a minor-release changeset entry for the new as="p" support. |
Review details
💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.
- Files reviewed: 4/4 changed files
- Comments generated: 1
- Review effort level: Lite
| <Banner.Title as="p">test paragraph</Banner.Title> | ||
| </Banner>, | ||
| ) | ||
| expect(screen.getByText('test paragraph')).toHaveRole('paragraph') |
There was a problem hiding this comment.
Sorry, I think I disagree with this choice. If the issue mentioned in the description is the only instance that benefits from opening up the API, we shouldn't do it.
Have we considered that the instance mentioned in the issue should not be a Banner at all as it does not satisfy the 2 use cases from the docs
- Highlight important information.
- Provide feedback after a user action.
It looks like a Banner, but looks like we do not want it to act like a Banner. (for me, the design choice is debatable too. It's "information" that a section has moved, there is no need for it to be attention grabbing (visually too) 🤔
Part of https://github.com/github/accessibility-audits/issues/16930
This PR allows
Banner.Titleto be rendered as a paragraph (<p>) in addition to the existing heading levels (h2–h6).In some contexts, a Banner is used where a heading is not appropriate. Rendering the title as a heading in those cases introduces an unnecessary heading into the document structure, which can be disorienting for screen reader users.
Allowing
Banner.Titleto be set as a<p>lets consumers avoid an unnecessary heading level while keeping the visual styling of the title.The default remains
h2, so this is a non-breaking, additive change.Changelog
New
Banner.Titlenow supportsas="p"to render the title as a paragraph instead of a heading.Changed
asprop type forBanner.Titlefrom'h2' | 'h3' | 'h4' | 'h5' | 'h6'to also include'p', and documented the default value of'h2'.Removed
Rollout strategy
Testing & Reviewing
Banner.Titlestill renders as anh2heading by default.Banner.Title as="p"renders a paragraph element (no heading role) — see the added testshould support rendering as a paragraph element.h2–h6) is unchanged.