Improve accessibility of sidebar toggle on mobile element index pages, darken sidebar headings

packages/craftcms-sass/_mixins.scss

@@ -633,6 +633,17 @@ $radioSize: 16px;
   box-shadow: var(--focus-ring);
 }
 
+@mixin visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
 @mixin readable {
   font-size: 16px;
   line-height: 22px;

src/templates/_layouts/cp.twig

@@ -220,7 +220,9 @@
                         {# sidebar #}
                         {% if sidebar %}
                             <div id="sidebar-toggle-container">
-                                <button type="button" id="sidebar-toggle" class="btn menubtn"><span id="selected-sidebar-item-label"></span></button>
+                                <button type="button" id="sidebar-toggle" class="btn menubtn" aria-controls="sidebar-container" aria-expanded="false">
+                                    {{ 'Show sidebar'|t('app') }}
+                                </button>
                             </div>
                             <div id="sidebar-container">
                                 <div id="sidebar" class="sidebar">
@@ -231,6 +233,9 @@
 
                         {# content-container #}
                         <div id="content-container">
+                            {% if sidebar %}
+                                <h2 id="content-heading"></h2>
+                            {% endif %}
                             {% block main %}
                                 <div id="content" class="content-pane">
                                     {% if contentNotice or tabs %}

src/web/assets/cp/src/css/_cp.scss

@@ -992,6 +992,14 @@ li.breadcrumb-toggle-wrapper {
   }
 }
 
+#content-heading {
+  margin-top: var(--xl) !important;
+
+  @media only screen and (min-width: $minHorizontalUiWidth) {
+    @include visually-hidden;
+  }
+}
+
 .content-pane {
   @include pane;
   border-radius: var(--large-border-radius);
@@ -1174,12 +1182,20 @@ li.breadcrumb-toggle-wrapper {
   }
 
   #sidebar-toggle {
+    &:after {
+      top: 0;
+      transform: rotate(-45deg);
+
+      body.rtl & {
+        transform: rotate(135deg);
+      }
+    }
+
     body.showing-sidebar & {
       background-color: darken($grey200, 10%) !important;
 
       &:after {
-        transform: rotate(225deg);
-        top: 1px;
+        transform: rotate(45deg);
       }
     }
   }
@@ -1302,7 +1318,7 @@ li.breadcrumb-toggle-wrapper {
       padding: 0 5px;
       margin: 0 -5px;
       text-transform: uppercase;
-      color: var(--light-text-color);
+      color: var(--medium-text-color);
       font-size: 11px;
       font-weight: bold;
     }

src/web/assets/cp/src/css/_main.scss

@@ -951,14 +951,7 @@ td.right {
 
 // Visually hide without hiding from screen readers
 .visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
+  @include visually-hidden;
 }
 
 .invisible {

src/web/assets/cp/src/js/BaseElementIndex.js

@@ -1138,7 +1138,7 @@ Craft.BaseElementIndex = Garnish.Base.extend(
       this.setInstanceState('selectedSource', this.sourceKey);
       this.sourceSelect.selectItem($source);
 
-      Craft.cp.updateSidebarMenuLabel();
+      Craft.cp.updateContentHeading();
 
       if (this.searching) {
         // Clear the search value without causing it to update elements

src/web/assets/cp/src/js/CP.js

@@ -88,7 +88,7 @@ Craft.CP = Garnish.Base.extend(
 
       this.isMobile = Garnish.isMobileBrowser();
 
-      this.updateSidebarMenuLabel();
+      this.updateContentHeading();
 
       // Swap any instruction text with info icons
       let $allInstructions = this.$details.find(
@@ -456,12 +456,10 @@ Craft.CP = Garnish.Base.extend(
       Craft.submitForm(this.$primaryForm, options);
     },
 
-    updateSidebarMenuLabel: function () {
-      var $item = this.$sidebar.find('a.sel:first');
-      var $label = $item.children('.label');
-      $('#selected-sidebar-item-label').text(
-        $label.length ? $label.text() : $item.text()
-      );
+    updateContentHeading: function () {
+      const $item = this.$sidebar.find('a.sel:first');
+      const $label = $item.children('.label');
+      $('#content-heading').text($label.length ? $label.text() : $item.text());
       Garnish.$bod.removeClass('showing-sidebar');
     },
 
@@ -524,7 +522,10 @@ Craft.CP = Garnish.Base.extend(
       );
     },
 
-    toggleSidebar: function () {
+    toggleSidebar: function ({target}) {
+      const expanded = target.getAttribute('aria-expanded') === 'true';
+      const newState = expanded ? 'false' : 'true';
+      target.setAttribute('aria-expanded', newState);
       Garnish.$bod.toggleClass('showing-sidebar');
     },