mosaic reveal keyboard nav (#549)

* mosaic reveal keyboard nav * mosaic lint error fix * lint error fix * optimized the experience mosaic reveal
Esri · Feb 10, 2025 · 715351c · 715351c
1 parent 582eded
commit 715351c
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 26 deletions.
diff --git a/eds/blocks/mosaic-reveal/mosaic-reveal.css b/eds/blocks/mosaic-reveal/mosaic-reveal.css
@@ -31,11 +31,30 @@
 
 }
 
+.mosaic-reveal .mosaic-reveal-button,
+.mosaic-reveal .mosaic-contract-button {
+  background-color: transparent;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  block-size: 25px;
+  border-color: transparent;
+  content: "";
+  display: block;
+  inline-size: 25px;
+  inset-block-end: var(--space-5);
+  inset-inline-end: var(--space-5);
+  margin: 0;
+  padding: 0;
+  position: absolute;
+}
+
 .mosaic-reveal calcite-icon {
-  inset-block-end: var(--space-4);
-  inset-inline-end: var(--space-4);
+  block-size: 20px;
+  inline-size: 20px;
+  inset-block-end: var(--space-1);
+  inset-inline-end: var(--space-1);
   position: absolute;
-  z-index: 2;
 }
 
 .mosaic-reveal .mosaic-reveal-content {
@@ -45,13 +64,14 @@
   display: flex;
   flex-direction: column;
   inline-size: 100%;
-  inset-block-start: 0;
+  inset-block-end: 0;
   inset-inline-start: 0;
   justify-content: center;
   opacity: 1;
   position: absolute;
   transform-origin: 50% 100%;
   transition: 0.5s ease;
+  visibility: visible;
   z-index: 5;
 }
 
@@ -81,31 +101,17 @@
 }
 
 .mosaic-reveal .mosaic-reveal-content[aria-hidden="true"] {
-  inset-block-start: 100%;
+  block-size: 0;
   opacity: 0;
   pointer-events: none;
+  visibility: hidden;
 }
 
 .mosaic-reveal > div { /* stylelint-disable-line no-descending-specificity */
-  overflow: hidden;
+  overflow: unset;
   position: relative;
 }
 
-.mosaic-reveal > div::after {
-  background: linear-gradient(to bottom, #0000 66%, #000000b3 100%);
-  block-size: 100%;
-  content: "";
-  display: block;
-  inline-size: 100%;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  position: absolute;
-}
-
-.mosaic-reveal > div:last-child::after {
-  display: none;
-}
-
 .mosaic-reveal picture {
   block-size: calc(220px + 50vw - 180px);
   cursor: pointer;

diff --git a/eds/blocks/mosaic-reveal/mosaic-reveal.js b/eds/blocks/mosaic-reveal/mosaic-reveal.js
@@ -4,11 +4,14 @@ export default function decorate(block) {
   block.classList.add('calcite-mode-dark');
 
   [...block.children].forEach((child) => {
+    child.querySelector('h3').setAttribute('tabindex', '-1');
     const titleText = child.querySelector('h3').textContent;
 
     child.children[0].appendChild(h3({ class: 'title' }, titleText));
-
-    child.appendChild(domEl('calcite-icon', { icon: 'expand', scale: 's' }));
+    const expandButton = domEl('button', { class: 'mosaic-reveal-button' });
+    const icon = domEl('calcite-icon', { icon: 'expand', scale: 's' });
+    expandButton.appendChild(icon);
+    child.appendChild(expandButton);
   });
 
   const contents = [...block.children].map((child) => child.children[1]);
@@ -46,6 +49,8 @@ export default function decorate(block) {
   };
 
   [...block.children].forEach((child, idx) => {
+    const msrevealcontent = child.querySelector('.mosaic-reveal-content');
+    const mosaicTitle = msrevealcontent.querySelector('h3');
     child.addEventListener('click', () => {
       if (mediaQuery.matches) {
         revealContent.setAttribute('aria-hidden', 'false');
@@ -57,20 +62,36 @@ export default function decorate(block) {
     child.addEventListener('mouseenter', () => {
       if (!mediaQuery.matches) {
         child.querySelector('.mosaic-reveal-content').ariaHidden = false;
+        mosaicTitle.setAttribute('tabindex', '0');
+        setTimeout(() => {
+          mosaicTitle.focus();
+        }, 100);
       }
     });
 
     child.addEventListener('mouseleave', () => {
       if (!mediaQuery.matches) {
         child.querySelector('.mosaic-reveal-content').ariaHidden = true;
+        mosaicTitle.setAttribute('tabindex', '-1');
       }
     });
-  });
 
-  block.appendChild(revealContent);
+    child.querySelector('.mosaic-reveal-button').addEventListener('click', () => {
+      const event = new Event('mouseenter');
+      child.dispatchEvent(event);
+    });
+
+    child.querySelector('.mosaic-reveal-content').addEventListener('click', () => {
+      const event = new Event('mouseleave');
+      child.dispatchEvent(event);
+    });
+  });
 
   block.querySelectorAll('.mosaic-reveal-content').forEach((content) => {
     content.insertBefore(div({ class: 'content-bg' }), content.firstChild);
-    content.appendChild(domEl('calcite-icon', { icon: 'contract', scale: 's' }));
+    const contractButton = domEl('button', { class: 'mosaic-contract-button' });
+    const icon = domEl('calcite-icon', { icon: 'contract', scale: 's' });
+    contractButton.appendChild(icon);
+    content.appendChild(contractButton);
   });
 }