Changes to source navigation and element index UI, user-related document titles

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Release Notes for Craft CMS 5
 
+## Unreleased
+
+### Accessibility
+- On the mobile element index layout, the sidebar is kept open on source selection to prevent focus from being dropped (PT-1303)
+- User page document titles have been updated to describe the page purpose (PT-1701)
+
 ## 5.1.1 - 2024-05-02
 
 - Fixed a bug where disclosure menus weren’t releasing their `scroll` and `resize` event listeners on hide. ([#14911](https://github.com/craftcms/cms/pull/14911), [#14510](https://github.com/craftcms/cms/issues/14510))

src/controllers/EditUserTrait.php

@@ -120,11 +120,19 @@ protected function asEditUserScreen(User $user, string $screen): Response
             throw new ForbiddenHttpException('User not authorized to perform this action.');
         }
 
+        $pageName = $screens[$screen]["label"];
         $response = $this->asCpScreen();
         if ($user->getIsCurrent()) {
             $response->title(Craft::t('app', 'My Account'));
+            $response->docTitle($pageName);
         } else {
-            $response->title($user->getUiLabel());
+            $username = $user->getUiLabel();
+            $extendedTitle = Craft::t('app', 'User {page}', [
+                'page' => $pageName,
+            ]);
+            $docTitle = "$username - $extendedTitle";
+            $response->title($username);
+            $response->docTitle($docTitle);
         }
 
         $navItems = [];

src/templates/_layouts/cp.twig

@@ -216,7 +216,7 @@ history.replaceState(undefined, undefined, window.location.href.match(/^[^#]*/)[
                                         <div id="page-title" class="flex{% if toolbar %} has-toolbar{% endif %}">
                                             {% block pageTitle %}
                                                 {% if title is defined and title|length %}
-                                                    <h1 class="screen-title" title="{{ title }}">{{ title }}</h1>
+                                                    <h1 class="screen-title" title="{{ title }}">{{ title }}<span id="content-heading"></span></h1>
                                                 {% endif %}
                                             {% endblock %}
                                         </div>
@@ -262,7 +262,7 @@ history.replaceState(undefined, undefined, window.location.href.match(/^[^#]*/)[
                                         aria-controls="sidebar-container"
                                         aria-expanded="false"
                                     >
-                                      <span id="content-heading"></span>
+                                        {{ 'Show sidebar'|t('app') }}
                                     </button>
                                 </div>
                                 <div id="sidebar-container">

src/translations/en/app.php

@@ -1790,6 +1790,7 @@
     'User Group' => 'User Group',
     'User Groups' => 'User Groups',
     'User Permissions' => 'User Permissions',
+    'User {page}' => 'User {page}',
     'User Photo Location' => 'User Photo Location',
     'User Photo Volume' => 'User Photo Volume',
     'User Photos' => 'User Photos',

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

@@ -912,6 +912,21 @@ li.breadcrumb-toggle-wrapper {
   }
 }
 
+#content-heading {
+  font-size: 0.875rem;
+  font-weight: normal;
+
+  &:before {
+    content: '/';
+    display: inline-block;
+    margin-inline: 0.5rem;
+  }
+
+  @media only screen and (min-width: $minHorizontalUiWidth) {
+    display: none;
+  }
+}
+
 #toolbar {
   flex: 1;
   align-items: flex-start;
@@ -1232,8 +1247,7 @@ li.breadcrumb-toggle-wrapper {
 // Rearrange #main-content to flow vertically at < 999
 @media only screen and (max-width: $minHorizontalUiWidth - calc(1rem/16)) {
   #header {
-    display: flex;
-    flex-wrap: wrap;
+    display: block;
 
     .flex:not(#toolbar) {
       margin-top: 10px;
@@ -1242,19 +1256,12 @@ li.breadcrumb-toggle-wrapper {
 
   #toolbar {
     flex-wrap: wrap !important;
-    order: 3;
-    width: 100%;
-    flex: auto;
 
     & > * {
       margin-top: 10px !important;
     }
   }
 
-  #action-buttons {
-    order: 2;
-  }
-
   body.fixed-header #header .flex:first-child {
     margin-top: 0;
   }

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

@@ -514,6 +514,9 @@ Craft.BaseElementIndex = Garnish.Base.extend(
         }
         this.afterSetInitialSource(queryParams);
       }
+
+      // Set visible source name on small/zoomed screens
+      this.updateMainHeading();
     },
 
     afterInit: function () {
@@ -772,6 +775,10 @@ Craft.BaseElementIndex = Garnish.Base.extend(
       }
     },
 
+    updateMainHeading: function () {
+      $('#content-heading').text(this.getSourceLabel());
+    },
+
     deinitSource: function ($source) {
       this.sourceNav.removeItems($source);
       this.deinitSourceToggle($source);
@@ -2162,7 +2169,7 @@ Craft.BaseElementIndex = Garnish.Base.extend(
       this.setInstanceState('selectedSource', this.sourceKey);
       this.sourceNav.selectItem($source);
 
-      Craft.cp.updateContentHeading();
+      this.updateMainHeading();
 
       if (this.searching) {
         // Clear the search value without causing it to update elements

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

@@ -99,7 +99,7 @@ Craft.CP = Garnish.Base.extend(
 
       this.isMobile = Garnish.isMobileBrowser();
 
-      this.updateContentHeading();
+      //this.updateContentHeading();
 
       // Swap any instruction text with info icons
       let $allInstructions = this.$details.find(
@@ -480,17 +480,6 @@ Craft.CP = Garnish.Base.extend(
       Craft.submitForm(this.$primaryForm, options);
     },
 
-    updateSidebarMenuLabel: function () {
-      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');
-    },
-
     toggleNav: function () {
       const isExpanded = this.navIsExpanded();