@natjswenson/devlog 0.1.8 → 0.1.9

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to `@natjswenson/devlog` are documented here.
 
+## 0.1.9 (2026-06-05) — accessibility fix
+
+**Accessibility**
+- The drop-in React component (`examples/react/DevLogPage.jsx`) now exposes the expand/collapse entries as a proper disclosure control. Previously they were mouse-only — a bare `onClick` on `<article>` with no `role`, `tabIndex`, `aria-expanded`, or keyboard handler, so keyboard and screen-reader users could not operate the feed.
+  - The header carries `role="button"`, `tabIndex={0}`, `aria-expanded`, and `aria-controls` for screen-reader toggle semantics.
+  - `Enter`/`Space` toggle the focused entry (`preventDefault` on Space stops page scroll).
+  - `:focus-visible` outline makes keyboard focus visible.
+  - The toggle moved from the whole card to the header, so links inside an expanded entry are no longer nested in an interactive ancestor and text selection in the body works normally.
+- Visuals are unchanged: padding/hover/cursor moved from `.devlog-entry` to `.devlog-header`, with the redundant content padding zeroed so spacing matches.
+
 ## 0.1.8 (2026-05-01) — final hardening pass
 
 Closes the four Low-Hardening findings from the second adversarial verification:

package/examples/react/DevLogPage.css

@@ -75,33 +75,39 @@
 }
 
 .devlog-entry {
-  padding: 28px 0;
   border-bottom: 1px solid var(--devlog-border);
-  cursor: pointer;
-  transition: background var(--devlog-transition-fast);
 }
 
 .devlog-entry:first-child {
   border-top: 1px solid var(--devlog-border);
 }
 
-.devlog-entry:hover {
-  background: var(--devlog-bg-surface);
-}
-
-.devlog-entry--expanded,
-.devlog-entry--expanded:hover {
-  cursor: default;
-  background: none;
-}
-
-/* ─── Entry header ──────────────────────────────────────────────────── */
+/* ─── Entry header (the disclosure control) ─────────────────────────── */
 
 .devlog-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 24px;
+  padding: 28px 0;
+  cursor: pointer;
+  transition: background var(--devlog-transition-fast);
+}
+
+.devlog-header:hover {
+  background: var(--devlog-bg-surface);
+}
+
+.devlog-header:focus-visible {
+  outline: 2px solid var(--devlog-fg);
+  outline-offset: -2px;
+  border-radius: 4px;
+}
+
+.devlog-entry--expanded .devlog-header,
+.devlog-entry--expanded .devlog-header:hover {
+  cursor: default;
+  background: none;
 }
 
 .devlog-header__left {
@@ -163,8 +169,10 @@
   overflow: hidden;
 }
 
+/* Header already contributes 28px of bottom padding above this region,
+   so the expanded body sits flush against it. */
 .devlog-content {
-  padding-top: 24px;
+  padding-top: 0;
 }
 
 .devlog-content h2 {

package/examples/react/DevLogPage.jsx

@@ -81,6 +81,15 @@ export default function DevLogPage({
     }
   }, [expandedEntry, loadedContent, fetchEntryContent]);
 
+  // Enter/Space toggle the focused entry — keyboard parity with the click
+  // handler. preventDefault on Space stops the page from scrolling.
+  const handleKeyDown = useCallback((e, filename) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleToggle(filename);
+    }
+  }, [handleToggle]);
+
   const visibleEntries = entries.slice(0, visibleCount);
   const hasMore = visibleCount < entries.length;
   const showTabs = projects && projects.length > 1;
@@ -132,14 +141,28 @@ export default function DevLogPage({
             {visibleEntries.map((entry) => {
               const isExpanded = expandedEntry === entry.file;
               const content = loadedContent.get(entry.file);
+              const contentId = `devlog-content-${entry.file}`;
 
               return (
                 <article
                   key={entry.file}
                   className={`devlog-entry${isExpanded ? ' devlog-entry--expanded' : ''}`}
-                  onClick={() => handleToggle(entry.file)}
                 >
-                  <div className="devlog-header">
+                  {/* The header is the disclosure control: role=button +
+                      aria-expanded/aria-controls give screen readers the
+                      toggle semantics, and it's keyboard-focusable. Keeping
+                      it separate from the content region (rather than wrapping
+                      the whole card in onClick) means links inside an expanded
+                      entry aren't trapped inside an interactive ancestor. */}
+                  <div
+                    className="devlog-header"
+                    role="button"
+                    tabIndex={0}
+                    aria-expanded={isExpanded}
+                    aria-controls={contentId}
+                    onClick={() => handleToggle(entry.file)}
+                    onKeyDown={(e) => handleKeyDown(e, entry.file)}
+                  >
                     <div className="devlog-header__left">
                       <p className="devlog-date">{formatDate(entry.date)}</p>
                       <h2 className="devlog-title">{entry.title}</h2>
@@ -150,10 +173,10 @@ export default function DevLogPage({
                     </div>
                   </div>
 
-                  <div className="devlog-content-wrapper">
+                  <div className="devlog-content-wrapper" id={contentId}>
                     <div className="devlog-content-inner">
                       {isExpanded && content && (
-                        <div className="devlog-content" onClick={(e) => e.stopPropagation()}>
+                        <div className="devlog-content">
                           <ReactMarkdown
                             remarkPlugins={[remarkGfm]}
                             urlTransform={safeUrlTransform}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@natjswenson/devlog",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Daily dev log generator — Claude Code skill + preview app for publishing git-based dev logs to your site",
   "license": "MIT",
   "author": "Nate Swenson",