Feature

blocks/accordion/accordion.css

@@ -0,0 +1,57 @@
+.accordion details {
+  border: 1px solid var(--dark-color);
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.accordion details + details {
+  margin-top: 16px;
+}
+
+.accordion details summary {
+  position: relative;
+  padding: 0 16px;
+  padding-right: 48px;
+  cursor: pointer;
+  list-style: none;
+  overflow: auto;
+  transition: background-color 0.2s;
+}
+
+.accordion details[open] summary {
+  background-color: var(--light-color);
+}
+
+.accordion details summary:focus,
+.accordion details summary:hover {
+  background-color: var(--dark-color);
+}
+
+.accordion details summary::-webkit-details-marker {
+  display: none;
+}
+
+.accordion details summary::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 18px;
+  transform: translateY(-50%) rotate(135deg);
+  width: 9px;
+  height: 9px;
+  border: 2px solid;
+  border-width: 2px 2px 0 0;
+  transition: transform 0.2s;
+}
+
+.accordion details[open] summary::after {
+  transform: translateY(-50%) rotate(-45deg);
+}
+
+.accordion details .accordion-item-body {
+  padding: 0 16px;
+}
+
+.accordion details[open] .accordion-item-body {
+  border-top: 1px solid var(--dark-color);
+  background-color: var(--background-color);
+}

blocks/accordion/accordion.js

@@ -0,0 +1,33 @@
+/*
+ * Accordion Block
+ * Recreate an accordion
+ * https://www.hlx.live/developer/block-collection/accordion
+ */
+
+function hasWrapper(el) {
+  return !!el.firstElementChild && window.getComputedStyle(el.firstElementChild).display === 'block';
+}
+
+export default function decorate(block) {
+  [...block.children].forEach((row) => {
+    // decorate accordion item label
+    const label = row.children[0];
+    const summary = document.createElement('summary');
+    summary.className = 'accordion-item-label';
+    summary.append(...label.childNodes);
+    if (!hasWrapper(summary)) {
+      summary.innerHTML = `<p>${summary.innerHTML}</p>`;
+    }
+    // decorate accordion item body
+    const body = row.children[1];
+    body.className = 'accordion-item-body';
+    if (!hasWrapper(body)) {
+      body.innerHTML = `<p>${body.innerHTML}</p>`;
+    }
+    // decorate accordion item
+    const details = document.createElement('details');
+    details.className = 'accordion-item';
+    details.append(summary, body);
+    row.replaceWith(details);
+  });
+}

blocks/carousel/carousel.js

@@ -4,7 +4,7 @@ export default function decorate(block) {
   [...block.children].forEach((row, i) => {
     const classes = ['image', 'text'];
     classes.forEach((e, j) => {
-      row.children[j].classList.add(`carousel-${e}`);
+       row.children[j].classList.add(`carousel-${e}`);
     });
     /* buttons */
     const button = document.createElement('button');

blocks/tabs/tabs.css

@@ -1,30 +1,46 @@
-.tabs ul {
-    display: flex;
-    flex-wrap: wrap;
-    padding-left: 0;
-    list-style: none;
+.tabs .tabs-list {
+  display: flex;
+  gap: 8px;
+  max-width: 100%;
+  overflow-x: auto;
 }
 
-.tabs li {
-    box-sizing: border-box;
-    border-bottom: 1px solid transparent;
-    cursor: pointer;
+.tabs .tabs-list button {
+  flex: 0 0 max-content;
+  margin: 0;
+  border: 1px solid var(--dark-color);
+  border-radius: 0;
+  padding: 8px 16px;
+  background-color: var(--light-color);
+  color: initial;
+  font-size: unset;
+  font-weight: bold;
+  line-height: unset;
+  text-align: initial;
+  text-overflow: unset;
+  overflow: unset;
+  white-space: unset;
+  transition: background-color 0.2s;
 }
 
-.tabs li button {
-    font-size: 14px;
-    font-weight: unset;
-    text-transform: uppercase;
-    padding: 1em 1.5em;
-    max-height: 3pc;
-    min-width: 3pc;
-    border-radius: 0;
-    background: none;
-    color: black;
+.tabs .tabs-list button[aria-selected="true"] {
+  border-bottom: 1px solid var(--background-color);
+  background-color: var(--background-color);
+  cursor: initial;
 }
 
-.tabs li button.active {
-    border: none;
-    background-color: #202020;
-    color: #fff;
+.tabs .tabs-list button[aria-selected="false"]:hover,
+.tabs .tabs-list button[aria-selected="false"]:focus {
+  background-color: var(--dark-color);
+}
+
+.tabs .tabs-panel {
+  margin-top: -1px;
+  padding: 0 16px;
+  border: 1px solid var(--dark-color);
+  overflow: auto;
+}
+
+.tabs .tabs-panel[aria-hidden="true"] {
+  display: none;
 }

blocks/tabs/tabs.js

@@ -1,98 +1,54 @@
-/**
- * @typedef TabInfo
- * @property {string} name
- * @property {HTMLElement} $tab
- * @property {HTMLElement} $content
- */
+// eslint-disable-next-line import/no-unresolved
+import { toClassName } from '../../scripts/aem.js';
 
-/**
- * @param {HTMLElement} $block
- * @return {TabInfo[]}
- */
-export function createTabs($block) {
-  const $ul = $block.querySelector('ul');
-  if (!$ul) {
-    return null;
-  }
-  /** @type TabInfo[] */
-  const tabs = [...$ul.querySelectorAll('li')].map(($li) => {
-    const title = $li.textContent;
-    const name = title.toLowerCase().trim();
-    return {
-      title,
-      name,
-      $tab: $li,
-    };
-  });
-  // move $ul below section div
-  $block.replaceChildren($ul);
-
-  // search referenced sections and move them inside the tab-container
-  const $wrapper = $block.parentElement;
-  const $container = $wrapper.parentElement;
-  const $sections = document.querySelectorAll('[data-tab]');
-
-  // move the tab's sections before the tab riders.
-  [...$sections].forEach(($tabContent) => {
-    const name = $tabContent.dataset.tab.toLowerCase().trim();
-    /** @type TabInfo */
-    const tab = tabs.find((t) => t.name === name);
-    if (tab) {
-      const $el = document.createElement('div');
-      $el.classList.add('tab-item');
-      $el.append(...$tabContent.children);
-      $el.classList.add('hidden');
-      $container.insertBefore($el, $wrapper);
-      $tabContent.remove();
-      tab.$content = $el;
-    }
-  });
-  return tabs;
+function hasWrapper(el) {
+  return !!el.firstElementChild && window.getComputedStyle(el.firstElementChild).display === 'block';
 }
 
-/**
- * @param {HTMLElement} $block
- */
-export default function decorate($block) {
-  const tabs = createTabs($block);
-
-  // move the tab riders in front
-  const $wrapper = $block.parentElement;
-  const $container = $wrapper.parentElement;
-  $container.insertBefore($wrapper, $container.firstElementChild);
-
-  tabs.forEach((tab, index) => {
-    const $button = document.createElement('button');
-    const { $tab, title, name } = tab;
-    $button.textContent = title;
-    $tab.replaceChildren($button);
-
-    $button.addEventListener('click', () => {
-      const $activeButton = $block.querySelector('button.active');
-      const blockPosition = $block.getBoundingClientRect().top;
-      const offsetPosition = blockPosition + window.scrollY - 80;
-
-      if ($activeButton !== $tab) {
-        $activeButton.classList.remove('active');
-        $button.classList.add('active');
+export default async function decorate(block) {
+  // build tablist
+  const tablist = document.createElement('div');
+  tablist.className = 'tabs-list';
+  tablist.setAttribute('role', 'tablist');
+
+  // decorate tabs and tabpanels
+  const tabs = [...block.children].map((child) => child.firstElementChild);
+  tabs.forEach((tab, i) => {
+    const id = toClassName(tab.textContent);
+
+    // decorate tabpanel
+    const tabpanel = block.children[i];
+    tabpanel.className = 'tabs-panel';
+    tabpanel.id = `tabpanel-${id}`;
+    tabpanel.setAttribute('aria-hidden', !!i);
+    tabpanel.setAttribute('aria-labelledby', `tab-${id}`);
+    tabpanel.setAttribute('role', 'tabpanel');
+    if (!hasWrapper(tabpanel.lastElementChild)) {
+      tabpanel.lastElementChild.innerHTML = `<p>${tabpanel.lastElementChild.innerHTML}</p>`;
+    }
 
-        tabs.forEach((t) => {
-          if (name === t.name) {
-            t.$content.classList.remove('hidden');
-          } else {
-            t.$content.classList.add('hidden');
-          }
-          window.scrollTo({
-            top: offsetPosition,
-            behavior: 'smooth',
-          });
-        });
-      }
+    // build tab button
+    const button = document.createElement('button');
+    button.className = 'tabs-tab';
+    button.id = `tab-${id}`;
+    button.innerHTML = tab.innerHTML;
+    button.setAttribute('aria-controls', `tabpanel-${id}`);
+    button.setAttribute('aria-selected', !i);
+    button.setAttribute('role', 'tab');
+    button.setAttribute('type', 'button');
+    button.addEventListener('click', () => {
+      block.querySelectorAll('[role=tabpanel]').forEach((panel) => {
+        panel.setAttribute('aria-hidden', true);
+      });
+      tablist.querySelectorAll('button').forEach((btn) => {
+        btn.setAttribute('aria-selected', false);
+      });
+      tabpanel.setAttribute('aria-hidden', false);
+      button.setAttribute('aria-selected', true);
     });
-
-    if (index === 0) {
-      $button.classList.add('active');
-      tab.$content.classList.remove('hidden');
-    }
+    tablist.append(button);
+    tab.remove();
   });
+
+  block.prepend(tablist);
 }

fstab.yaml

@@ -1,2 +1,3 @@
 mountpoints:
-  /: https://adobe.sharepoint.com/:f:/r/sites/HelixProjects/Shared%20Documents/sites/adobe/wknd
+  /: https://adobe-my.sharepoint.com/:f:/r/personal/mpanchal_adobe_com/Documents/wknd
+