add alt attributes, fixes #821

Closes #821

Merge request studip/studip!1394

resources/assets/stylesheets/scss/globalsearch.scss

@@ -20,12 +20,9 @@
         @include square(16px);
         margin-left: -22px;
         vertical-align: middle;
-
-        opacity: 0;
-        transition: opacity $transition-duration;
     }
-    &.has-value #globalsearch-clear {
-        opacity: 1;
+    &:not(.has-value) #globalsearch-clear {
+        display: none;
     }
 
     // The actual search input
@@ -284,10 +281,6 @@ html.responsive-display {
             top: calc($bar-bottom-container-height + $padding);
             width: calc(100vw - (2 * $padding));
         }
-
-        #globalsearch-clear {
-            opacity: 1;
-        }
     }
 }
 html:not(.size-large) {

templates/globalsearch/searchbar.php

 <div id="globalsearch-searchbar" role="search" aria-label="<?= _('Globale Suche') ?>">
     <input class="hidden-small-down" type="text" name="globalsearchterm" id="globalsearch-input"
            placeholder="<?= _('Was suchen Sie?') ?>" role="searchbox">
-    <?= Icon::create('decline', Icon::ROLE_INACTIVE)->asImg([
-        'id' => 'globalsearch-clear',
-        'class' => 'hidden-small-down'
+    <?= Icon::create('decline', Icon::ROLE_INACTIVE)->asInput([
+        'id'    => 'globalsearch-clear',
+        'class' => 'hidden-small-down',
+        'alt'   => _('Suche zurücksetzen'),
     ]) ?>
     <?= Icon::create('search', Icon::ROLE_INFO_ALT)->asInput([
-        'id' => 'globalsearch-icon',
-        'aria-label' => _('Suche starten')
+        'id'  => 'globalsearch-icon',
+        'alt' => _('Suche starten')
     ]) ?>
     <div id="globalsearch-list">
         <a href="#" id="globalsearch-togglehints" data-toggle-text="<?= _('Tipps ausblenden') ?>">