Prevent screen reader from reading icon glyph.

omeka · Jan 8, 2025 · e71adb1 · e71adb1
1 parent d536107
commit e71adb1
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 15 deletions.
diff --git a/common/header.php b/common/header.php
@@ -58,7 +58,7 @@
                 <?php else: ?>
                 <?php echo search_form(array('form_attributes' => array('role' => 'search', 'class' => 'closed'))); ?>
                 <?php endif; ?>
-                <button type="button" class="search-toggle" aria-expanded="false" aria-controls="advanced-form" title="<?php echo __('Toggle search'); ?>"></button>
+                <button type="button" class="search-toggle" aria-expanded="false" aria-controls="advanced-form" title="<?php echo __('Toggle search'); ?>"><span class="search-icon" role="presentation"></span></button>
             </div>
 
 

diff --git a/css/sass/_screen.scss b/css/sass/_screen.scss
@@ -337,6 +337,10 @@ header nav a {
     top: (-2 * $base-line-height);
     right: $base-line-height;
     z-index: 100;
+
+    #search-form + .search-toggle {
+        position: static;
+    }
 }
 
 #search-container input[type="text"],
@@ -354,8 +358,7 @@ header nav a {
 }
 
 #search-form.closed {
-    width: 1.5 * $base-line-height;
-    height: 1.75 * $base-line-height;
+    display: none;
 }
 
 #search-form.open {
@@ -376,13 +379,14 @@ header nav a {
     border-bottom: 0;
     color: $dark-gray;
     border: 1px solid $gray;
+    background-color: transparent;
 }
 
 #search-form.closed + .search-toggle {
     right: 0;
     border-top: 0;
 
-    &:after {
+    .search-icon:after {
         content: "\f002";
         font-family: "Font Awesome 5 Free";
         font-weight: 900;
@@ -393,7 +397,7 @@ header nav a {
     top: 0;
     right: 0;
 
-    &:after {
+    .search-icon:after {
         content: "\f00d";
         font-family: "Font Awesome 5 Free";
         font-weight: 900;
@@ -412,17 +416,18 @@ header nav a {
     text-indent: -9999px;
     position: relative;
 
-    &:after {
+    & + .search-icon:after {
         content: "\f002";
         font-family: "Font Awesome 5 Free";
         font-weight: 900;
         position: absolute;
-        top: (.25 * $base-line-height);
-        right: 0;
+        top: (.5 * $base-line-height);
+        right: .5 * $base-line-height;
         text-indent: 0;
         width: 1.5 * $base-line-height;
         text-align: center;
         cursor: pointer;
+        color: #676767;
     }
 }
 

diff --git a/css/style.css b/css/style.css
@@ -734,6 +734,9 @@ nav ul {
     right: 24px;
     z-index: 100;
   }
+  #search-container #search-form + .search-toggle {
+    position: static;
+  }
 
   #search-container input[type=text],
 #search-container button {
@@ -750,8 +753,7 @@ nav ul {
   }
 
   #search-form.closed {
-    width: 36px;
-    height: 42px;
+    display: none;
   }
 
   #search-form.open {
@@ -772,13 +774,14 @@ nav ul {
     border-bottom: 0;
     color: #676767;
     border: 1px solid #dedede;
+    background-color: transparent;
   }
 
   #search-form.closed + .search-toggle {
     right: 0;
     border-top: 0;
   }
-  #search-form.closed + .search-toggle:after {
+  #search-form.closed + .search-toggle .search-icon:after {
     content: "\f002";
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
@@ -788,7 +791,7 @@ nav ul {
     top: 0;
     right: 0;
   }
-  #search-form.open + .search-toggle:after {
+  #search-form.open + .search-toggle .search-icon:after {
     content: "\f00d";
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
@@ -806,17 +809,18 @@ nav ul {
     text-indent: -9999px;
     position: relative;
   }
-  #search-form button:after {
+  #search-form button + .search-icon:after {
     content: "\f002";
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     position: absolute;
-    top: 6px;
-    right: 0;
+    top: 12px;
+    right: 12px;
     text-indent: 0;
     width: 36px;
     text-align: center;
     cursor: pointer;
+    color: #676767;
   }
 
   #query:focus {

diff --git a/search/search-form.php b/search/search-form.php
@@ -25,4 +25,5 @@
         <?php endforeach; ?>
     <?php endif; ?>
     <?php echo $this->formButton('submit_search', $options['submit_value'], array('type' => 'submit')); ?>
+    <span class="search-icon" role="presentation"></span>
 </form>