Use <main> element so that it becomes an ARIA landmark (Bug #1482456)

behatnotneeded

Change-Id: Ib8e37d56b12916f257a5a054608b0fff02c5962e

htdocs/theme/default/templates/footer.tpl

-    
+
           </div><!-- end main-column -->
-    
+
           </div><!-- mainmiddle -->
-    
-          </div>
-    
+
+          </main>
+
           {if $SIDEBARS && $SIDEBLOCKS.right}
               <div class="col-md-3 sidebar">
                 {include file="sidebar.tpl" blocks=$SIDEBLOCKS.right}
               </div>
           {/if}
-    
+
           {if $SIDEBARS && $SIDEBLOCKS.left}
               <div class="col-md-3 col-md-pull-9 sidebar">
                   {include file="sidebar.tpl" blocks=$SIDEBLOCKS.left}
               </div>
           {/if}
-    
-    
+
           </div><!-- row -->
-    
+
        </div><!-- container -->
-       
+
    </div><!-- middle-container-wrap -->
 
     <footer class="{if $editing == true}editcontent{/if} footer container">

htdocs/theme/default/templates/header.tpl

@@ -72,7 +72,7 @@
     <div class="middle-container-wrap"><!-- this div is to give middle section a background colour so that the body can inherit footer background colour and not stop abruptly -->
         <div class="container main-content">
             <div class="row">
-                <div id="main" class="{if $SIDEBARS}{if $SIDEBLOCKS.right}col-md-9 {else}col-md-9 col-md-push-3{/if}{else}col-md-12{/if} main">
+                <main id="main" class="{if $SIDEBARS}{if $SIDEBLOCKS.right}col-md-9 {else}col-md-9 col-md-push-3{/if}{else}col-md-12{/if} main">
                     <div id="content" class="main-column{if $selected == 'content'} editcontent{/if}">
                         <div id="main-column-container">
 

htdocs/theme/raw/templates/footer.tpl

@@ -3,7 +3,7 @@
 
       </div><!-- mainmiddle -->
 
-      </div>
+      </main>
 
       {if $SIDEBARS && $SIDEBLOCKS.right}
           <div class="col-md-3 sidebar">

htdocs/theme/raw/templates/header.tpl

@@ -75,7 +75,7 @@
 
     <div class="container main-content">
         <div class="row">
-            <div id="main" class="{if $SIDEBARS}{if $SIDEBLOCKS.right}col-md-9 {else}col-md-9 col-md-push-3{/if}{else}col-md-12{/if} main">
+            <main id="main" class="{if $SIDEBARS}{if $SIDEBLOCKS.right}col-md-9 {else}col-md-9 col-md-push-3{/if}{else}col-md-12{/if} main">
                 <div id="content" class="main-column{if $selected == 'content'} editcontent{/if}">
                     <div id="main-column-container">