Merge pull request #2071 from EmmanuelDemey/master

Improve Accessibilty of the header

Author: kamilmysliwiec

src/app/common/social-wrapper/social-wrapper.component.html

@@ -1,11 +1,17 @@
 <div class="social-wrapper">
-  <a href="https://twitter.com/nestframework" target="_blank">
+  <a href="https://twitter.com/nestframework"
+     title="Twitter account"
+     target="_blank">
     <i class="fab fa-twitter"></i>
   </a>
-  <a href="https://github.com/nestjs/nest" target="_blank">
+  <a href="https://github.com/nestjs/nest"
+     title="Github repository"
+     target="_blank">
     <i class="fab fa-github"></i>
   </a>
-  <a href="https://stackoverflow.com/questions/tagged/nestjs" target="_blank">
+  <a href="https://stackoverflow.com/questions/tagged/nestjs"
+     title="Stackoverflow"
+     target="_blank">
     <i class="fab fa-stack-overflow"></i>
   </a>
   <a
@@ -15,7 +21,10 @@
   >
     <i class="fa fa-globe"></i>
   </a>
-  <a href="https://discord.gg/G7Qnnhy" target="_blank" rel="nofollow">
+  <a href="https://discord.gg/G7Qnnhy"
+     title="Discord"
+     target="_blank"
+     rel="nofollow">
     <i class="fab fa-discord"></i>
   </a>
 </div>

src/app/homepage/header/header.component.html

@@ -1,5 +1,5 @@
 <header>
-  <div
+  <button
     class="icon-wrapper"
     (click)="toggle.emit()"
     [class.opened]="isSidebarOpened"
@@ -38,7 +38,7 @@
         />
       </svg>
     </div>
-  </div>
+  </button>
   <ng-content></ng-content>
   <app-social-wrapper></app-social-wrapper>
   <div class="menu-wrapper">

src/app/homepage/header/header.component.scss

@@ -30,6 +30,8 @@ header {
   display: inline-block;
   position: relative;
   z-index: 10000;
+  border: none;
+  background: transparent;
 
   &:hover {
     cursor: pointer;