Improve frontend accessibility

In particular checkboxes, likes/dislikes, share button, video thumbnails
and help buttons

2 files changed, 13 insertions, 0 deletions

diff --git a/client/src/app/shared/misc/help.component.html b/client/src/app/shared/misc/help.component.html
index f2b6eca33..1c3863e52 100644
--- a/client/src/app/shared/misc/help.component.html
+++ b/client/src/app/shared/misc/help.component.html
@@ -13,10 +13,14 @@
 </ng-template>
 
 <span
+  role="button"
   class="help-tooltip-button"
   title="Get help"
   i18n-title
+  [attr.aria-pressed]="isPopoverOpened"
   [popover]="tooltipTemplate"
   [placement]="tooltipPlacement"
   [outsideClick]="true"
+  (onHidden)="onPopoverHidden()"
+  (onShown)="onPopoverShown()"
 ></span>
diff --git a/client/src/app/shared/misc/help.component.ts b/client/src/app/shared/misc/help.component.ts
index e7af61b4a..ba0452e77 100644
--- a/client/src/app/shared/misc/help.component.ts
+++ b/client/src/app/shared/misc/help.component.ts
@@ -15,6 +15,7 @@ export class HelpComponent implements OnInit, OnChanges {
   @Input() helpType: 'custom' | 'markdownText' | 'markdownEnhanced' = 'custom'
   @Input() tooltipPlacement = 'right'
 
+  isPopoverOpened = false
   mainHtml = ''
 
   constructor (private i18n: I18n) { }
@@ -27,6 +28,14 @@ export class HelpComponent implements OnInit, OnChanges {
     this.init()
   }
 
+  onPopoverHidden () {
+    this.isPopoverOpened = false
+  }
+
+  onPopoverShown () {
+    this.isPopoverOpened = true
+  }
+
   private init () {
     if (this.helpType === 'custom') {
       this.mainHtml = this.customHtml