Improve accessibility

client/src/app/+search/search.component.html

@@ -22,7 +22,7 @@
       </div>
     </div>
 
-    <div class="results-filter collapse-transition" [ngbCollapse]="isSearchFilterCollapsed">
+    <div class="results-filter" [ngbCollapse]="isSearchFilterCollapsed" [animation]="true">
       <my-search-filters [advancedSearch]="advancedSearch" (filtered)="onFiltered()"></my-search-filters>
 
       <div *ngIf="error" class="alert alert-danger">{{ error }}</div>

client/src/app/app.component.html

@@ -6,9 +6,11 @@
   <div class="root-header">
 
     <div class="top-left-block">
-      <span class="icon icon-menu" role="button" [title]="getToggleTitle()" (click)="menu.toggleMenu()"></span>
+      <span role="button" tabindex="0" [title]="getToggleTitle()" (click)="menu.toggleMenu()" (keyup.enter)="menu.toggleMenu()">
+        <span class="icon icon-menu"></span>
+      </span>
 
-      <a class="peertube-title c-hand" (click)="goToDefaultRoute()">
+      <a class="peertube-title c-hand" [routerLink]="getDefaultRoute()">
         <span class="icon icon-logo"></span>
         <span class="instance-name">{{ instanceName }}</span>
       </a>
@@ -22,7 +24,7 @@
   <div class="sub-header-container">
     <my-menu *ngIf="menu.isMenuDisplayed"></my-menu>
 
-    <div id="content" tabindex="-1" class="main-col" [ngClass]="{ expanded: menu.isMenuDisplayed === false }">
+    <div id="content" class="main-col" [ngClass]="{ expanded: menu.isMenuDisplayed === false }">
 
       <div class="main-row">
 

client/src/app/app.component.ts

@@ -83,10 +83,6 @@ export class AppComponent implements OnInit, AfterViewInit {
     return this.serverConfig.instance.name
   }
 
-  goToDefaultRoute () {
-    return this.router.navigateByUrl(this.redirectService.getDefaultRoute())
-  }
-
   ngOnInit () {
     document.getElementById('incompatible-browser').className += ' browser-ok'
 
@@ -135,6 +131,10 @@ export class AppComponent implements OnInit, AfterViewInit {
     this.pluginService.initializeCustomModal(this.customModal)
   }
 
+  getDefaultRoute () {
+    return this.redirectService.getDefaultRoute()
+  }
+
   getToggleTitle () {
     if (this.menu.isDisplayed()) return $localize`Close the left menu`
 

client/src/app/menu/menu.component.html

@@ -7,7 +7,7 @@
             class="logged-in-more" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left auto"
             [container]="dropdownContainer" (openChange)="onDropdownOpenChange($event)" autoClose="outside"
           >
-            <div ngbDropdownToggle>
+            <button class="border-0 text-start" ngbDropdownToggle>
               <my-actor-avatar [actor]="user.account" actorType="account" size="34"></my-actor-avatar>
 
               <div class="logged-in-info">
@@ -19,7 +19,7 @@
               <div class="dropdown-toggle-indicator">
                 <span class="chevron-down"></span>
               </div>
-            </div>
+            </button>
 
             <div ngbDropdownMenu>
               <a
@@ -31,14 +31,14 @@
 
               <div class="dropdown-divider"></div>
 
-              <a
+              <button
                 myPluginSelector pluginSelectorId="menu-user-dropdown-language-item"
                 ngbDropdownItem ngbDropdownToggle class="dropdown-item" (click)="openLanguageChooser()"
               >
                 <my-global-icon iconName="language" aria-hidden="true"></my-global-icon>
                 <span i18n>Interface:</span>
                 <span class="ms-auto muted">{{ currentInterfaceLanguage }}</span>
-              </a>
+              </button>
 
               <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-languages-subtitles"
                 #settingsLanguagesSubtitles (click)="onActiveLinkScrollToAnchor(settingsLanguagesSubtitles)">
@@ -57,12 +57,12 @@
                 <span class="ms-auto muted">{{ nsfwPolicy }}</span>
               </a>
 
-              <a ngbDropdownItem class="dropdown-item" (click)="toggleUseP2P()">
+              <button ngbDropdownItem class="dropdown-item" (click)="toggleUseP2P()">
                 <my-global-icon iconName="p2p" aria-hidden="true"></my-global-icon>
                 <ng-container i18n>Help share videos</ng-container>
 
                 <my-input-switch class="ms-auto" [checked]="user.p2pEnabled"></my-input-switch>
-              </a>
+              </button>
 
               <div class="dropdown-divider"></div>
 
@@ -100,9 +100,9 @@
       </div>
 
       <div *ngIf="!isLoggedIn" class="login-buttons-block">
-        <my-login-link className="peertube-button-link orange-button w-100"></my-login-link>
+        <my-login-link className="peertube-button-link orange-button w-100 text-truncate"></my-login-link>
 
-        <a *ngIf="isRegistrationAllowed()" routerLink="/signup" class="peertube-button-link create-account-button">
+        <a *ngIf="isRegistrationAllowed()" routerLink="/signup" class="peertube-button-link create-account-button text-truncate">
           <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
         </a>
       </div>

client/src/app/menu/menu.component.scss

@@ -252,8 +252,6 @@ my-actor-avatar {
 
   > a,
   > my-login-link {
-    @include ellipsis;
-
     display: block;
     width: 100%;
 

client/src/app/menu/notification.component.html

@@ -3,15 +3,16 @@
   <div *ngIf="unreadNotifications >= 100" class="unread-notifications">99+</div>
 </ng-template>
 
-<div
+<button
   [ngbPopover]="popContent" autoClose="outside" placement="bottom" container={this} popoverClass="popover-notifications"
-  i18n-title title="View your notifications" [ngClass]="{ 'notification-inbox-popover': true, 'shown': opened, 'hidden': isInMobileView }"
+  i18n-title title="View your notifications"
+  class="border-0 text-start" [ngClass]="{ 'notification-inbox-popover': true, 'shown': opened, 'hidden': isInMobileView }"
   #popover="ngbPopover" (shown)="onPopoverShown()" (hidden)="onPopoverHidden()"
 >
   <ng-container *ngTemplateOutlet="notificationNumber"></ng-container>
 
   <my-global-icon iconName="bell"></my-global-icon>
-</div>
+</button>
 
 <div *ngIf="isInMobileView" i18n-title title="View your notifications" class="notification-inbox-link">
   <ng-container *ngTemplateOutlet="notificationNumber"></ng-container>

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>

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 {

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

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

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;

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'
+    }
   }
 }

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>

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%;
 }

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>

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

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>

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 {

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>
 

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>

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>

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 {

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>

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,

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>

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 {

client/src/sass/bootstrap.scss

@@ -15,6 +15,7 @@
 @import 'bootstrap/scss/grid';
 @import 'bootstrap/scss/forms';
 @import 'bootstrap/scss/buttons';
+@import 'bootstrap/scss/transitions';
 @import 'bootstrap/scss/dropdown';
 @import 'bootstrap/scss/button-group';
 @import 'bootstrap/scss/nav';
@@ -203,7 +204,6 @@ body {
   display: flex !important;
   align-items: center;
   height: 30px !important;
-  padding: 10px 15px !important;
 }
 
 .nav.nav-pills {
@@ -260,19 +260,6 @@ body {
   border-color: #dee2e6;
 }
 
-.collapse-transition {
-  // Animation when we show/hide the filters
-  transition: max-height 0.3s;
-  display: block !important;
-  overflow: hidden !important;
-  max-height: 0;
-
-  &.show {
-    max-height: 1500px;
-    overflow: inherit !important;
-  }
-}
-
 .accordion-button {
   font-size: 18px;
 
@@ -389,3 +376,8 @@ body {
     display: none;
   }
 }
+
+.text-truncate {
+  // Prevent invalid height in parent: https://stackoverflow.com/a/22425601
+  vertical-align: top;
+}

client/src/sass/class-helpers/_common.scss

@@ -3,30 +3,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.link-orange {
-  color: pvar(--mainForegroundColor);
-  font-weight: $font-semibold;
-  border-bottom: 0.18em solid pvar(--mainColor);
-  display: inline-block;
-  line-height: 1.1;
-
-  &:hover {
-    color: pvar(--mainForegroundColor);
-    opacity: 0.8;
-  }
-}
-
-.underline-orange {
-  display: inline-block;
-  border-bottom: 0.19em solid pvar(--mainColor);
-}
-
-// ---------------------------------------------------------------------------
-
-.muted {
-  @include muted;
-}
-
 // ---------------------------------------------------------------------------
 
 .pt-badge {

client/src/sass/class-helpers/_text.scss

@@ -0,0 +1,47 @@
+@use '_badges' as *;
+@use '_icons' as *;
+@use '_variables' as *;
+@use '_mixins' as *;
+
+.link-orange {
+  color: pvar(--mainForegroundColor);
+  font-weight: $font-semibold;
+  border-bottom: 0.18em solid pvar(--mainColor);
+  display: inline-block;
+  line-height: 1.1;
+
+  &:hover {
+    color: pvar(--mainForegroundColor);
+    opacity: 0.8;
+  }
+}
+
+.underline-orange {
+  display: inline-block;
+  border-bottom: 0.19em solid pvar(--mainColor);
+}
+
+// ---------------------------------------------------------------------------
+
+.muted {
+  @include muted;
+}
+
+// ---------------------------------------------------------------------------
+
+@mixin ellipsis-multiline($number-of-lines) {
+  display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
+  -webkit-line-clamp: $number-of-lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.ellipsis-multiline-2 {
+  @include ellipsis-multiline(2);
+}
+
+.ellipsis-multiline-3 {
+  @include ellipsis-multiline(3);
+}
+
+// ---------------------------------------------------------------------------

client/src/sass/class-helpers/index.scss

@@ -3,3 +3,4 @@
 @use './_custom-bootstrap-helpers';
 @use './_forms';
 @use './_menu';
+@use './_text';

client/src/sass/include/_bootstrap-variables.scss

@@ -41,6 +41,7 @@ $input-focus-bg: pvar(--inputBackgroundColor);
 $input-btn-focus-width: 0;
 $input-btn-focus-color: inherit;
 $input-focus-border-color: #ced4da;
+$input-focus-box-shadow: 0 0 0 0.25rem pvar(--mainColorLightest);
 
 $input-group-addon-color: pvar(--mainForegroundColor);
 $input-group-addon-bg: pvar(--greyBackgroundColor);

client/src/sass/include/_miniature.scss

@@ -2,9 +2,9 @@
 @use '_mixins' as *;
 
 @mixin miniature-name {
-  @include ellipsis-multiline(1.1em, 2);
   @include peertube-word-wrap(false);
 
+  font-size: 1.1em;
   transition: color 0.2s;
   font-weight: $font-semibold;
   color: pvar(--mainForegroundColor);

client/src/sass/include/_mixins.scss

@@ -8,13 +8,16 @@
   &:focus,
   &:active {
     text-decoration: none !important;
+  }
+
+  &:focus:not(.focus-visible) {
     outline: none !important;
   }
 }
 
 @mixin disable-outline {
   &:focus:not(.focus-visible) {
-    outline: none;
+    outline: none !important;
   }
 }
 
@@ -24,20 +27,6 @@
   text-overflow: ellipsis;
 }
 
-@mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2, $line-height: $font-size) {
-  display: block;
-  /* Fallback for non-webkit */
-  display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
-  -webkit-line-clamp: $number-of-lines;
-  -webkit-box-orient: vertical;
-  /* Fallback for non-webkit */
-  font-size: $font-size;
-  line-height: $line-height;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-height: $font-size * $number-of-lines;
-}
-
 @mixin muted {
   color: pvar(--greyForegroundColor) !important;
 }

client/src/sass/ng-select.scss

@@ -40,8 +40,7 @@ $ng-select-input-text: pvar(--mainForegroundColor);
 
   &.ng-select-focused {
     &:not(.ng-select-opened) > .ng-select-container {
-      border-color: #ccc !important;
-      box-shadow: none !important;
+      border-color: $ng-select-border !important;
     }
   }