[bugfix] Fix a couple accessibility issues with :focus elements (#3979)

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

* fix little error

* tweaks
This commit is contained in:
tobi
2025-04-09 14:14:20 +02:00
committed by GitHub
parent 365b575341
commit 19cfa8d126
24 changed files with 405 additions and 152 deletions

View File

@@ -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 }}

View File

@@ -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 . }}

View File

@@ -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>