Added accessibility header landmark around Header (global) and Navigation (application)

What components does this change affect?

This change affects implementations of the Design System that use the Header (global) and Navigation (application).

The Header (global) is often referred to as the Universal Navigation and, in many Turas applications, is provided through Turas Core.

Implementation note

This change requires a manual update to the application HTML/layout and is not automatically applied through the Turas Design System NuGet or NPM packages.

HTML structure changes:

A header landmark with role="banner" has been added around the Universal Navigation and application navigation

Before

<body class="">
    <turas-skip-to-main-content></turas-skip-to-main-content>

    <div class="wrapper">
        <partial name="_universalNavigation" />

        <partial name="_mainNavigation" />

After

<body class="">
    <turas-skip-to-main-content></turas-skip-to-main-content>

    <div class="wrapper">

        <header role="banner">
            <partial name="_universalNavigation" />

            <partial name="_mainNavigation" />
        </header>

Why this change was made

This change adds a semantic banner landmark to identify the site's header and navigation area to assistive technologies.

The header element with role="banner" provides a recognised landmark that allows users of assistive technologies to identify and navigate directly to the site's header.

Benefits include:

improved navigation for users of assistive technologies
clearer semantic structure for the page
improved ability to identify and navigate to the site's header and navigation area

Recommended checks for consuming teams

After updating your Design System packages, we recommend reviewing accordion usage in your application.

Areas worth checking:

Universal Navigation displays correctly
application navigation displays correctly
existing navigation behaviour is unchanged
keyboard navigation continues to work as expected
no application-specific CSS or JavaScript relies on the previous markup structure
the banner landmark is present when inspecting the page structure

Summary

This change adds a header element with role="banner" around the Universal Navigation and application navigation, providing a clear semantic landmark for assistive technologies.

No changes to navigation functionality are intended.

Internal reference

Design System internal reference: 102007

Updated accordions markup and related CSS