Fix unnecessary highlighting of selected element

Use focus-visible to only show focus ring on keyboard navigation

Fix #34589

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

3 files changed, 5 insertions, 5 deletions

diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index a9d54a5638e..431e3bf29b5 100644
--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@@ -609,8 +609,8 @@ table td.selection {
 .select-all + label {
   padding: 16px;
 }
-.files-fileList tr td.selection > .selectCheckBox:focus + label,
-.select-all:focus + label {
+.files-fileList tr td.selection > .selectCheckBox:focus-visible + label,
+.select-all:focus-visible + label {
   background-color: var(--color-background-hover);
   border-radius: var(--border-radius-pill);
   outline: none !important;
diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index e02c1bc71c3..1950d740bd7 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -504,7 +504,7 @@ table td.selection {
 		padding: 16px;
 	}
 
-	&:focus + label {
+	&:focus-visible + label {
 		background-color: var(--color-background-hover);
 		border-radius: var(--border-radius-pill);
 		outline: none !important;
diff --git a/apps/files/css/merged.css b/apps/files/css/merged.css
index e14edcdf04b..e4b2c51d7f3 100644
--- a/apps/files/css/merged.css
+++ b/apps/files/css/merged.css
@@ -609,8 +609,8 @@ table td.selection {
 .select-all + label {
   padding: 16px;
 }
-.files-fileList tr td.selection > .selectCheckBox:focus + label,
-.select-all:focus + label {
+.files-fileList tr td.selection > .selectCheckBox:focus-visible + label,
+.select-all:focus-visible + label {
   background-color: var(--color-background-hover);
   border-radius: var(--border-radius-pill);
   outline: none !important;