@sarimarcus/content-sites-ui 0.29.3 → 0.29.4

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.29.4 (2026-10-07)
+
+- `./composed`: `Pagination`'s current page uses `text-primary-foreground` (was `text-white`, 1.8:1 on a light primary) and Previous/Next are named by their visible text; `TableOfContents`' hidden mini bar is `inert`; `CardCarousel`'s arrows use `aria-disabled`, so the focused arrow keeps focus at an edge, and arrows and dots have 44px targets (SLA-2984).
+- `./seo`: `ArticleMetadata`'s byline is a labelled `group`, no longer a second `contentinfo` landmark inside `<main>` (SLA-2984).
+- `./navigation`: `NavDropdown` opens only through `aria-expanded` (no `:focus-within`), so Escape and click-to-close stay closed while focus is inside, and drops `aria-haspopup`; the mobile menu closes and releases the body scroll lock when the viewport crosses `lg`; `SiteFooter`'s legal links are 44px tall (SLA-2984).
+
 ## 0.29.3 (2026-10-07)
 
 - `./layout`: `ConsentAnalytics` builds the absolute `gtm.js` URL at render time and passes it to the inline script, which no longer holds a relative `'/gtm.js?id='` literal that Googlebot crawled as a 404 on each site (SLA-3001).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-ui",
-  "version": "0.29.3",
+  "version": "0.29.4",
   "description": "Universal Astro UI components, layout shell and design tokens shared by the content sites.",
   "type": "module",
   "license": "MIT",
@@ -49,6 +49,6 @@
     "@lucide/astro": "^1.23.0",
     "astro": "^7.0.6",
     "tailwindcss": "^4.1.18",
-    "@sarimarcus/content-sites-core": "0.29.3"
+    "@sarimarcus/content-sites-core": "0.29.4"
   }
 }

package/src/composed/CardCarousel.astro

@@ -51,6 +51,9 @@ const HeadingTag = headingTag;
 // Ids must be unique per page AND stable across builds.
 const containerId = deterministicId('cc', Astro.url.pathname, id, ariaLabel ?? heading);
 const trackId = `${containerId}-t`;
+// The ::before grows the 36px circle into a 44px touch target.
+const arrowClass =
+  'relative flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border border-border bg-card transition-colors before:absolute before:-inset-1 hover:border-primary/40 hover:bg-primary/10 aria-disabled:pointer-events-none aria-disabled:opacity-25';
 ---
 
 <div id={id} data-carousel={containerId} class:list={['scroll-mt-28', className]}>
@@ -80,8 +83,8 @@ const trackId = `${containerId}-t`;
           data-carousel-prev
           type="button"
           aria-label={`Previous, ${ariaLabel ?? heading ?? 'carousel'}`}
-          disabled
-          class="flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border border-border bg-card transition-colors hover:border-primary/40 hover:bg-primary/10 disabled:pointer-events-none disabled:opacity-25"
+          aria-disabled="true"
+          class={arrowClass}
         >
           <Icon name="chevron-left" class="h-4 w-4" aria-hidden="true" />
         </button>
@@ -89,7 +92,7 @@ const trackId = `${containerId}-t`;
           data-carousel-next
           type="button"
           aria-label={`Next, ${ariaLabel ?? heading ?? 'carousel'}`}
-          class="flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border border-border bg-card transition-colors hover:border-primary/40 hover:bg-primary/10 disabled:pointer-events-none disabled:opacity-25"
+          class={arrowClass}
         >
           <Icon name="chevron-right" class="h-4 w-4" aria-hidden="true" />
         </button>
@@ -106,7 +109,7 @@ const trackId = `${containerId}-t`;
   >
     <slot />
   </div>
-  <div data-carousel-dots class="mt-4 hidden justify-center gap-2"></div>
+  <div data-carousel-dots class="mt-4 hidden justify-center"></div>
 </div>
 
 <style is:global>

package/src/composed/Pagination.astro

@@ -44,7 +44,7 @@ const edgeBase = `${linkBase} px-3`;
 {totalPages > 1 && (
   <nav aria-label="Pagination" class="mt-14 flex items-center justify-center gap-2 flex-wrap">
     {prevPage ? (
-      <a href={href(prevPage)} rel="prev" aria-label={`Go to page ${prevPage}`} class={edgeBase}>
+      <a href={href(prevPage)} rel="prev" class={edgeBase}>
         <Icon name="arrow-left" class="w-3.5 h-3.5" />
         <span>Previous</span>
       </a>
@@ -65,7 +65,7 @@ const edgeBase = `${linkBase} px-3`;
               <span
                 aria-current="page"
                 aria-label={`Page ${item}, current page`}
-                class={`${numberBase} border-primary bg-primary text-white hover:text-white`}
+                class={`${numberBase} border-primary bg-primary text-primary-foreground hover:text-primary-foreground`}
               >
                 {item}
               </span>
@@ -82,7 +82,7 @@ const edgeBase = `${linkBase} px-3`;
     </div>
 
     {nextPage ? (
-      <a href={href(nextPage)} rel="next" aria-label={`Go to page ${nextPage}`} class={edgeBase}>
+      <a href={href(nextPage)} rel="next" class={edgeBase}>
         <span>Next</span>
         <Icon name="arrow-right" class="w-3.5 h-3.5" />
       </a>

package/src/composed/TableOfContents.astro

@@ -71,6 +71,7 @@ const showMini = variant === 'card';
     data-toc-section-selector={sectionSelector}
     class="fixed top-16 left-0 right-0 z-40 translate-y-[-100%] opacity-0 pointer-events-none transition-[transform,opacity] duration-300 ease-out bg-background/95 backdrop-blur-sm border-b border-border shadow-sm"
     aria-hidden="true"
+    inert
   >
     <div class="mx-auto max-w-shell px-4 sm:px-6 lg:px-8 py-2.5">
       <nav class="flex gap-2 overflow-x-auto scrollbar-hide" aria-label={`${ariaLabel} (sticky)`}>

package/src/composed/carousel.ts

@@ -17,18 +17,26 @@ function initCarousel(section: HTMLElement): void {
   const dotsWrap = section.querySelector<HTMLElement>('[data-carousel-dots]');
   let currentIndex = 0;
 
+  // Each dot is a 44px hit area around its 6px pill; the negative margin keeps the row 6px tall.
   const dots: HTMLButtonElement[] = [];
+  const pills: HTMLElement[] = [];
   if (dotsWrap) {
     cards.forEach((_, i) => {
       const dot = document.createElement('button');
       dot.type = 'button';
       dot.setAttribute('aria-label', `Go to item ${i + 1}`);
       dot.style.cssText =
-        'height:0.375rem;border-radius:9999px;transition:all 0.2s;border:0;cursor:pointer;padding:0;' +
+        'display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;' +
+        'margin:-1.1875rem 0;border:0;padding:0;background:transparent;cursor:pointer;';
+      const pill = document.createElement('span');
+      pill.style.cssText =
+        'display:block;height:0.375rem;border-radius:9999px;transition:all 0.2s;' +
         (i === 0 ? `width:1rem;background:${ACTIVE};` : `width:0.375rem;background:${INACTIVE};`);
+      dot.appendChild(pill);
       dot.addEventListener('click', () => scrollToIndex(i));
       dotsWrap.appendChild(dot);
       dots.push(dot);
+      pills.push(pill);
     });
   }
 
@@ -43,14 +51,17 @@ function initCarousel(section: HTMLElement): void {
     currentIndex = Math.max(0, Math.min(idx, cards.length - 1));
     // Disabled state comes from the scroll position, not the card index: with several cards per view the track hits
     // max scroll while currentIndex is still mid-list.
-    if (prevBtn) prevBtn.disabled = startEdge;
-    if (nextBtn) nextBtn.disabled = endEdge;
+    // aria-disabled, not disabled: disabling the focused arrow would drop focus to body.
+    prevBtn?.setAttribute('aria-disabled', String(startEdge));
+    nextBtn?.setAttribute('aria-disabled', String(endEdge));
     // At the extremes the dot shows the first or last card, otherwise the trailing dots could never light up.
     const dotIndex = endEdge ? cards.length - 1 : startEdge ? 0 : currentIndex;
     dots.forEach((dot, i) => {
       const active = i === dotIndex;
-      dot.style.width = active ? '1rem' : '0.375rem';
-      dot.style.background = active ? ACTIVE : INACTIVE;
+      pills[i].style.width = active ? '1rem' : '0.375rem';
+      pills[i].style.background = active ? ACTIVE : INACTIVE;
+      if (active) dot.setAttribute('aria-current', 'true');
+      else dot.removeAttribute('aria-current');
     });
   }
 
@@ -81,8 +92,9 @@ function initCarousel(section: HTMLElement): void {
     });
   }, { passive: true });
 
-  prevBtn?.addEventListener('click', () => scrollToIndex(currentIndex - 1));
-  nextBtn?.addEventListener('click', () => scrollToIndex(currentIndex + 1));
+  const enabled = (btn: HTMLButtonElement) => btn.getAttribute('aria-disabled') !== 'true';
+  prevBtn?.addEventListener('click', () => enabled(prevBtn) && scrollToIndex(currentIndex - 1));
+  nextBtn?.addEventListener('click', () => enabled(nextBtn) && scrollToIndex(currentIndex + 1));
 
   // Controls show only when the track overflows; re-checked whenever the track resizes.
   function syncControls(): void {

package/src/composed/toc.ts

@@ -12,6 +12,7 @@ function setMiniVisible(mini: Element, visible: boolean): void {
   mini.classList.toggle('opacity-100', visible);
   mini.classList.toggle('pointer-events-auto', visible);
   mini.setAttribute('aria-hidden', visible ? 'false' : 'true');
+  mini.toggleAttribute('inert', !visible);
   document.dispatchEvent(new CustomEvent('toc:mini-visibility-change', { detail: { visible } }));
 }
 

package/src/navigation/ArticlesNavMenu.astro

@@ -125,16 +125,14 @@ const featureStyle = featureBg
 )}
 
 <style>
-  /* data-opened is set on the first open and kept; :focus-within covers a keyboard visit before any script runs. */
-  :global([data-nav-dropdown][data-opened]) .articles-nav-feature,
-  :global(.nav-dropdown:focus-within) .articles-nav-feature {
+  /* data-opened is set on the first open and kept, so the image never unpaints mid-fade. */
+  :global([data-nav-dropdown][data-opened]) .articles-nav-feature {
     background-image: var(--articles-nav-feature, none);
   }
 
   /* A var() holding an unsupported image-set() computes to none, so older engines get the 1x file instead. */
   @supports not (background-image: image-set(url('x.webp') 1x)) {
-    :global([data-nav-dropdown][data-opened]) .articles-nav-feature,
-    :global(.nav-dropdown:focus-within) .articles-nav-feature {
+    :global([data-nav-dropdown][data-opened]) .articles-nav-feature {
       background-image: var(--articles-nav-feature-1x, none);
     }
   }

package/src/navigation/NavDropdown.astro

@@ -1,7 +1,7 @@
 ---
 /**
- * A desktop dropdown: the trigger button (aria-expanded/haspopup/controls) and the panel the site fills through the
- * default slot. The panel opens on click, hover (closing after a short delay), ArrowDown and keyboard focus; the
+ * A desktop dropdown: the trigger button (aria-expanded/controls) and the panel the site fills through the
+ * default slot. The panel opens on click, hover (closing after a short delay) and ArrowDown, never on focus alone; the
  * SiteHeader controller drives it. `buttonClass` replaces the default trigger styling, which `tone` tints.
  */
 import { Icon } from '../primitives/index.ts';
@@ -37,7 +37,6 @@ const triggerClass = buttonClass ?? [
     class:list={['nav-dropdown-btn', triggerClass]}
     aria-current={current ? 'page' : undefined}
     aria-expanded="false"
-    aria-haspopup="true"
     aria-controls={id}
     data-nav-dropdown-button
   >
@@ -61,16 +60,16 @@ const triggerClass = buttonClass ?? [
     pointer-events: none;
   }
 
-  .nav-dropdown-btn[aria-expanded='true'] + .dropdown-menu,
-  .nav-dropdown:focus-within .dropdown-menu {
+  /* visibility flips at once on open, so ArrowDown can focus a link in the same tick; closing still fades. */
+  .nav-dropdown-btn[aria-expanded='true'] + .dropdown-menu {
+    transition: opacity 200ms, visibility 0s, transform 200ms;
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
     pointer-events: auto;
   }
 
-  .nav-dropdown-btn[aria-expanded='true'] :global(.dropdown-chevron),
-  .nav-dropdown:focus-within :global(.dropdown-chevron) {
+  .nav-dropdown-btn[aria-expanded='true'] :global(.dropdown-chevron) {
     transform: rotate(180deg);
   }
 

package/src/navigation/SiteFooter.astro

@@ -49,7 +49,8 @@ const {
   ringClass = 'rounded focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-inverse',
 } = Astro.props;
 
-const legalItemClass = `${smallClass} hover:text-inverse-foreground transition-colors ${ringClass}`;
+// A real 44px box, not an overflowing hit area: wrapped rows would overlap and steal each other's taps.
+const legalItemClass = `${smallClass} inline-flex min-h-11 items-center hover:text-inverse-foreground transition-colors ${ringClass}`;
 ---
 
 <footer class={className}>

package/src/navigation/navigation.ts

@@ -113,6 +113,13 @@ function searchPathOf(root: HTMLElement): string | null {
   return (window.location.pathname.indexOf(compiled) === 0 ? compiled : '') + path;
 }
 
+function closeOpenMobileMenus(refocus: boolean): void {
+  roots().forEach((root) => {
+    const toggle = root.querySelector<HTMLButtonElement>('[data-mobile-menu-toggle]');
+    if (toggle?.getAttribute('aria-expanded') === 'true') setMobileMenu(root, toggle, false, refocus);
+  });
+}
+
 function bindDocument(): void {
   if (documentBound) return;
   documentBound = true;
@@ -125,10 +132,7 @@ function bindDocument(): void {
 
   document.addEventListener('keydown', (event) => {
     if (event.key === 'Escape') {
-      roots().forEach((root) => {
-        const toggle = root.querySelector<HTMLButtonElement>('[data-mobile-menu-toggle]');
-        if (toggle?.getAttribute('aria-expanded') === 'true') setMobileMenu(root, toggle, false, true);
-      });
+      closeOpenMobileMenus(true);
       return;
     }
     if (!(event.metaKey || event.ctrlKey) || event.key !== 'k') return;
@@ -140,6 +144,11 @@ function bindDocument(): void {
     event.preventDefault();
     window.location.assign(`${searchPath}?focus=1`);
   });
+
+  // Tailwind's lg: the panel hides itself past it, so the body scroll lock must go with it.
+  window.matchMedia('(min-width: 64rem)').addEventListener('change', (event) => {
+    if (event.matches) closeOpenMobileMenus(false);
+  });
 }
 
 export function initNavigation(): void {

package/src/seo/ArticleMetadata.astro

@@ -84,7 +84,7 @@ const grouped = bylineWhitespace === 'grouped';
 const bylineLead = author ? (grouped ? '  ' : ' ') : (grouped ? '' : ' ');
 ---
 
-<address class="not-italic mb-5" role="contentinfo" aria-label={ariaLabel}>
+<address class="not-italic mb-5" role="group" aria-label={ariaLabel}>
   <div class="flex items-start gap-3">
     {author && (author.image ? (
       <Image