Prevent some linter warnings and make OS4 more accessiblle

client/src/app/site/modules/global-headbar/components/account-dialog/account-dialog.component.html

@@ -22,7 +22,7 @@ <h2 mat-dialog-title class="flex-container padding-top-16">
     </div>
     <mat-divider [vertical]="true"></mat-divider>
     <div class="account-dialog-content">
-        <div class="content-wrapper" (keydown)="onKeyDown($event)">
+        <div class="content-wrapper" (keydown)="onKeyDown($event)" tabindex="-1">
             <ng-container [ngSwitch]="activeMenuItem">
                 <ng-container
                     *ngSwitchCase="menuItemsRef.SHOW_PROFILE"

client/src/app/site/pages/meetings/pages/assignments/pages/assignment-detail/components/assignment-detail/assignment-detail.component.html

@@ -215,7 +215,7 @@ <h3>{{ 'Candidates' | translate }}</h3>
 <!-- Form -->
 <ng-template #assignmentFormTemplate>
     <mat-card class="os-form-card spacer-bottom-60">
-        <form class="content" [formGroup]="assignmentForm" (keydown)="onKeyDown($event)">
+        <form class="content" [formGroup]="assignmentForm" (keydown)="onKeyDown($event)" tabindex="-1">
             <div>
                 <!-- title -->
                 <mat-form-field class="full-width">

client/src/app/site/pages/meetings/pages/mediafiles/modules/mediafile-list/components/mediafile-list/mediafile-list.component.html

@@ -36,7 +36,7 @@ <h2>{{ 'Files' | translate }}</h2>
 <os-file-list
     [currentDirectory]="directory"
     [isMultiSelect]="isMultiSelect"
-    [hiddenInMobile]="['info']"
+    [hiddenInMobile]="['edit']"
     [canEdit]="canEdit"
     [canAccessFileMenu]="canAccessFileMenu"
     [sourceFiles]="directoryObservable"
@@ -49,19 +49,7 @@ <h2>{{ 'Files' | translate }}</h2>
     (saved)="onSaveFile($event.update)"
     (deleted)="onDeleteFile($event.file)"
     (selected)="onSelect($event.files)"
->
-    <div
-        *osScrollingTableCell="'info'; row as mediafile; config: { width: 200 }"
-        class="fill clickable"
-        (click)="triggerEdit(mediafile)"
-    >
-        <os-icon-container *ngIf="mediafile.access_groups.length" icon="group">
-            <os-comma-separated-listing [list]="mediafile.access_groups" [showElementsAmount]="3">
-                <ng-template let-group>{{ $any(group).getTitle() }}</ng-template>
-            </os-comma-separated-listing>
-        </os-icon-container>
-    </div>
-</os-file-list>
+></os-file-list>
 
 <!-- Visibility as button -->
 <ng-template #breadcrumbManageTemplate>

client/src/app/site/pages/meetings/pages/meeting-settings/pages/meeting-settings-group-list/components/meeting-settings-group-list/meeting-settings-group-list.component.html

@@ -17,6 +17,8 @@ <h2>{{ 'Settings' | translate }}</h2>
                 [osPaper]="2"
                 [osPaperRaise]="true"
                 [routerLink]="group.label.toLowerCase()"
+                (keydown.enter)="onEnter(group.label)"
+                tabindex="0"
             >
                 <div class="flex-center background-selected">
                     <mat-icon>{{ group.icon }}</mat-icon>

client/src/app/site/pages/meetings/pages/meeting-settings/pages/meeting-settings-group-list/components/meeting-settings-group-list/meeting-settings-group-list.component.ts

@@ -50,4 +50,9 @@ export class MeetingSettingsGroupListComponent extends BaseMeetingComponent {
         }
         return payload;
     }
+
+    protected onEnter(route: string): void {
+        route = this.activeMeetingId + `/settings/` + route.toLowerCase();
+        this.router.navigate([route]);
+    }
 }

client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-personal-note/motion-personal-note.component.html

@@ -1,4 +1,4 @@
-<os-action-card [showActionRow]="true" icon="speaker_notes" [disableExpandControl]="true">
+<os-action-card [showActionRow]="true" icon="speaker_notes" [disableExpandControl]="isEditing">
     <!-- Title row -->
     <ng-container class="meta-text-block-title">
         <span>{{ 'Personal note' | translate }}</span>

client/src/app/site/pages/organization/pages/mediafiles/modules/organization-mediafile-list/components/organization-mediafile-list/organization-mediafile-list.component.html

@@ -49,6 +49,7 @@ <h2>{{ 'Files' | translate }}</h2>
     (saved)="onSaveFile($event.update)"
     (deleted)="onDeleteFile($event.file)"
     (selected)="onSelect($event.files)"
+    [isInMeeting]="false"
 ></os-file-list>
 
 <!-- Menu for Mediafiles -->

client/src/app/ui/modules/expandable-content-wrapper/components/expandable-content-wrapper/expandable-content-wrapper.component.html

@@ -10,7 +10,7 @@
     </div>
     <!-- Expanding control -->
     <div class="small show-entire-text" *ngIf="canExpand && !disableExpandControl">
-        <a (click)="toggleExpansion()">
+        <a (click)="toggleExpansion()" tabindex="0" (keydown.enter)="toggleExpansion()">
             {{ isExpanded ? ('Hide more text' | translate) : ('Show full text' | translate) }}
         </a>
     </div>

client/src/app/ui/modules/expandable-content-wrapper/components/expandable-content-wrapper/expandable-content-wrapper.component.scss

@@ -23,4 +23,11 @@
             cursor: pointer;
         }
     }
+
+    .show-entire-text {
+        a:focus {
+            outline: none;
+            text-decoration: underline;
+        }
+    }
 }

client/src/app/ui/modules/file-list/components/file-list/file-list.component.html

@@ -70,8 +70,10 @@
         ></a>
         <a
             class="detail-link"
-            (click)="changeDirectory(mediafile.id)"
             *ngIf="mediafile.is_directory && !isMultiSelect"
+            (click)="changeDirectory(mediafile.id)"
+            (keydown.enter)="changeDirectory(mediafile.id)"
+            tabindex="0"
         ></a>
         <mat-icon class="grey-icon foreground-icon">{{ mediafile.getIcon() }}</mat-icon>
     </div>
@@ -86,8 +88,10 @@
         ></a>
         <a
             class="detail-link"
-            (click)="changeDirectory(mediafile.id)"
             *ngIf="mediafile.is_directory && !isMultiSelect"
+            (click)="changeDirectory(mediafile.id)"
+            (keydown.enter)="changeDirectory(mediafile.id)"
+            tabindex="0"
         ></a>
         <div class="innerTable overflow-hidden">
             <div class="file-title ellipsis-overflow">
@@ -99,6 +103,27 @@
         </div>
     </div>
 
+    <div *osScrollingTableCell="'edit'; row as mediafile" class="fill detail-link">
+        <div
+            *ngIf="canEdit"
+            class="fill detail-link"
+            tabindex="0"
+            (click)="onEditFile(mediafile, fileEditDialog)"
+            (keydown.enter)="onEditFile(mediafile, fileEditDialog)"
+        >
+            <ng-container *ngIf="isInMeeting">
+                <os-icon-container icon="group">
+                    <os-comma-separated-listing [list]="mediafile.access_groups" [showElementsAmount]="3">
+                        <ng-template let-group>{{ $any(group).getTitle() }}</ng-template>
+                    </os-comma-separated-listing>
+                </os-icon-container>
+            </ng-container>
+            <ng-container *ngIf="!isInMeeting">
+                <os-icon-container icon="edit"></os-icon-container>
+            </ng-container>
+        </div>
+    </div>
+
     <!-- Mimetype (usually hidden) -->
     <div *osScrollingTableCell="'mimetype'; row as mediafile; isHidden: true" class="fill clickable">
         {{ mediafile.mimetype }}

client/src/app/ui/modules/file-list/components/file-list/file-list.component.scss

@@ -86,3 +86,9 @@ $navbar-size: 40px;
         margin-bottom: 60px !important;
     }
 }
+
+.detail-link:focus {
+    outline: none;
+    border: 0px solid;
+    background-color: rgba(0, 0, 0, 0.087);
+}

client/src/app/ui/modules/file-list/components/file-list/file-list.component.ts

@@ -89,6 +89,9 @@ export class FileListComponent extends BaseUiComponent implements OnInit, OnDest
         this._hiddenInMobile = [`indicator`, ...cols];
     }
 
+    @Input()
+    public isInMeeting = true;
+
     @Input()
     public addBottomSpacer = false;
 

client/src/app/ui/modules/file-list/file-list.module.ts

@@ -9,6 +9,7 @@ import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-m
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
 import { OpenSlidesTranslationModule } from 'src/app/site/modules/translations';
+import { CommaSeparatedListingModule } from 'src/app/ui/modules/comma-separated-listing';
 import { IconContainerModule } from 'src/app/ui/modules/icon-container/icon-container.module';
 import { ListModule } from 'src/app/ui/modules/list';
 import { SearchSelectorModule } from 'src/app/ui/modules/search-selector';
@@ -35,7 +36,8 @@ const DECLARATIONS = [FileListComponent];
         SearchSelectorModule,
         IconContainerModule,
         PipesModule,
-        OpenSlidesTranslationModule.forChild()
+        OpenSlidesTranslationModule.forChild(),
+        CommaSeparatedListingModule
     ]
 })
 export class FileListModule {}

client/src/app/ui/modules/grid/definitions.ts

@@ -3,7 +3,7 @@
  */
 export interface GridTileClickEvent<T = object> {
     data: T | null;
-    source: MouseEvent;
+    source: MouseEvent | Event;
 }
 
 /**

client/src/app/ui/modules/grid/grid/grid.component.html

@@ -4,7 +4,7 @@ <h3>{{ title }}</h3>
 </div>
 
 <div class="os-grid" [ngClass]="{ 'no-space': noSpace }">
-    <div *ngFor="let tile of tiles" [ngClass]="tile.classes" (click)="tile.onClick($event)">
+    <div *ngFor="let tile of tiles" [ngClass]="tile.classes" (click)="tile.onClick($event)" tabindex="-1">
         <div class="tile-placeholder" [ngStyle]="{ marginTop: rowHeight }"></div>
         <div class="tile-content stretch-to-fill-parent">
             <ng-container *ngTemplateOutlet="tile.implicitContent; context: { $implicit: tile.data }"></ng-container>

client/src/app/ui/modules/sidenav/components/copyright-sign/copyright-sign.component.html

@@ -1 +1 @@
-<span (click)="launchC4($event)">©</span>
+<span (click)="launchC4($event)" (keydown.enter)="launchC4($event)" tabindex="0">©</span>

client/src/app/ui/modules/sidenav/modules/easter-egg/modules/c4-dialog/components/c4-dialog/c4-dialog.component.html

@@ -19,7 +19,12 @@ <h2 mat-dialog-title class="left-align no-margin">{{ caption | translate }}</h2>
         <table [class]="disableBoard ? 'disabled' : ''" id="c4">
             <tr *ngFor="let row of [5, 4, 3, 2, 1, 0]">
                 <td *ngFor="let col of [0, 1, 2, 3, 4, 5, 6]">
-                    <div [class]="getCoinClass(row, col)" (click)="clickField(col)"></div>
+                    <div
+                        [class]="getCoinClass(row, col)"
+                        (click)="clickField(col)"
+                        (keydown.enter)="clickField(col)"
+                        tabindex="0"
+                    ></div>
                 </td>
             </tr>
         </table>

client/src/app/ui/modules/vertical-tab-group/components/vertical-tab-group/vertical-tab-group.component.html

@@ -17,6 +17,8 @@
                         [ngClass]="{ 'background-primary': index === selectedTabLabelIndex }"
                         [ngStyle]="{ height: labelHeight }"
                         (click)="changeTabSelection(index); openContent()"
+                        (keydown.enter)="changeTabSelection(index); openContent()"
+                        tabindex="0"
                     >
                         <ng-template [cdkPortalOutlet]="tabLabel"></ng-template>
                         <mat-icon *ngIf="isMobile" class="margin-right-8">arrow_forward_ios</mat-icon>

client/src/app/ui/modules/vertical-tab-group/components/vertical-tab-group/vertical-tab-group.component.scss

@@ -8,5 +8,9 @@
         .vertical-tab-label {
             position: relative;
         }
+
+        .vertical-tab-label:hover {
+            background-color: rgba(0, 0, 0, 0.025);
+        }
     }
 }