Updated accordions markup and related CSS

Pages in this section

What components does this change affect?

This change affects implementations of the page layout from the Design System.

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:

• The <main id="maincontent"> landmark has been moved so that it appears after the closing </header>  landmark.

Before

After

Why this change was made

This change ensures that the page's main content landmark correctly follows the header and navigation landmarks in the page structure.

This provides a clearer semantic structure for assistive technologies and allows users to navigate between the site's header/navigation and main content more predictably.

Benefits include:

• improved landmark structure
• clearer separation between navigation and main page content
• improved navigation for users of assistive technologies

Recommended checks for consuming teams

After making the HTML change, we recommend reviewing the page structure in your application.

Areas worth checking:

• the <main id="maincontent"> landmark appears immediately after the closing </header>
• page banner and other main-page content remain inside the <main id="maincontent"> element
• existing page layout and styling remain unchanged
• keyboard and assistive technology navigation continues to work as expected
• no application-specific CSS or JavaScript relies on the previous position of the <main id="maincontent"> element

Summary

This change repositions the <main id="maincontent"> landmark so that it follows the page header and navigation, providing a clearer semantic structure for assistive technologies.

The change requires a manual update to consuming applications and is not automatically applied through the Design System packages.

Internal reference

Design System internal reference: 102011