Merge pull request #89 from markteekman/fix/ios-animations-and-view-t…

…ransitions Fix/ios animations and view transitions
incluud · Dec 13, 2024 · dfb2d25 · dfb2d25
2 parents b4d7c04 + 3bf4f68
commit dfb2d25
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 4 deletions.
diff --git a/AccordionItem.astro b/AccordionItem.astro
@@ -32,7 +32,6 @@ const { name, title } = Astro.props
 
 <style is:global>
   .accordion__wrapper {
-    padding-block: 0.75rem;
     border-top: 2px solid light-dark(#202020, #dddddd);
     interpolate-size: allow-keywords;
 
@@ -61,7 +60,15 @@ const { name, title } = Astro.props
 
   .accordion__title {
     display: flex;
+    padding-block: 0.75rem;
     cursor: pointer;
+    list-style: none;
+
+    &::marker,
+    &::-webkit-details-marker {
+      display: none;
+      content: '';
+    }
 
     &:where(:hover, :focus-visible) {
       h3 {
@@ -97,7 +104,8 @@ const { name, title } = Astro.props
       }
 
       &:last-of-type {
-        transform: translateY(-50%);
+        --rotation: 0deg;
+        transform: translateY(-50%) rotate(var(--rotation));
 
         @media (prefers-reduced-motion: no-preference) {
           transition: transform 0.2s ease-in-out, inset-block-start 0.2s ease-in-out;
@@ -107,6 +115,8 @@ const { name, title } = Astro.props
   }
 
   .accordion__content {
+    padding: 0 0 1.5rem 2.2rem;
+
     a {
       display: inline-block;
     }
@@ -115,4 +125,10 @@ const { name, title } = Astro.props
       margin-block-start: 0.75rem;
     }
   }
+
+  .accordion__wrapper[open] {
+    .accordion__title-icon svg:last-of-type {
+      --rotation: 90deg;
+    }
+  }
 </style>
diff --git a/Modal.astro b/Modal.astro
@@ -173,6 +173,18 @@ const { triggerId, title, closeText = 'Close' } = Astro.props
       transition-behavior: allow-discrete;
       translate: 0 var(--translate-offset-y);
     }
+
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border-width: 0;
+    }
   }
 
   .modal[open] {

diff --git a/Tabs.astro b/Tabs.astro
@@ -37,7 +37,9 @@ const { class: className } = Astro.props
     focus(): void
   }
 
-  document.querySelectorAll<HTMLElement>('.tabs').forEach((component) => {
+  document.querySelectorAll<HTMLElement>('.tabs').forEach(initializeTabComponent)
+
+  function initializeTabComponent(component: HTMLElement) {
     const tabList = component.querySelector<HTMLElement>('[role="tablist"]')
     const tabs = [...component.querySelectorAll<TabElement>('[role="tab"]')]
     const tabPanels = [...component.querySelectorAll<HTMLElement>('[role="tabpanel"]')]
@@ -92,5 +94,9 @@ const { class: className } = Astro.props
       const targetPanel = component.querySelector<HTMLElement>(`#${nextTab.getAttribute('aria-controls')}`)
       targetPanel?.setAttribute('aria-hidden', 'false')
     }
+  }
+
+  document.addEventListener('astro:after-swap', () => {
+    document.querySelectorAll<HTMLElement>('.tabs').forEach(initializeTabComponent)
   })
 </script>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "accessible-astro-components",
   "description": "A set of Accessible, easy to use, Front-end UI Components for Astro.",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "author": "Mark Teekman",
   "homepage": "https://accessible-astro.netlify.app/accessible-components/",
   "type": "module",