From 19cfa8d126a2ff54298150529e58e5e4f5495f09 Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Wed, 9 Apr 2025 14:14:20 +0200
Subject: [bugfix] Fix a couple accessibility issues with `:focus` elements
 (#3979)

* [bugfix/frontend] Fix accessibility/focus issues in settings + web ui

* fix little error

* tweaks
---
 web/template/login_button.tmpl      | 2 +-
 web/template/status.tmpl            | 8 +++++++-
 web/template/status_attachment.tmpl | 8 +++++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

(limited to 'web/template')

diff --git a/web/template/login_button.tmpl b/web/template/login_button.tmpl
index 5c961545b..8ec73ed81 100644
--- a/web/template/login_button.tmpl
+++ b/web/template/login_button.tmpl
@@ -18,5 +18,5 @@
 */ -}}
 
 {{- if .showLoginButton }}
-<div class="login"><a href="/login" class="button with-icon">Log in</a></div>
+<div class="login"><a tabindex="0" href="/login" class="button with-icon">Log in</a></div>
 {{- end }}
\ No newline at end of file
diff --git a/web/template/status.tmpl b/web/template/status.tmpl
index 872b784ed..4263e6020 100644
--- a/web/template/status.tmpl
+++ b/web/template/status.tmpl
@@ -51,7 +51,13 @@ media photoswipe-gallery {{ (len .) | oddOrEven }} {{ if eq (len .) 1 }}single{{
             <div class="spoiler-content p-summary" lang="{{- .LanguageTag.TagStr -}}">
                 {{ noescape .SpoilerContent | emojify .Emojis }}
             </div>
-            <span class="button" role="button" tabindex="0">Toggle visibility</span>
+            {{- with . }}
+            {{- /*
+                IMPORTANT: Button semantics and aria labels in "button" class below are added in
+                frontend/index.js, as the button doesn't function as a button without javascript.
+            */ -}}
+            {{- end }}
+            <span class="button">Toggle visibility</span>
         </summary>
         <div class="text">
             {{- with . }}
diff --git a/web/template/status_attachment.tmpl b/web/template/status_attachment.tmpl
index 4dda7298f..a60ef4137 100644
--- a/web/template/status_attachment.tmpl
+++ b/web/template/status_attachment.tmpl
@@ -54,7 +54,13 @@
             {{- end }}
         >
             <div class="show sensitive button" aria-hidden="true">Show sensitive</div>
-            <span class="eye button" role="button" tabindex="0" aria-label="Toggle media visibility">
+            {{- with . }}
+            {{- /*
+                IMPORTANT: Button semantics and aria labels in "eye button" class below are added in
+                frontend/index.js, as the button doesn't function as a button without javascript.
+            */ -}}
+            {{- end }}
+            <span class="eye button">
                 <i class="hide fa fa-fw fa-eye-slash" aria-hidden="true"></i>
                 <i class="show fa fa-fw fa-eye" aria-hidden="true"></i>
             </span>
-- 
cgit v1.2.3