@gsa-tts/graymatter-ui 0.4.11 → 0.4.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-tts/graymatter-ui",
-  "version": "0.4.11",
+  "version": "0.4.13",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/components/DesktopHeader.svelte

@@ -5,7 +5,6 @@
     selectedSubNavItemTitle,
   } from '../stores/navigationStore.js';
   import { onMount } from 'svelte';
-  import { subNavReady } from '../stores/subNavReadyStore';
 
   const { customHeaderText = '' } = $props();
 
@@ -16,8 +15,7 @@
       $selectedItem &&
       $selectedItem !== 'discover' &&
       !$isExpanded &&
-      !isLayoutTransitioning &&
-      $subNavReady
+      !isLayoutTransitioning
   );
   const headerText = $derived(
     () => customHeaderText || $selectedSubNavItemTitle

package/src/components/DesktopSideNav.svelte

@@ -11,10 +11,8 @@
     selectedItem,
     isMenuButtonDisabled,
     navigationStore,
-    selectedSubNavItemId,
     type NavigationItem,
   } from '../stores/navigationStore.js';
-  import { get } from 'svelte/store';
   import DiscoverIcon from './icons/DiscoverIcon.svelte';
   import ChatIcon from './icons/ChatIcon.svelte';
   import ConsoleIcon from './icons/ConsoleIcon.svelte';
@@ -38,7 +36,31 @@
   } = $props();
 
   const helpUrl = supplementalMenuData?.help?.url?.trim();
-  const isHelpSelected = $derived(() => get(selectedSubNavItemId) === 'help');
+
+  // Check if we're on the help page by comparing URLs (help is not a nav/subnav item)
+  function getPathname(url: string, baseOrigin: string) {
+    try {
+      return new URL(url, baseOrigin).pathname;
+    } catch {
+      return null;
+    }
+  }
+
+  function checkIsHelpPage(): boolean {
+    if (!helpUrl || helpUrl === '#' || helpUrl.startsWith('#')) {
+      return false;
+    }
+    const location = (
+      globalThis as { location?: { pathname?: string; origin?: string } }
+    ).location;
+    if (location?.origin && location?.pathname) {
+      const helpPath = getPathname(helpUrl, location.origin);
+      return helpPath !== null && location.pathname === helpPath;
+    }
+    return false;
+  }
+
+  const isHelpSelected = $derived(checkIsHelpPage());
 
   let hydrated = false;
   let navContainer: HTMLDivElement;
@@ -170,40 +192,19 @@
         );
       };
 
-      // Detect help page and set selection state
-      const checkHelpPage = () => {
-        // Skip check for hash links - they stay on the same page
-        if (!helpUrl || helpUrl === '#' || helpUrl.startsWith('#')) {
-          return;
-        }
-
-        const location = (
-          globalThis as { location?: { pathname?: string; origin?: string } }
-        ).location;
-        if (location?.origin && location?.pathname) {
-          const helpPath = getPathname(helpUrl, location.origin);
-          if (helpPath && location.pathname === helpPath) {
-            selectedSubNavItemId.set('help');
-          } else if (
-            get(selectedSubNavItemId) === 'help' &&
-            helpPath &&
-            location.pathname !== helpPath
-          ) {
-            // Clear help selection if we navigated away from help page
-            selectedSubNavItemId.set(null);
-          }
-        }
+      // Listen for navigation changes to update help button state
+      const handleNavigationChange = () => {
+        // Force reactivity update by accessing the derived value
+        // Accessing isHelpSelected triggers reactivity
+        void isHelpSelected;
       };
 
-      checkHelpPage();
-
-      // Also listen for popstate events (back/forward navigation)
-      window.addEventListener('popstate', checkHelpPage);
+      window.addEventListener('popstate', handleNavigationChange);
 
       return () => {
         window.removeEventListener('layoutTransition', handleLayoutTransition);
         window.removeEventListener('keydown', handleEscape);
-        window.removeEventListener('popstate', checkHelpPage);
+        window.removeEventListener('popstate', handleNavigationChange);
         if (eventListenerCleanup) {
           eventListenerCleanup();
         }
@@ -211,22 +212,10 @@
     }
   });
 
-  function getPathname(url: string, baseOrigin: string) {
-    try {
-      return new URL(url, baseOrigin).pathname;
-    } catch {
-      return null;
-    }
-  }
-
   function handleHelpClick(event: MouseEvent) {
-    selectedSubNavItemId.set('help');
-
-    // If it's a hash link, prevent default to maintain state on same page
+    // If it's a hash link, prevent default to stay on same page
     if (helpUrl === '#' || helpUrl?.startsWith('#')) {
       event.preventDefault();
-      // State is already set above, so it will persist
-      return;
     }
   }
 
@@ -488,8 +477,8 @@
           >
             <a
               class="help-link"
-              class:selected={isHelpSelected()}
-              aria-current={isHelpSelected()}
+              class:selected={isHelpSelected}
+              aria-current={isHelpSelected ? 'page' : undefined}
               href={helpUrl}
               part="help-link"
               title="Help"
@@ -498,7 +487,7 @@
             >
               <div class="icon-container" part="help-icon-container">
                 <div class="icon-wrapper">
-                  <HelpIcon isSelected={isHelpSelected()} />
+                  <HelpIcon isSelected={isHelpSelected} />
                 </div>
               </div>
             </a>
@@ -675,7 +664,8 @@
   }
 
   .menu-button:focus,
-  .nav-item:focus {
+  .nav-item:focus,
+  .help-link:focus {
     outline: none;
   }
 

package/src/components/MobileTopNav.svelte

@@ -3,13 +3,11 @@
     isMenuButtonDisabled,
     navigationStore,
     selectedSubNavItemTitle,
-    selectedSubNavItemId,
   } from '../stores/navigationStore.js';
   import Logo from './Logo.svelte';
   import MenuIcon from './icons/MenuIcon.svelte';
   import HelpIcon from './icons/HelpIcon.svelte';
   import { onMount } from 'svelte';
-  import { get } from 'svelte/store';
 
   let { profileMenuData, logoLinkUrl, logoLinkLabel, supplementalMenuData } =
     $props();
@@ -17,14 +15,37 @@
   import ProfileMenu from './ProfileMenu.svelte';
 
   const helpUrl = supplementalMenuData?.help?.url?.trim();
-  const isHelpSelected = $derived(() => get(selectedSubNavItemId) === 'help');
+
+  // Check if we're on the help page by comparing URLs (help is not a nav/subnav item)
+  function getPathname(url: string, baseOrigin: string) {
+    try {
+      return new URL(url, baseOrigin).pathname;
+    } catch {
+      return null;
+    }
+  }
+
+  function checkIsHelpPage(): boolean {
+    if (!helpUrl || helpUrl === '#' || helpUrl.startsWith('#')) {
+      return false;
+    }
+    const location = (
+      globalThis as {
+        location?: { pathname?: string; origin?: string };
+      }
+    ).location;
+    if (location?.origin && location?.pathname) {
+      const helpPath = getPathname(helpUrl, location.origin);
+      return helpPath !== null && location.pathname === helpPath;
+    }
+    return false;
+  }
+
+  const isHelpSelected = $derived(checkIsHelpPage());
 
   onMount(() => {
     // Listen for section visibility changes to update header
     const handleSectionVisible = (event: Event) => {
-      if (window.innerWidth <= 640) {
-        return;
-      }
       const customEvent = event as CustomEvent;
       if (customEvent.detail && customEvent.detail.title) {
         selectedSubNavItemTitle.set(customEvent.detail.title);
@@ -74,64 +95,28 @@
       }, 100);
     }
 
-    // Detect help page and set selection state (aligned with DesktopSideNav logic)
-    const checkHelpPage = () => {
-      // Skip check for hash links - they stay on the same page
-      if (!helpUrl || helpUrl === '#' || helpUrl.startsWith('#')) {
-        return;
-      }
-
-      const location = (
-        globalThis as {
-          location?: { pathname?: string; origin?: string };
-        }
-      ).location;
-      if (location?.origin && location?.pathname) {
-        const helpPath = getPathname(helpUrl, location.origin);
-        if (helpPath && location.pathname === helpPath) {
-          selectedSubNavItemId.set('help');
-        } else if (
-          get(selectedSubNavItemId) === 'help' &&
-          helpPath &&
-          location.pathname !== helpPath
-        ) {
-          // Clear help selection if we navigated away from help page
-          selectedSubNavItemId.set(null);
-        }
-      }
+    // Listen for navigation changes to update help button state
+    const handleNavigationChange = () => {
+      // Force reactivity update by accessing the derived value
+      void isHelpSelected;
     };
 
-    checkHelpPage();
-
-    // Also listen for popstate events (back/forward navigation)
-    window.addEventListener('popstate', checkHelpPage);
+    window.addEventListener('popstate', handleNavigationChange);
 
     return () => {
       window.removeEventListener('sectionVisible', handleSectionVisible);
-      window.removeEventListener('popstate', checkHelpPage);
+      window.removeEventListener('popstate', handleNavigationChange);
     };
   });
 
-  function getPathname(url: string, baseOrigin: string) {
-    try {
-      return new URL(url, baseOrigin).pathname;
-    } catch {
-      return null;
-    }
-  }
-
   function toggleMobileNav() {
     navigationStore.toggleExpanded();
   }
 
   function handleHelpClick(event: MouseEvent) {
-    selectedSubNavItemId.set('help');
-
-    // If it's a hash link, prevent default to maintain state on same page
+    // If it's a hash link, prevent default to stay on same page
     if (helpUrl === '#' || helpUrl?.startsWith('#')) {
       event.preventDefault();
-      // State is already set above, so it will persist
-      return;
     }
   }
 </script>
@@ -163,15 +148,15 @@
   {#if helpUrl}
     <a
       class="help-button"
-      class:selected={isHelpSelected()}
-      aria-current={isHelpSelected()}
+      class:selected={isHelpSelected}
+      aria-current={isHelpSelected ? 'page' : undefined}
       href={helpUrl}
       title="Help"
       aria-label="Help"
       onclick={handleHelpClick}
     >
       <span class="icon-container">
-        <HelpIcon isSelected={isHelpSelected()} />
+        <HelpIcon isSelected={isHelpSelected} />
       </span>
     </a>
   {/if}
@@ -260,6 +245,19 @@
     outline: none;
   }
 
+  .help-button:focus {
+    outline: none;
+  }
+
+  .help-button:focus .icon-container {
+    outline: var(--ai-size-2) solid var(--ai-color-blue-600);
+    outline-offset: var(--ai-size-2);
+  }
+
+  .help-button:focus:not(:focus-visible) .icon-container {
+    outline: none;
+  }
+
   .help-button {
     display: flex;
     align-items: center;