Merge pull request #15061 from craftcms/a11y/active-global-nav-item

Adds additional styling for active global navigation item
craftcms · Jun 11, 2024 · 0e63ef9 · 0e63ef9
2 parents df8ed8a + 20bddcc
commit 0e63ef9
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 77 deletions.
diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md
@@ -33,6 +33,7 @@
 - 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))
+- Improved the styling of selected global nav items. ([#15061](https://github.com/craftcms/cms/pull/15061))
 
 ### Administration
 - Added the `--format` option to the `db/backup` and `db/restore` commands for PostgreSQL installs. ([#14931](https://github.com/craftcms/cms/pull/14931))

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Unreleased
 
 - Nested entry edit pages now redirect to their owner element’s edit page. ([#15169](https://github.com/craftcms/cms/issues/15169))
+- Improved the styling of selected global nav items. ([#15061](https://github.com/craftcms/cms/pull/15061))
 - Added `craft\helpers\ElementHelper::postEditUrl()`.
 - Fixed a styling bug with entry cards within CKEditor fields.
 - Fixed a bug where validation errors weren’t being shown within slideouts.

diff --git a/src/templates/_layouts/components/global-sidebar.twig b/src/templates/_layouts/components/global-sidebar.twig
@@ -20,22 +20,22 @@
     {% tag 'a' with linkAttributes %}
         <span class="sidebar-action__prefix">
             {% if showIcon %}
-            <span class="nav-icon" aria-hidden="true">
-                {%- if item.icon is defined -%}
-                    {{ iconSvg(item.icon) }}
-                {%- elseif item.fontIcon is defined -%}
-                    <span data-icon="{{ item.fontIcon }}"></span>
-                {%- else -%}
-                    {% include "_includes/fallback-icon.svg.twig" with { label: item.label } %}
-                {%- endif -%}
+                <span class="nav-icon" aria-hidden="true">
+                    {%- if item.icon is defined -%}
+                        {{ iconSvg(item.icon) }}
+                    {%- elseif item.fontIcon is defined -%}
+                        <span data-icon="{{ item.fontIcon }}"></span>
+                    {%- else -%}
+                        {% include "_includes/fallback-icon.svg.twig" with { label: item.label } %}
+                    {%- endif -%}
                 </span>
             {% endif %}
         </span>
 
         <span class="sidebar-action__label">
             <span class="label">{{ item.label }}</span>
             {% if external %}
-              {{ links.externalLinkIcon() }}
+                {{ links.externalLinkIcon() }}
             {% endif %}
         </span>
 
@@ -70,25 +70,34 @@
                         {% set itemAttributes = {
                             id: item.id,
                             class: [
-                                'nav-item',
-                                item.sel ? 'sel',
                                 item.subnav ? 'has-subnav'
                             ],
                         } %}
                         <li {{ attr(itemAttributes) }}>
-                            {{ _self.action(item) }}
+                            <div class="nav-item {% if item.sel %}sel{% endif %}">
+                                {{ _self.action(item) }}
+
+                                {% if item.subnav %}
+                                    <craft-disclosure class="nav-item__trigger">
+                                        <button
+                                            type="button"
+                                            class="btn menubtn hairline"
+                                            aria-controls="{{ item.id }}-subnav"
+                                           aria-describedby="{{ item.id }}-link" aria-expanded="{{ item.sel ?  'true' : 'false' }}"
+                                        >
+                                            <span class="visually-hidden">{{ 'Open subnavigation' |t('app') }}</span>
+                                        </button>
+                                    </craft-disclosure>
+                                {% endif %}
+                            </div>
 
                             {% if item.subnav %}
-                                <craft-disclosure class="nav-item__trigger">
-                                  <button type="button" class="btn menubtn hairline" aria-controls="{{ item.id }}-subnav" aria-describedby="{{ item.id }}-link" aria-expanded="{{ item.sel ?  'true' : 'false' }}">
-                                      <span class="visually-hidden">{{ 'Open subnavigation' |t('app') }}</span>
-                                  </button>
-                                </craft-disclosure>
                                 <ul class="nav-item__subnav {{ item.sel ? 'is-open' : '' -}}" id="{{ item.id }}-subnav">
                                     {% for itemId, item in item.subnav %}
                                         {% set itemIsSelected = selectedSubnavItem is defined and selectedSubnavItem == itemId -%}
 
-                                        <li class="nav-item nav-item--sub">
+                                        <li>
+                                            <div class="nav-item nav-item--sub {% if itemIsSelected %}sel{% endif %}">
                                             {{ _self.action(item|merge({
                                                 linkAttributes:  {
                                                     class: ['sidebar-action--sub'],
@@ -97,6 +106,7 @@
                                                     },
                                                 }
                                             }), itemIsSelected, false, ) }}
+                                            </div>
                                         </li>
                                     {% endfor %}
                                 </ul>

diff --git a/src/web/assets/cp/dist/css/cp.css b/src/web/assets/cp/dist/css/cp.css
diff --git a/src/web/assets/cp/dist/css/cp.css.map b/src/web/assets/cp/dist/css/cp.css.map
diff --git a/src/web/assets/cp/src/css/_cp.scss b/src/web/assets/cp/src/css/_cp.scss
@@ -25,6 +25,22 @@ $badgeColor: var(--gray-800);
   --global-sidebar-width: #{$sidebarWidth};
   --header-height: calc(44rem / 16);
   --details-width: #{$detailsWidth};
+
+  // Sidebar
+  --sidebar-bgColor: var(--gray-150);
+
+  // Nav items
+  --nav-item-indicator-size: var(--xs);
+  --nav-item-badge-bgColor: var(--medium-text-color);
+  --nav-item-badge-fgColor: var(--white);
+  --nav-item-fgColor-active: var(--text-color);
+  --nav-item-bgColor-active: var(--gray-200);
+  --nav-item-fgColor-hover: var(--text-color);
+  --nav-item-bgColor-hover: var(--gray-200);
+  --nav-item-prefix-width: calc(30rem / 16);
+  --nav-item-prefix-ratio: 1;
+  --nav-item-trigger-size: var(--touch-target-size);
+  --nav-item-gutter-width: calc(10rem / 16); // Left and right padding
 }
 
 html {
@@ -113,10 +129,10 @@ $systemInfoHoverBgColor: darken($grey800, 10%);
 
 #system-info {
   display: grid;
-  grid-template-columns: var(--prefix-width) auto;
+  grid-template-columns: var(--nav-item-prefix-width) auto;
   gap: 10px;
   height: calc(45rem / 16);
-  padding: 0 var(--gutter-width);
+  padding: 0 var(--nav-item-gutter-width);
   position: relative;
   flex: 0 0 calc(45rem / 16);
   flex-direction: row;
@@ -137,7 +153,7 @@ $systemInfoHoverBgColor: darken($grey800, 10%);
 }
 
 #site-icon {
-  --size: var(--prefix-width); // Matches .sidebar-action__prefix
+  --size: var(--nav-item-prefix-width); // Matches .sidebar-action__prefix
   height: var(--size);
 
   img,

diff --git a/src/web/assets/cp/src/css/_global-sidebar.scss b/src/web/assets/cp/src/css/_global-sidebar.scss
@@ -1,9 +1,5 @@
 .global-sidebar {
   --is-always-visible: true;
-  --prefix-width: calc(30rem / 16);
-  --prefix-ratio: 1;
-  --gutter-width: calc(10rem / 16); // Left and right padding
-
   position: sticky;
   top: 0;
   z-index: $sidebarZIndex;
@@ -52,16 +48,12 @@
 .global-nav > ul {
   display: flex;
   flex-direction: column;
-  gap: var(--s);
 }
 
 .global-nav > ul > li {
   position: relative;
 }
 
-.global-nav > ul > li.sel {
-}
-
 .nav-icon {
   display: inline-flex;
   flex-direction: column;
@@ -81,40 +73,48 @@
 }
 
 .nav-item {
-  --gutter-width: calc(10rem / 16);
   display: grid;
-  grid-template-columns: var(--gutter-width) minmax(0, 1fr) var(--prefix-width) var(
-      --gutter-width
-    );
+  grid-template-columns:
+    var(--nav-item-gutter-width) minmax(0, 1fr) var(--nav-item-prefix-width)
+    var(--nav-item-gutter-width);
   grid-template-areas: '. action trigger .' 'subnav subnav subnav subnav';
   align-items: center;
   width: 100%;
+  padding-block: var(--xs);
 
   > .sidebar-action {
     grid-area: action;
   }
+
+  &.sel {
+    color: var(--nav-item-fgColor-active);
+    background-color: var(--nav-item-bgColor-active);
+  }
+}
+
+.nav-item--sub {
+  padding-block: 0;
 }
 
 .nav-item__trigger {
   --icon-size: 10px;
-  --trigger-size: var(--touch-target-size);
+  width: var(--nav-item-trigger-size);
   grid-area: trigger;
   display: flex;
+  justify-content: center;
   z-index: 1;
 
   .menubtn {
     padding: 0;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    width: var(--trigger-size);
-    height: var(--trigger-size);
+    width: var(--nav-item-trigger-size);
+    height: var(--nav-item-trigger-size);
     border: transparent;
 
     &:hover {
-      @include light-on-dark-text;
-      color: var(--white);
-      background-color: var(--medium-text-color);
+      background-color: var(--nav-item-bgColor-hover);
     }
 
     &[aria-expanded='true']:not(:hover) {
@@ -132,12 +132,15 @@
 }
 
 .nav-item__subnav {
-  --prefix-ratio: 4/3;
+  --nav-item-prefix-ratio: 4/3;
   display: none;
   grid-area: subnav;
+  gap: 1px;
+  margin-block: 1px;
+  flex-direction: column;
 
   &[data-state='expanded'] {
-    display: block;
+    display: flex;
   }
 }
 
@@ -150,19 +153,19 @@
   min-width: 1.1rem;
   height: 1rem;
   padding: 0 var(--xs);
-  border-radius: var(--s);
-  background-color: var(--medium-text-color);
-  color: var(--white);
+  border-radius: 8px;
+  background-color: var(--nav-item-badge-bgColor);
+  color: var(--nav-item-badge-fgColor);
 }
 
 .sidebar-actions {
-  padding: 10px var(--gutter-width); // match padding of #system-info
+  padding: 10px var(--nav-item-gutter-width); // match padding of #system-info
 }
 
 .sidebar-action {
   --thumb-size: 0.75rem;
   display: grid;
-  grid-template-columns: var(--prefix-width) minmax(0, 1fr) auto;
+  grid-template-columns: var(--nav-item-prefix-width) minmax(0, 1fr) auto;
   width: 100%;
   align-items: center;
   position: relative;
@@ -177,49 +180,49 @@
   &:before {
     content: '';
     position: absolute;
-    inset-inline-start: calc((10rem / 16) * -1); // match #system-name
+    inset-inline-start: 0;
     inset-block-start: 50%;
-    height: 80%;
-    transform: translateY(-50%);
-    width: var(--xs);
+    transform: translateY(-50%) translateX(-100%);
+    height: 95%;
+    width: var(--nav-item-indicator-size);
+    border-radius: var(--small-border-radius);
   }
 
   &:focus-visible,
   &:hover {
-    @include light-on-dark-text;
-    color: var(--white);
-    background-color: var(--medium-text-color);
+    color: var(--nav-item-fgColor-hover);
+    background-color: var(--nav-item-bgColor-hover);
   }
 
-  &.sel {
+  &[aria-current='page'],
+  &[aria-current='true'] {
     &:before {
-      --indicator-size: 6px;
-      color: var(--white);
-      background-color: var(--medium-text-color);
+      background-color: var(--nav-item-fgColor-active);
     }
   }
 }
 
 .sidebar-action--sub {
-  --indicator-size: 4px;
   font-size: 0.9em;
   min-height: 26px;
 
-  &:focus-visible,
-  &:hover {
-    &:before {
-      background-color: var(--white);
-    }
-  }
-
   &:before {
-    @include left(calc((30px / 2) - (var(--indicator-size) / 2)));
-    width: var(--indicator-size);
-    height: var(--indicator-size);
+    transform: translateY(-50%);
+    inset-inline-start: calc(
+      var(--xs) + calc(var(--nav-item-prefix-width) / 2) -
+        (var(--nav-item-indicator-size) / 2)
+    );
+    width: var(--nav-item-indicator-size);
+    height: var(--nav-item-indicator-size);
     border-radius: 100%;
     top: 50%;
     background-color: currentColor;
   }
+
+  &[aria-current='page'],
+  &[aria-current='true'] {
+    --nav-item-indicator-size: 6px;
+  }
 }
 
 .sidebar-action--job {
@@ -277,8 +280,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--prefix-width);
-  aspect-ratio: var(--prefix-ratio);
+  width: var(--nav-item-prefix-width);
+  aspect-ratio: var(--nav-item-prefix-ratio);
   line-height: 0;
   flex-shrink: 0;
 }
@@ -318,19 +321,19 @@ States
 
     .nav-item {
       grid-template-areas: '. action .' '. trigger .' 'subnav subnav subnav';
-      grid-template-columns: var(--gutter-width) var(--prefix-width) var(
-          --gutter-width
-        );
+      grid-template-columns:
+        var(--nav-item-gutter-width) var(--nav-item-prefix-width)
+        var(--nav-item-gutter-width);
     }
 
     .nav-item__indicator {
       right: -1px;
     }
 
     .sidebar-action {
-      width: var(--prefix-width);
+      width: var(--nav-item-prefix-width);
       padding-inline: 0;
-      min-height: var(--prefix-width);
+      min-height: var(--nav-item-prefix-width);
 
       &:focus-visible,
       &:hover {