From 2c32cbf158477d93c25773e6b3fa72bea37696f3 Mon Sep 17 00:00:00 2001
From: Julia Langhammer <julia.langhammer@mni.thm.de>
Date: Wed, 18 Sep 2019 21:08:21 +0200
Subject: [PATCH] "Make the focus visible during tabbing"
---
.../new-landing/new-landing.component.scss | 5 +++++
.../home/user-home/user-home.component.html | 2 +-
.../home/user-home/user-home.component.scss | 5 +++++
.../dialog-action-buttons.component.scss | 10 ++++++++++
.../shared/footer/footer.component.html | 19 +++++++++++--------
.../shared/footer/footer.component.scss | 9 +++++++++
.../shared/header/header.component.scss | 4 ++++
.../shared/login/login.component.html | 4 ++--
.../shared/login/login.component.scss | 10 ++++++++++
.../shared/room-join/room-join.component.scss | 5 +++++
10 files changed, 62 insertions(+), 11 deletions(-)
diff --git a/src/app/components/home/new-landing/new-landing.component.scss b/src/app/components/home/new-landing/new-landing.component.scss
index 87e458989..3b6c2ec2b 100644
--- a/src/app/components/home/new-landing/new-landing.component.scss
+++ b/src/app/components/home/new-landing/new-landing.component.scss
@@ -14,3 +14,8 @@
padding-left: 5px;
color: var(--on-primary);
}
+
+#new_session-button:focus {
+ background: var(--on-surface);
+ color: var(--background);
+}
diff --git a/src/app/components/home/user-home/user-home.component.html b/src/app/components/home/user-home/user-home.component.html
index ed885a33c..9605cbb4a 100644
--- a/src/app/components/home/user-home/user-home.component.html
+++ b/src/app/components/home/user-home/user-home.component.html
@@ -4,7 +4,7 @@
<app-room-join></app-room-join>
</div>
<div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="15px">
- <button mat-raised-button (click)="openCreateRoomDialog()" id="create_session-button">
+ <button class="focus_button" mat-raised-button (click)="openCreateRoomDialog()" id="create_session-button">
<mat-icon>add</mat-icon>
{{ 'home-page.create-session' | translate }}
</button>
diff --git a/src/app/components/home/user-home/user-home.component.scss b/src/app/components/home/user-home/user-home.component.scss
index c43866863..d5f973a91 100644
--- a/src/app/components/home/user-home/user-home.component.scss
+++ b/src/app/components/home/user-home/user-home.component.scss
@@ -15,3 +15,8 @@ app-room-list {
h1 {
color: var(--on-surface)!important;
}
+
+.focus_button:focus {
+ background: var(--on-surface);
+ color: var(--background);
+}
diff --git a/src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.scss b/src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.scss
index 2b59e16ae..0d427f600 100644
--- a/src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.scss
+++ b/src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.scss
@@ -16,3 +16,13 @@
background-color: var(--red);
color: #fff;
}
+
+.dialog-action-buttons .cancel-button:focus {
+ background: var(--on-surface);
+ color: var(--background);
+}
+
+.dialog-action-buttons .primary-confirm-button:focus {
+ background: var(--on-surface);
+ color: var(--background);
+}
diff --git a/src/app/components/shared/footer/footer.component.html b/src/app/components/shared/footer/footer.component.html
index a8ad97757..f4f6eb1a4 100644
--- a/src/app/components/shared/footer/footer.component.html
+++ b/src/app/components/shared/footer/footer.component.html
@@ -1,12 +1,14 @@
<div>
<mat-toolbar id="footer-toolbar">
- <button mat-button (click)="showHelp()" *ngIf="router.url !== '/home'" aria-labelledby="help-label">
+ <button class="focus_button" mat-button (click)="showHelp()" *ngIf="router.url !== '/home'"
+ aria-labelledby="help-label">
<mat-icon>help</mat-icon>
<span *ngIf="deviceType === 'desktop'">
{{ 'footer.help' | translate }}
</span>
</button>
- <button mat-button (click)="showDemo()" *ngIf="router.url === '/home'" aria-labelledby="demo-label">
+ <button class="focus_button" mat-button (click)="showDemo()" *ngIf="router.url === '/home'"
+ aria-labelledby="demo-label">
<mat-icon>flag</mat-icon>
<span *ngIf="deviceType === 'desktop'">
{{ 'footer.demo' | translate }}
@@ -14,7 +16,7 @@
</button>
<span class="fill-remaining-space"></span>
- <button mat-button aria-labelledby="style-label" [matMenuTriggerFor]="themeMenu">
+ <button class="focus_button" mat-button aria-labelledby="style-label" [matMenuTriggerFor]="themeMenu">
<mat-icon>accessibility_new</mat-icon>
<span *ngIf="deviceType === 'desktop'">
{{'footer.style' | translate}}
@@ -22,7 +24,8 @@
</button>
<span class="fill-remaining-space"></span>
- <button id="language-menu" mat-button aria-labelledby="language-label" [matMenuTriggerFor]="langMenu">
+ <button class="focus_button" id="language-menu" mat-button aria-labelledby="language-label"
+ [matMenuTriggerFor]="langMenu">
<mat-icon>language</mat-icon>
<span *ngIf="deviceType === 'desktop'">
{{'footer.language' | translate}}
@@ -30,14 +33,14 @@
</button>
<span class="fill-remaining-space"></span>
- <button (click)="showDataProtection()" mat-button aria-labelledby="data-protection-label">
+ <button class="focus_button" (click)="showDataProtection()" mat-button aria-labelledby="data-protection-label">
<mat-icon>security</mat-icon>
<span *ngIf="deviceType === 'desktop'">
{{'footer.dsgvo' | translate}}
</span>
</button>
<span class="fill-remaining-space"></span>
- <button (click)="showImprint()" mat-button aria-labelledby="imprint-label">
+ <button class="focus_button" (click)="showImprint()" mat-button aria-labelledby="imprint-label">
<mat-icon>info</mat-icon>
<span *ngIf="deviceType === 'desktop'">
{{'footer.imprint' | translate}}
@@ -79,8 +82,8 @@
</mat-menu>
-->
<mat-menu #langMenu="matMenu" [overlapTrigger]="false">
- <button mat-menu-item (click)="useLanguage('de')">{{ 'footer.german' | translate }}</button>
- <button mat-menu-item (click)="useLanguage('en')">{{ 'footer.english' | translate }}</button>
+ <button class="focus_item" mat-menu-item (click)="useLanguage('de')">{{ 'footer.german' | translate }}</button>
+ <button class="focus_item" mat-menu-item (click)="useLanguage('en')">{{ 'footer.english' | translate }}</button>
</mat-menu>
</mat-toolbar>
</div>
diff --git a/src/app/components/shared/footer/footer.component.scss b/src/app/components/shared/footer/footer.component.scss
index 91a2ac6ae..cea2c7d9b 100644
--- a/src/app/components/shared/footer/footer.component.scss
+++ b/src/app/components/shared/footer/footer.component.scss
@@ -197,3 +197,12 @@ mat-icon {
color:rgba(0,0,0,0.9);
font-weight:500;
}
+
+.focus_button:focus {
+ background: var(--on-surface);
+ color: var(--background);
+}
+
+.focus_item:focus {
+ border: 1px solid var(--on-surface);
+}
diff --git a/src/app/components/shared/header/header.component.scss b/src/app/components/shared/header/header.component.scss
index 56eca3c6e..440bac886 100644
--- a/src/app/components/shared/header/header.component.scss
+++ b/src/app/components/shared/header/header.component.scss
@@ -38,3 +38,7 @@ h2 {
.mat-button {
padding: 0 0 0 10px;
}
+
+button:focus {
+ border: 1px solid var(--on-surface);
+}
diff --git a/src/app/components/shared/login/login.component.html b/src/app/components/shared/login/login.component.html
index c0fd4a3b1..233bd39ac 100644
--- a/src/app/components/shared/login/login.component.html
+++ b/src/app/components/shared/login/login.component.html
@@ -1,5 +1,5 @@
<div fxLayout="column" fxLayoutAlign="space-around">
- <button (click)="guestLogin()" class="guest" mat-flat-button type="button"
+ <button id="focus_button_guest" (click)="guestLogin()" class="guest" mat-flat-button type="button"
matTooltip="{{'login.guest-login-tooltip' | translate}}">
{{ 'login.guest-login' | translate }}
</button>
@@ -29,7 +29,7 @@
<mat-placeholder class="placeholder">{{ 'login.password' | translate }}</mat-placeholder>
<mat-error *ngIf="passwordFormControl.hasError('required')">{{ 'login.password-required' | translate }}</mat-error>
</mat-form-field>
- <button class="login" mat-flat-button type="submit">
+ <button id="focus_button_user" class="login" mat-flat-button type="submit">
{{ 'login.login' | translate }}
</button>
<div class="forgot-password">
diff --git a/src/app/components/shared/login/login.component.scss b/src/app/components/shared/login/login.component.scss
index d02c229a7..c9457adb2 100644
--- a/src/app/components/shared/login/login.component.scss
+++ b/src/app/components/shared/login/login.component.scss
@@ -88,3 +88,13 @@ h3 {
overflow: hidden;
left: -10000px;
}
+
+#focus_button_user:focus {
+ background: var(--on-surface);
+ color: var(--background);
+}
+
+#focus_button_guest:focus {
+ background: var(--on-surface);
+ color: var(--background);
+}
diff --git a/src/app/components/shared/room-join/room-join.component.scss b/src/app/components/shared/room-join/room-join.component.scss
index 0cebcefae..74919f926 100644
--- a/src/app/components/shared/room-join/room-join.component.scss
+++ b/src/app/components/shared/room-join/room-join.component.scss
@@ -58,3 +58,8 @@ input:-webkit-autofill {
mat-error{
color:var(--on-surface);
}
+
+#session_enter-button:focus {
+ background: var(--on-surface);
+ color: var(--background);
+}
--
GitLab