Official header

The real wayne.edu masthead, rendered from @waynestate/wsuheader rather than copied into the project.

Preview

Code

The three render the same class names, the same ARIA and the same data attributes. That is checked when this site builds: a class in any of these samples that neither the markup contract nor the shipped stylesheet defines fails the build.

<!-- static-html pastes this fragment directly, since a static page has no
     server-side include; the raw PHP path gets the same bytes from
     wsu_masthead(), which reads them from disk instead of writing them out. -->
<link rel="stylesheet" href="/assets/wayne-ui/wayne-ui-official.css">
<div class="wsuheader">…</div>

Why it works this way

• Not written out anywhere in WayneUI. The Vue component re-exports @waynestate/wsuheader's own Header.vue; the Blade component reads the same vendored HTML fragment from disk at render time, through WSU\WayneUi\Support\OfficialChrome. Both paths render the university's own markup, unmodified, rather than a WayneUI rendering of it.
• 1.x pasted a 2017 snapshot of this markup into its own Blade template and never re-synced it. The official component has since renamed its own wrapper element, and nobody noticed for nine years: every 1.x application had been shipping a masthead that stopped matching wayne.edu sometime around 2017. Consuming it as a real dependency is what makes that impossible to repeat, since the copy updates when the university's package does.
• The vendored markup carries none of WayneUI's wsu- classes, so it sits outside the markup contract entirely: it is not something WayneUI emits, only something it displays. Its stylesheet ships separately, as wayne-ui-official.css, and is additive only; WayneUI's base layer never restyles it.
• Renders a div with no landmark of its own. AppBar sits directly below it on every public page and already is the page's one banner, so this is deliberately not wrapped in a second header; doing so would give the page two banner landmarks.
• wsu_masthead() renders this same vendored fragment by default. Pass ['variant' => 'native'] for the standalone helper's own rendering instead, documented on the Masthead page.
• The package ships two artifacts of itself that do not agree. dist/header.html, which static HTML, raw PHP and Blade all render, and src/Header.vue, which the Vue path renders instead, differ in wrapper class (wsuheaderwrap versus wsuwrap) and other detail, measured at @waynestate/wsuheader@2.2.2 and recorded in ADR-0015. That record decides not to absorb the difference: reconciling the two here would mean forking markup this project has already decided not to fork (ADR-0004), and the fork would silently go stale the next time the package updates, which is the exact nine-year failure ADR-0004 exists to prevent.

Accessibility

• This is the component wayne.edu itself ships. WayneUI does not restyle or re-markup it, so its accessibility is wayne.edu's to maintain, not something this documentation can claim WayneUI fixes.
• Its login link and site search sit outside any landmark, because the vendored div carries none. That is the one exception the accessibility suite's advisory best-practice pass names for this dependency by name.
• src/Header.vue is also missing the aria-label="Primary" that dist/header.html's search form carries, so on the Vue path that landmark has no accessible name (4.1.2). That is upstream's defect, reported to the web team; ADR-0015 is the record of why WayneUI does not patch it locally.
• WayneUI's 44px target-size rule deliberately excludes .wsuheader *: the vendored controls are already conformant at their own size, and stretching a 35 by 30 search submit to 44 by 44 would distort its glyph.

Success criteria in brackets refer to WCAG 2.2. Every one of them is checked by axe-core in both themes at three viewport widths before this page can be published. See Accessibility for what the gates are.