Skip to content

Commit

Permalink
fix(intranet-header): "tabIndex" should only be declared on interacti…
Browse files Browse the repository at this point in the history
…ve elements
  • Loading branch information
imagoiq committed Mar 20, 2024
1 parent 226ab66 commit a460d01
Show file tree
Hide file tree
Showing 8 changed files with 55 additions and 22 deletions.
8 changes: 8 additions & 0 deletions .changeset/polite-starfishes-vanish.md
Original file line number Diff line number Diff line change
@@ -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.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
25 changes: 21 additions & 4 deletions packages/styles/src/components/intranet-header/_sidebar.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use './../../mixins/utilities';
@use './../../variables/color';
@use './../../variables/spacing';
@use './../../variables/commons';
Expand All @@ -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;
}
Expand All @@ -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 {
Expand Down

0 comments on commit a460d01

Please sign in to comment.