♿️ Improve accessibility of components

Author: Frontendland

src/components/Banner/Banner.astro

@@ -39,6 +39,7 @@ const style = top
             theme="flat"
             className={styles.close}
             data-id="w-banner-close"
+            aria-label="close"
         >
             <Fragment set:html={closeIcon} />
         </Button>

src/components/Banner/Banner.svelte

@@ -42,6 +42,7 @@
                 theme="flat"
                 className={styles.close}
                 onClick={() => visible = false}
+                aria-label="close"
             >
                 {@html closeIcon}
             </Button>

src/components/Banner/Banner.tsx

@@ -45,6 +45,7 @@ const Banner = ({
                     className={styles.close}
                     dangerouslySetInnerHTML={{ __html: closeIcon }}
                     onClick={() => setVisible(false)}
+                    aria-label="close"
                 />
             )}
         </div>

src/components/Copy/Copy.astro

@@ -38,6 +38,7 @@ const classes = classNames([
         <button
             class={styles['copy-icon']}
             data-id="w-copy"
+            aria-label="copy"
         >
             {copyIcon?.startsWith('<svg')
                 ? <Fragment set:html={copyIcon} />

src/components/Copy/Copy.svelte

@@ -54,9 +54,10 @@
     <span data-id="text">{@render children?.()}</span>
     <div class={styles.icons}>
         <button
-            class={styles['copy-icon']}
             bind:this={copyButton}
+            class={styles['copy-icon']}
             onclick={copyText}
+            aria-label="copy"
         >
             {@html copyIcon || copy}
         </button>

src/components/Copy/Copy.tsx

@@ -58,6 +58,7 @@ const Copy = ({
                     className={styles['copy-icon']}
                     ref={copyButton}
                     onClick={copyText}
+                    aria-label="copy"
                     dangerouslySetInnerHTML={{ __html: copyIcon || copy }}
                 />
                 <span

src/components/Modal/Modal.astro

@@ -58,6 +58,7 @@ const classes = [
             theme="flat"
             className={styles.close}
             data-id="close"
+            aria-label="close"
         >
             <Fragment set:html={closeIcon} />
         </Button>

src/components/Modal/Modal.svelte

@@ -59,6 +59,7 @@
             theme="flat"
             className={styles.close}
             data-id="close"
+            aria-label="close"
         >
             {@html closeIcon}
         </Button>

src/components/Modal/Modal.tsx

@@ -58,8 +58,9 @@ const Modal = ({
                     <Button
                         theme="flat"
                         className={styles.close}
-                        data-id="close"
                         dangerouslySetInnerHTML={{ __html: closeIcon }}
+                        data-id="close"
+                        aria-label="close"
                     />
                 )}
                 {title && (

src/components/Pagination/Pagination.astro

@@ -58,11 +58,12 @@ const generatedPages = pages?.length
 >
     {type === 'dots' ? (
         <Fragment>
-            {generatedPages?.map(page => (
+            {generatedPages?.map((page, index) => (
                 <li>
                     <button
                         data-active={page.active ? 'true' : undefined}
                         data-page={page.label}
+                        aria-label={`page ${index + 1}`}
                     />
                 </li>
             ))}

src/components/Pagination/Pagination.tsx

@@ -88,6 +88,7 @@ const Pagination = ({
                     {generatedPages?.map((_, index) => (
                         <li key={index}>
                             <button
+                                aria-label={`page ${index + 1}`}
                                 data-active={calculatedCurrentPage === index + 1 ? 'true' : null}
                                 onClick={calculatedCurrentPage !== index + 1
                                     ? () => paginate(index + 1)