From edca5a87ff8f49df94f32ee5190148fae58d2e4c Mon Sep 17 00:00:00 2001
From: Philipp Ahrendt <philipp.ahrendt@cloudogu.com>
Date: Tue, 15 Apr 2025 11:52:29 +0200
Subject: [PATCH] Fix focus indicator for avatar file upload

---
 gradle/changelog/file-upload-focus.yaml       | 2 ++
 scm-ui/ui-syntaxhighlighting/static/large.css | 7 ++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 gradle/changelog/file-upload-focus.yaml

diff --git a/gradle/changelog/file-upload-focus.yaml b/gradle/changelog/file-upload-focus.yaml
new file mode 100644
index 0000000000..c0ee317c80
--- /dev/null
+++ b/gradle/changelog/file-upload-focus.yaml
@@ -0,0 +1,2 @@
+- type: fixed
+  description: File upload indicates focus visually
diff --git a/scm-ui/ui-syntaxhighlighting/static/large.css b/scm-ui/ui-syntaxhighlighting/static/large.css
index 7fa754711e..7216cf015e 100644
--- a/scm-ui/ui-syntaxhighlighting/static/large.css
+++ b/scm-ui/ui-syntaxhighlighting/static/large.css
@@ -2620,7 +2620,8 @@ a.box:active {
   cursor: pointer;
   justify-content: flex-start;
   overflow: hidden;
-  position: relative; }
+  position: relative;
+  border-radius: 4px; }
   .file-label:hover .file-cta {
     background-color: #eeeeee;
     color: #363636; }
@@ -2631,6 +2632,10 @@ a.box:active {
     color: #363636; }
   .file-label:active .file-name {
     border-color: #cfcfcf; }
+  .file-label:has(.file-input:focus-visible){
+    outline: #af3ee7 3px solid;
+    outline-offset: 1px;
+  }
 
 .file-input {
   height: 0.01em;