[website] Visual eyebrow label "Products" rendered as heading level 2 (WCAG 1.3.1)

[Suchitau25]

Steps to reproduce

1. Open this link to the live page: https://mui.com/#main-content
2. Inspect the "Products" category label located directly above the primary section headline ("Every component you need is ready for production").
3. Inspect the primary section headline directly below it.
4. Observe that both elements are coded as native <h2> tags placed sequentially within the same container.

Current behavior

While "Products" is styled visually as a small category label (using MuiTypography-body2), assistive technologies like NVDA announce two consecutive, identical heading level 2 elements. This creates a mismatch between the visual presentation and the programmatic heading structure.

The category/eyebrow text "Products" and the primary section title "Every component you need is ready for production" are both coded as native <h2> elements in the DOM:

<h2 class="MuiTypography-root MuiTypography-body2 css-iqkanv">Products</h2>
<h2 class="MuiTypography-root MuiTypography-h2 css-wy5rtm">
  Every component you need is <span class="css-1w0syai">ready for production</span>
</h2>

Expected behavior
The programmatic DOM structure should accurately reflect the visual hierarchy:

Option A (Eyebrow Label): If "Products" functions purely as a category/eyebrow label rather than a structural heading, render it using a non-heading element (e.g., <span class="MuiTypography-body2">Products</span>), leaving "Every component you need is ready for production" as the sole <h2> for that section.

Option B (Nested Hierarchy): If "Products" is intended to serve as the main section heading (<h2>), the sub-headline "Every component you need..." should be marked as an <h3> to represent its nested visual relationship.

Context
WCAG Success Criteria Violated:

1.3.1 Info and Relationships (Level A): Information, structure, and relationships conveyed visually through presentation are not programmatically determinable.

User Impact: Screen reader users navigating by headings encounter duplicate, same-level headings for a single visual section, which distorts document outline navigation.

Testing Methodology: DHS Trusted Tester ICT Baseline / Manual DOM & Screen Reader Audit (NVDA).

N/A - Auditing live site ([https://mui.com/#main-content](https://mui.com/#main-content))

Browser: Chrome Version 151.0.7922.109 (Official Build) (64-bit)
OS: Windows 11
Input / Tools: DevTools Inspector, NVDA Screen Reader, ANDI

[Suchitau25]

Closing due to form formatting error, reopening fresh report.