add keyboard navigation for video actions (#2854)

Co-authored-by: Rigel Kent <sendmemail@rigelk.eu>

3 files changed, 9 insertions, 5 deletions

diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
index 9e551c1c8..54557df6b 100644
--- a/client/src/app/shared/video/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -10,7 +10,7 @@
     <div class="action-block" *ngIf="actions.length > 0">
       <a [routerLink]="action.routerLink" routerLinkActive="active" *ngFor="let action of actions">
         <button class="btn">
-          <my-global-icon [iconName]="action.iconName"></my-global-icon>
+          <my-global-icon [iconName]="action.iconName" aria-hidden="true"></my-global-icon>
           <span>{{ action.label }}</span>
         </button>
       </a>
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index d37ab478d..992c16585 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -9,7 +9,7 @@
 
   <div class="video-bottom">
     <div class="video-miniature-information">
-      <div class="d-inline-flex">
+      <div class="d-inline-flex video-miniature-meta">
         <div *ngIf="displayOptions.avatar" class="avatar">
           <img [src]="getAvatarUrl()" alt="Avatar" />
         </div>
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 4e7c9fb57..d926c4dec 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -2,7 +2,7 @@
 @import '_mixins';
 @import '_miniature';
 
-$more-button-width: 41px;
+$more-button-width: 40px;
 $more-margin-right: 15px;
 
 .video-miniature {
@@ -11,7 +11,6 @@ $more-margin-right: 15px;
   padding-bottom: $video-miniature-margin-bottom;
   height: 195px;
   vertical-align: top;
-  overflow: hidden;
 
   .video-bottom {
     display: flex;
@@ -32,6 +31,11 @@ $more-margin-right: 15px;
         @include miniature-name;
       }
 
+      .video-miniature-meta {
+        width: calc(100% + #{$more-button-width});
+        overflow: hidden;
+      }
+
       .video-miniature-created-at-views {
         display: block;
         font-size: 13px;
@@ -122,7 +126,7 @@ $more-margin-right: 15px;
       width: 100% !important;
 
       .video-miniature-information {
-        width: calc(100% - 40px) !important;
+        width: calc(100% - #{$more-button-width}) !important;
       }
     }