@yatoday/astro-ui 0.13.1 → 0.13.3

package/components/BackToTopButton/BackToTopButton.astro

@@ -62,6 +62,8 @@ const { selector = '#header', scrollOffset = 450 } = Astro.props;
   data-yt-scroll
   data-yt-scroll-offset={scrollOffset}
   data-yt-scroll-selector={selector}
+  aria-label="Back to top"
+  title="Back to top"
 >
   <svg viewBox="0 0 40 40" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <circle cx="20" cy="20" r="19" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"></circle>

package/components/HeroSection/HeroSection.astro

@@ -12,6 +12,7 @@ const {
   title = await Astro.slots.render('title'),
   description = await Astro.slots.render('description'),
   callToAction,
+  isFirstSlide = false,
 } = Astro.props;
 
 const urlForImage = Array.isArray(callToAction)
@@ -103,8 +104,9 @@ const WrapperHeaderTag = asHeader;
                     height={400}
                     sizes="(max-width: 900px) 400px, 900px"
                     layout="cover"
-                    loading="lazy"
-                    decoding="async"
+                    loading={isFirstSlide ? "eager" : "lazy"}
+                    fetchpriority={isFirstSlide ? "high" : undefined}
+                    decoding={isFirstSlide ? "sync" : "async"}
                     {...image}
                   />
                 )}
@@ -121,8 +123,9 @@ const WrapperHeaderTag = asHeader;
                     height={400}
                     sizes="(max-width: 900px) 400px, 900px"
                     layout="cover"
-                    loading="lazy"
-                    decoding="async"
+                    loading={isFirstSlide ? "eager" : "lazy"}
+                    fetchpriority={isFirstSlide ? "high" : undefined}
+                    decoding={isFirstSlide ? "sync" : "async"}
                     {...image}
                   />
                 )}

package/components/HeroSection/types.ts

@@ -11,6 +11,7 @@ export type HeroSectionProps = {
   image: Image | string;
   callToAction?: string | ToAction | Array<string | ToAction>;
   classes?: Record<string, string>;
+  isFirstSlide?: boolean;
 };
 
 export type SvelteHeroSectionProps = WithElementRef<HTMLAttributes<HTMLDivElement>> &

package/components/ImageGalleryIkea/ImageGalleryIkea.svelte

@@ -19,7 +19,7 @@
 
   onMount(async () => {
     const { register } = await import('swiper/element/bundle');
-    const { on, get } = await import('~/utils');
+    const { on, get } = await import('../../utils');
 
     register();
 

package/components/SwiperSlider/SwiperSlider.astro

@@ -24,6 +24,13 @@ const {
           prevEl: `#btn-prev-${id}`,
         })
       : false}
+    a11y={JSON.stringify({
+      enabled: true,
+      prevSlideMessage: 'Previous slide',
+      nextSlideMessage: 'Next slide',
+      firstSlideMessage: 'This is the first slide',
+      lastSlideMessage: 'This is the last slide',
+    })}
     breakpoints={JSON.stringify({
       // 640: sm
       // 768: sm
@@ -58,6 +65,8 @@ const {
           type="button"
           id={`btn-prev-${id}`}
           class="btn-shadow hidden md:flex items-center justify-center cursor-pointer absolute -left-5 top-1/2 -translate-y-1/2 z-10 w-12 h-12 bg-white text-black rounded-full transition-opacity opacity-0"
+          aria-label="Previous slide"
+          title="Previous slide"
         >
           <Icon name="tabler:chevron-left" class="w-7 h-7" />
         </button>
@@ -65,6 +74,8 @@ const {
           type="button"
           id={`btn-next-${id}`}
           class="btn-shadow hidden md:flex items-center justify-center cursor-pointer absolute -right-5 top-1/2 -translate-y-1/2 z-10 w-12 h-12 bg-white text-black rounded-full transition-opacity "
+          aria-label="Next slide"
+          title="Next slide"
         >
           <Icon name="tabler:chevron-right" class="w-7 h-7" />
         </button>
@@ -88,23 +99,30 @@ const {
         elem.addEventListener(
           'swiperreachend',
           () => {
-            removeClasses(`#btn-next-${id}`, 'opacity-100');
-            addClasses(`#btn-next-${id}`, 'opacity-0');
+            // Use requestAnimationFrame to batch DOM updates and prevent forced reflow
+            requestAnimationFrame(() => {
+              removeClasses(`#btn-next-${id}`, 'opacity-100');
+              addClasses(`#btn-next-${id}`, 'opacity-0');
+            });
           },
           false
         );
         elem.addEventListener(
           'swiperreachbeginning',
           () => {
-            addClasses(`#btn-prev-${id}`, 'opacity-0');
+            requestAnimationFrame(() => {
+              addClasses(`#btn-prev-${id}`, 'opacity-0');
+            });
           },
           false
         );
         elem.addEventListener(
           'swiperfromedge',
           () => {
-            removeClasses(`#btn-prev-${id}`, 'opacity-0');
-            addClasses(`#btn-next-${id}`, 'opacity-100');
+            requestAnimationFrame(() => {
+              removeClasses(`#btn-prev-${id}`, 'opacity-0');
+              addClasses(`#btn-next-${id}`, 'opacity-100');
+            });
           },
           false
         );

package/components/WidgetHeroSlider/WidgetHeroSlider.astro

@@ -130,6 +130,13 @@ const {
             prevEl: `#btn-prev-${id}`,
           })
         : false}
+      a11y={JSON.stringify({
+        enabled: true,
+        prevSlideMessage: 'Previous slide',
+        nextSlideMessage: 'Next slide',
+        firstSlideMessage: 'This is the first slide',
+        lastSlideMessage: 'This is the last slide',
+      })}
       breakpoints={JSON.stringify({
         // 640: sm
         // 768: sm
@@ -145,11 +152,12 @@ const {
       {...rest}
     >
       {
-        items.map((item) => (
+        items.map((item, index) => (
           <swiper-slide>
             <HeroSection
               {...item}
               classes={{ ...item?.classes, container: cn('rounded-xl', item?.classes?.container, height) }}
+              isFirstSlide={index === 0}
             />
           </swiper-slide>
         ))
@@ -164,11 +172,15 @@ const {
             type="button"
             id={`btn-prev-${id}`}
             class="btn-navigation btn-prev hidden lg:block cursor-pointer absolute z-10 w-10 h-10 bg-transparent border-2 border-white rounded-full shadow-sm transition-opacity opacity-20 hover:opacity-100 group-hover:opacity-100"
+            aria-label="Previous slide"
+            title="Previous slide"
           />
           <button
             type="button"
             id={`btn-next-${id}`}
             class="btn-navigation btn-next hidden lg:block cursor-pointer absolute z-10 w-10 h-10 bg-transparent border-2 border-white rounded-full shadow-sm transition-opacity opacity-20 hover:opacity-100 group-hover:opacity-100"
+            aria-label="Next slide"
+            title="Next slide"
           />
         </Fragment>
       )

package/components/WidgetNavbar/WidgetNavbar.astro

@@ -193,11 +193,14 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
     let ticking = true;
 
     attachEvent('[data-yt-toggle-menu]', 'click', (_: Event, elem: HTMLElement) => {
-      toggleClasses(elem, 'expanded');
-      toggleClasses(document.body, 'overflow-hidden');
-      toggleClasses(document.getElementById('header'), 'h-screen', 'expanded');
-      toggleClasses('[data-yt-sticky-header] nav', 'hidden');
-      toggleClasses('[data-yt-actions]', 'hidden');
+      // Batch DOM updates to prevent forced reflow
+      requestAnimationFrame(() => {
+        toggleClasses(elem, 'expanded');
+        toggleClasses(document.body, 'overflow-hidden');
+        toggleClasses(document.getElementById('header'), 'h-screen', 'expanded');
+        toggleClasses('[data-yt-sticky-header] nav', 'hidden');
+        toggleClasses('[data-yt-actions]', 'hidden');
+      });
     });
 
     attachEvent('[data-yt-sticky-header] nav', 'click', () => {
@@ -209,11 +212,14 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
     });
 
     function hiddenNav() {
-      removeClasses('[data-yt-toggle-menu]', 'expanded');
-      removeClasses(document.body, 'overflow-hidden');
-      removeClasses(document.getElementById('header'), 'h-screen', 'expanded');
-      addClasses('[data-yt-sticky-header] nav', 'hidden');
-      addClasses('[data-yt-actions]', 'hidden');
+      // Batch DOM updates to prevent forced reflow
+      requestAnimationFrame(() => {
+        removeClasses('[data-yt-toggle-menu]', 'expanded');
+        removeClasses(document.body, 'overflow-hidden');
+        removeClasses(document.getElementById('header'), 'h-screen', 'expanded');
+        addClasses('[data-yt-sticky-header] nav', 'hidden');
+        addClasses('[data-yt-actions]', 'hidden');
+      });
     }
 
     function applyHeaderStylesOnScroll() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yatoday/astro-ui",
   "type": "module",
-  "version": "0.13.1",
+  "version": "0.13.3",
   "scripts": {
     "prepare": "husky",
     "pre-commit": "lint-staged",