Fancy Crumbs a11y

src/elements/Entry.php

@@ -1055,7 +1055,10 @@ protected function crumbs(): array
                 'url' => 'entries',
             ],
             [
-                'menu' => $sectionOptions->all(),
+                'menu' => [
+                    'label' => Craft::t('app', 'Select entry type'),
+                    'items' => $sectionOptions->all(),
+                ],
             ],
         ];
 

src/helpers/Cp.php

@@ -2332,8 +2332,8 @@ public static function disclosureMenu(array $items, array $config = []): string
                 ->first(fn(array $i) => $i['selected'] ?? false);
 
             if ($selectedItem) {
-                $config['buttonLabel'] = $selectedItem['label'] ?? null;
-                $config['buttonHtml'] = $selectedItem['html'] ?? null;
+                $config['label'] = $selectedItem['label'] ?? null;
+                $config['html'] = $selectedItem['html'] ?? null;
             }
         }
 

src/templates/_includes/disclosuremenu.twig

@@ -57,17 +57,18 @@
 {% endmacro %}
 
 {% if withButton %}
-  {% if hiddenLabel ?? false %}
-    {% set hiddenLabelId = "#{id}-label" %}
-    <label id="{{ hiddenLabelId }}" class="visually-hidden">{{ hiddenLabel }}</label>
+  {% if html ?? false %}
+    {{ html | raw }}
+  {% elseif label ?? false %}
+    <span >{{ label }}</span>
   {% endif %}
 
   {{ tag('button', {
     class: ['btn', 'menubtn'],
     type: 'button',
     aria: {
       controls: id,
-      describedby: hiddenLabelId ?? null,
+      label: hiddenLabel ?? null
     },
     data: {
       'disclosure-trigger': true,

src/templates/_layouts/components/crumbs.twig

@@ -4,10 +4,11 @@
     <nav aria-label="{{ 'Breadcrumbs'|t('app') }}">
       <ul id="crumb-list">
         {% for crumb in crumbs %}
-          {% if crumb.menu is defined %}
+          {% set hasMenuItems = crumb.menu is defined and crumb.menu.items is defined %}
+          {% if hasMenuItems %}
             {% set crumb = (
-              crumb.menu|map(o => (o.group ?? false) ? (o.options ?? []) : [o])|flatten(1)|firstWhere(o => o.selected ?? false) ?: {}
-            )|merge(crumb) %}
+              crumb.menu.items|map(o => (o.group ?? false) ? (o.options ?? []) : [o])|flatten(1)|firstWhere(o => o.selected ?? false) ?: {}
+              )|merge(crumb) %}
           {% endif %}
 
           {% tag 'li' with {
@@ -20,36 +21,38 @@
               {{ crumb.html|raw }}
             {% else %}
               {% set labelId = "crumb-label#{random()}" %}
+
               {% tag 'a' with {
                 id: crumb.id ?? null,
                 href: crumb.url is defined ? url(crumb.url) : null,
               } %}
                 {% if crumb.icon is defined %}
                   <span data-icon="{{ crumb.icon }}" aria-hidden></span>
                 {% endif %}
-                <span id="{{ labelId }}">
-                  {{ crumb.label ?? crumb.html|raw }}
-                </span>
 
-                {% if crumb.menu is defined %}
-                  {% set menuId = crumb.id is defined ? "#{crumb.id}-menu" : "crumb-menu#{random()}" %}
-                  {{ tag('button', {
-                    class: ['btn', 'menubtn'],
-                    type: 'button',
-                    title: 'Menu'|t('app'),
-                    aria: {
-                      controls: menuId,
-                      describedby: labelId,
-                    },
-                    data: {
-                      'disclosure-trigger': true,
-                    },
-                  }) }}
-                {% endif %}
+                {{ crumb.label ?? crumb.html|raw }}
               {% endtag %}
 
-              {% if crumb.menu is defined %}
-                {{ disclosureMenu(crumb.menu, {
+              {% if crumb.menu is defined and crumb.menu.items is defined %}
+                {% set menuId = crumb.id is defined ? "#{crumb.id}-menu" : "crumb-menu#{random()}" %}
+                {% set menuLabel = crumb.menu.label ?? null %}
+                {{ tag('button', {
+                  class: ['btn', 'menubtn'],
+                  type: 'button',
+                  title: 'Menu'|t('app'),
+                  aria: {
+                    label: menuLabel,
+                    controls: menuId,
+                    describedby: menuLabel ? null : labelId,
+                  },
+                  data: {
+                    'disclosure-trigger': true,
+                  },
+                }) }}
+              {% endif %}
+
+              {% if hasMenuItems %}
+                {{ disclosureMenu(crumb.menu.items, {
                   id: menuId,
                   withButton: false,
                 }) }}

src/templates/_layouts/elementindex.twig

@@ -38,7 +38,10 @@
         id: 'site-crumb',
         icon: 'world',
         label: selectedSite.name|t('site'),
-        menu: siteMenuItems(selectableSites, selectedSite),
+        menu: {
+            items: siteMenuItems(selectableSites, selectedSite),
+            label: 'Select site'|t('site')
+        }
     }) %}
 {% endif %}
 

src/translations/en/app.php

@@ -230,6 +230,7 @@
     'Change icon' => 'Change icon',
     'Change logo' => 'Change logo',
     'Change photo' => 'Change photo',
+    'Change site' => 'Change site',
     'Changelog' => 'Changelog',
     'Changes discarded.' => 'Changes discarded.',
     'Changes saved.' => 'Changes saved.',

src/web/CpScreenResponseFormatter.php

@@ -139,11 +139,14 @@ private function _formatTemplate(YiiResponse $response, CpScreenResponseBehavior
                 'id' => 'site-crumb',
                 'icon' => 'world',
                 'label' => Craft::t('site', $behavior->site->name),
-                'menu' => !empty($behavior->selectableSites)
-                    ? Cp::siteMenuItems($behavior->selectableSites, $behavior->site, [
-                        'includeOmittedSites' => true,
-                    ])
-                    : null,
+                'menu' => [
+                    'label' => Craft::t('site', 'Select site'),
+                    'items' => !empty($behavior->selectableSites)
+                        ? Cp::siteMenuItems($behavior->selectableSites, $behavior->site, [
+                            'includeOmittedSites' => true,
+                        ])
+                        : null,
+                ],
             ]);
         }
 
@@ -216,7 +219,6 @@ private function _contextMenu(
             'autoLabel' => true,
             'buttonAttributes' => [
                 'id' => 'context-btn',
-                'class' => ['context-label'],
             ],
             'hiddenLabel' => Craft::t('app', 'Context'),
         ], $namespace);

src/web/assets/admintable/dist/manifest.json

@@ -1 +1 @@
-{"app.css":"/css/app.css","app.js":"/js/app.js","app.js.map":"/js/app.js.map"}
+{"app.css":"/css/app.css","app.js":"/js/app.js","app.css.map":"/css/app.css.map","app.js.map":"/js/app.js.map"}

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

@@ -483,8 +483,12 @@ li.crumb {
 
   .btn {
     --ui-control-color: var(--gray-400);
-    --ui-control-hover-color: var(--gray-500);
-    --ui-control-active-color: var(--gray-600);
+    --ui-control-hover-color: var(--gray-800);
+    --ui-control-active-color: var(--gray-700);
+
+    &:hover {
+      color: var(--ui-control-hover-color);
+    }
   }
 }
 
@@ -508,7 +512,7 @@ li.crumb {
   }
 
   &:hover {
-    color: var(--gray-400);
+    color: var(--link-color);
   }
 }
 
@@ -530,6 +534,12 @@ li.crumb {
   }
 }
 
+#primary-nav-toggle {
+  &:focus-visible {
+    box-shadow: var(--inner-focus-ring);
+  }
+}
+
 #crumb-list {
   display: flex;
   flex-direction: row;
@@ -613,8 +623,15 @@ li.crumb {
   flex-wrap: nowrap;
   gap: var(--xs);
 
+  [data-icon] {
+    position: relative;
+    top: -1px;
+  }
+
   .menubtn {
-    margin: 0 calc(var(--xs) * -1 + 2px);
+    position: relative;
+    top: -1px;
+    margin: 0 calc(var(--xs) * -1 / 2);
   }
 
   [data-icon='ellipsis']:before {
@@ -629,6 +646,10 @@ li.crumb {
     .label-link {
       max-width: 15em;
 
+      &:focus-visible {
+        box-shadow: var(--inner-focus-ring);
+      }
+
       span:not(.context-label) {
         display: block;
         white-space: nowrap;
@@ -684,6 +705,11 @@ li.breadcrumb-toggle-wrapper {
   }
 }
 
+.context-menu-container {
+  border: 1px solid var(--medium-hairline-color);
+  border-radius: calc(var(--touch-target-size) / 2);
+}
+
 .context-menu-container .menubtn {
   @include margin-left(0);
 }

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

@@ -3027,7 +3027,7 @@ table {
 }
 
 .context-label,
-.context-menu-container .menubtn {
+.context-menu-container {
   display: inline-flex;
   align-items: center;
   @include margin-left(var(--xs));
@@ -3041,6 +3041,22 @@ table {
   border: 1px solid var(--medium-hairline-color);
 }
 
+.context-menu-container:has(.menubtn) {
+  padding-right: 0;
+
+  > * {
+    display: inline-block;
+    padding-right: var(--s);
+  }
+}
+
+#global-header .context-menu-container .menubtn {
+  padding-left: calc(var(--s) * 0.8) !important;
+  border-left: 1px solid var(--medium-hairline-color);
+  border-radius: 0 calc(var(--touch-target-size) / 2)
+    calc(var(--touch-target-size) / 2) 0;
+}
+
 .context-menu-container .menubtn:hover {
   border-color: var(--dark-hairline-color);
 }