Merge branch '97-make-the-focus-visible-during-tabbing' into 'master'

"Make the focus visible during tabbing"

Closes #97

See merge request arsnova/frag.jetzt!124

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);
+}

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>

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);
+}

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);
+}

src/app/components/shared/footer/footer.component.html

 <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>

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);
+}

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);
+}

src/app/components/shared/login/login.component.html

 <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">

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);
+}

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);
+}