Revise header icon button a11y, hide mmenu. (#43)

* Put icons into spans with aria-hidden="true" so screen readers won't read them. * Provide tooltips via title attribute. * Use sr-only spans for text labels. * Hide mmenu when not open so it doesn't peek behind main content.
omeka-s-themes · Jan 10, 2025 · 1f4009c · 1f4009c
1 parent c91d9c1
commit 1f4009c
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 11 deletions.
diff --git a/asset/css/style.css b/asset/css/style.css
diff --git a/asset/sass/_screen.scss b/asset/sass/_screen.scss
@@ -378,16 +378,8 @@ header nav a:visited {
     text-indent: -9999px;
     position: relative;
 
-    &:before {
+    .icon:before {
         content: "\f002";
-        font-family: "Font Awesome 5 Free";
-        text-indent: 0;
-        position: absolute;
-        top: 0;
-        right: 0;
-        left: 0;
-        bottom: 0;
-        line-height: 1.5 * $base-line-height;
     }
 }
 
@@ -399,13 +391,37 @@ header nav a:visited {
     height: 1.5 * $spacing-l;
     text-align: center;
     font-size: 18px;
+    position: relative;
+
+    .icon:before {
+        font-family: "Font Awesome 5 Free";
+        text-indent: 0;
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        bottom: 0;
+        line-height: 1.5 * $base-line-height;
+    }
+}
+
+#menu-button .icon:before {
+    content: "\f0c9";
 }
 
 #search-form button {
     border-width: 0px 0px 0px 1px;
     border-radius: 0;
 }
 
+#menu {
+    display: none;
+}
+
+.mm-wrapper--opened #menu {
+    display: block;
+}
+
 .banner {
     display: flex;
     justify-content: center;

diff --git a/view/common/search-form.phtml b/view/common/search-form.phtml
@@ -0,0 +1,20 @@
+<?php
+$translate = $this->plugin('translate');
+$searchType = $this->siteSetting('search_type', 'sitewide');
+switch ($searchType) {
+    case 'cross-site':
+        $searchAction = $this->url('site/cross-site-search', ['action' => 'results'], true);
+        break;
+    case 'sitewide':
+    default:
+        $searchAction = $this->url('site/resource', ['controller' => 'index', 'action' => 'search'], true);
+}
+$searchValue = $this->escapeHtml($this->params()->fromQuery('fulltext_search', ''));
+?>
+
+<form action="<?php echo $this->escapeHtml($searchAction); ?>" id="search-form">
+    <input type="text" name="fulltext_search" value="<?php echo $searchValue; ?>"
+        placeholder="<?php echo $translate('Search'); ?>"
+        aria-label="<?php echo $translate('Search'); ?>">
+    <button type="submit" title="<?php echo $translate('Search'); ?>"><span class="sr-only"><?php echo $translate('Search'); ?></span><span class="icon" aria-hidden="true"></span></button>
+</form>
diff --git a/view/layout/layout.phtml b/view/layout/layout.phtml
@@ -59,7 +59,7 @@ $this->htmlElement('body')->appendAttribute('class', 'body-truncate-' . $bodyTru
                     </h1>
                     <?php echo $this->partial('common/search-form'); ?>
                     <div id="oc-trigger">
-                        <a href="#menu" role="button" id="menu-button" class="o-icon-menu button" data-effect="oc-push" aria-label="<?php echo $this->translate('Menu'); ?>"></a>
+                        <a href="#menu" role="button" id="menu-button" class="button" data-effect="oc-push" title="<?php echo $this->translate('Menu'); ?>"><span class="sr-only"><?php echo $this->translate('Menu'); ?></span><span class="icon" aria-hidden="true"></span></a>
                     </div>
                     <nav id="menu" class="oc-menu oc-push">
                         <?php echo $site->publicNav()->menu()->renderMenu(); ?>