♿️ Improve accessibility of components

Frontendland · Jan 17, 2025 · 3bf2f15 · 3bf2f15
1 parent 090fedf
commit 3bf2f15
Show file tree

Hide file tree

Showing 11 changed files with 14 additions and 3 deletions.
diff --git a/src/components/Banner/Banner.astro b/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>

diff --git a/src/components/Banner/Banner.svelte b/src/components/Banner/Banner.svelte
@@ -42,6 +42,7 @@
                 theme="flat"
                 className={styles.close}
                 onClick={() => visible = false}
+                aria-label="close"
             >
                 {@html closeIcon}
             </Button>

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

diff --git a/src/components/Copy/Copy.astro b/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} />

diff --git a/src/components/Copy/Copy.svelte b/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>

diff --git a/src/components/Copy/Copy.tsx b/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

diff --git a/src/components/Modal/Modal.astro b/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>

diff --git a/src/components/Modal/Modal.svelte b/src/components/Modal/Modal.svelte
@@ -59,6 +59,7 @@
             theme="flat"
             className={styles.close}
             data-id="close"
+            aria-label="close"
         >
             {@html closeIcon}
         </Button>

diff --git a/src/components/Modal/Modal.tsx b/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 && (

diff --git a/src/components/Pagination/Pagination.astro b/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>
             ))}

diff --git a/src/components/Pagination/Pagination.tsx b/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)