Add focus to important elements with tooltip

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

@@ -18,7 +18,7 @@
                 (userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()"
               ></my-user-moderation-dropdown>
 
-              <span *ngIf="accountUser?.blocked" [ngbTooltip]="accountUser.blockedReason" class="pt-badge badge-danger" i18n>Banned</span>
+              <span *ngIf="accountUser?.blocked" tabindex="0" [ngbTooltip]="accountUser.blockedReason" class="pt-badge badge-danger" i18n>Banned</span>
 
               <my-account-block-badges [account]="account"></my-account-block-badges>
             </div>

client/src/app/+admin/overview/users/user-list/user-list.component.html

@@ -116,8 +116,10 @@
 
       <td *ngIf="isSelected('quota')">
         <div class="progress" i18n-title title="Total video quota">
-          <div class="progress-bar" role="progressbar" [style]="{ width: getUserVideoQuotaPercentage(user) + '%' }"
+          <div
-               [attr.aria-valuenow]="user.rawVideoQuotaUsed" aria-valuemin="0" [attr.aria-valuemax]="user.rawVideoQuota">
+            class="progress-bar" role="progressbar" [style]="{ width: getUserVideoQuotaPercentage(user) + '%' }"
+            [attr.aria-valuenow]="user.rawVideoQuotaUsed" aria-valuemin="0" [attr.aria-valuemax]="user.rawVideoQuota"
+          >
           </div>
           <span>{{ user.videoQuotaUsed }}</span>
           <span>{{ user.videoQuota }}</span>
@@ -126,8 +128,10 @@
 
       <td *ngIf="isSelected('quotaDaily')">
         <div class="progress" i18n-title title="Total daily video quota">
-          <div class="progress-bar" role="progressbar" [style]="{ width: getUserVideoQuotaDailyPercentage(user) + '%' }"
+          <div
-               [attr.aria-valuenow]="user.rawVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="user.rawVideoQuotaDaily">
+            class="progress-bar" role="progressbar" [style]="{ width: getUserVideoQuotaDailyPercentage(user) + '%' }"
+            [attr.aria-valuenow]="user.rawVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="user.rawVideoQuotaDaily"
+          >
           </div>
           <span>{{ user.videoQuotaUsedDaily }}</span>
           <span>{{ user.videoQuotaDaily }}</span>

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

@@ -5,24 +5,24 @@
       (rateUpdated)="onRateUpdated($event)" (userRatingLoaded)="onRateUpdated($event)"
     ></my-video-rate>
 
-    <button *ngIf="video.support" (click)="showSupportModal()" (keyup.enter)="showSupportModal()" class="action-button action-button-support" [attr.aria-label]="tooltipSupport"
+    <button
-      [ngbTooltip]="tooltipSupport"
+      *ngIf="video.support" (click)="showSupportModal()" (keyup.enter)="showSupportModal()" class="action-button action-button-support"
-      placement="bottom auto"
+      [attr.aria-label]="tooltipSupport" [ngbTooltip]="tooltipSupport" placement="bottom auto"
     >
       <my-global-icon iconName="support" aria-hidden="true"></my-global-icon>
       <span class="icon-text" i18n>SUPPORT</span>
     </button>
 
-    <button (click)="showShareModal()" (keyup.enter)="showShareModal()" class="action-button">
+    <button (click)="showShareModal()" (keyup.enter)="showShareModal()" class="action-button" aria-label="Open the modal to share this video" i18n-ariaLabel>
       <my-global-icon iconName="share" aria-hidden="true"></my-global-icon>
       <span class="icon-text" i18n>SHARE</span>
     </button>
 
     <div
+      *ngIf="isVideoAddableToPlaylist()"
       class="action-dropdown" ngbDropdown placement="top" role="button" autoClose="outside"
-       *ngIf="isVideoAddableToPlaylist()" (openChange)="addContent.openChange($event)"
+      (openChange)="addContent.openChange($event)"
-       [ngbTooltip]="tooltipSaveToPlaylist"
+      [ngbTooltip]="tooltipSaveToPlaylist" placement="bottom auto"
-       placement="bottom auto"
     >
       <button class="action-button action-button-save" ngbDropdownToggle>
         <my-global-icon iconName="playlist-add" aria-hidden="true"></my-global-icon>
@@ -38,6 +38,7 @@
       <button
         *ngIf="isVideoDownloadable()" class="action-button action-button-download"
         (click)="showDownloadModal()" (keydown.enter)="showDownloadModal()"
+        aria-label="Open the modal to download this video" i18n-ariaLabel
       >
         <my-global-icon iconName="download" aria-hidden="true"></my-global-icon>
         <span class="icon-text d-none d-sm-inline" i18n>DOWNLOAD</span>
@@ -56,29 +57,16 @@
 
   <div class="likes-dislikes-bar-outer-container">
     <div
-      class="likes-dislikes-bar-inner-container"
+      *ngIf="video.likes !== 0 || video.dislikes !== 0" class="likes-dislikes-bar-inner-container"
-      *ngIf="video.likes !== 0 || video.dislikes !== 0"
+      [ngbTooltip]="likesBarTooltipText" placement="bottom" tabindex="0"
-      [ngbTooltip]="likesBarTooltipText"
-      placement="bottom"
     >
-      <div
+      <div class="likes-dislikes-bar">
-        class="likes-dislikes-bar"
-      >
         <div class="likes-bar" [ngClass]="{ 'liked': userRating !== 'none' }" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
       </div>
     </div>
   </div>
 </div>
 
-<div
-  class="likes-dislikes-bar"
-  *ngIf="video.likes !== 0 || video.dislikes !== 0"
-  [ngbTooltip]="likesBarTooltipText"
-  placement="bottom"
->
-  <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
-</div>
-
 <ng-container *ngIf="video">
   <my-support-modal #supportModal [video]="video"></my-support-modal>
   <my-video-share #videoShareModal [video]="video" [videoCaptions]="videoCaptions" [playlist]="playlist"></my-video-share>

client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.ts

@@ -57,7 +57,7 @@ export class ActionButtonsComponent implements OnInit, OnChanges {
   ngOnInit () {
     // Hide the tooltips for unlogged users in mobile view, this adds confusion with the popover
     if (this.isUserLoggedIn || !this.screenService.isInMobileView()) {
-      this.tooltipSupport = $localize`Support options for this video`
+      this.tooltipSupport = $localize`Open the modal to support the video uploader`
       this.tooltipSaveToPlaylist = $localize`Save to playlist`
     }
   }

client/src/app/shared/shared-main/date/date-toggle.component.html

@@ -1,6 +1,7 @@
 <span
   class="date-toggle"
   [title]="getTitle()"
+  [ariaLabel]="getTitle()"
   role="button"
   tabindex="0"
   (click)="toggle()"