Fix playlist buttons accessibility

client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html

@@ -19,23 +19,21 @@
     </div>
 
     <div class="playlist-controls">
-      <my-global-icon
-        iconName="videos"
-        [class.active]="autoPlayNextVideoPlaylist"
-        (click)="switchAutoPlayNextVideoPlaylist()"
-        [ngbTooltip]="autoPlayNextVideoPlaylistSwitchText"
-        placement="bottom auto"
-        container="body"
-      ></my-global-icon>
+      <button
+        class="border-0 p-0 me-2" [ngClass]="{ active: autoPlayNextVideoPlaylist }" (click)="switchAutoPlayNextVideoPlaylist()"
+        [ngbTooltip]="autoPlayNextVideoPlaylistSwitchText" [ariaLabel]="autoPlayNextVideoPlaylistSwitchText"
+        placement="bottom auto" container="body"
+      >
+        <my-global-icon iconName="videos"></my-global-icon>
+      </button>
 
-      <my-global-icon
-        iconName="repeat"
-        [class.active]="loopPlaylist"
-        (click)="switchLoopPlaylist()"
-        [ngbTooltip]="loopPlaylistSwitchText"
-        placement="bottom auto"
-        container="body"
-      ></my-global-icon>
+      <button
+        class="border-0 p-0" [ngClass]="{ active: loopPlaylist }" (click)="switchLoopPlaylist()"
+        [ngbTooltip]="loopPlaylistSwitchText" [ariaLabel]="loopPlaylistSwitchText"
+        placement="bottom auto" container="body"
+      >
+        <my-global-icon iconName="repeat"></my-global-icon>
+      </button>
     </div>
   </div>
 

client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss

@@ -46,18 +46,8 @@
     display: flex;
     margin: 10px 0;
 
-    my-global-icon:not(:last-child) {
-      @include margin-right(.5rem);
-    }
-
-    my-global-icon {
-      &:not(.active) {
-        opacity: .5;
-      }
-
-      ::ng-deep {
-        cursor: pointer;
-      }
+    button:not(.active) {
+      opacity: .5;
     }
   }