A11y - add aria label and role for mobile search icon

Change-Id: I3437dfa3ff61dd4351dbfa91067c5a994bd0b02a

polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.js

@@ -147,6 +147,10 @@ class GrMainHeader extends GestureEventListeners(
         type: String,
         value: null,
       },
+      mobileSearchHidden: {
+        type: Boolean,
+        value: false,
+      },
     };
   }
 
@@ -346,6 +350,14 @@ class GrMainHeader extends GestureEventListeners(
 
     return '';
   }
+
+  _computeShowHideAriaLabel(mobileSearchHidden) {
+    if (mobileSearchHidden) {
+      return 'Show Searchbar';
+    } else {
+      return 'Hide Searchbar';
+    }
+  }
 }
 
 customElements.define(GrMainHeader.is, GrMainHeader);

polygerrit-ui/app/elements/core/gr-main-header/gr-main-header_html.ts

@@ -211,6 +211,8 @@ export const htmlTemplate = html`
           id="mobileSearch"
           icon="gr-icons:search"
           on-tap="_onMobileSearchTap"
+          role="button"
+          aria-label="[[_computeShowHideAriaLabel(mobileSearchHidden)]]"
         ></iron-icon>
         <div class$="[[_computeIsInvisible(_registerURL)]]">
           <a class="registerButton" href$="[[_registerURL]]">

polygerrit-ui/app/elements/gr-app-element_html.ts

@@ -97,6 +97,7 @@ export const htmlTemplate = html`
     search-query="{{params.query}}"
     on-mobile-search="_mobileSearchToggle"
     on-show-keyboard-shortcuts="handleShowKeyboardShortcuts"
+    mobile-search-hidden="[[!mobileSearch]]"
     login-url="[[_loginUrl]]"
   >
   </gr-main-header>