Improve accessibility

20 files changed, 117 insertions, 132 deletions

diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.html b/client/src/app/shared/shared-forms/markdown-textarea.component.html
index 5a9ff1a15..5d355a6d8 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.html
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.html
@@ -25,15 +25,11 @@
       </ng-template>
     </ng-container>
 
-    <my-global-icon
-      *ngIf="!isMaximized" role="button" [ngbTooltip]="maximizeInText"
-      class="maximize-button" iconName="fullscreen" (click)="onMaximizeClick()" [ngClass]="{ disabled: disabled }"
-    ></my-global-icon>
-
-    <my-global-icon
-      *ngIf="isMaximized" role="button" [ngbTooltip]="maximizeOutText"
-      class="maximize-button" iconName="exit-fullscreen" (click)="onMaximizeClick()" [ngClass]="{ disabled: disabled }"
-    ></my-global-icon>
+    <button (click)="onMaximizeClick()" class="maximize-button border-0 m-3" [disabled]="disabled">
+      <my-global-icon *ngIf="!isMaximized" [ngbTooltip]="maximizeInText" iconName="fullscreen"></my-global-icon>
+
+      <my-global-icon *ngIf="isMaximized" [ngbTooltip]="maximizeOutText" iconName="exit-fullscreen"></my-global-icon>
+    </button>
   </div>
 
   <div [ngbNavOutlet]="nav"></div>
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
index f4b74a2d4..1f30bf129 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -23,7 +23,7 @@ $input-border-radius: 3px;
   }
 
   .nav-preview {
-    padding: 10px;
+    padding: 10px 0;
 
     border: 1px solid pvar(--inputBorderColor);
     border-top: 1px dashed pvar(--inputBorderColor);
@@ -38,14 +38,9 @@ $input-border-radius: 3px;
     border-bottom: 2px solid pvar(--mainColor);
 
     .maximize-button {
-      @include margin-left(15px);
-
       opacity: 0.6;
-      cursor: default;
-
-      &:not(.disabled) {
-        cursor: pointer;
 
+      &:not([disabled]) {
         &:hover,
         &:active {
           opacity: 1;
@@ -105,10 +100,6 @@ $input-border-radius: 3px;
 
       padding: 20px 0;
       width: 100% !important;
-
-      .maximize-button {
-        @include margin-right(15px);
-      }
     }
 
     textarea {
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.html b/client/src/app/shared/shared-instance/instance-about-accordion.component.html
index 94077fafa..ac8c01856 100644
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.html
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.html
@@ -1,6 +1,6 @@
 <h2 *ngIf="displayInstanceName" class="instance-name">{{ about?.instance.name }}</h2>
 
-<div *ngIf="displayInstanceShortDescription" class="instance-short-description">{{ about?.instance.shortDescription }}</div>
+<div *ngIf="displayInstanceShortDescription" class="instance-short-description ellipsis-multiline-3">{{ about?.instance.shortDescription }}</div>
 
 <ngb-accordion #accordion="ngbAccordion" [closeOthers]="true">
   <ngb-panel *ngIf="panels.features" id="instance-features">
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
index ee9e4c3ee..8337a7154 100644
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
@@ -6,8 +6,7 @@
 }
 
 .instance-short-description {
-  @include ellipsis-multiline(1rem, 3, inherit);
-
+  font-size: 1rem;
   margin: 25px 0;
 }
 
diff --git a/client/src/app/shared/shared-main/angular/link.component.scss b/client/src/app/shared/shared-main/angular/link.component.scss
index f54240d31..d288afab1 100644
--- a/client/src/app/shared/shared-main/angular/link.component.scss
+++ b/client/src/app/shared/shared-main/angular/link.component.scss
@@ -1,4 +1,4 @@
-.no-class {
+.inherit-parent {
   color: inherit;
   text-decoration: inherit;
   position: inherit;
diff --git a/client/src/app/shared/shared-main/angular/link.component.ts b/client/src/app/shared/shared-main/angular/link.component.ts
index 1f5975589..f2093496f 100644
--- a/client/src/app/shared/shared-main/angular/link.component.ts
+++ b/client/src/app/shared/shared-main/angular/link.component.ts
@@ -14,14 +14,17 @@ export class LinkComponent implements OnInit {
   @Input() title?: string
 
   @Input() className?: string
+  @Input() inheritParentCSS = false
 
   @Input() tabindex: string | number
 
   builtClasses: string
 
   ngOnInit () {
-    this.builtClasses = this.className
-      ? this.className
-      : 'no-class'
+    this.builtClasses = this.className || ''
+
+    if (!this.builtClasses || this.inheritParentCSS) {
+      this.builtClasses += ' inherit-parent'
+    }
   }
 }
diff --git a/client/src/app/shared/shared-main/feeds/feed.component.html b/client/src/app/shared/shared-main/feeds/feed.component.html
index a748be873..7032c4cd0 100644
--- a/client/src/app/shared/shared-main/feeds/feed.component.html
+++ b/client/src/app/shared/shared-main/feeds/feed.component.html
@@ -1,4 +1,4 @@
-<div class="feed" *ngIf="syndicationItems && syndicationItems.length !== 0">
+<button class="feed border-0 p-0" *ngIf="syndicationItems && syndicationItems.length !== 0">
   <my-global-icon
     role="button" aria-label="Open syndication dropdown" i18n-aria-label
     *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="bottom left auto"
@@ -9,4 +9,4 @@
   <ng-template #feedsList>
     <a *ngFor="let item of syndicationItems" [href]="item.url" target="_blank" rel="noopener noreferrer">{{ item.label }}</a>
   </ng-template>
-</div>
+</button>
diff --git a/client/src/app/shared/shared-main/feeds/feed.component.scss b/client/src/app/shared/shared-main/feeds/feed.component.scss
index bf1f4eeeb..25afe9c6c 100644
--- a/client/src/app/shared/shared-main/feeds/feed.component.scss
+++ b/client/src/app/shared/shared-main/feeds/feed.component.scss
@@ -3,15 +3,19 @@
 
 .feed {
   width: 100%;
+  color: inherit;
 
   a {
-    color: #000;
+    color: pvar(--mainForegroundColor);
     display: block;
     min-width: 100px;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 }
 
 my-global-icon {
-  cursor: pointer;
   width: 100%;
 }
diff --git a/client/src/app/shared/shared-main/misc/help.component.html b/client/src/app/shared/shared-main/misc/help.component.html
index 360a476f6..0252ad5cb 100644
--- a/client/src/app/shared/shared-main/misc/help.component.html
+++ b/client/src/app/shared/shared-main/misc/help.component.html
@@ -22,11 +22,9 @@
   </p>
 </ng-template>
 
-<span
-  role="button"
-  class="help-tooltip-button"
+<button
+  class="help-tooltip-button p-0 border-0 mx-1"
   [title]="title"
-  tabindex=0
   popoverClass="help-popover"
   [attr.aria-pressed]="isPopoverOpened"
   [ngbPopover]="tooltipTemplate"
@@ -36,4 +34,4 @@
   (onShown)="onPopoverShown()"
 >
   <my-global-icon [iconName]="iconName"></my-global-icon>
-</span>
+</button>
diff --git a/client/src/app/shared/shared-main/misc/help.component.scss b/client/src/app/shared/shared-main/misc/help.component.scss
index 6ccef9f2c..46f533f61 100644
--- a/client/src/app/shared/shared-main/misc/help.component.scss
+++ b/client/src/app/shared/shared-main/misc/help.component.scss
@@ -2,12 +2,6 @@
 @use '_mixins' as *;
 
 .help-tooltip-button {
-  @include disable-outline;
-
-  cursor: pointer;
-  border: 0;
-  margin: 5px;
-
   my-global-icon {
     @include apply-svg-color(pvar(--greyForegroundColor));
 
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html
index 01d351783..5650fa948 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.html
+++ b/client/src/app/shared/shared-share-modal/video-share.component.html
@@ -1,7 +1,10 @@
 <ng-template #modal let-hide="close">
   <div class="modal-header">
     <h4 i18n class="modal-title">Share</h4>
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+
+    <button class="border-0 p-0" (click)="hide()">
+      <my-global-icon iconName="cross" aria-label="Close" role="button" ></my-global-icon>
+    </button>
   </div>
 
 
@@ -150,89 +153,85 @@
       <div [ngbNavOutlet]="nav"></div>
 
       <div class="filters">
-        <div>
-          <div class="form-group start-at" *ngIf="!video.isLive">
+        <div class="form-group start-at" *ngIf="!video.isLive">
+          <my-peertube-checkbox
+            inputName="startAt" [(ngModel)]="customizations.startAtCheckbox"
+            i18n-labelText labelText="Start at"
+          ></my-peertube-checkbox>
+
+          <my-timestamp-input
+            [timestamp]="customizations.startAt"
+            [maxTimestamp]="video.duration"
+            [disabled]="!customizations.startAtCheckbox"
+            [(ngModel)]="customizations.startAt"
+          >
+          </my-timestamp-input>
+        </div>
+
+        <div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block">
+          <my-peertube-checkbox
+            inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox"
+            i18n-labelText labelText="Auto select subtitle"
+          ></my-peertube-checkbox>
+
+          <div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }">
+            <select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox" class="form-control">
+              <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="form-group" *ngIf="isInVideoEmbedTab()">
+          <my-peertube-checkbox
+            inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
+            i18n-labelText labelText="Only display embed URL"
+          ></my-peertube-checkbox>
+        </div>
+
+        <my-plugin-placeholder pluginId="share-modal-video-settings"></my-plugin-placeholder>
+
+        <div class="advanced-filters" [ngbCollapse]="isAdvancedCustomizationCollapsed" [animation]="true">
+          <div class="form-group stop-at" *ngIf="!video.isLive">
             <my-peertube-checkbox
-              inputName="startAt" [(ngModel)]="customizations.startAtCheckbox"
-              i18n-labelText labelText="Start at"
+              inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox"
+              i18n-labelText labelText="Stop at"
             ></my-peertube-checkbox>
 
             <my-timestamp-input
-              [timestamp]="customizations.startAt"
+              [timestamp]="customizations.stopAt"
               [maxTimestamp]="video.duration"
-              [disabled]="!customizations.startAtCheckbox"
-              [(ngModel)]="customizations.startAt"
+              [disabled]="!customizations.stopAtCheckbox"
+              [(ngModel)]="customizations.stopAt"
             >
             </my-timestamp-input>
           </div>
 
-          <div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block">
+          <div class="form-group">
             <my-peertube-checkbox
-              inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox"
-              i18n-labelText labelText="Auto select subtitle"
+              inputName="autoplay" [(ngModel)]="customizations.autoplay"
+              i18n-labelText labelText="Autoplay"
             ></my-peertube-checkbox>
-
-            <div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }">
-              <select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox" class="form-control">
-                <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
-              </select>
-            </div>
           </div>
 
-          <div class="form-group" *ngIf="isInVideoEmbedTab()">
+          <div class="form-group">
             <my-peertube-checkbox
-              inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
-              i18n-labelText labelText="Only display embed URL"
+              inputName="muted" [(ngModel)]="customizations.muted"
+              i18n-labelText labelText="Muted"
             ></my-peertube-checkbox>
           </div>
 
-          <my-plugin-placeholder pluginId="share-modal-video-settings"></my-plugin-placeholder>
-        </div>
-
-        <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
-          <div>
-            <div class="form-group stop-at" *ngIf="!video.isLive">
-              <my-peertube-checkbox
-                inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox"
-                i18n-labelText labelText="Stop at"
-              ></my-peertube-checkbox>
-
-              <my-timestamp-input
-                [timestamp]="customizations.stopAt"
-                [maxTimestamp]="video.duration"
-                [disabled]="!customizations.stopAtCheckbox"
-                [(ngModel)]="customizations.stopAt"
-              >
-              </my-timestamp-input>
-            </div>
-
-            <div class="form-group">
-              <my-peertube-checkbox
-                inputName="autoplay" [(ngModel)]="customizations.autoplay"
-                i18n-labelText labelText="Autoplay"
-              ></my-peertube-checkbox>
-            </div>
-
-            <div class="form-group">
-              <my-peertube-checkbox
-                inputName="muted" [(ngModel)]="customizations.muted"
-                i18n-labelText labelText="Muted"
-              ></my-peertube-checkbox>
-            </div>
-
-            <div class="form-group" *ngIf="!video.isLive">
-              <my-peertube-checkbox
-                inputName="loop" [(ngModel)]="customizations.loop"
-                i18n-labelText labelText="Loop"
-              ></my-peertube-checkbox>
-            </div>
+          <div class="form-group" *ngIf="!video.isLive">
+            <my-peertube-checkbox
+              inputName="loop" [(ngModel)]="customizations.loop"
+              i18n-labelText labelText="Loop"
+            ></my-peertube-checkbox>
+          </div>
 
-            <div *ngIf="!isLocalVideo() && !isInVideoEmbedTab()" class="form-group">
-              <my-peertube-checkbox
-                inputName="originUrl" [(ngModel)]="customizations.originUrl"
-                i18n-labelText labelText="Use origin instance URL"
-              ></my-peertube-checkbox>
-            </div>
+          <div *ngIf="!isLocalVideo() && !isInVideoEmbedTab()" class="form-group">
+            <my-peertube-checkbox
+              inputName="originUrl" [(ngModel)]="customizations.originUrl"
+              i18n-labelText labelText="Use origin instance URL"
+            ></my-peertube-checkbox>
           </div>
 
           <ng-container *ngIf="isInVideoEmbedTab()">
@@ -280,9 +279,11 @@
           </ng-container>
         </div>
 
-        <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
-             [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
-
+        <button
+          class="border-0 p-0 mt-4 mx-auto fw-semibold d-block"
+          (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed"
+          [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic"
+        >
           <ng-container *ngIf="isAdvancedCustomizationCollapsed">
             <span class="chevron-down"></span>
 
@@ -298,7 +299,7 @@
               Less customization
             </ng-container>
           </ng-container>
-        </div>
+        </button>
       </div>
     </div>
   </div>
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.scss b/client/src/app/shared/shared-share-modal/video-share.component.scss
index 7b6009f5a..c64e11f4d 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.scss
+++ b/client/src/app/shared/shared-share-modal/video-share.component.scss
@@ -42,12 +42,7 @@ my-input-text {
   }
 
   .advanced-filters-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 20px;
     font-weight: $font-semibold;
-    cursor: pointer;
   }
 
   .video-caption-block {
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html
index 4fea0cc1c..57fcdd899 100644
--- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html
@@ -1,8 +1,8 @@
-<a *ngIf="!videoHref" [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" class="video-thumbnail">
+<a *ngIf="!videoHref" [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" class="video-thumbnail" tabindex="-1">
   <ng-container *ngTemplateOutlet="aContent"></ng-container>
 </a>
 
-<a *ngIf="videoHref" [href]="videoHref" [target]="videoTarget" class="video-thumbnail">
+<a *ngIf="videoHref" [href]="videoHref" [target]="videoTarget" class="video-thumbnail" tabindex="-1">
   <ng-container *ngTemplateOutlet="aContent"></ng-container>
 </a>
 
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.html b/client/src/app/shared/shared-video-miniature/video-download.component.html
index 1f622933d..3d8ce22de 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.html
@@ -56,7 +56,7 @@
 
       <div [ngbNavOutlet]="resolutionNav"></div>
 
-      <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
+      <div class="advanced-filters" [ngbCollapse]="isAdvancedCustomizationCollapsed" [animation]="true">
         <div ngbNav #navMetadata="ngbNav" class="nav-tabs nav-metadata">
           <ng-container ngbNavItem>
             <a ngbNavLink i18n>Format</a>
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
index 1e92e1952..48bb0d812 100644
--- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
@@ -12,8 +12,8 @@
 
   <div class="first-row">
     <div class="active-filters">
-      <div
-        class="pastille filters-toggle" (click)="areFiltersCollapsed = !areFiltersCollapsed" role="button"
+      <button
+        class="pastille filters-toggle" (click)="areFiltersCollapsed = !areFiltersCollapsed"
         [attr.aria-expanded]="!areFiltersCollapsed" aria-controls="collapseBasic"
         [ngClass]="{ active: !areFiltersCollapsed }"
       >
@@ -21,7 +21,7 @@
         <ng-container i18n *ngIf="!areFiltersCollapsed">Hide filters</ng-container>
 
         <my-global-icon iconName="chevrons-up"></my-global-icon>
-      </div>
+      </button>
 
       <div
         *ngFor="let activeFilter of filters.getActiveFilters()" (click)="resetFilter(activeFilter.key, activeFilter.canRemove)"
@@ -56,7 +56,7 @@
 
   </div>
 
-  <div class="collapse-transition" [ngbCollapse]="areFiltersCollapsed">
+  <div [ngbCollapse]="areFiltersCollapsed" [animation]="true">
     <div class="filters">
       <div class="form-group">
         <label class="with-description" for="languageOneOf" i18n>Languages:</label>
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
index a4e51982c..c65895a51 100644
--- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
@@ -50,6 +50,10 @@
   padding: 4px 15px;
   margin-bottom: 15px;
   cursor: pointer;
+
+  &:focus-visible {
+    outline: pvar(--mainColor) auto 1px;
+  }
 }
 
 .filters-toggle {
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
index 7d3c3dbfc..42d13f458 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
@@ -24,8 +24,8 @@
 
         <div class="w-100 d-flex flex-column">
           <my-link
-            [internalLink]="videoRouterLink" [href]="videoHref" [target]="videoTarget"
-            [title]="video.name"class="video-miniature-name" [ngClass]="{ 'blur-filter': isVideoBlur }" tabindex="-1"
+            [internalLink]="videoRouterLink" [href]="videoHref" [target]="videoTarget" [inheritParentCSS]="true"
+            [title]="video.name" class="video-miniature-name" className="ellipsis-multiline-2" [ngClass]="{ 'blur-filter': isVideoBlur }"
           >
             {{ video.name }}
           </my-link>
@@ -40,7 +40,7 @@
             </span>
           </span>
 
-          <a tabindex="-1" *ngIf="displayOptions.by" class="video-miniature-account" [routerLink]="[ '/c', video.byVideoChannel ]">
+          <a *ngIf="displayOptions.by" class="video-miniature-account" [routerLink]="[ '/c', video.byVideoChannel ]">
             <ng-container *ngIf="displayOwnerAccount()">{{ authorAccount }}</ng-container>
             <ng-container *ngIf="displayOwnerVideoChannel()">{{ authorChannel }}</ng-container>
           </a>
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index a397efdca..d48b00518 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -167,7 +167,7 @@ my-actor-avatar {
   }
 
   .video-miniature-name {
-    @include ellipsis-multiline($video-miniature-row-name-font-size, 2);
+    font-size: $video-miniature-row-name-font-size;
   }
 
   .video-miniature-created-at-views,
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
index 1dd68b09e..3b34c71ce 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
@@ -1,6 +1,6 @@
 <div class="miniature" [ngClass]="{ 'no-videos': playlist.videosLength === 0, 'to-manage': toManage, 'display-as-row': displayAsRow }">
   <my-link
-    [internalLink]="routerLink" [href]="playlistHref" [target]="playlistTarget"
+    [internalLink]="routerLink" [href]="playlistHref" [target]="playlistTarget" [inheritParentCSS]="true"
     [title]="playlist.description" class="miniature-thumbnail"
   >
     <img alt="" [attr.aria-labelledby]="playlist.displayName" [attr.src]="playlist.thumbnailUrl" />
@@ -16,8 +16,8 @@
 
   <div class="miniature-info">
     <my-link
-      [internalLink]="routerLink" [href]="playlistHref" [target]="playlistTarget"
-      [title]="playlist.description" class="miniature-name" tabindex="-1"
+      [internalLink]="routerLink" [href]="playlistHref" [target]="playlistTarget" [inheritParentCSS]="true"
+      [title]="playlist.description" class="miniature-name" className="ellipsis-multiline-2"
     >
       {{ playlist.displayName }}
     </my-link>
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
index d43afad28..2d8377e7b 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
@@ -95,7 +95,7 @@
   display: flex;
 
   .miniature-name {
-    @include ellipsis-multiline($video-miniature-row-name-font-size, 2);
+    font-size: $video-miniature-row-name-font-size;
   }
 
   .miniature-thumbnail {