Merge pull request #14946 from craftcms/a11y/secondary-nav

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

CHANGELOG-WIP.md

@@ -30,6 +30,8 @@
 - The accessible name of “Select site” buttons is now translated to the current language.
 - Improved the accessibility of two-step verification steps on the control panel login screen. ([#15145](https://github.com/craftcms/cms/pull/15145))
 - Improved the accessibility of global nav items with subnavs. ([#15006](https://github.com/craftcms/cms/issues/15006))
+- The secondary nav is now kept open during source selection for mobile viewports, preventing focus from being dropped. ([#14946](https://github.com/craftcms/cms/pull/14946))
+- User edit screens’ document titles have been updated to describe the page purpose. ([#14946](https://github.com/craftcms/cms/pull/14946))
 
 ### Administration
 - Added the `--format` option to the `db/backup` and `db/restore` commands for PostgreSQL installs. ([#14931](https://github.com/craftcms/cms/pull/14931))

CHANGELOG.md

@@ -5,6 +5,8 @@
 - Matrix fields in cards view and Addresses fields now show which nested entries/addresses contain validation errors. ([#15161](https://github.com/craftcms/cms/issues/15161))
 - Improved the accessibility of two-step verification steps on the control panel login screen. ([#15145](https://github.com/craftcms/cms/pull/15145))
 - Improved the accessibility of global nav items with subnavs. ([#15006](https://github.com/craftcms/cms/issues/15006))
+- The secondary nav is now kept open during source selection for mobile viewports, preventing focus from being dropped. ([#14946](https://github.com/craftcms/cms/pull/14946))
+- User edit screens’ document titles have been updated to describe the page purpose. ([#14946](https://github.com/craftcms/cms/pull/14946))
 - Fixed an error that could occur if a Local filesystem wasn’t configured with a base path.
 - Fixed a bug where some entries could be missing content after upgrading to Craft 5. ([#15150](https://github.com/craftcms/cms/issues/15150))
 - Fixed a bug where it wasn’t always possible to add new entries to Matrix fields in inline-editable blocks view, if the field’s Max Entries setting had been reached before page load. ([#15158](https://github.com/craftcms/cms/issues/15158))

src/controllers/EditUserTrait.php

@@ -122,11 +122,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

@@ -248,7 +248,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

@@ -1791,6 +1791,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;
@@ -1320,8 +1335,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;
@@ -1330,19 +1344,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,20 @@ Craft.BaseElementIndex = Garnish.Base.extend(
       }
     },
 
+    updateMainHeading: function () {
+      let $contentHeading = $('#content-heading');
+
+      if (!$contentHeading.length) {
+        $contentHeading = $('<span>', {
+          id: 'content-heading',
+        });
+
+        $contentHeading.appendTo('.screen-title');
+      }
+
+      $contentHeading.text(this.getSourceLabel());
+    },
+
     deinitSource: function ($source) {
       this.sourceNav.removeItems($source);
       this.deinitSourceToggle($source);
@@ -2162,7 +2179,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

@@ -100,7 +100,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(
@@ -497,17 +497,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();