From 99efc6dd1c6267887dcf5aa18d9afe3740a2a1d1 Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Wed, 30 Jun 2021 12:45:51 +0200
Subject: [PATCH] accessibility low hanging fruits
---
.../apps/goofy/src/styles/abstracts/_variables.scss | 1 +
.../navigation/src/lib/build-info/build-info.component.scss | 4 +++-
.../src/lib/header-container/header/header.component.html | 6 +++---
.../src/lib/header-container/header/header.component.scss | 2 +-
.../header/settings/settings.component.html | 4 ++--
.../user-profile/src/lib/user-icon/user-icon.component.scss | 4 +++-
6 files changed, 13 insertions(+), 8 deletions(-)
diff --git a/goofy-client/apps/goofy/src/styles/abstracts/_variables.scss b/goofy-client/apps/goofy/src/styles/abstracts/_variables.scss
index c920d4dc71..63f4c60043 100644
--- a/goofy-client/apps/goofy/src/styles/abstracts/_variables.scss
+++ b/goofy-client/apps/goofy/src/styles/abstracts/_variables.scss
@@ -1,5 +1,6 @@
@import "~@angular/material/theming";
+$grey: #777;
$background: #fafafa;
$dark-background: #303030;
diff --git a/goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss b/goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss
index 19f655198e..454bef4b83 100644
--- a/goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss
+++ b/goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss
@@ -1,9 +1,11 @@
+@import "variables";
+
:host {
position: absolute;
right: 0;
bottom: 0;
font-size: 12px;
- color: #999;
+ color: #666;
padding: 4px 8px;
transform: rotate(-90deg) translate(100%, 0);
transform-origin: right bottom;
diff --git a/goofy-client/libs/navigation/src/lib/header-container/header/header.component.html b/goofy-client/libs/navigation/src/lib/header-container/header/header.component.html
index 294766a143..bd0310f039 100644
--- a/goofy-client/libs/navigation/src/lib/header-container/header/header.component.html
+++ b/goofy-client/libs/navigation/src/lib/header-container/header/header.component.html
@@ -1,7 +1,7 @@
<header>
<div class="left">
- <button mat-icon-button (click)="toggleMenuEvent.emit(!this.navigationCollapse)">
- <mat-icon>menu</mat-icon></button>
+ <goofy-client-icon-button-with-spinner icon="menu" (clickEmitter)="toggleMenuEvent.emit(!this.navigationCollapse)">
+ </goofy-client-icon-button-with-spinner>
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
<img src="/assets/img/logo.svg" alt="Goofy Logo" />
<h1 data-test-id='title'>Goofy</h1>
@@ -16,7 +16,7 @@
<goofy-client-settings [darkMode]="darkMode" (darkModeEmitter)="darkModeEmitter.emit($event)"></goofy-client-settings>
- <button mat-icon-button [matMenuTriggerFor]="accountMenu" class="big-button" data-test-id="user-icon-button">
+ <button mat-icon-button [matMenuTriggerFor]="accountMenu" class="big-button" aria-label="button with user icon" data-test-id="user-icon-button">
<goofy-client-user-icon></goofy-client-user-icon>
</button>
diff --git a/goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss b/goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss
index 7613b2824c..fb574ba5d8 100644
--- a/goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss
+++ b/goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss
@@ -55,7 +55,7 @@ img {
}
.right {
- color: #999;
+ color: $grey;
display: flex;
align-items: center;
}
diff --git a/goofy-client/libs/navigation/src/lib/header-container/header/settings/settings.component.html b/goofy-client/libs/navigation/src/lib/header-container/header/settings/settings.component.html
index 3bd2631f91..b4e29e9159 100644
--- a/goofy-client/libs/navigation/src/lib/header-container/header/settings/settings.component.html
+++ b/goofy-client/libs/navigation/src/lib/header-container/header/settings/settings.component.html
@@ -1,8 +1,8 @@
-<button mat-icon-button [matMenuTriggerFor]="settingsMenu"><mat-icon>settings</mat-icon></button>
+<goofy-client-icon-button-with-spinner icon="settings" [matMenuTriggerFor]="settingsMenu"></goofy-client-icon-button-with-spinner>
<mat-menu #settingsMenu="matMenu" >
<div class="menu-container"
(click)="$event.stopPropagation()">
-
+
<mat-slide-toggle color="primary"
[checked]="darkMode"
(change)="darkModeEmitter.emit($event.checked)">Dark Mode
diff --git a/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.scss b/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.scss
index 00cc9a0643..4a762ba5dd 100644
--- a/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.scss
+++ b/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.scss
@@ -1,3 +1,5 @@
+@import "variables";
+
.user-profile {
width: 36px;
height: 36px;
@@ -16,7 +18,7 @@
}
mat-icon {
- color: #999;
+ color: $grey;
position: absolute;
left: 50%;
top: 50%;
--
GitLab