Improve accessibility

5 files changed, 13 insertions, 9 deletions

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,