Merge pull request #51 from UUDigitalHumanitieslab/feature/header-acc…

…essibility Feature/header accessibility
CentreForDigitalHumanities · Feb 28, 2024 · a916e42 · a916e42
2 parents 64b4c86 + e107c64
commit a916e42
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 15 deletions.
diff --git a/{{cookiecutter.slug}}/frontend.angular/src/app/app.component.html b/{{cookiecutter.slug}}/frontend.angular/src/app/app.component.html
@@ -1,9 +1,9 @@
 <div class="app">
-    <{{cookiecutter.app_prefix}}-menu></{{cookiecutter.app_prefix}}-menu>
-    <section class="section main-content">
+    <{{cookiecutter.app_prefix}}-menu role="banner"></{{cookiecutter.app_prefix}}-menu>
+    <main class="section main-content">
         <div class="container">
             <router-outlet></router-outlet>
         </div>
-    </section>
-    <{{cookiecutter.app_prefix}}-footer></{{cookiecutter.app_prefix}}-footer>
+    </main>
+    <{{cookiecutter.app_prefix}}-footer role="contentinfo"></{{cookiecutter.app_prefix}}-footer>
 </div>
diff --git a/{{cookiecutter.slug}}/frontend.angular/src/app/menu/menu.component.html b/{{cookiecutter.slug}}/frontend.angular/src/app/menu/menu.component.html
@@ -5,16 +5,17 @@
                 {{cookiecutter.project_title}}
             </strong>
 
-            <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
-                data-target="navbarBasicExample" (click)="toggleBurger()"
-                [ngClass]="{'is-active': burgerActive}">
+            <button class="navbar-burger burger" aria-label="menu"
+            [attr.aria-expanded]="burgerActive" data-target="navigation-links"
+            (click)="toggleBurger()"
+            [ngClass]="{'is-active': burgerActive}">
                 <span aria-hidden="true"></span>
                 <span aria-hidden="true"></span>
                 <span aria-hidden="true"></span>
-            </a>
+        </button>
         </div>
 
-        <div id="navbarBasicExample" class="navbar-menu" [ngClass]="{'is-active': burgerActive}" [@slideInOut]="burgerShow">
+        <div id="navigation-links" class="navbar-menu" [ngClass]="{'is-active': burgerActive}" [@slideInOut]="burgerShow">
             <div class="navbar-start">
                 <a [routerLink]="['/home']" routerLinkActive="is-active" class="navbar-item" i18n>
                     Home

diff --git a/{{cookiecutter.slug}}/frontend.angular/src/app/menu/menu.component.ts b/{{cookiecutter.slug}}/frontend.angular/src/app/menu/menu.component.ts
@@ -8,16 +8,18 @@ import { animations, showState } from '../animations';
     styleUrls: ['./menu.component.scss']
 })
 export class MenuComponent {
-    burgerShow: showState = 'hide';
+    burgerShow: showState;
     burgerActive = false;
 
-    constructor(private ngZone: NgZone) { }
+    constructor(private ngZone: NgZone) {
+        const isDesktop = window.matchMedia("screen and (min-width: 1024px)").matches
+        this.burgerShow = isDesktop ? 'show' : 'hide';
+    }
 
     toggleBurger() {
-        if (!this.burgerActive) {
-            // make it active to make it visible (add a class to
-            // override it being hidden for smaller screens)
-            this.burgerActive = true;
+        this.burgerActive = !this.burgerActive;
+
+        if (this.burgerActive) {
             // immediately hide it
             this.burgerShow = 'hide';
             setTimeout(() => {