Remove inappropriate banner landmarks & adopt main element in admin 404

According to the ARIA spec:

> A region that contains mostly site-oriented content, rather than page-specific content.

> Site-oriented content typically includes things such as the logo or identity of the site sponsor, and a site-specific search tool. A banner usually appears at the top of the page and typically spans the full width.

Where the `banner` role was applied was more page-specific than
site-specific. In addition, tags with `banner` roles should not live
under another landmark. To rectify, removed the misused banner roles.

Remove inappropriate contentinfo landmarks

According to ARIA spec 1.1

> A large perceivable region that contains information about the parent document.

> Examples of information included in this region of the page are copyrights and links to privacy statements.

They don't apply to the action buttons on where this was applied to.

Add main landmark to 404 page

CHANGELOG.txt

@@ -46,6 +46,7 @@ Changelog
  * Fix: No longer expose the `.delete()` method on the default Page.objects manager (Nick Smith)
  * Fix: `exclude_fields_in_copy` on Page models will now work for for modelcluster parental / many to many relations (LB (Ben Johnston))
  * Fix: Response header (content disposition) now correctly handles filenames with non-ascii characters when using a storage backend (Rich Brennan)
+ * Fix: Improved accessibility fixes for `main`, `header` and `footer` elements in the admin page layout (Mitchel Cabuloy)
 
 
 2.8.1 (14.04.2020)

docs/releases/2.9.rst

@@ -64,6 +64,7 @@ Bug fixes
  * No longer expose the ``.delete()`` method on the default Page.objects manager (Nick Smith)
  * ``exclude_fields_in_copy`` on Page models will now work for for modelcluster parental / many to many relations (LB (Ben Johnston))
  * Response header (content disposition) now correctly handles filenames with non-ascii characters when using a storage backend (Rich Brennan)
+ * Improved accessibility fixes for ``main``, ``header`` and ``footer`` elements in the admin page layout (Mitchel Cabuloy)
 
 
 Upgrade considerations

wagtail/admin/templates/wagtailadmin/404.html

@@ -11,7 +11,7 @@
 
 
 {% block furniture %}
-    <div class="page404__bg">
+    <main class="page404__bg">
         <div class="page404__wrapper">
             {% block branding_logo %}
                 {% include "wagtailadmin/shared/animated_logo.html" %}
@@ -29,5 +29,5 @@
                 <a class="page404__button button" href="{% url 'wagtailadmin_home' %}">{% trans "Go to Wagtail admin" %}</a>
             </div>
         </div>
-    </div>
+    </main>
 {% endblock %}

wagtail/admin/templates/wagtailadmin/home.html

@@ -10,7 +10,7 @@
 {% endblock %}
 
 {% block content %}
-    <header class="merged nice-padding" role="banner">
+    <header class="merged nice-padding">
         <div class="row row-flush">
             <div class="col1">
                 <div class="avatar"><img src="{% avatar_url user %}" alt="" /></div>

wagtail/admin/templates/wagtailadmin/pages/create.html

@@ -7,7 +7,7 @@
 
 {% block content %}
 
-    <header class="merged tab-merged" role="banner">
+    <header class="merged tab-merged">
         {% explorer_breadcrumb parent_page include_self=1 %}
 
         <div class="row row-flush">
@@ -23,7 +23,7 @@
         <input type="hidden" name="next" value="{{ next }}">
         {{ edit_handler.render_form_content }}
 
-        <footer role="contentinfo">
+        <footer>
             <nav aria-label="{% trans 'Actions' %}">
                 <ul>
                   <li class="actions">

wagtail/admin/templates/wagtailadmin/pages/edit.html

@@ -7,7 +7,7 @@
 
 {% block content %}
     {% page_permissions page as page_perms %}
-    <header class="merged tab-merged" role="banner">
+    <header class="merged tab-merged">
         {% explorer_breadcrumb page %}
 
         <div class="row row-flush">
@@ -34,7 +34,7 @@
             <input type="hidden" name="revision" value="{{ revision.id|unlocalize }}" />
         {% endif %}
 
-        <footer role="contentinfo">
+        <footer>
             <nav aria-label="{% trans 'Actions' %}">
                 <ul>
                     <li class="actions">

wagtail/admin/templates/wagtailadmin/pages/index.html

@@ -4,7 +4,7 @@
 {% block bodyclass %}page-explorer {% if ordering == 'ord' %}reordering{% endif %}{% endblock %}
 
 {% block content %}
-    <header class="merged no-border nice-padding no-v-padding" role="banner">
+    <header class="merged no-border nice-padding no-v-padding">
         <h1 class="visuallyhidden">Explorer</h1>
 
         {% explorer_breadcrumb parent_page %}

wagtail/admin/templates/wagtailadmin/pages/move_choose_destination.html

@@ -2,7 +2,7 @@
 {% load i18n wagtailadmin_tags %}
 {% block titletag %}{% blocktrans with title=page_to_move.get_admin_display_title %}Select a new parent page for {{ title }}{% endblocktrans %}{% endblock %}
 {% block content %}
-    <header class="nice-padding" role="banner">
+    <header class="nice-padding">
         <h1 class="icon icon-doc-empty-inverse">{% blocktrans with title=page_to_move.get_admin_display_title %}Select a new parent page for <span>{{ title }}</span>{% endblocktrans %}</h1>
     </header>
 

wagtail/admin/templates/wagtailadmin/pages/preview_error.html

@@ -4,7 +4,7 @@
 {% block titletag %}{% trans 'Preview error' %}{% endblock %}
 
 {% block content %}
-    <header class="nice-padding" role="banner">
+    <header class="nice-padding">
         <h1>{% trans 'Preview error' %}</h1>
     </header>
     <div class="nice-padding">

wagtail/admin/templates/wagtailadmin/shared/header.html

@@ -17,7 +17,7 @@
     add_link - if present, display an 'add' button. This is a URL route name (taking no parameters) to be used as the link URL for the button
     add_text - text for the 'add' button
 {% endcomment %}
-<header class="{% if merged %}merged{% endif %} {% if tabbed %}tab-merged{% endif %} {% if search_form %}hasform{% endif %}" role="banner">
+<header class="{% if merged %}merged{% endif %} {% if tabbed %}tab-merged{% endif %} {% if search_form %}hasform{% endif %}">
     {% block breadcrumb %}{% endblock %}
     <div class="row nice-padding">
         <div class="left">

wagtail/contrib/forms/templates/wagtailforms/index_submissions.html

@@ -81,7 +81,7 @@
     </script>
 {% endblock %}
 {% block content %}
-    <header class="nice-padding" role="banner">
+    <header class="nice-padding">
         <form action="" method="get" novalidate>
             <div class="row">
                 <div class="left">

wagtail/contrib/modeladmin/templates/modeladmin/create.html

@@ -34,7 +34,7 @@
         {% block form %}{{ edit_handler.render_form_content }}{% endblock %}
 
         {% block footer %}
-            <footer role="contentinfo">
+            <footer>
                 <ul>
                     <li class="actions">
                         {% block form_actions %}

wagtail/contrib/modeladmin/templates/modeladmin/index.html

@@ -15,7 +15,7 @@
 
 {% block content %}
     {% block header %}
-        <header class="nice-padding hasform" role="banner">
+        <header class="nice-padding hasform">
             <div class="row header-title">
                 <div class="left">
                     <div class="col">

wagtail/contrib/modeladmin/templates/modeladmin/inspect.html

@@ -44,7 +44,7 @@
 
     {% block footer %}
         {% if buttons %}
-            <footer role="contentinfo">
+            <footer>
                 <div class="button-group">
                     {% for button in buttons %}
                         {% include "modeladmin/includes/button.html" %}

wagtail/contrib/settings/templates/wagtailsettings/edit.html

@@ -3,7 +3,7 @@
 {% block titletag %}{% blocktrans %}Editing {{ setting_type_name}} - {{ instance }}{% endblocktrans %}{% endblock %}
 {% block bodyclass %}menu-settings{% endblock %}
 {% block content %}
-    <header class="nice-padding {% if tabbed %}merged tab-merged{% endif %}" role="banner">
+    <header class="nice-padding {% if tabbed %}merged tab-merged{% endif %}">
         <div class="row">
             <div class="left">
                 <div class="col">
@@ -30,7 +30,7 @@
         {% csrf_token %}
         {{ edit_handler.render_form_content }}
 
-        <footer role="contentinfo">
+        <footer>
             <ul>
                 <li class="actions dropdown dropup match-width">
                     <button type="submit" class="button button-longrunning" data-clicked-text="{% trans 'Saving…' %}"><span class="icon icon-spinner"></span><em>{% trans 'Save' %}</em></button>

wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html

@@ -635,7 +635,7 @@
             </div>
 
             <p>These can also have an inverted  theme:</p>
-            <header class="nice-padding" role="banner">
+            <header class="nice-padding">
                 <div class="c-dropdown  t-inverted" data-dropdown="">
                     <a class="c-dropdown__button  u-btn-current">
                         More

wagtail/project_template/home/templates/home/welcome_page.html

@@ -1,6 +1,6 @@
 {% templatetag openblock %} load i18n wagtailcore_tags {% templatetag closeblock %}
 
-<header class="header" role="banner">
+<header class="header">
   <div class="logo">
     <a href="https://wagtail.io/">
       <svg class="figure-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 342.5 126.2"><title>{% templatetag openblock %} trans "Visit the Wagtail website" {% templatetag closeblock %}</title><path fill="#FFF" d="M84 1.9v5.7s-10.2-3.8-16.8 3.1c-4.8 5-5.2 10.6-3 18.1 21.6 0 25 12.1 25 12.1L87 27l6.8-8.3c0-9.8-8.1-16.3-9.8-16.8z"/><circle cx="85.9" cy="15.9" r="2.6"/><path d="M89.2 40.9s-3.3-16.6-24.9-12.1c-2.2-7.5-1.8-13 3-18.1C73.8 3.8 84 7.6 84 7.6V1.9C80.4.3 77 0 73.2 0 59.3 0 51.6 10.4 48.3 17.4L9.2 89.3l11-2.1-20.2 39 14.1-2.5L24.9 93c30.6 0 69.8-11 64.3-52.1z"/><path d="M102.4 27l-8.6-8.3L87 27z"/><path fill="#FFF" d="M30 84.1s1-.2 2.8-.6c1.8-.4 4.3-1 7.3-1.8 1.5-.4 3.1-.9 4.8-1.5 1.7-.6 3.5-1.2 5.2-2 1.8-.7 3.6-1.6 5.4-2.6 1.8-1 3.5-2.1 5.1-3.4.4-.3.8-.6 1.2-1l1.2-1c.7-.7 1.5-1.4 2.2-2.2.7-.7 1.3-1.5 1.9-2.3l.9-1.2.4-.6.4-.6c.2-.4.5-.8.7-1.2.2-.4.4-.8.7-1.2l.3-.6.3-.6c.2-.4.4-.8.5-1.2l.9-2.4c.2-.8.5-1.6.7-2.3.2-.7.3-1.5.5-2.1.1-.7.2-1.3.3-2 .1-.6.2-1.2.2-1.7.1-.5.1-1 .2-1.5.1-1.8.1-2.8.1-2.8l1.6.1s-.1 1.1-.2 2.9c-.1.5-.1 1-.2 1.5-.1.6-.1 1.2-.3 1.8-.1.6-.3 1.3-.4 2-.2.7-.4 1.4-.6 2.2-.2.8-.5 1.5-.8 2.4-.3.8-.6 1.6-1 2.5l-.6 1.2-.3.6-.3.6c-.2.4-.5.8-.7 1.3-.3.4-.5.8-.8 1.2-.1.2-.3.4-.4.6l-.4.6-.9 1.2c-.7.8-1.3 1.6-2.1 2.3-.7.8-1.5 1.4-2.3 2.2l-1.2 1c-.4.3-.8.6-1.3.9-1.7 1.2-3.5 2.3-5.3 3.3-1.8.9-3.7 1.8-5.5 2.5-1.8.7-3.6 1.3-5.3 1.8-1.7.5-3.3 1-4.9 1.3-3 .7-5.6 1.3-7.4 1.6-1.6.6-2.6.8-2.6.8z"/><g fill="#231F20"><path d="M127 83.9h-8.8l-12.6-36.4h7.9l9 27.5 9-27.5h7.9l9 27.5 9-27.5h7.9L153 83.9h-8.8L135.6 59 127 83.9zM200.1 83.9h-7V79c-3 3.6-7 5.4-12.1 5.4-3.8 0-6.9-1.1-9.4-3.2s-3.7-5-3.7-8.6c0-3.6 1.3-6.3 4-8 2.6-1.8 6.2-2.7 10.7-2.7h9.9v-1.4c0-4.8-2.7-7.3-8.1-7.3-3.4 0-6.9 1.2-10.5 3.7l-3.4-4.8c4.4-3.5 9.4-5.3 15.1-5.3 4.3 0 7.8 1.1 10.5 3.2 2.7 2.2 4.1 5.6 4.1 10.2v23.7zm-7.7-13.6v-3.1h-8.6c-5.5 0-8.3 1.7-8.3 5.2 0 1.8.7 3.1 2.1 4.1 1.4.9 3.3 1.4 5.7 1.4 2.4 0 4.6-.7 6.4-2.1 1.8-1.3 2.7-3.1 2.7-5.5zM241.7 47.5v31.7c0 6.4-1.7 11.3-5.2 14.5-3.5 3.2-8 4.8-13.4 4.8-5.5 0-10.4-1.7-14.8-5.1l3.6-5.8c3.6 2.7 7.1 4 10.8 4 3.6 0 6.5-.9 8.6-2.8 2.1-1.9 3.2-4.9 3.2-9v-4.7c-1.1 2.1-2.8 3.9-4.9 5.1-2.1 1.3-4.5 1.9-7.1 1.9-4.8 0-8.8-1.7-11.9-5.1-3.1-3.4-4.7-7.6-4.7-12.6s1.6-9.2 4.7-12.6c3.1-3.4 7.1-5.1 11.9-5.1 4.8 0 8.7 2 11.7 6v-5.4h7.5zm-28.4 16.8c0 3 .9 5.6 2.8 7.7 1.8 2.2 4.3 3.2 7.5 3.2 3.1 0 5.7-1 7.6-3.1 1.9-2.1 2.9-4.7 2.9-7.8 0-3.1-1-5.8-2.9-7.9-2-2.2-4.5-3.2-7.6-3.2-3.1 0-5.6 1.1-7.4 3.4-2 2.1-2.9 4.7-2.9 7.7zM260.9 53.6v18.5c0 1.7.5 3.1 1.4 4.1.9 1 2.2 1.5 3.8 1.5 1.6 0 3.2-.8 4.7-2.4l3.1 5.4c-2.7 2.4-5.7 3.6-8.9 3.6-3.3 0-6-1.1-8.3-3.4-2.3-2.3-3.5-5.3-3.5-9.1V53.6h-4.6v-6.2h4.6V36.1h7.7v11.4h9.6v6.2h-9.6zM309.5 83.9h-7V79c-3 3.6-7 5.4-12.1 5.4-3.8 0-6.9-1.1-9.4-3.2s-3.7-5-3.7-8.6c0-3.6 1.3-6.3 4-8 2.6-1.8 6.2-2.7 10.7-2.7h9.9v-1.4c0-4.8-2.7-7.3-8.1-7.3-3.4 0-6.9 1.2-10.5 3.7l-3.4-4.8c4.4-3.5 9.4-5.3 15.1-5.3 4.3 0 7.8 1.1 10.5 3.2 2.7 2.2 4.1 5.6 4.1 10.2v23.7zm-7.7-13.6v-3.1h-8.6c-5.5 0-8.3 1.7-8.3 5.2 0 1.8.7 3.1 2.1 4.1 1.4.9 3.3 1.4 5.7 1.4 2.4 0 4.6-.7 6.4-2.1 1.8-1.3 2.7-3.1 2.7-5.5zM319.3 40.2c-1-1-1.4-2.1-1.4-3.4 0-1.3.5-2.5 1.4-3.4 1-1 2.1-1.4 3.4-1.4 1.3 0 2.5.5 3.4 1.4 1 1 1.4 2.1 1.4 3.4 0 1.3-.5 2.5-1.4 3.4s-2.1 1.4-3.4 1.4c-1.3.1-2.4-.4-3.4-1.4zm7.2 43.7h-7.7V47.5h7.7v36.4zM342.5 83.9h-7.7V33.1h7.7v50.8z"/></g></svg>

wagtail/snippets/templates/wagtailsnippets/snippets/create.html

@@ -9,7 +9,7 @@
         {% csrf_token %}
         {{ edit_handler.render_form_content }}
 
-        <footer role="contentinfo">
+        <footer>
             <ul>
                 <li class="actions">
                     <div class="dropdown dropup dropdown-button match-width">

wagtail/snippets/templates/wagtailsnippets/snippets/edit.html

@@ -12,7 +12,7 @@
             <form action="{% url 'wagtailsnippets:edit' model_opts.app_label model_opts.model_name instance.pk|admin_urlquote %}" method="POST" novalidate{% if form.is_multipart %} enctype="multipart/form-data"{% endif %}>
                 {% csrf_token %}
                 {{ edit_handler.render_form_content }}
-                <footer role="contentinfo">
+                <footer>
                     <nav aria-label="{% trans 'Actions' %}">
                     <ul>
                         <li class="actions">

wagtail/snippets/templates/wagtailsnippets/snippets/type_index.html

@@ -18,7 +18,7 @@
 
 {% block content %}
 
-    <header class="nice-padding" role="banner">
+    <header class="nice-padding">
         <div class="row row-flush">
             <div class="left col6 header-title">
                 <h1 class="icon icon-snippet">