CSCEXAM-1249 Fix main menu keyboard usage (#1106)

CSCfi · May 27, 2024 · ddaf21c · ddaf21c
1 parent a20dace
commit ddaf21c
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 20 deletions.
diff --git a/ui/src/app/navigation/navigation.component.html b/ui/src/app/navigation/navigation.component.html
@@ -29,25 +29,32 @@
                 <ul class="links">
                     @for (link of links; track link.name) {
                         <li [hidden]="!link.visible">
-                            <a
+                            <button
+                                class="btn important-clear-focus"
                                 [routerLink]="link.route"
                                 routerLinkActive="selected"
                                 [attr.aria-current]="isActive(link)"
+                                (click)="link.submenu.hidden = !link.submenu.hidden"
                             >
                                 <img aria-hidden="true" width="18" src="/assets/images/nav/{{ link.iconPng }}" alt="" />
-                                <span class="menu-item" (click)="link.submenu.hidden = !link.submenu.hidden">{{
-                                    link.name | translate
-                                }}</span>
-                            </a>
+                                <span class="menu-item">{{ link.name | translate }}</span>
+                            </button>
                             @if (isActive(link)) {
                                 <a class="skip" id="skip-button" [href]="getSkipLinkPath('#mainView')">{{
                                     'i18n_skip_to_content' | translate
                                 }}</a>
                             }
-                            <ul class="submenu" [ngbCollapse]="link.submenu.hidden && link.submenu.items.length > 0">
+                            <ul
+                                class="submenu ms-4"
+                                [ngbCollapse]="link.submenu.hidden && link.submenu.items.length > 0"
+                            >
                                 @for (subitem of link.submenu.items; track subitem.name) {
                                     <li [hidden]="!subitem.visible">
-                                        <a [routerLink]="subitem.route" routerLinkActive="selected">
+                                        <button
+                                            [routerLink]="subitem.route"
+                                            routerLinkActive="selected"
+                                            class="btn important-clear-focus"
+                                        >
                                             <div>
                                                 <img
                                                     aria-hidden="true"
@@ -57,8 +64,8 @@
                                                 />
                                                 {{ subitem.name | translate }}
                                             </div>
-                                        </a>
-                                        @if (isActive(link)) {
+                                        </button>
+                                        @if (isActive(subitem)) {
                                             <a
                                                 class="skip"
                                                 id="skip-button-sub"
@@ -77,18 +84,28 @@
                 <ul class="links">
                     @for (link of links; track link.name) {
                         <li [hidden]="!link.visible">
-                            <a
+                            <button
+                                class="btn important-clear-focus w-100"
                                 [routerLink]="link.route"
                                 routerLinkActive="selected"
                                 (click)="link.submenu.hidden = !link.submenu.hidden"
                             >
                                 <img aria-hidden="true" width="18" src="/assets/images/nav/{{ link.iconPng }}" alt="" />
                                 <span class="menu-item">{{ link.name | translate }}</span>
-                            </a>
+                            </button>
+                            @if (isActive(link)) {
+                                <a class="skip" id="skip-button-mobile" [href]="getSkipLinkPath('#mainView')">{{
+                                    'i18n_skip_to_content' | translate
+                                }}</a>
+                            }
                             <ul class="submenu" [ngbCollapse]="!link.submenu.hidden && link.submenu.items.length > 0">
                                 @for (subitem of link.submenu.items; track subitem.name) {
                                     <li [hidden]="!subitem.visible">
-                                        <a [routerLink]="subitem.route" routerLinkActive="selected">
+                                        <button
+                                            [routerLink]="subitem.route"
+                                            routerLinkActive="selected"
+                                            class="btn important-clear-focus w-100"
+                                        >
                                             <div>
                                                 <img
                                                     aria-hidden="true"
@@ -98,7 +115,15 @@
                                                 />
                                                 {{ subitem.name | translate }}
                                             </div>
-                                        </a>
+                                        </button>
+                                        @if (isActive(subitem)) {
+                                            <a
+                                                class="skip"
+                                                id="skip-button-sub-mobile"
+                                                [href]="getSkipLinkPath('#mainView')"
+                                                >{{ 'i18n_skip_to_content' | translate }}</a
+                                            >
+                                        }
                                     </li>
                                 }
                             </ul>

diff --git a/ui/src/app/navigation/navigation.component.scss b/ui/src/app/navigation/navigation.component.scss
@@ -44,15 +44,16 @@
         }
     }
 
-    a {
+  button {
         display: flex;
         text-decoration: none;
         padding-left: 1.5em;
         border-left: 3px solid #212121;
+        border-radius: 0px;
         font-size: 16px;
         color: #e7e7e7;
         letter-spacing: 0.27px;
-        line-height: 18px;
+        height: auto;
         text-align: left;
         align-items: center;
         @media (max-width: $mobile-width) {
@@ -70,7 +71,7 @@
         }
     }
 
-    a:hover {
+  button:hover {
         border-left: 3px solid $exam-dark-green;
         @media (max-width: $mobile-width) {
             border: 3px solid white;
@@ -124,7 +125,6 @@
         background-color: #212121;
         top: 162px;
         bottom: 105px;
-        overflow-y: auto;
         width: 17.125em;
 
         @media (max-width: $mobile-width) {
@@ -145,6 +145,10 @@
         position: fixed;
         bottom: 0;
         width: 17.125em;
+        &.button {
+          height: 25px;
+
+        }
 
         @media (max-width: $mobile-width) {
             display: none;
@@ -207,7 +211,7 @@
         font-weight: 300;
         letter-spacing: 1px;
         display: inline-block;
-
+        height: auto;
         color: white;
         padding: 0.5em;
         margin-left: 1.5em;
@@ -253,8 +257,10 @@
         line-height: 16px;
         text-align: left;
 
-        a {
-            margin: 0 10px 0 10px;
+        button {
+            height: 20px;
+            border-radius: 0px;
+            color: #e7e7e7;
             @media (max-width: $mobile-width) {
                 margin: 0;
             }