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/source/css/_profile-header.css | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

(limited to 'web/source/css/_profile-header.css')

diff --git a/web/source/css/_profile-header.css b/web/source/css/_profile-header.css
index b4ebadf8d..cba67ffa1 100644
--- a/web/source/css/_profile-header.css
+++ b/web/source/css/_profile-header.css
@@ -81,6 +81,25 @@
 			height: $avatar-size;
 			width: $avatar-size;
 
+			/*
+				Link to open media in slide
+				should fill entire media wrapper.
+			*/
+			a.photoswipe-slide {
+				display: inline-block;
+				height: 100%;
+				width: 100%;
+	
+				/*
+					Offset to avoid clashing with
+					thick border around avatars.
+				*/
+				&:focus-visible {
+					outline: $button-focus-outline;
+					outline-offset: 0.25rem;
+				}
+			}
+
 			.avatar {
 				/*
 					Fit 100% of the wrapper.
-- 
cgit v1.2.3