Rework the admin UI’s landmark based on established best practices

[thibaudcolas]

As part of #5275, we’ve introduced more ARIA landmarks across the CMS admin (<main>, and more). Axe is now reporting issues with those new landmarks:

• Banner landmark must not be contained in another landmark (https://dequeuniversity.com/rules/axe/3.2/landmark-banner-is-top-level?application=axeAPI)
• Contentinfo landmark must not be contained in another landmark (https://dequeuniversity.com/rules/axe/3.2/landmark-contentinfo-is-top-level?application=axeAPI)
• (Additionally, it is also reporting a missing main landmark for the 404 page)

These first 2 warnings are because the main wraps both the page’s main content, as well as areas designated as header and footer:

I’m not entirely sure which course to follow here – whether main should be right after header, and footer right after main, or whether we would want to remove some or all of those landmarks. Thoughts welcome! Tagging this as "enhancement" because Axe classifies this as a best practice rather than an accessibility compliance failure, and I’m not entirely sure of the impact on screen readers myself.

Relevant: #5275, #5406.

[lb-]

Current structure is basically

• html
  • body
    • .skiplink
    • div.wrapper
      • aside - sidebar
      • main
        • .messages (aria role needed?)
        • block content (which usually contains the header

What if we did the following;

• html
  • body
    • .skiplink
    • div.wrapper
      • nav - sidebar (instead of an aside)
      • header -
      • main
        • .messages (aria role needed? + also means it will show under the header, I think this is also a better experience UI and accessibility wise)
        • block content within main
      • footer - add ability to have a footer on each page by default

And we put the actual root elements in the skeleton so that they are in one place and not in each sub-template? (although, this makes it a bit harder to find things maybe).

wagtail/admin/templates/wagtailadmin/skeleton.html

        <a class="skiplink button" href="#main" data-skiplink>{% trans 'Skip to main content' %}</a>

        <div class="wrapper">
            {% block furniture %}
                <nav id="nav">{% block navigation %}{% endblock %}</nav>
                <header class="header" id="header">{% block header %}{% endblock %}</header>
                <main class="content-wrapper" id="main">
                    {% block messages %}{% endblock %}
                    {% block main %}{% endblock %}
                </main>
                {% block footer %}{% endblock %}
            {% endblock %}
        </div>

wagtail/admin/templates/wagtailadmin/base.html

{% extends "wagtailadmin/admin_base.html" %}
{% load wagtailadmin_tags wagtailcore_tags i18n %}

{% block navigation %}
    <template data-wagtail-sidebar-branding-logo>{% block branding_logo %}{% endblock %}</template>
    {% sidebar_props %}
    <div id="wagtail-sidebar" data-wagtail-sidebar></div>
{% endblock%}

{% block messages %}
    <div class="messages" data-wagtail-messages>
        {% if messages %}
            <ul>
                {% for message in messages %}
                    {% message_level_tag message as level_tag %}
                    <li class="{% message_tags message %}">
                        {% if level_tag == "error" %}
                            {# There is no error icon, use warning icon instead #}
                            {% icon name="warning" class_name="messages-icon" %}
                        {% elif message.extra_tags == "lock" %}
                            {% icon name="lock" class_name="messages-icon" %}
                        {% elif message.extra_tags == "unlock" %}
                            {% icon name="lock-open" class_name="messages-icon" %}
                        {% else %}
                            {% icon name=level_tag class_name="messages-icon" %}
                        {% endif %}
                        {{ message|safe }}
                    </li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
{% endblock %}

{% block main %}
    <div class="content">{% block content %}{% endblock %}</div>
{% endblock %}

[lb-]

Dom structure above based on https://www.w3.org/WAI/tutorials/page-structure/regions/