Improve implementations of visually-hidden text in explorer and main menu toggle (#5793). Fix #5269

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

CHANGELOG.txt

@@ -20,6 +20,7 @@ Changelog
  * Add a 'remember me' checkbox to the admin sign in form, if unticked (default) the auth session will expire if the browser is closed (Michael Karamuth, Jake Howard)
  * When returning to image or document listing views after editing, filters (collection or tag) are now remembered (Tidjani Dia)
  * Improve the visibility of field error messages, in Windows high-contrast mode and out (Jason Attwood)
+ * Improve implementations of visually-hidden text in explorer and main menu toggle (Martin Coote)
  * Fix: Accessibility fixes for Windows high contrast mode; Dashboard icons colour and contrast (Sakshi Uppoor)
  * Fix: Rename additional 'spin' CSS animations to avoid clashes with other libraries (Kevin Gutiérrez)
  * Fix: `default_app_config` deprecations for Django >= 3.2 (Tibor Leupold)

client/scss/components/_button.scss

@@ -206,6 +206,12 @@
         -webkit-font-smoothing: auto;
         // stylelint-disable-next-line property-no-vendor-prefix
         -moz-appearance: none;
+
+        &:hover,
+        &:focus,
+        &:active {
+            background-color: transparent;
+        }
     }
 
     &:hover {

client/scss/components/_main-nav.scss

@@ -328,7 +328,7 @@ body.explorer-open {
         }
     }
 
-    .nav-toggle {
+    .nav-toggle.unbutton {
         display: none;
     }
 

docs/releases/2.16.md

@@ -27,6 +27,7 @@
  * Add a 'remember me' checkbox to the admin sign in form, if unticked (default) the auth session will expire if the browser is closed (Michael Karamuth, Jake Howard)
  * When returning to image or document listing views after editing, filters (collection or tag) are now remembered (Tidjani Dia)
  * Improve the visibility of field error messages, in Windows high-contrast mode and out (Jason Attwood)
+ * Improve implementations of visually-hidden text in explorer and main menu toggle (Martin Coote)
 
 ### Bug fixes
 

wagtail/admin/templates/wagtailadmin/base.html

@@ -54,7 +54,7 @@
             </div>
 
             {% if not slim_sidebar_enabled %}
-            <button type="button" id="nav-toggle" class="nav-toggle icon text-replace">{% trans "Menu" %}</button>
+            <button type="button" id="nav-toggle" class="nav-toggle icon button unbutton" ><span class="visuallyhidden">{% trans "Toggle sidebar" %}</span></button>
             {% endif %}
             {% block content %}{% endblock %}
         </div>

wagtail/admin/templates/wagtailadmin/pages/listing/_navigation_explore.html

@@ -6,8 +6,18 @@ Navigation controls for the page listing in 'explore' mode
 
 <td class="{% if page.is_navigable %}children{% else %}no-children{% endif %}">
     {% if page.is_navigable %}
-        <a href="{% url 'wagtailadmin_explore' page.id %}" class="icon text-replace icon-arrow-right" title="{% blocktrans with title=page.get_admin_display_title %}Explore child pages of '{{ title }}'{% endblocktrans %}">{% trans "Explore" %}</a>
+        <a
+            href="{% url 'wagtailadmin_explore' page.id %}"
+            class="icon icon-arrow-right text-replace"
+            title="{% blocktrans with title=page.get_admin_display_title %}Explore child pages of '{{ title }}'{% endblocktrans %}"
+            aria-label="{% blocktrans with title=page.get_admin_display_title %}Explore child pages of '{{ title }}'{% endblocktrans %}"
+        ></a>
     {% elif page_perms.can_add_subpage %}
-        <a href="{% url 'wagtailadmin_pages:add_subpage' page.id %}" class="icon text-replace icon-plus-inverse" title="{% blocktrans with title=page.get_admin_display_title %}Add a child page to '{{ title }}'{% endblocktrans %}">{% trans 'Add child page' %}</a>
+        <a
+            href="{% url 'wagtailadmin_pages:add_subpage' page.id %}"
+            class="icon icon-plus-inverse text-replace"
+            title="{% blocktrans with title=page.get_admin_display_title %}Add a child page to '{{ title }}'{% endblocktrans %}"
+            aria-label="{% blocktrans with title=page.get_admin_display_title %}Add a child page to '{{ title }}'{% endblocktrans %}"
+        ></a>
     {% endif %}
 </td>