make icons as button keyboard accesssible again, fixes #6333

Closes #6333

Merge request studip/studip!4804

2 files changed, 3 insertions, 24 deletions

diff --git a/resources/assets/stylesheets/scss/buttons.scss b/resources/assets/stylesheets/scss/buttons.scss
index 352d9b3..7510390 100644
--- a/resources/assets/stylesheets/scss/buttons.scss
+++ b/resources/assets/stylesheets/scss/buttons.scss
@@ -153,18 +153,6 @@ button,
     @include button-base;
 }
 
-label {
-    &.undecorated.icon-button {
-        cursor: pointer;
-        .input-hidden {
-            display: none;
-        }
-        svg {
-            vertical-align: middle;
-        }
-    }
-}
-
 .btn-icon {
     all: unset;
     cursor: pointer;
diff --git a/resources/assets/stylesheets/scss/globalsearch.scss b/resources/assets/stylesheets/scss/globalsearch.scss
index 7671b3d..c9f6902 100644
--- a/resources/assets/stylesheets/scss/globalsearch.scss
+++ b/resources/assets/stylesheets/scss/globalsearch.scss
@@ -3,7 +3,6 @@
 }
 #globalsearch-searchbar {
     display: flex;
-    align-items: center;
     border: thin solid var(--color--header-inverted);
     border-radius: var(--border-radius-search);
     background-color: var(--color--brand-primary);
@@ -25,8 +24,9 @@
         display: none;
     }
 
-    .icon-button {
+    > button.as-link {
         margin-left: 4px;
+        margin-top: 1px; // The box and input are 22px, the icon 20px = 1px top margin
         color: var(--color--font-inverted);
     }
 
@@ -35,7 +35,6 @@
         border: none;
         outline: none;
         margin-right: 5px;
-        vertical-align: middle;
         color: var(--color--font-inverted);
         background-color: var(--color--brand-primary);
         min-width: 0;
@@ -45,14 +44,6 @@
         }
     }
 
-    input[type=image] {
-        cursor: pointer;
-        border: none;
-        background: none;
-        padding: 0;
-        margin: 0 5px;
-    }
-
     // Hint toggle text
     #globalsearch-togglehints {
         font-size: $font-size-small;
@@ -89,7 +80,7 @@
         color: var(--text-color);
         visibility: hidden;
         opacity: 0;
-        transition: opacity var(--transition-duration) ease; 
+        transition: opacity var(--transition-duration) ease;
         max-height: 90vh;
         overflow: hidden;
         padding: 10px 5px;