From 31cf9489430dc118f817e9606a05bac409d3ad2d Mon Sep 17 00:00:00 2001
From: katja <ekaterina.kondareva@druid.fi>
Date: Thu, 4 Mar 2021 18:17:46 +0200
Subject: [PATCH] university main menu accessibility
---
.../hy-menu-main-group.scss | 2 +-
.../hy-menu-main-group/hy-menu-main-group.tsx | 75 +++++++++++++++----
src/components/site-header/site-header.scss | 1 +
src/components/site-header/site-header.tsx | 2 +-
4 files changed, 62 insertions(+), 18 deletions(-)
diff --git a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss
index 8b7d7a5d..d9e90a1b 100644
--- a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss
+++ b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss
@@ -103,7 +103,7 @@
top: 0;
visibility: visible;
width: 100%;
- z-index: 100;
+ z-index: 511;
.list {
display: flex;
diff --git a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
index fdf81140..5ad28207 100644
--- a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
+++ b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
@@ -8,6 +8,10 @@ export interface MainMenu {
import {Component, Host, h, Element, Prop, State, Watch, Listen} from '@stencil/core';
+let keys = {
+ enter: 'Enter',
+};
+
@Component({
tag: 'hy-menu-main-group',
styleUrl: 'hy-menu-main-group.scss',
@@ -31,27 +35,47 @@ export class HyMenuMainGroup {
this.isMenuOpen = !this.isMenuOpen;
if (this.isMenuOpen) {
- let hyTopHeader = this.el.closest('.hy-site-header__content-top') as HTMLElement;
-
- if (hyTopHeader && hyTopHeader.hasAttribute('is-mobile')) {
- console.log('do mobile stuff');
- } else {
- let mainMenuToggle = event.target.shadowRoot.querySelector('.menu--main-group__toggle') as HTMLElement;
- let mainMenuDropdown = event.target.shadowRoot.querySelector('.menu--main-group__dropdown') as HTMLElement;
- let mainMenuList = event.target.shadowRoot.querySelector('.list') as HTMLElement;
- if (mainMenuDropdown && mainMenuList && mainMenuToggle) {
- let rectHeader = hyTopHeader.getBoundingClientRect();
- let rectMenuToggle = mainMenuToggle.getBoundingClientRect();
- mainMenuDropdown.style.top = `${rectHeader.height}px`;
-
- mainMenuList.style.left = `${rectMenuToggle.left}px`;
- }
- }
+ this.adjustMainMenuPosition(event.target);
}
event.stopPropagation();
}
+ @Listen('keydown')
+ handleComponentKeyDown(event: KeyboardEvent) {
+ const key = event.code;
+ let target = event.target as HTMLButtonElement;
+
+ if (target && [keys.enter].includes(key)) {
+ this.isMenuOpen = !this.isMenuOpen;
+
+ if (this.isMenuOpen) {
+ this.adjustMainMenuPosition(target);
+
+ event.preventDefault();
+ }
+ }
+ }
+
+ adjustMainMenuPosition(target) {
+ let hyTopHeader = this.el.closest('.hy-site-header__content-top') as HTMLElement;
+
+ if (hyTopHeader && hyTopHeader.hasAttribute('is-mobile')) {
+ console.log('do mobile stuff');
+ } else {
+ let mainMenuToggle = target.shadowRoot.querySelector('.menu--main-group__toggle') as HTMLElement;
+ let mainMenuDropdown = target.shadowRoot.querySelector('.menu--main-group__dropdown') as HTMLElement;
+ let mainMenuList = target.shadowRoot.querySelector('.list') as HTMLElement;
+ if (mainMenuDropdown && mainMenuList && mainMenuToggle) {
+ let rectHeader = hyTopHeader.getBoundingClientRect();
+ let rectMenuToggle = mainMenuToggle.getBoundingClientRect();
+ mainMenuDropdown.style.top = `${rectHeader.height}px`;
+
+ mainMenuList.style.left = `${rectMenuToggle.left}px`;
+ }
+ }
+ }
+
componentWillRender() {
this.dataMainMenuWatcher(this.dataMainMenu);
}
@@ -61,6 +85,25 @@ export class HyMenuMainGroup {
event.stopPropagation();
}
+ // Close the University main menu if user clicks anywhere outside the component.
+ @Listen('click', {target: 'window'})
+ handleOutsideMenuClick(event) {
+ this.isMenuOpen = false;
+ event.stopPropagation();
+ }
+
+ // CLose the University main menu if user opens the desktop menu panel.
+ @Listen('menuDesktopToggled', {target: 'document'})
+ desktopMenuToggled() {
+ this.isMenuOpen = false;
+ }
+
+ // CLose the University main menu if user opens the search panel
+ @Listen('searchPanelToggled', {target: 'document'})
+ searchPanelToggled() {
+ this.isMenuOpen = false;
+ }
+
render() {
const white = 'var(--grayscale-white)';
diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss
index b19990f7..32cfec31 100644
--- a/src/components/site-header/site-header.scss
+++ b/src/components/site-header/site-header.scss
@@ -74,6 +74,7 @@
flex-flow: row;
place-content: center space-between;
position: relative;
+ z-index: 100;
@include breakpoint($narrow) {
margin: 0 auto;
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index a4bf9ff3..3ae837bd 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -238,7 +238,7 @@ export class SiteHeader {
url={this.siteUrl}
label={this.siteLabel}
/>
- <hy-menu-main-group is-mobile={false} data-main-menu={this.dataMainMenuLinks} />
+ <hy-menu-main-group tabindex="0" is-mobile={false} data-main-menu={this.dataMainMenuLinks} />
</div>
<div class={'menu--secondary menu--secondary--group'}>
--
GitLab