fix(a11y): correct tip/warning/prefix semantics to prevent heading misidentification

[pranjalisr]

fixes #7594

Summary

This PR addresses one of the accessibility problems highlighted in Issue #7594, where .tip__prefix, .warning__prefix, .preview__prefix, and .todo__prefix are incorrectly interpreted as headings by accessibility tools (DevTools shows them as “heading” roles because of their visual styling).

This creates incorrect document hierarchy and fails WCAG 1.3.1 (Info and Relationships).

What does this PR change?

The previous prefix styles visually resembled headings:
font-weight: 700
font-size: getFontSize(1)
color: #000
inline appearance similar to h6

To fix this, the PR updates the styling to ensure these prefixes are treated as body text, not headings.

✔ Added display: block
✔ Added small separation (margin-bottom: 0.25em)
✔ Reduced emphasis
✔ Adjusted size + weight to match body text
✔ Updated color to meet contrast guidelines

Updated prefix styles:
display: block;
margin-bottom: 0.25em;
text-transform: capitalize;
font-weight: 600;
font-size: 0.95rem;
color: #1a1a1a;

Why this change?

Prevents accessibility tools (axe) from flagging these elements as headings
Fixes incorrect document structure
Improves clarity for screen readers
Matches the design intent (labels, not headings)

Did you add tests?

No visual tests for SCSS exist in the project.

However, changes were manually verified locally using:

Axe DevTools browser extension
Browser stylesheet inspection
Rendering in multiple Markdown tip/warning blocks

Does this introduce a breaking change?

❌ No functional breaking changes.
The change only affects documentation UI styling.

Documentation

No documentation update required — this is purely a CSS-level accessibility fix.

[vercel]

@pranjalisr is attempting to deploy a commit to the OpenJS Foundation Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
webpack-js-org	Ready	Preview, Comment	Feb 11, 2026 1:44pm

[pranjalisr]

@evenstensberg All review comments have been addressed and checks are passing. Ready for review from a reviewer with write access. Thanks!

[evenstensberg]

How did you run your a11y audit?

[pranjalisr]

How did you run your a11y audit?

I ran a Lighthouse accessibility audit locally. I re-ran it today also just to re-check. Attaching snapshot below:

[evenstensberg]

Do you have before / after reports? In your recent comment this says that the button names are failing and this pr is unrelated to that. For buttons we need to add aria-labels..

https://dequeuniversity.com/rules/axe/4.4/button-name

[pranjalisr]

@evenstensberg I need guidance from you here. It's true that Lighthouse button-name warning is unrelated to this PR. That can be done with another PR. It might work if I replace h6 with span or p. I mean replace heading tag with paragraph or span tag.
What do you suggest?

[pranjalisr]

For this PR, I verified the change using Chrome DevTools → Accessibility pane rather than relying on the Lighthouse score.

Before: the callout prefix rendered as h6 and appeared in the accessibility tree as role: heading (level 6).
After: I updated remark-custom-asides to render the prefix as para instead, and it now appears as role: paragraph