fix: change export ariaLabel (#1046)

src/lib/breadcrumbs/Breadcrumb.svelte

@@ -5,10 +5,11 @@
   export let navClass: string = 'flex';
   export let solidClass: string = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
   export let olClass: string = 'inline-flex items-center space-x-1 md:space-x-3';
+  export let ariaLabel: string = 'Breadcrumb'; 
   let classNav: string = solid ? solidClass : navClass;
 </script>
 
-<nav aria-label="Breadcrumb" {...$$restProps} class={twMerge(classNav, $$props.class)}>
+<nav aria-label={ariaLabel} {...$$restProps} class={twMerge(classNav, $$props.class)}>
   <ol class={twMerge(olClass, $$props.classOl)}>
     <slot />
   </ol>

src/lib/carousels/Carousel.svelte

@@ -21,7 +21,8 @@
   export let index: number = 0;
   export let transition: TransitionFunc = (x) => fade(x, { duration: 700, easing: quintOut });
   export let duration: number = 0;
-
+  export let ariaLabel: string = 'Draggable Carousel'; 
+  
   // Carousel
   let divClass: string = 'overflow-hidden relative rounded-lg h-56 sm:h-64 xl:h-80 2xl:h-96';
 
@@ -146,7 +147,7 @@
 
 <!-- The move listeners go here, so things keep working if the touch strays out of the element. -->
 <svelte:document on:mousemove={onDragMove} on:mouseup={onDragStop} on:touchmove={onDragMove} on:touchend={onDragStop} />
-<div bind:this={carouselDiv} class="relative" on:mousedown={onDragStart} on:touchstart|passive={onDragStart} role="button" aria-label="Draggable Carousel" tabindex="0">
+<div bind:this={carouselDiv} class="relative" on:mousedown={onDragStart} on:touchstart|passive={onDragStart} role="button" aria-label={ariaLabel} tabindex="0">
   <div style={`transform: translateX(${percentOffset}%)`} {...$$restProps} class={twMerge(divClass, activeDragGesture === undefined ? 'transition-transform' : '', $$props.class)} use:loop={duration}>
     {#key images[index]}
       <img alt="..." {...images[index]} transition:transition={{}} class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 object-cover" />

src/lib/carousels/Thumbnails.svelte

@@ -5,6 +5,7 @@
 
   export let images: HTMLImgAttributes[] = [];
   export let index: number = 0;
+  export let ariaLabel: string = 'Click to view image';
 
   $: index = (index + images.length) % images.length;
 </script>
@@ -13,7 +14,7 @@
   {#each images as image, idx}
     {@const selected = index === idx}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <button on:click={() => (index = idx)} aria-label="Click to view image">
+    <button on:click={() => (index = idx)} aria-label={ariaLabel}>
       <slot {Thumbnail} {image} {selected}>
         <Thumbnail {...image} {selected} />
       </slot>

src/lib/darkmode/DarkMode.svelte

@@ -3,6 +3,7 @@
 
   export let btnClass: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
   export let size: 'sm' | 'md' | 'lg' = 'md';
+  export let ariaLabel: string = 'Dark mode';
 
   const sizes = {
     sm: 'w-4 h-4',
@@ -28,7 +29,7 @@
   </script>
 </svelte:head>
 
-<button on:click={toggleTheme} aria-label="Dark mode" type="button" {...$$restProps} class={twMerge(btnClass, $$props.class)}>
+<button on:click={toggleTheme} aria-label={ariaLabel} type="button" {...$$restProps} class={twMerge(btnClass, $$props.class)}>
   <span class="hidden dark:block">
     <slot name="lightIcon">
       <svg class={sizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">

src/lib/paginations/Pagination.svelte

@@ -10,6 +10,7 @@
   export let ulClass: string = 'inline-flex -space-x-px items-center';
   export let table: boolean = false;
   export let large: boolean = false;
+  export let ariaLabel: string = 'Page navigation';
 
   const dispatch = createEventDispatcher();
 
@@ -24,7 +25,7 @@
   };
 </script>
 
-<nav aria-label="Page navigation">
+<nav aria-label={ariaLabel}>
   <ul class={twMerge(ulClass, table && 'divide-x dark divide-gray-700 dark:divide-gray-700', $$props.class)}>
     <li>
       <PaginationItem {large} on:click={previous} {normalClass} class={table ? 'rounded-l' : 'rounded-l-lg'}>

src/lib/sidebars/Sidebar.svelte

@@ -16,6 +16,7 @@
   export let asideClass: string = 'w-64';
   export let nonActiveClass: string = 'flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
   export let activeClass: string = 'flex items-center p-2 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
+  export let ariaLabel: string = 'Sidebar';
 
   setContext<SidebarType>('sidebarContext', { activeClass, nonActiveClass });
 
@@ -25,7 +26,7 @@
   setContext('activeUrl', activeUrlStore);
 </script>
 
-<aside {...$$restProps} class={twMerge(asideClass, $$props.class)} aria-label="Sidebar">
+<aside {...$$restProps} class={twMerge(asideClass, $$props.class)} aria-label={ariaLabel}>
   <slot />
 </aside>