From 0732bd1de3a9dbb732d54297d271239cd55cec8d Mon Sep 17 00:00:00 2001
From: John Livingston <git@john-livingston.fr>
Date: Tue, 20 Aug 2024 17:52:53 +0200
Subject: [PATCH] Improved accessibility (#118):

* top chat button accessibility improved (role, aria-hidden for icons,
  tabindex for keyboard navigation, ...)
---
 client/common/videowatch/button.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/client/common/videowatch/button.ts b/client/common/videowatch/button.ts
index 045d0275..22acf797 100644
--- a/client/common/videowatch/button.ts
+++ b/client/common/videowatch/button.ts
@@ -42,6 +42,23 @@ function displayButton (dbo: displayButtonOptions): void {
   if ('href' in dbo) {
     button.href = dbo.href
   }
+
+  if (!button.href || button.href === '#') {
+    // No href => it is not a link.
+    button.role = 'button'
+    button.tabIndex = 0
+
+    // We must also ensure that the enter key is triggering the onclick
+    if (button.onclick) {
+      button.onkeydown = ev => {
+        if (ev.key === 'Enter') {
+          ev.preventDefault()
+          button.click()
+        }
+      }
+    }
+  }
+
   if (('targetBlank' in dbo) && dbo.targetBlank) {
     button.target = '_blank'
   }
@@ -52,6 +69,10 @@ function displayButton (dbo: displayButtonOptions): void {
       tmp.innerHTML = svg.trim()
       const svgDom = tmp.firstChild
       if (svgDom) {
+        if ('ariaHidden' in (svgDom as HTMLElement)) {
+          // Icon must be hidden for screen readers.
+          (svgDom as HTMLElement).ariaHidden = 'true'
+        }
         button.prepend(svgDom)
       }
     } catch (err) {