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

[pranjalisr]

Fixing #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 (axe 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.