From a0c8f058265351e73b0404a03bec48f59e2d9817 Mon Sep 17 00:00:00 2001
From: Andreas Steinmann <asteinmann@intershop.com>
Date: Tue, 20 Feb 2024 15:52:14 +0100
Subject: [PATCH] fix: fix open styling issues, set correct :focus styling
 (only) when using the keyboard

---
 .../rating-stars-field.component.html         |  2 +-
 src/styles/components/header/back-to-top.scss |  2 +-
 src/styles/global/buttons.scss                | 22 ++++--------
 src/styles/pages/category/filter-panel.scss   | 36 +++++++++++--------
 4 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/src/app/extensions/rating/formly/rating-stars-field/rating-stars-field.component.html b/src/app/extensions/rating/formly/rating-stars-field/rating-stars-field.component.html
index 88de7abb21..8a45120d08 100644
--- a/src/app/extensions/rating/formly/rating-stars-field/rating-stars-field.component.html
+++ b/src/app/extensions/rating/formly/rating-stars-field/rating-stars-field.component.html
@@ -2,7 +2,7 @@
   <ng-container *ngFor="let fill of stars; index as i">
     <button
       type="button"
-      class="text-muted mt-4 btn btn-link btn-link-action"
+      class="text-muted btn btn-link btn-link-action"
       [title]="'product.review.rating.tooltip' | translate : { '0': i + 1 }"
       (click)="setStars(i + 1)"
     >
diff --git a/src/styles/components/header/back-to-top.scss b/src/styles/components/header/back-to-top.scss
index 9b43eab6b4..09b0c01e3f 100644
--- a/src/styles/components/header/back-to-top.scss
+++ b/src/styles/components/header/back-to-top.scss
@@ -21,6 +21,6 @@ html:not(.cypress-tests) {
   animation: back-to-top-btn-animation 0.15s ease-in-out;
 
   @media (max-width: $screen-xs-max) {
-    width: auto;
+    width: auto !important;
   }
 }
diff --git a/src/styles/global/buttons.scss b/src/styles/global/buttons.scss
index 8a88dfd961..98794a519b 100644
--- a/src/styles/global/buttons.scss
+++ b/src/styles/global/buttons.scss
@@ -116,35 +116,25 @@ button.btn-link {
   &.btn-tool {
     padding: 0;
     background-color: transparent;
-    border: 1px solid transparent;
+    border: none;
   }
 
   &.btn-link-action {
     padding: 0;
+    margin-bottom: 1px; // fix inline display
     font-size: unset;
   }
 
   &:hover,
   &:focus {
     text-decoration: none;
-  }
-}
 
-/* .btn-link-action {
-  padding: 0;
-  margin-right: 0 !important;
-  margin-bottom: 0 !important;
-  font-size: unset;
-  border: none;
-}
-
-@media (max-width: $screen-xs-max) {
-  .btn-link-action {
-    display: unset !important;
-    width: unset !important;
+    &:not(:focus-visible) {
+      // remove shadow for non-keyboard :focus (shadow is kept if user uses the keyboard)
+      box-shadow: none;
+    }
   }
 }
-*/
 
 // multiple buttons margin handling (use "button-group" in case the buttons are not direct siblings)
 .button-group .btn,
diff --git a/src/styles/pages/category/filter-panel.scss b/src/styles/pages/category/filter-panel.scss
index c8f4c1ef14..e6f7edf66d 100644
--- a/src/styles/pages/category/filter-panel.scss
+++ b/src/styles/pages/category/filter-panel.scss
@@ -94,6 +94,11 @@
         }
       }
 
+      .btn-link-action {
+        width: 100%;
+        text-align: left;
+      }
+
       span {
         &.icon-notselected {
           display: inline-block;
@@ -323,22 +328,25 @@ input {
 }
 
 @media (max-width: $screen-xs-max) {
-  .mobile-filter-toggle {
-    display: block;
-    padding: $space-default 0;
-    margin-bottom: $space-default;
-    font-family: $font-family-condensedregular;
-    font-size: 15px;
-    font-weight: 700;
-    text-align: center;
-    text-transform: uppercase;
+  button.btn-link-action {
+    &.mobile-filter-toggle {
+      display: block;
+      width: 100%;
+      padding: $space-default 0;
+      margin-bottom: $space-default;
+      font-family: $font-family-condensedregular;
+      font-size: 15px;
+      font-weight: 700;
+      text-align: center;
+      text-transform: uppercase;
 
-    &:hover {
-      text-decoration: none;
-    }
+      &:hover {
+        text-decoration: none;
+      }
 
-    .ng-fa-icon {
-      display: block;
+      .ng-fa-icon {
+        display: block;
+      }
     }
   }
 }