Fixing keyboard behaviors of the app

src/app/app.component.scss

@@ -45,7 +45,7 @@
 	padding: 12px;
 	color: rgba(255, 255, 255, 0.7) !important;
 
-	&:host-context(.hoverEnabled) &:hover
+	&:host-context(.hoverEnabled) &:hover, &:focus
 	{
 		color: white !important;
 	}
@@ -111,7 +111,7 @@ input::-webkit-search-cancel-button
 	opacity: 0.7;
 	outline: none;
 
-	&:host-context(.hoverEnabled) &:hover
+	&:host-context(.hoverEnabled) &:hover, &:focus
 	{
 		cursor: pointer;
 		opacity: 1;

src/app/components/episodes-list/episodes-list.component.html

@@ -1,10 +1,20 @@
 <div class="root">
-	<div class="episodes" #scrollView (scroll)="onScroll()" infinite-scroll (scrolled)="this.episodes?.loadNext(this.client)" [horizontal]="true" [scrollWindow]="false">
-		<div class="episode" *ngFor="let episode of this.episodes?.items" #itemsDom>
-			<button mat-icon-button class="moreBtn" [matMenuTriggerFor]="more" [matMenuTriggerData]="{episode: episode}"><i class="material-icons">more_vert</i></button>
-			<a routerLink="/watch/{{episode.slug}}" href="/watch/{{episode.slug}}">
+	<div class="episodes" #scrollView
+	     (scroll)="onScroll()" infinite-scroll (scrolled)="this.episodes?.loadNext(this.client)"
+	     [horizontal]="true" [scrollWindow]="false">
+		<a *ngFor="let episode of this.episodes?.items"
+		    routerLink="/watch/{{episode.slug}}" href="/watch/{{episode.slug}}"
+		    class="episode" #itemsDom>
+			<button mat-icon-button class="moreBtn" [matMenuTriggerFor]="more" [matMenuTriggerData]="{episode: episode}"
+			        tabindex="-1"
+			        (click)="$event.stopImmediatePropagation(); $event.preventDefault()">
+				<mat-icon>more_vert</mat-icon>
+			</button>
+			<div>
 				<div matRipple class="img" [style.background-image]="sanitize(episode.thumb)">
-					<button mat-icon-button class="playBtn"><i class="material-icons playIcon">play_circle_outline</i></button>
+					<button mat-icon-button class="playBtn" tabindex="-1">
+						<mat-icon class="playIcon">play_circle_outline</mat-icon>
+					</button>
 				</div>
 				<ng-container *ngIf="displayShowTitle; else noTitle;">
 					<h6 *ngIf="episode.seasonNumber != 0; else elseBlock;" class="title">{{episode.showTitle}} - S{{episode.seasonNumber}}:E{{episode.episodeNumber}}</h6>
@@ -16,16 +26,20 @@
 					<ng-template #elseBlock><h6 class="title">{{episode.title}}</h6></ng-template>
 					<p class="overview">{{episode.overview}}</p>
 				</ng-template>
-			</a>
 			</div>
+		</a>
 	</div>
 
 	<mat-menu #more="matMenu">
 		<ng-template matMenuContent let-episode="episode">
-			<a [href]="'/video/' + episode.link" download><button mat-menu-item>Download episode</button></a>
+			<a [href]="'/video/' + episode.slug" download><button mat-menu-item>Download episode</button></a>
 		</ng-template>
 	</mat-menu>
 
-	<button mat-raised-button color="accent" class="scrollBtn leftBtn d-none" #leftBtn (click)="scrollLeft()"><mat-icon>arrow_left</mat-icon></button>
-	<button mat-raised-button color="accent" class="scrollBtn rightBtn" #rightBtn (click)="scrollRight()"><mat-icon>arrow_right</mat-icon></button>
+	<button mat-raised-button color="accent" class="scrollBtn leftBtn d-none" #leftBtn (click)="scrollLeft()">
+		<mat-icon>arrow_left</mat-icon>
+	</button>
+	<button mat-raised-button color="accent" class="scrollBtn rightBtn" #rightBtn (click)="scrollRight()">
+		<mat-icon>arrow_right</mat-icon>
+	</button>
 </div>

src/app/components/episodes-list/episodes-list.component.scss

@@ -54,6 +54,9 @@
 	width: 55%;
 	outline: none;
 	position: relative;
+	cursor: pointer;
+	color: inherit;
+	text-decoration: inherit;
 
 	@include media-breakpoint-up(sm)
 	{
@@ -88,13 +91,10 @@
 		z-index: 255
 	}
 	
-	> a {
-		cursor: pointer;
-		color: inherit;
-		text-decoration: inherit;
-		outline: none;
-
-		.img {
+	> div
+	{
+		.img
+		{
 			width: 100%;
 			height: 0;
 			padding-top: 56.25%;
@@ -102,7 +102,8 @@
 			background-size: contain;
 			position: relative;
 
-			> .playBtn {
+			> .playBtn
+			{
 				position: absolute;
 				top: 0;
 				bottom: 0;
@@ -116,7 +117,8 @@
 			}
 		}
 
-		.title {
+		.title
+		{
 			padding-top: .2rem;
 			font-weight: 600;
 			margin-bottom: 0;
@@ -126,7 +128,8 @@
 			overflow: hidden;
 		}
 
-		.overview {
+		.overview
+		{
 			font-weight: 300;
 			display: -webkit-box;
 			-webkit-line-clamp: 4;
@@ -134,7 +137,8 @@
 			overflow: hidden;
 		}
 
-		.subtitle {
+		.subtitle
+		{
 			font-weight: 300;
 			display: -webkit-box;
 			-webkit-line-clamp: 1;
@@ -143,14 +147,14 @@
 		}
 	}
 
-	&:host-context(.hoverEnabled) &:hover
+	&:host-context(.hoverEnabled) &:hover, &:focus
 	{
 		.moreBtn
 		{
 			display: block;
 		}
 		
-		> a 
+		> div
 		{
 			.img 
 			{
@@ -170,6 +174,11 @@
 	}
 }
 
+.moreBtn:focus
+{
+	display: block !important;
+}
+
 .playIcon
 {
 	font-size: 64px;

src/app/components/episodes-list/episodes-list.component.ts

@@ -1,4 +1,5 @@
-import { Component, Input} from '@angular/core';
+import { Component, Input, ViewChild } from "@angular/core";
+import { MatMenuTrigger } from "@angular/material/menu";
 import { DomSanitizer } from "@angular/platform-browser";
 import { Episode } from "../../models/resources/episode";
 import { HorizontalScroller } from "../../misc/horizontal-scroller";
@@ -14,6 +15,7 @@ export class EpisodesListComponent extends HorizontalScroller
 {
 	@Input() displayShowTitle: boolean = false;
 	@Input() episodes: Page<Episode>;
+	@ViewChild(MatMenuTrigger) menu: MatMenuTrigger;
 
 	constructor(private sanitizer: DomSanitizer, public client: HttpClient)
 	{
@@ -24,4 +26,9 @@ export class EpisodesListComponent extends HorizontalScroller
 	{
 		return this.sanitizer.bypassSecurityTrustStyle("url(" + url + ")");
 	}
+
+	openMenu(): void
+	{
+		this.menu.openMenu();
+	}
 }

src/app/components/people-list/people-list.component.html

@@ -1,11 +1,18 @@
 <div class="scroll-row mb-5">
-	<div class="people-container" #scrollView (scroll)="onScroll()" infinite-scroll (scrolled)="this.people?.loadNext(this.client)" [horizontal]="true" [scrollWindow]="false">
-		<a class="people" *ngFor="let people of this.people?.items" routerLink="/people/{{people.slug}}" href="/people/{{people.slug}}" #itemsDom>
+	<div class="people-container" #scrollView
+	     (scroll)="onScroll()" infinite-scroll (scrolled)="this.people?.loadNext(this.client)"
+	     [horizontal]="true" [scrollWindow]="false">
+		<a class="people" *ngFor="let people of this.people?.items"
+		   routerLink="/people/{{people.slug}}" href="/people/{{people.slug}}" #itemsDom>
 			<div matRipple [style.background-image]="getPeopleIcon(people.slug)"> </div>
 			<h6 class="name">{{people.name}}</h6>
 			<p class="role">{{people.role}}</p>
 		</a>
 	</div>
-	<button mat-raised-button color="accent" class="scrollBtn leftBtn d-none" #leftBtn (click)="scrollLeft()"><mat-icon>arrow_left</mat-icon></button>
-	<button mat-raised-button color="accent" class="scrollBtn rightBtn" #rightBtn (click)="scrollRight()"><mat-icon>arrow_right</mat-icon></button>
+	<button mat-raised-button color="accent" class="scrollBtn leftBtn d-none" #leftBtn (click)="scrollLeft()">
+		<mat-icon>arrow_left</mat-icon>
+	</button>
+	<button mat-raised-button color="accent" class="scrollBtn rightBtn" #rightBtn (click)="scrollRight()">
+		<mat-icon>arrow_right</mat-icon>
+	</button>
 </div>

src/app/components/people-list/people-list.component.scss

@@ -86,11 +86,11 @@
 		}
 	}
 
-	&:host-context(.hoverEnabled) &:hover
+	&:host-context(.hoverEnabled) &:hover, &:focus
 	{
 		cursor: pointer;
 
-		> img
+		> div
 		{
 			outline: solid var(--accentColor);
 		}

src/app/components/show-grid/show-grid.component.scss

@@ -106,7 +106,7 @@ button
 				margin-bottom: 0;
 			}
 
-			&:host-context(.hoverEnabled) &:hover
+			&:host-context(.hoverEnabled) &:hover, &:focus
 			{
 				cursor: pointer;
 			}

src/app/models/resources/episode.ts

@@ -7,7 +7,6 @@ export interface Episode extends IResource
 	episodeNumber: number;
 	title: string;
 	thumb: string;
-	slug: string;
 	overview: string;
 	releaseDate;
 	runtime: number;