Merge pull request #1 from harshMortal/claude/review-project-01BM8eEJarbKn6fc9k9CkXQS

Improve all blocks with accessibility and code quality enhancements

Author: harshMortal

.eslintignore

@@ -1,6 +1,15 @@
 /* blocks/accordion/accordion.css */
 .accordion {
-  background: #fff;
+  --accordion-bg: #fff;
+  --accordion-header-bg: #f8f8f8;
+  --accordion-header-hover-bg: #efefef;
+  --accordion-border-color: #e0e0e0;
+  --accordion-accent-color: #ff6b35;
+  --accordion-text-color: #333;
+  --accordion-content-text: #666;
+  --accordion-focus-ring: #2c5f7c;
+
+  background: var(--accordion-bg);
   padding: 60px 20px;
 }
 
@@ -9,90 +18,96 @@
   margin: 0 auto;
 }
 
-.accordion > div > div:nth-child(odd) {
+.accordion .accordion-header {
   display: flex;
   align-items: center;
   gap: 20px;
   padding: 24px;
-  background: #f8f8f8;
-  border: 2px solid #e0e0e0;
+  background: var(--accordion-header-bg);
+  border: 2px solid var(--accordion-border-color);
   border-radius: 8px 8px 0 0;
   cursor: pointer;
   position: relative;
   margin-top: 16px;
-  transition: background 0.2s;
+  transition: background 0.2s, box-shadow 0.2s;
+}
+
+.accordion .accordion-header:hover {
+  background: var(--accordion-header-hover-bg);
 }
 
-.accordion > div > div:nth-child(odd):hover {
-  background: #efefef;
+.accordion .accordion-header:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--accordion-focus-ring);
+  z-index: 1;
 }
 
-.accordion > div > div:nth-child(odd):first-child {
+.accordion .accordion-header:first-child {
   margin-top: 0;
 }
 
-.accordion > div > div:nth-child(odd)::after {
+.accordion .accordion-header::after {
   content: '+';
   position: absolute;
   right: 24px;
   font-size: 36px;
   font-weight: bold;
-  color: #ff6b35;
+  color: var(--accordion-accent-color);
   line-height: 1;
   transition: transform 0.3s;
 }
 
-.accordion > div > div:nth-child(odd).active::after {
-  content: '−';
+.accordion .accordion-header.active::after {
+  content: '-';
   transform: rotate(180deg);
 }
 
-.accordion > div > div:nth-child(odd) img {
+.accordion .accordion-header img {
   width: 60px;
   height: 60px;
   object-fit: contain;
 }
 
-.accordion > div > div:nth-child(odd) strong {
+.accordion .accordion-header strong {
   font-size: 20px;
-  color: #333;
+  color: var(--accordion-text-color);
   flex: 1;
 }
 
-.accordion > div > div:nth-child(even) {
+.accordion .accordion-content {
   max-height: 0;
   overflow: hidden;
   padding: 0 24px;
-  border: 2px solid #e0e0e0;
+  border: 2px solid var(--accordion-border-color);
   border-top: none;
   border-radius: 0 0 8px 8px;
-  background: white;
+  background: var(--accordion-bg);
   transition: max-height 0.4s ease, padding 0.4s ease;
 }
 
-.accordion > div > div:nth-child(even).active {
+.accordion .accordion-content.active {
   max-height: 800px;
   padding: 24px;
 }
 
-.accordion > div > div:nth-child(even) p {
+.accordion .accordion-content p {
   margin: 0;
   line-height: 1.6;
-  color: #666;
+  color: var(--accordion-content-text);
 }
 
 @media (width < 768px) {
-  .accordion > div > div:nth-child(odd) {
+  .accordion .accordion-header {
     padding: 16px;
     gap: 12px;
   }
 
-  .accordion > div > div:nth-child(odd) img {
+  .accordion .accordion-header img {
     width: 40px;
     height: 40px;
   }
 
-  .accordion > div > div:nth-child(odd) strong {
+  .accordion .accordion-header strong {
     font-size: 16px;
   }
 }

.eslintrc.js

@@ -1,30 +1,115 @@
+/**
+ * Accordion Block
+ * Accessible accordion component with keyboard navigation
+ */
+
+let accordionIdCounter = 0;
+
+function generateId() {
+  accordionIdCounter += 1;
+  return `accordion-panel-${accordionIdCounter}`;
+}
+
+function toggleAccordion(header, content, children, forceState = null) {
+  const isActive = forceState !== null ? !forceState : header.classList.contains('active');
+
+  // Close all panels
+  children.forEach((child) => {
+    child.classList.remove('active');
+    if (child.hasAttribute('aria-expanded')) {
+      child.setAttribute('aria-expanded', 'false');
+    }
+  });
+
+  // Open clicked panel if it wasn't active
+  if (!isActive) {
+    header.classList.add('active');
+    header.setAttribute('aria-expanded', 'true');
+    content.classList.add('active');
+  }
+}
+
+function handleKeydown(e, header, content, children, headers) {
+  const currentIndex = headers.indexOf(header);
+
+  switch (e.key) {
+    case 'Enter':
+    case ' ':
+      e.preventDefault();
+      toggleAccordion(header, content, children);
+      break;
+    case 'ArrowDown':
+      e.preventDefault();
+      if (currentIndex < headers.length - 1) {
+        headers[currentIndex + 1].focus();
+      }
+      break;
+    case 'ArrowUp':
+      e.preventDefault();
+      if (currentIndex > 0) {
+        headers[currentIndex - 1].focus();
+      }
+      break;
+    case 'Home':
+      e.preventDefault();
+      headers[0].focus();
+      break;
+    case 'End':
+      e.preventDefault();
+      headers[headers.length - 1].focus();
+      break;
+    default:
+      break;
+  }
+}
+
 export default function decorate(block) {
   const container = block.querySelector(':scope > div');
   if (!container) return;
 
   const children = Array.from(container.children);
+  const headers = [];
+
+  // Set up accordion role
+  block.setAttribute('role', 'presentation');
 
   for (let i = 0; i < children.length; i += 2) {
     const header = children[i];
     const content = children[i + 1];
 
     if (header && content) {
-      header.addEventListener('click', () => {
-        const isActive = header.classList.contains('active');
+      const panelId = generateId();
 
-        // Close all
-        children.forEach((child) => child.classList.remove('active'));
+      // Set up header accessibility attributes
+      header.setAttribute('role', 'button');
+      header.setAttribute('tabindex', '0');
+      header.setAttribute('aria-expanded', 'false');
+      header.setAttribute('aria-controls', panelId);
+      header.classList.add('accordion-header');
+
+      // Set up content accessibility attributes
+      content.setAttribute('id', panelId);
+      content.setAttribute('role', 'region');
+      content.setAttribute('aria-labelledby', `${panelId}-header`);
+      header.setAttribute('id', `${panelId}-header`);
+      content.classList.add('accordion-content');
+
+      headers.push(header);
+
+      // Click handler
+      header.addEventListener('click', () => {
+        toggleAccordion(header, content, children);
+      });
 
-        // Open clicked if wasn't active
-        if (!isActive) {
-          header.classList.add('active');
-          content.classList.add('active');
-        }
+      // Keyboard handler
+      header.addEventListener('keydown', (e) => {
+        handleKeydown(e, header, content, children, headers);
       });
 
-      // Open first by default
+      // Open first panel by default
       if (i === 0) {
         header.classList.add('active');
+        header.setAttribute('aria-expanded', 'true');
         content.classList.add('active');
       }
     }

blocks/accordion/accordion.css

@@ -1,58 +1,89 @@
 /* blocks/cards/cards.css */
 .cards {
-  background: linear-gradient(135deg, #2c5f7c 0%, #1a3a4d 100%);
+  --cards-bg-start: #2c5f7c;
+  --cards-bg-end: #1a3a4d;
+  --cards-card-bg: #fff;
+  --cards-accent-color: #ff6b35;
+  --cards-accent-hover: #e55a28;
+  --cards-heading-color: #2c5f7c;
+  --cards-focus-ring: #fff;
+
+  background: linear-gradient(135deg, var(--cards-bg-start) 0%, var(--cards-bg-end) 100%);
   padding: 60px 20px;
 }
 
-.cards > div {
+.cards .cards-list {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 32px;
   max-width: 1200px;
   margin: 0 auto;
+  padding: 0;
+  list-style: none;
 }
 
-.cards > div > div {
-  background: white;
+.cards .cards-card {
+  background: var(--cards-card-bg);
   padding: 40px 32px;
   border-radius: 12px;
   box-shadow: 0 4px 16px rgb(0 0 0 / 15%);
   text-align: center;
-  border-top: 4px solid #ff6b35;
+  border-top: 4px solid var(--cards-accent-color);
   transition: transform 0.3s, box-shadow 0.3s;
 }
 
-.cards > div > div:hover {
+.cards .cards-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 8px 24px rgb(0 0 0 / 20%);
 }
 
-.cards img {
+.cards .cards-card:focus-within {
+  box-shadow: 0 0 0 3px var(--cards-focus-ring), 0 8px 24px rgb(0 0 0 / 20%);
+}
+
+.cards .cards-card-image img {
   width: 80px;
   height: 80px;
+  object-fit: contain;
 }
 
 .cards h4 {
   font-size: 18px;
   font-weight: bold;
-  color: #2c5f7c;
+  color: var(--cards-heading-color);
   margin: 16px 0;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
 
-.cards a {
+.cards .cards-card-link {
   display: inline-block;
   padding: 12px 32px;
-  background: #ff6b35;
+  background: var(--cards-accent-color);
   color: white;
   text-decoration: none;
   border-radius: 4px;
   font-weight: bold;
   text-transform: uppercase;
-  transition: background 0.3s;
+  transition: background 0.3s, box-shadow 0.2s;
+}
+
+.cards .cards-card-link:hover {
+  background: var(--cards-accent-hover);
+}
+
+.cards .cards-card-link:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--cards-heading-color);
 }
 
-.cards a:hover {
-  background: #e55a28;
+@media (width < 768px) {
+  .cards .cards-list {
+    grid-template-columns: 1fr;
+    gap: 24px;
+  }
+
+  .cards .cards-card {
+    padding: 32px 24px;
+  }
 }