A11y - Each page should have only one main

https://www.w3.org/TR/wai-aria-practices/examples/landmarks/main.html

Change-Id: I50acdc27619f38268d8bda5a5f2477679e66270b

polygerrit-ui/app/elements/admin/gr-admin-view/gr-admin-view_html.ts

@@ -51,7 +51,7 @@ export const htmlTemplate = html`
     .selectText.show {
       display: inline-block;
     }
-    main.breadcrumbs:not(.table) {
+    .main.breadcrumbs:not(.table) {
       margin-top: var(--spacing-l);
     }
   </style>
@@ -114,69 +114,69 @@ export const htmlTemplate = html`
     </section>
   </template>
   <template is="dom-if" if="[[_showRepoList]]" restamp="true">
-    <main class="table">
+    <div class="main table">
       <gr-repo-list class="table" params="[[params]]"></gr-repo-list>
-    </main>
+    </div>
   </template>
   <template is="dom-if" if="[[_showGroupList]]" restamp="true">
-    <main class="table">
+    <div class="main table">
       <gr-admin-group-list class="table" params="[[params]]">
       </gr-admin-group-list>
-    </main>
+    </div>
   </template>
   <template is="dom-if" if="[[_showPluginList]]" restamp="true">
-    <main class="table">
+    <div class="main table">
       <gr-plugin-list class="table" params="[[params]]"></gr-plugin-list>
-    </main>
+    </div>
   </template>
   <template is="dom-if" if="[[_showRepoMain]]" restamp="true">
-    <main class="breadcrumbs">
+    <div class="main breadcrumbs">
       <gr-repo repo="[[params.repo]]"></gr-repo>
-    </main>
+    </div>
   </template>
   <template is="dom-if" if="[[_showGroup]]" restamp="true">
-    <main class="breadcrumbs">
+    <div class="main breadcrumbs">
       <gr-group
         group-id="[[params.groupId]]"
         on-name-changed="_updateGroupName"
       ></gr-group>
-    </main>
+    </div>
   </template>
   <template is="dom-if" if="[[_showGroupMembers]]" restamp="true">
-    <main class="breadcrumbs">
+    <div class="main breadcrumbs">
       <gr-group-members group-id="[[params.groupId]]"></gr-group-members>
-    </main>
+    </div>
   </template>
   <template is="dom-if" if="[[_showRepoDetailList]]" restamp="true">
-    <main class="table breadcrumbs">
+    <div class="main table breadcrumbs">
       <gr-repo-detail-list
         params="[[params]]"
         class="table"
       ></gr-repo-detail-list>
-    </main>
+    </div>
   </template>
   <template is="dom-if" if="[[_showGroupAuditLog]]" restamp="true">
-    <main class="table breadcrumbs">
+    <div class="main table breadcrumbs">
       <gr-group-audit-log
         group-id="[[params.groupId]]"
         class="table"
       ></gr-group-audit-log>
-    </main>
+    </div>
   </template>
   <template is="dom-if" if="[[_showRepoCommands]]" restamp="true">
-    <main class="breadcrumbs">
+    <div class="main breadcrumbs">
       <gr-repo-commands repo="[[params.repo]]"></gr-repo-commands>
-    </main>
+    </div>
   </template>
   <template is="dom-if" if="[[_showRepoAccess]]" restamp="true">
-    <main class="breadcrumbs">
+    <div class="main breadcrumbs">
       <gr-repo-access path="[[path]]" repo="[[params.repo]]"></gr-repo-access>
-    </main>
+    </div>
   </template>
   <template is="dom-if" if="[[_showRepoDashboards]]" restamp="true">
-    <main class="table breadcrumbs">
+    <div class="main table breadcrumbs">
       <gr-repo-dashboards repo="[[params.repo]]"></gr-repo-dashboards>
-    </main>
+    </div>
   </template>
   <gr-js-api-interface id="jsAPI"></gr-js-api-interface>
 `;

polygerrit-ui/app/elements/admin/gr-group-members/gr-group-members_html.ts

@@ -56,8 +56,8 @@ export const htmlTemplate = html`
       display: none;
     }
   </style>
-  <main
-    class$="gr-form-styles [[_computeHideItemClass(_groupOwner, _isAdmin)]]"
+  <div
+    class$="main gr-form-styles [[_computeHideItemClass(_groupOwner, _isAdmin)]]"
   >
     <div id="loading" class$="[[_computeLoadingClass(_loading)]]">
       Loading...
@@ -170,7 +170,7 @@ export const htmlTemplate = html`
         </fieldset>
       </div>
     </div>
-  </main>
+  </div>
   <gr-overlay id="overlay" with-backdrop="">
     <gr-confirm-delete-item-dialog
       class="confirmDialog"

polygerrit-ui/app/elements/admin/gr-group/gr-group_html.ts

@@ -32,7 +32,7 @@ export const htmlTemplate = html`
   <style include="gr-form-styles">
     /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
   </style>
-  <main class="gr-form-styles read-only">
+  <div class="main gr-form-styles read-only">
     <div id="loading" class$="[[_computeLoadingClass(_loading)]]">
       Loading...
     </div>
@@ -164,5 +164,5 @@ export const htmlTemplate = html`
         </fieldset>
       </div>
     </div>
-  </main>
+  </div>
 `;

polygerrit-ui/app/elements/admin/gr-repo-access/gr-repo-access_html.ts

@@ -60,7 +60,7 @@ export const htmlTemplate = html`
   <style include="gr-menu-page-styles">
     /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
   </style>
-  <main class$="[[_computeMainClass(_ownerOf, _canUpload, _editing)]]">
+  <div class$="main [[_computeMainClass(_ownerOf, _canUpload, _editing)]]">
     <div id="loading" class$="[[_computeLoadingClass(_loading)]]">
       Loading...
     </div>
@@ -142,5 +142,5 @@ export const htmlTemplate = html`
         >
       </div>
     </div>
-  </main>
+  </div>
 `;

polygerrit-ui/app/elements/admin/gr-repo-commands/gr-repo-commands_html.ts

@@ -28,7 +28,7 @@ export const htmlTemplate = html`
       margin-bottom: var(--spacing-xxl);
     }
   </style>
-  <main class="gr-form-styles read-only">
+  <div class="main gr-form-styles read-only">
     <h1 id="Title" class="heading-1">Repository Commands</h1>
     <div id="loading" class$="[[_computeLoadingClass(_loading)]]">
       Loading...
@@ -67,7 +67,7 @@ export const htmlTemplate = html`
         </gr-endpoint-decorator>
       </div>
     </div>
-  </main>
+  </div>
   <gr-overlay id="createChangeOverlay" with-backdrop="">
     <gr-dialog
       id="createChangeDialog"

polygerrit-ui/app/elements/admin/gr-repo/gr-repo_html.ts

@@ -45,7 +45,7 @@ export const htmlTemplate = html`
   <style include="gr-form-styles">
     /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
   </style>
-  <main class="gr-form-styles read-only">
+  <div class="main gr-form-styles read-only">
     <style include="shared-styles">
       /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
     </style>
@@ -435,5 +435,5 @@ export const htmlTemplate = html`
         </gr-endpoint-decorator>
       </div>
     </div>
-  </main>
+  </div>
 `;

polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view_html.ts

@@ -33,7 +33,7 @@ export const htmlTemplate = html`
     #email {
       margin-bottom: var(--spacing-l);
     }
-    main section.darkToggle {
+    .main section.darkToggle {
       display: block;
     }
     .filters p,
@@ -99,7 +99,7 @@ export const htmlTemplate = html`
         </gr-endpoint-decorator>
       </ul>
     </gr-page-nav>
-    <main class="gr-form-styles">
+    <div class="main gr-form-styles">
       <h1 class="heading-1">User Settings</h1>
       <section class="darkToggle">
         <div class="toggle">
@@ -551,6 +551,6 @@ export const htmlTemplate = html`
         </table>
       </fieldset>
       <gr-endpoint-decorator name="settings-screen"> </gr-endpoint-decorator>
-    </main>
+    </div>
   </div>
 `;

polygerrit-ui/app/elements/shared/gr-page-nav/gr-page-nav_html.ts

@@ -36,7 +36,7 @@ export const htmlTemplate = html`
       }
     }
   </style>
-  <nav id="nav">
+  <nav id="nav" aria-label="Sidebar">
     <slot></slot>
   </nav>
 `;

polygerrit-ui/app/styles/gr-menu-page-styles.ts

@@ -28,7 +28,7 @@ $_documentContainer.innerHTML = `<dom-module id="gr-menu-page-styles">
       :host {
         display: block;
       }
-      main {
+      .main {
         margin: var(--spacing-xxl) auto;
         max-width: 50em;
       }
@@ -36,7 +36,7 @@ $_documentContainer.innerHTML = `<dom-module id="gr-menu-page-styles">
         margin-left: 14em;
         padding: var(--spacing-l) 0 var(--spacing-l) var(--spacing-xxl);
       }
-      main.table,
+      .main.table,
       .mainHeader {
         margin-top: 0;
         margin-right: 0;
@@ -52,10 +52,10 @@ $_documentContainer.innerHTML = `<dom-module id="gr-menu-page-styles">
         padding: var(--spacing-l);
       }
       @media only screen and (max-width: 67em) {
-        main {
+        .main {
           margin: var(--spacing-xxl) 0 var(--spacing-xxl) 15em;
         }
-        main.table {
+        .main.table {
           margin-left: 14em;
         }
       }
@@ -63,10 +63,10 @@ $_documentContainer.innerHTML = `<dom-module id="gr-menu-page-styles">
         .loading {
           padding: 0 var(--spacing-l);
         }
-        main {
+        .main {
           margin: var(--spacing-xxl) var(--spacing-l);
         }
-        main.table {
+        .main.table {
           margin: 0;
         }
         .mainHeader {

polygerrit-ui/app/styles/gr-subpage-styles.ts

@@ -25,7 +25,7 @@ const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<dom-module id="gr-subpage-styles">
   <template>
     <style>
-      main {
+      .main {
         margin: var(--spacing-l);
       }
       .loading {