DP-41580-a11y-fix-editor-high-zoom

docroot/themes/custom/mass_admin_theme/css/overrides/toolbar-zoom-override.css

@@ -0,0 +1,32 @@
+/* Toolbar tray overlay */
+.toolbar-tray.is-active.toolbar-tray-vertical > nav.toolbar-lining {
+  padding-bottom: 60px;
+}
+
+html body .toolbar-tray-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 500;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  cursor: pointer;
+  display: block;
+}
+
+html body .toolbar-tray-overlay.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Prevent page scrolling when toolbar tray is open */
+html body.toolbar-tray-open {
+  overflow: hidden;
+  height: 100vh;
+  position: fixed;
+  width: 100%;
+}

docroot/themes/custom/mass_admin_theme/js/toolbar-zoom-override.js

@@ -0,0 +1,112 @@
+(function ($, Drupal) {
+  "use strict";
+
+  /**
+   * Add overlay when toolbar tray is active
+   */
+  Drupal.behaviors.toolbarTrayOverlay = {
+    attach: function (context, settings) {
+      // Only run once on document
+      if (context !== document) {
+        return;
+      }
+
+      // Create overlay element
+      const overlay = $('<div class="toolbar-tray-overlay"></div>');
+
+      if (!$(".toolbar-tray-overlay").length) {
+        $("body").append(overlay);
+      }
+
+      // Function to show overlay and prevent scrolling
+      function showOverlay() {
+        $(".toolbar-tray-overlay").addClass("active");
+        $("body").addClass("toolbar-tray-overlay-active");
+      }
+
+      // Function to hide overlay and restore scrolling
+      function hideOverlay() {
+        $(".toolbar-tray-overlay").removeClass("active");
+        $("body").removeClass("toolbar-tray-overlay-active");
+      }
+
+      // Function to close the toolbar tray
+      function closeToolbarTray() {
+        // Manually removing active classes interferes with Drupal's toolbar toggle mechanism
+        // Find the active toolbar tab and simulate a click to close it
+        const activeTab = $(".toolbar-bar .toolbar-tab.is-active .toolbar-item");
+
+        if (activeTab.length > 0) {
+          activeTab.trigger("click");
+        } else {
+          // Fallback: try to use Drupal's toolbar model if available
+          if (Drupal.toolbar && Drupal.toolbar.models && Drupal.toolbar.models.toolbarModel) {
+            Drupal.toolbar.models.toolbarModel.set('activeTab', null);
+          }
+        }
+
+        hideOverlay();
+      }
+
+      // Check toolbar state based on body class
+      function checkToolbarState() {
+        const bodyHasTrayOpen = $("body").hasClass("toolbar-tray-open");
+
+        if (bodyHasTrayOpen) {
+          showOverlay();
+        } else {
+          hideOverlay();
+        }
+      }
+
+      // Handle clicks on navigation links within the toolbar tray
+      // When user navigates to a different page, the toolbar tray should close automatically
+      document.addEventListener('click', function(e) {
+        // Check if click is inside toolbar tray
+        const toolbarTray = e.target.closest('.toolbar-tray');
+        if (!toolbarTray) return;
+
+        // Check if click is on a link
+        const link = e.target.closest('a');
+        if (!link) return;
+
+        const systemPath = link.getAttribute('data-drupal-link-system-path');
+        const role = link.getAttribute('role');
+
+        // Check if the link is an actual nav link
+        if (role !== "button" && systemPath && systemPath.trim() !== "") {    
+          closeToolbarTray();
+        }
+      }, true);
+
+      // Handle overlay click to close tray
+      $(document).on("click", ".toolbar-tray-overlay.active", function (e) {
+        console.log("Overlay clicked");
+        e.preventDefault();
+        e.stopPropagation();
+        closeToolbarTray();
+      });
+
+      // Monitor body class changes using MutationObserver (AFTER click handlers)
+      const observer = new MutationObserver(function (mutations) {
+        mutations.forEach(function (mutation) {
+          if (mutation.type === "attributes" && mutation.attributeName === "class") {
+            checkToolbarState();
+          }
+        });
+      });
+
+      // Start observing body class changes
+      observer.observe(document.body, {
+        attributes: true,
+        attributeFilter: ["class"],
+      });
+
+      // Initial check on page load
+      setTimeout(function () {
+        checkToolbarState();
+      }, 500);
+
+    },
+  };
+})(jQuery, Drupal);

docroot/themes/custom/mass_admin_theme/mass_admin_theme.libraries.yml

@@ -53,6 +53,7 @@ admin_overrides:
       css/overrides/collections-field.css: {}
       css/overrides/modals.css: {}
       css/overrides/select2-override.css: {}
+      css/overides/toolbar-zoom-override.css: {}
     layout:
       css/layout/layout.page.css: {}
   js:
@@ -98,6 +99,17 @@ entity_browser_custom:
     theme:
       css/overrides/entity-browser-custom.css: {}
 
+toolbar-zoom-override:
+  css:
+    theme:
+      css/overrides/toolbar-zoom-override.css: {}
+  js:
+    js/toolbar-zoom-override.js: {}
+  dependencies:
+    - core/drupal
+    - core/jquery
+    - toolbar/toolbar
+
 modal_scroll_guard:
   version: 1.0.1
   js:

docroot/themes/custom/mass_admin_theme/mass_admin_theme.theme

@@ -360,6 +360,16 @@ function mass_admin_theme_form_alter(&$form, &$form_state, $form_id) {
 
 }
 
+/**
+ * Implements hook_page_attachments_alter().
+ */
+function mass_admin_theme_page_attachments_alter(array &$attachments) {
+  // Add toolbar zoom override for admin users
+  if (\Drupal::currentUser()->hasPermission('access toolbar')) {
+    $attachments['#attached']['library'][] = 'mass_admin_theme/toolbar-zoom-override';
+  }
+}
+
 /**
  * Implements template_preprocess_views_view().
  *