From 2d518b289589715d570c208aa04754fef96d5fbf Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Thu, 6 Oct 2022 14:35:06 +0200
Subject: [PATCH] UX: ensures we don't focus invisible button in sidebar
 (#18502)

Prior to this fix pressing tab multiple times in the sidebar, you would end up focusing invisible "sidebar-section-header-button". This change ensures the button will become visible when tabbing even if not hovering this section.

The `background: transparent change` is to avoid a flashing background due to different transition timing on the collapsable button.
---
 app/assets/stylesheets/common/base/sidebar-section.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app/assets/stylesheets/common/base/sidebar-section.scss b/app/assets/stylesheets/common/base/sidebar-section.scss
index a583a9a7ae8..d70e794de98 100644
--- a/app/assets/stylesheets/common/base/sidebar-section.scss
+++ b/app/assets/stylesheets/common/base/sidebar-section.scss
@@ -32,6 +32,10 @@
       .discourse-no-touch & {
         transition: all 0.25s;
         opacity: 0;
+
+        &:focus {
+          opacity: 1;
+        }
       }
 
       background: transparent;
@@ -74,6 +78,10 @@
 
     &.sidebar-section-header-collapsable {
       justify-content: flex-start;
+
+      &:focus {
+        background: transparent;
+      }
     }
   }