templates: add role attributes to page zones (#34693)

static/includes/_layout.scss

@@ -23,7 +23,8 @@ div#page {
 	flex-direction: column;
 }
 
-div#page div#main-content-wrapper {
+div#page div#main-content-wrapper,
+div#page main {
 	-ms-flex: 1 0 auto;
 	-webkit-flex: 1 0 auto;
 	flex: 1 0 auto;

static/toodego/_custom.scss

@@ -117,7 +117,7 @@ div.banner {
 	}
 
 	@media screen and (max-width: $desktop-limit) {
-		+ #main-content-wrapper #content {
+		+ main #main-content-wrapper #content {
 			margin-top: 0;
 		}
 	}

templates/theme.html

@@ -49,7 +49,7 @@
    </div>
 
    <div id="page" {% block page-args %}{% endblock %}>
-    <header>
+    <header role="banner">
     <div id="header-wrapper" >
     {% block header-pre %}{% endblock %}
     <div id="header">
@@ -78,7 +78,7 @@
     </header>
 
 {% block nav %}
-<nav>
+<nav role="navigation">
 <div id="nav-wrapper" class="gru-nav-wrapper">
 {% block nav-pre %}{% endblock %}
 <div id="nav" class="gru-nav togglable">
@@ -107,6 +107,7 @@
   {% block before-main-content %}
   {% endblock %}
 
+  <main role="main">
   <div id="main-content-wrapper">
     <div id="main-content">
 
@@ -137,8 +138,9 @@
 
     </div> <!-- #main-content -->
     </div> <!-- #main-content-wrapper -->
+   </main>
 
-   <footer>
+   <footer role="contentinfo">
     {% block footer-top %}{% endblock %}
     <div id="footer-wrapper">
     <div id="footer">