executable-stories-formatters 0.5.0 → 0.6.1

package/dist/index.js

@@ -721,37 +721,56 @@ function initSearch() {
 
 // Tag filter
 function initTagFilter() {
+  var toggleBtn = document.querySelector('.tag-bar-toggle');
+  var tagBar = document.querySelector('.tag-bar');
+  if (toggleBtn && tagBar) {
+    toggleBtn.addEventListener('click', function() {
+      var isCollapsed = tagBar.classList.toggle('tag-bar-collapsed');
+      toggleBtn.setAttribute('aria-expanded', String(!isCollapsed));
+    });
+  }
+
   document.querySelectorAll('.tag-pill').forEach(function(pill) {
     pill.addEventListener('click', function() {
       var tag = pill.dataset.tag;
       if (activeTags.has(tag)) {
         activeTags.delete(tag);
         pill.classList.remove('active');
+        pill.setAttribute('aria-pressed', 'false');
       } else {
         activeTags.add(tag);
         pill.classList.add('active');
+        pill.setAttribute('aria-pressed', 'true');
       }
-      updateClearButton();
+      updateTagBarState();
       applyAllFilters();
     });
   });
 
   var clearBtn = document.querySelector('.tag-bar-clear');
   if (clearBtn) {
-    clearBtn.addEventListener('click', function() {
+    clearBtn.addEventListener('click', function(e) {
+      e.stopPropagation();
       activeTags.clear();
-      document.querySelectorAll('.tag-pill.active').forEach(function(p) { p.classList.remove('active'); });
-      updateClearButton();
+      document.querySelectorAll('.tag-pill.active').forEach(function(p) {
+        p.classList.remove('active');
+        p.setAttribute('aria-pressed', 'false');
+      });
+      updateTagBarState();
       applyAllFilters();
     });
   }
 }
 
-function updateClearButton() {
+function updateTagBarState() {
   var clearBtn = document.querySelector('.tag-bar-clear');
+  var countBadge = document.querySelector('.tag-bar-count');
   if (clearBtn) {
     clearBtn.style.display = activeTags.size > 0 ? '' : 'none';
   }
+  if (countBadge) {
+    countBadge.textContent = activeTags.size > 0 ? activeTags.size + ' selected' : '';
+  }
 }
 
 // Status filter (clickable summary cards)
@@ -1452,7 +1471,24 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 0.5rem;
+}
+
+.tag-bar-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+}
+
+.tag-bar-toggle:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+  border-radius: var(--radius);
 }
 
 .tag-bar-label {
@@ -1463,26 +1499,58 @@ body {
   font-weight: 500;
 }
 
+.tag-bar-count {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--primary);
+}
+
+.tag-bar-chevron {
+  color: var(--muted-foreground);
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+}
+
+.tag-bar-collapsed .tag-bar-chevron {
+  transform: rotate(0deg);
+}
+
+.tag-bar:not(.tag-bar-collapsed) .tag-bar-chevron {
+  transform: rotate(180deg);
+}
+
 .tag-bar-clear {
   font-size: 0.75rem;
   font-weight: 500;
-  color: var(--primary);
-  background: none;
-  border: none;
+  color: var(--destructive, #dc2626);
+  background: var(--destructive-light, #fef2f2);
+  border: 1px solid var(--destructive-border, #fecaca);
   cursor: pointer;
-  padding: 0.125rem 0.5rem;
+  padding: 0.25rem 0.75rem;
   border-radius: var(--radius);
   transition: all 0.15s ease;
 }
 
 .tag-bar-clear:hover {
-  background: var(--muted);
+  background: var(--destructive-border, #fecaca);
+}
+
+.tag-bar-clear:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
 }
 
 .tag-bar-pills {
   display: flex;
   flex-wrap: wrap;
   gap: 0.375rem;
+  max-height: 200px;
+  overflow-y: auto;
+  margin-top: 0.5rem;
+}
+
+.tag-bar-collapsed .tag-bar-pills {
+  display: none;
 }
 
 .tag-pill {
@@ -1502,6 +1570,11 @@ body {
   background: var(--success-border);
 }
 
+.tag-pill:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
 .tag-pill.active {
   background: var(--primary);
   color: var(--primary-foreground);
@@ -2658,19 +2731,25 @@ function renderTagBar(args, deps) {
   const { tags, totalScenarios } = args;
   if (tags.length === 0) return "";
   const pills = tags.map(
-    (tag) => `<button type="button" class="tag-pill" data-tag="${deps.escapeHtml(tag)}">${deps.escapeHtml(tag)}</button>`
-  ).join("\n      ");
+    (tag) => `<button type="button" class="tag-pill" data-tag="${deps.escapeHtml(tag)}" aria-pressed="false">${deps.escapeHtml(tag)}</button>`
+  ).join("\n        ");
   return `
-<div class="tag-bar">
+<div class="tag-bar tag-bar-collapsed">
   <div class="tag-bar-header">
-    <span class="tag-bar-label">Filter by tag</span>
-    <button type="button" class="tag-bar-clear" style="display:none">Clear</button>
+    <button type="button" class="tag-bar-toggle" aria-expanded="false" aria-controls="tag-pills-region">
+      <span class="tag-bar-label">Filter by tag</span>
+      <span class="tag-bar-count" aria-live="polite"></span>
+      <svg class="tag-bar-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+        <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </button>
+    <button type="button" class="tag-bar-clear" aria-label="Clear all tag filters" style="display:none">Clear all</button>
   </div>
-  <div class="tag-bar-pills">
+  <div id="tag-pills-region" class="tag-bar-pills" role="group" aria-label="Tag filters">
     ${pills}
   </div>
 </div>
-<div class="filter-results" style="display:none">
+<div class="filter-results" style="display:none" aria-live="polite">
   Showing <span class="visible-count">0</span> of <span class="total-count">${totalScenarios}</span> scenarios
 </div>`;
 }