fix(intranet-header): "tabIndex" should only be declared on interacti…

…ve elements (#2834)
swisspost · Apr 2, 2024 · b3a1c0f · b3a1c0f
1 parent c56e9e0
commit b3a1c0f
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 22 deletions.
diff --git a/.changeset/polite-starfishes-vanish.md b/.changeset/polite-starfishes-vanish.md
@@ -0,0 +1,8 @@
+---
+'@swisspost/design-system-intranet-header': minor
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+'@swisspost/design-system-demo': minor
+---
+
+Changed mobile navigation trigger to make it more accessible by default using a button element.
diff --git a/...mponents/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.html b/...mponents/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.html
@@ -18,9 +18,10 @@
         <div class="sidebar-sticky header-margin bg-light">
           <!-- left menu -->
           <ul>
-            <li tabindex="0" class="d-md-none" (click)="openedMenu = !openedMenu">
-              <i class="pi pi-menu"></i>
-              Active Page
+            <li class="d-md-none">
+              <button (click)="openedMenu = !openedMenu">
+                <i class="pi pi-menu"></i> Active Page
+              </button>
             </li>
             <li><a routerLink="/">Home</a></li>
             <li class="separator"></li>

diff --git a/...ents/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component.html b/...ents/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component.html
@@ -10,9 +10,11 @@
         <div class="sidebar-sticky header-margin bg-light">
           <!-- left menu -->
           <ul>
-            <li class="d-md-none" (click)="openedMenu = !openedMenu">
-              <i class="pi pi-menu"></i>
-              Home
+            <li class="d-md-none">
+              <button (click)="openedMenu = !openedMenu">
+                <i class="pi pi-menu"></i>
+                Home
+              </button>
             </li>
             <li><a routerLink="/">Home</a></li>
             <li class="separator"></li>

diff --git a/.../documentation/src/stories/components/intranet-header/intranet-header-postweb.sample.html b/.../documentation/src/stories/components/intranet-header/intranet-header-postweb.sample.html
@@ -16,9 +16,11 @@
         <div class="sidebar-sticky header-margin bg-light">
           <!-- left menu -->
           <ul>
-            <li (click)="toggleMenu()" (keydown)="toggleMenu()" class="d-md-none" tabindex="0">
-              <em class="pi pi-menu"></em>
-              Active Page
+            <li class="d-md-none">
+              <button (click)="toggleMenu()">
+                <em class="pi pi-menu"></em>
+                Active Page
+              </button>
             </li>
             <li><a>Home</a></li>
             <li class="separator"></li>

diff --git a/...tation/src/stories/components/intranet-header/intranet-header-side-navigation.sample.html b/...tation/src/stories/components/intranet-header/intranet-header-side-navigation.sample.html
@@ -10,9 +10,8 @@
         <div class="sidebar-sticky header-margin bg-light">
           <!-- left menu -->
           <ul>
-            <li (click)="toggleMenu()" (keydown)="toggleMenu()" class="d-md-none" tabindex="0">
-              <em class="pi pi-menu"></em>
-              Active Page
+            <li class="d-md-none">
+              <button (click)="toggleMenu()"><em class="pi pi-menu"></em> Active Page</button>
             </li>
             <li><a>Home</a></li>
             <li class="separator"></li>

diff --git a/...-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.html b/...-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.html
@@ -18,9 +18,11 @@
         <div class="sidebar-sticky header-margin bg-light">
           <!-- left menu -->
           <ul>
-            <li tabindex="0" class="d-md-none" (click)="openedMenu = !openedMenu">
-              <i class="pi pi-menu"></i>
-              Active Page
+            <li class="d-md-none">
+              <button (click)="openedMenu = !openedMenu">
+                <i class="pi pi-menu"></i>
+                Active Page
+              </button>
             </li>
             <li><a routerLink="/">Home</a></li>
             <li class="separator"></li>

diff --git a/...er-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.html b/...er-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.html
@@ -10,9 +10,11 @@
         <div class="sidebar-sticky header-margin bg-light">
           <!-- left menu -->
           <ul>
-            <li class="d-md-none" (click)="openedMenu = !openedMenu">
-              <i class="pi pi-menu"></i>
-              Home
+            <li class="d-md-none">
+              <button (click)="openedMenu = !openedMenu">
+                <i class="pi pi-menu"></i>
+                Home
+              </button>
             </li>
             <li><a routerLink="/">Home</a></li>
             <li class="separator"></li>

diff --git a/packages/styles/src/components/intranet-header/_sidebar.scss b/packages/styles/src/components/intranet-header/_sidebar.scss
@@ -1,3 +1,4 @@
+@use './../../mixins/utilities';
 @use './../../variables/color';
 @use './../../variables/spacing';
 @use './../../variables/commons';
@@ -17,6 +18,19 @@
   flex: 1 0 auto;
   flex-direction: column;
 
+  > div > ul > li:first-child {
+    button {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      align-items: center;
+      background: none;
+      border: 0;
+
+      @include utilities.focus-style();
+    }
+  }
+
   @include media-breakpoint-down(md) {
     flex: 0 0 auto;
   }
@@ -33,15 +47,18 @@
 
       margin: spacing.$spacer * -1;
       margin-bottom: 0;
-      padding: spacing.$spacer;
-      padding-top: spacing.$spacer;
+      padding: spacing.$size-mini;
+      padding-left: spacing.$size-regular;
       border-bottom: commons.$border-width solid rgba(var(--post-contrast-color-rgb), 0.2);
       background-color: color.$white;
 
+      button {
+        padding: spacing.$size-mini;
+      }
+
       &:hover,
       &:focus {
-        background-color: get-solid-color(rgba(var(--post-contrast-color-rgb), 0.1), color.$white);
-        cursor: pointer;
+        background-color: color.$light;
       }
 
       i.pi {