@commonpub/layer 0.3.17 → 0.3.18

package/components/MessageThread.vue

@@ -54,7 +54,7 @@ function handleSend(): void {
         aria-label="Message"
         @keyup.enter="handleSend"
       />
-      <button class="cpub-btn cpub-btn-primary" :disabled="!newMessage.trim()" @click="handleSend">
+      <button class="cpub-btn cpub-btn-primary" :disabled="!newMessage.trim()" aria-label="Send message" @click="handleSend">
         <i class="fa-solid fa-paper-plane"></i>
       </button>
     </div>

package/components/views/ArticleView.vue

@@ -132,15 +132,15 @@ useJsonLd({
       <div class="cpub-engagement-row">
         <div class="cpub-eng-stat"><i class="fa-regular fa-eye"></i> {{ content.viewCount?.toLocaleString() || '0' }} views</div>
         <div class="cpub-eng-sep"></div>
-        <button class="cpub-eng-btn" :class="{ liked }" @click="toggleLike">
+        <button class="cpub-eng-btn" :class="{ liked }" :aria-label="liked ? 'Unlike' : 'Like'" :aria-pressed="liked" @click="toggleLike">
           <i class="fa-solid fa-heart"></i> {{ likeCount }}
         </button>
-        <button class="cpub-eng-btn" :class="{ bookmarked }" @click="toggleBookmark">
+        <button class="cpub-eng-btn" :class="{ bookmarked }" :aria-label="bookmarked ? 'Remove bookmark' : 'Bookmark'" :aria-pressed="bookmarked" @click="toggleBookmark">
           <i class="fa-solid fa-bookmark"></i> Bookmark
         </button>
         <div class="cpub-eng-spacer"></div>
-        <button class="cpub-eng-btn" @click="share"><i class="fa-solid fa-share-nodes"></i> Share</button>
-        <button class="cpub-eng-btn"><i class="fa-solid fa-ellipsis"></i></button>
+        <button class="cpub-eng-btn" aria-label="Share" @click="share"><i class="fa-solid fa-share-nodes"></i> Share</button>
+        <button class="cpub-eng-btn" aria-label="More options"><i class="fa-solid fa-ellipsis"></i></button>
       </div>
 
       <!-- ARTICLE BODY WITH TOC SIDEBAR -->

package/components/views/BlogView.vue

@@ -85,15 +85,15 @@ const hasSeries = computed(() => !!seriesTitle.value && seriesTotalParts.value >
       <div class="cpub-engagement-row">
         <div class="cpub-eng-stat"><i class="fa-regular fa-eye"></i> {{ content.viewCount?.toLocaleString() || '0' }} views</div>
         <div class="cpub-eng-sep"></div>
-        <button class="cpub-eng-btn" :class="{ liked }" @click="toggleLike">
+        <button class="cpub-eng-btn" :class="{ liked }" :aria-label="liked ? 'Unlike' : 'Like'" :aria-pressed="liked" @click="toggleLike">
           <i class="fa-solid fa-heart"></i> {{ likeCount }}
         </button>
-        <button class="cpub-eng-btn" :class="{ bookmarked }" @click="toggleBookmark">
+        <button class="cpub-eng-btn" :class="{ bookmarked }" :aria-label="bookmarked ? 'Remove bookmark' : 'Bookmark'" :aria-pressed="bookmarked" @click="toggleBookmark">
           <i class="fa-solid fa-bookmark"></i> Bookmark
         </button>
         <div class="cpub-eng-spacer"></div>
-        <button class="cpub-eng-btn" @click="share"><i class="fa-solid fa-share-nodes"></i> Share</button>
-        <button class="cpub-eng-btn"><i class="fa-solid fa-ellipsis"></i></button>
+        <button class="cpub-eng-btn" aria-label="Share" @click="share"><i class="fa-solid fa-share-nodes"></i> Share</button>
+        <button class="cpub-eng-btn" aria-label="More options"><i class="fa-solid fa-ellipsis"></i></button>
       </div>
 
       <!-- BLOG BODY (PROSE) -->

package/components/views/ExplainerView.vue

@@ -168,21 +168,21 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
       <span class="cpub-progress-text">Section {{ activeSection + 1 }} of {{ totalSections }}</span>
       <div class="cpub-topbar-divider"></div>
       <div class="cpub-nav-btn-group">
-        <button class="cpub-icon-btn" :disabled="activeSection === 0" title="Previous section" @click="prevSection">
+        <button class="cpub-icon-btn" :disabled="activeSection === 0" aria-label="Previous section" @click="prevSection">
           <i class="fa-solid fa-arrow-left"></i>
         </button>
-        <button class="cpub-icon-btn" :disabled="activeSection === totalSections - 1" title="Next section" @click="nextSection">
+        <button class="cpub-icon-btn" :disabled="activeSection === totalSections - 1" aria-label="Next section" @click="nextSection">
           <i class="fa-solid fa-arrow-right"></i>
         </button>
       </div>
       <div class="cpub-topbar-divider"></div>
-      <button class="cpub-icon-btn" :class="{ active: liked }" title="Like" @click="toggleLike">
+      <button class="cpub-icon-btn" :class="{ active: liked }" :aria-label="liked ? 'Unlike' : 'Like'" :aria-pressed="liked" @click="toggleLike">
         <i :class="liked ? 'fa-solid fa-heart' : 'fa-regular fa-heart'"></i>
       </button>
-      <button class="cpub-icon-btn" :class="{ active: bookmarked }" title="Bookmark" @click="toggleBookmark">
+      <button class="cpub-icon-btn" :class="{ active: bookmarked }" :aria-label="bookmarked ? 'Remove bookmark' : 'Bookmark'" :aria-pressed="bookmarked" @click="toggleBookmark">
         <i :class="bookmarked ? 'fa-solid fa-bookmark' : 'fa-regular fa-bookmark'"></i>
       </button>
-      <button class="cpub-icon-btn" title="Share" @click="share">
+      <button class="cpub-icon-btn" aria-label="Share" @click="share">
         <i class="fa-solid fa-arrow-up-from-bracket"></i>
       </button>
       <NuxtLink
@@ -208,14 +208,14 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
             class="cpub-toc-item"
             :class="{ completed: completedSections.has(i), active: activeSection === i }"
           >
-            <a @click="goToSection(i)">
+            <button type="button" :aria-label="`Go to section ${i + 1}: ${section.title}`" @click="goToSection(i)">
               <span class="cpub-toc-icon">
                 <i v-if="completedSections.has(i)" class="fa-solid fa-check"></i>
                 <i v-else-if="activeSection === i" class="fa-solid fa-arrow-right"></i>
               </span>
               <span class="cpub-toc-num">{{ String(i + 1).padStart(2, '0') }}</span>
               <span class="cpub-toc-label">{{ section.title }}</span>
-            </a>
+            </button>
           </li>
         </ul>
 
@@ -291,14 +291,17 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
               </button>
               <div v-else></div>
 
-              <div class="cpub-progress-dots">
-                <div
+              <div class="cpub-progress-dots" role="group" aria-label="Section progress">
+                <button
                   v-for="(_, i) in totalSections"
                   :key="i"
+                  type="button"
                   class="cpub-dot"
                   :class="{ done: completedSections.has(i), active: i === activeSection }"
+                  :aria-label="`Section ${i + 1}`"
+                  :aria-current="i === activeSection ? 'step' : undefined"
                   @click="goToSection(i)"
-                ></div>
+                ></button>
               </div>
 
               <button v-if="activeSection < totalSections - 1" class="cpub-next-btn" @click="nextSection">
@@ -430,22 +433,26 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
   border-bottom: 1px solid var(--border);
 }
 .cpub-toc-list { list-style: none; padding: 6px 0; }
-.cpub-toc-item a {
+.cpub-toc-item button {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 14px;
-  text-decoration: none;
+  width: 100%;
+  background: none;
+  border: none;
+  text-align: left;
   color: var(--text-dim);
   font-size: 12px;
+  font-family: inherit;
   line-height: 1.4;
   border-left: 3px solid transparent;
   transition: background 0.1s, color 0.1s, border-color 0.1s;
   cursor: pointer;
 }
-.cpub-toc-item a:hover { background: var(--surface2); color: var(--text); }
-.cpub-toc-item.active a { background: var(--accent-bg); border-left-color: var(--accent); color: var(--accent); font-weight: 500; }
-.cpub-toc-item.completed a { color: var(--text-dim); }
+.cpub-toc-item button:hover { background: var(--surface2); color: var(--text); }
+.cpub-toc-item.active button { background: var(--accent-bg); border-left-color: var(--accent); color: var(--accent); font-weight: 500; }
+.cpub-toc-item.completed button { color: var(--text-dim); }
 .cpub-toc-icon { width: 14px; font-size: 10px; flex-shrink: 0; text-align: center; }
 .cpub-toc-item.completed .cpub-toc-icon { color: var(--green); }
 .cpub-toc-item.active .cpub-toc-icon { color: var(--accent); }
@@ -669,6 +676,8 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
 .cpub-dot {
   width: 7px;
   height: 7px;
+  padding: 0;
+  border: none;
   border-radius: 50%;
   background: var(--border2);
   transition: background 0.15s, transform 0.15s;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.3.17",
+  "version": "0.3.18",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -44,15 +44,15 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/auth": "0.5.0",
     "@commonpub/config": "0.7.0",
+    "@commonpub/auth": "0.5.0",
     "@commonpub/docs": "0.5.2",
     "@commonpub/editor": "0.5.0",
     "@commonpub/protocol": "0.9.4",
-    "@commonpub/server": "2.12.1",
     "@commonpub/learning": "0.5.0",
+    "@commonpub/schema": "0.8.12",
     "@commonpub/ui": "0.7.1",
-    "@commonpub/schema": "0.8.12"
+    "@commonpub/server": "2.12.1"
   },
   "scripts": {}
 }

package/pages/mirror/[id].vue

@@ -162,7 +162,7 @@ useSeoMeta({
 .cpub-mirror-title { font-size: 2rem; font-weight: 800; line-height: 1.2; margin-bottom: 12px; }
 .cpub-mirror-desc { font-size: 1.0625rem; color: var(--text-dim); line-height: 1.6; margin-bottom: 16px; }
 .cpub-mirror-author { font-size: 0.875rem; color: var(--text-dim); margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 12px; }
-.cpub-mirror-author-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: var(--border-width-default) solid var(--border); flex-shrink: 0; }
+.cpub-mirror-author-avatar { width: 40px; height: 40px; object-fit: cover; border: var(--border-width-default) solid var(--border); flex-shrink: 0; }
 .cpub-mirror-bio { font-size: 0.8125rem; color: var(--text-faint); line-height: 1.5; margin-top: 4px; }
 .cpub-mirror-bio :deep(a) { color: var(--accent); }
 .cpub-mirror-handle { color: var(--text-faint); margin-left: 6px; }