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

CHANGELOG-WIP.md

@@ -7,6 +7,7 @@
 
 ### Changed
 - Improved pagination UI accessibility. ([#11126](https://github.com/craftcms/cms/pull/11126))
+- Improved element index accessibility. ([#11169](https://github.com/craftcms/cms/pull/11169))
 - Live Preview now always shows a “Refresh” button, regardless of whether the preview target has auto-refresh enabled. ([#11160](https://github.com/craftcms/cms/discussions/11160)) 
 - Entry Type condition rules now allow multiple selections. ([#11124](https://github.com/craftcms/cms/pull/11124))
 - Element index filters now only show condition rules for the custom fields that are used by the field layouts in the selected source, if a native source is selected. ([#11187](https://github.com/craftcms/cms/discussions/11187))

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

@@ -24,6 +24,7 @@ Craft.CP = Garnish.Base.extend(
     $mainContent: null,
     $details: null,
     $sidebarContainer: null,
+    $sidebarToggle: null,
     $sidebar: null,
     $contentContainer: null,
     $edition: null,
@@ -82,13 +83,14 @@ Craft.CP = Garnish.Base.extend(
       this.$mainContent = $('#main-content');
       this.$details = $('#details');
       this.$sidebarContainer = $('#sidebar-container');
+      this.$sidebarToggle = $('#sidebar-toggle');
       this.$sidebar = $('#sidebar');
       this.$contentContainer = $('#content-container');
       this.$collapsibleTables = $('table.collapsible');
 
       this.isMobile = Garnish.isMobileBrowser();
 
-      this.updateSidebarMenuLabel();
+      this.updateContentHeading();
 
       // Swap any instruction text with info icons
       let $allInstructions = this.$details.find(
@@ -152,7 +154,7 @@ Craft.CP = Garnish.Base.extend(
 
       // Toggles
       this.addListener(this.$navToggle, 'click', 'toggleNav');
-      this.addListener($('#sidebar-toggle'), 'click', 'toggleSidebar');
+      this.addListener(this.$sidebarToggle, 'click', 'toggleSidebar');
 
       // Does this page have a primary form?
       if (!this.$primaryForm.length) {
@@ -457,11 +459,13 @@ Craft.CP = Garnish.Base.extend(
     },
 
     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()
-      );
+      this.updateContentHeading();
+    },
+
+    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');
     },
 
@@ -525,6 +529,9 @@ Craft.CP = Garnish.Base.extend(
     },
 
     toggleSidebar: function () {
+      const expanded = this.$sidebarToggle.attr('aria-expanded') === 'true';
+      const newState = expanded ? 'false' : 'true';
+      this.$sidebarToggle.attr('aria-expanded', newState);
       Garnish.$bod.toggleClass('showing-sidebar');
     },