Resolve "Sidebar-Suchwidget verwendet einen Link für das Zurücksetzen-Icon statt eines Buttons"

Closes #1719

Merge request studip/studip!1122

resources/assets/stylesheets/scss/sidebar.scss

@@ -324,7 +324,7 @@ select.sidebar-selectlist {
                     width: 100%;
                 }
 
-                button {
+                .submit-search {
                     background-color: $content-color-20;
                     border: 1px solid $base-color-60;
                     border-left-color: $light-gray-color-40;
@@ -336,6 +336,7 @@ select.sidebar-selectlist {
                 }
 
                 .reset-search {
+                    background-color: transparent;
                     border: 1px solid $base-color-60;
                     border-left: 0;
                     border-right: 0;

resources/vue/components/courseware/CoursewareSearchWidget.vue

@@ -8,10 +8,10 @@
                       v-model="searchTerm"
                       :aria-label="$gettext('Geben Sie einen Suchbegriff mit mindestens 3 Zeichen ein.')"
                   />
-                  <a v-if="searched" @click.prevent="setShowSearchResults(false)"
-                     class="reset-search">
+                  <button v-if="searched" @click.prevent="setShowSearchResults(false)"
+                          class="reset-search" :title="$gettext('Suche zurücksetzen')">
                       <studip-icon shape="decline" size="20"></studip-icon>
-                  </a>
+                  </button>
                   <button
                       type="submit"
                       :value="$gettext('Suchen')"

templates/sidebar/search-widget.php

@@ -19,7 +19,7 @@
                        <?= arrayToHtmlAttributes($needle['attributes']) ?>>
                 <? endif; ?>
                 <? if ($reset_link): ?>
-                    <a class="reset-search" href="<?= $reset_link ?>" tabindex="0"
+                    <a class="reset-search" href="<?= $reset_link ?>" tabindex="0" role="button"
                        title="<?= _('Suche zurücksetzen') ?>">
                         <?= Icon::create('decline')->asImg(20) ?>
                     </a>