[ACS-10885] Dashboard: Non-descriptive announcement of the Company Logo button (#4975)

projects/aca-content/assets/i18n/en.json

@@ -472,6 +472,7 @@
         },
         "TOOLTIPS": {
             "COLLAPSE_NAVIGATION": "Collapse navigation menu",
+            "COLLAPSE_NAVIGATION_ALT": "Collapse navigation menu icon",
             "OPTIONS_SETTINGS": "Options and settings",
             "MY_PROFILE": "My profile",
             "EXPAND_NAVIGATION": "Expand navigation menu",

projects/aca-content/src/lib/components/sidenav/components/sidenav-header.component.html

@@ -1,15 +1,18 @@
 <div class="aca-sidenav-header" data-automation-id="app-sidenav-header">
   <div class="aca-sidenav-header-title" data-automation-id="app-sidenav-header-title">
-    <div class="aca-sidenav-header-title-logo"
-      tabindex=0
+    <button
+      class="aca-sidenav-header-title-logo"
       data-automation-id="app-sidenav-header-title-logo"
       (click)="toggleNavBar.emit()"
-      (keypress)="toggleNavBar.emit()">
+      (keypress)="toggleNavBar.emit()"
+      [attr.aria-label]="'APP.TOOLTIPS.COLLAPSE_NAVIGATION' | translate">
       <img
         src="{{ logoUrl }}"
-        title="{{'APP.TOOLTIPS.COLLAPSE_NAVIGATION' | translate}}"
-        alt="{{ 'CORE.HEADER.LOGO_ARIA' | translate }}" />
-    </div>
+        title="{{ 'APP.TOOLTIPS.COLLAPSE_NAVIGATION' | translate }}"
+        alt="{{ 'APP.TOOLTIPS.COLLAPSE_NAVIGATION_ALT' | translate }}"
+        aria-hidden="true"
+      />
+    </button>
 
     <div
       class="aca-sidenav-header-title-text"

projects/aca-content/src/lib/components/sidenav/sidenav.component.scss

@@ -19,6 +19,9 @@
       padding: 0 24px;
 
       &-logo {
+        background: transparent;
+        border: none;
+
         img {
           cursor: pointer;
           height: 28px;