diff options
| author |  tobi <31960611+tsmethurst@users.noreply.github.com> | 2025-04-09 14:14:20 +0200 |
|---|---|---|
| committer |  GitHub <noreply@github.com> | 2025-04-09 14:14:20 +0200 |
| commit | 19cfa8d126a2ff54298150529e58e5e4f5495f09 (patch) | |
| tree | 3a569e6c456cc7ea13f16f04c5cd81301b71e5f2 /web/source/css/_media-wrapper.css | |
| parent | [feature] add TOTP two-factor authentication (2FA) (#3960) (diff) | |
| download | gotosocial-19cfa8d126a2ff54298150529e58e5e4f5495f09.tar.xz | |
[bugfix] Fix a couple accessibility issues with `:focus` elements (#3979)
* [bugfix/frontend] Fix accessibility/focus issues in settings + web ui
* fix little error
* tweaks
Diffstat (limited to 'web/source/css/_media-wrapper.css')
| -rw-r--r-- | web/source/css/_media-wrapper.css | 33 |
1 files changed, 33 insertions, 0 deletions
diff --git a/web/source/css/_media-wrapper.css b/web/source/css/_media-wrapper.css index a567cb0fd..55ad6eba0 100644 --- a/web/source/css/_media-wrapper.css +++ b/web/source/css/_media-wrapper.css @@ -74,6 +74,14 @@ div.blurhash-container > canvas { display: none; } + + /* + Hide focus outline on click + to avoid ugly artifacts. + */ + &:focus { + outline: none; + } } summary { @@ -109,6 +117,16 @@ .hide { display: none; } + + &:focus-visible { + /* + Can't rely on media having background with + decent contrast so inset and use button-fg + instead so focus is definitely visible. + */ + outline: 0.25rem dashed $button-fg; + outline-offset: -0.25rem; + } } .show.sensitive { @@ -126,6 +144,21 @@ } } + a.photoswipe-slide { + display: inline-block; + height: 100%; + width: 100%; + + /* + Inset outline to avoid outline + being hidden by overflow: hidden. + */ + &:focus-visible { + outline: $button-focus-outline; + outline-offset: -0.25rem; + } + } + video.plyr-video, .plyr { position: absolute; height: 100%; |