Add ariaLabel to <Button /> and <Checkbox />, edit index.html

daxter-army · Sep 15, 2023 · 9fc1e26 · 9fc1e26
1 parent eca4f29
commit 9fc1e26
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 9 deletions.
diff --git a/docs/assets/index-1f7a25a6.js → docs/assets/index-0734ae79.js b/docs/assets/index-1f7a25a6.js → docs/assets/index-0734ae79.js
diff --git a/docs/index.html b/docs/index.html
@@ -4,17 +4,16 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/react-cpp-wasm-app/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WASM Notes App | React + CPP</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;900&display=swap" rel="stylesheet">
-    <title>WASM Notes App | React + CPP</title>
+    <script type="module" crossorigin src="/react-cpp-wasm-app/assets/index-0734ae79.js"></script>
     <link rel="stylesheet" href="/react-cpp-wasm-app/assets/index-bfb5dfe7.css">
   </head>
   <body>
     <div id="root"></div>
     <!-- WASM Entrypoint, Naive Approach -->
     <script type="text/javascript" src="/react-cpp-wasm-app/wasm/wasm.js"></script>
-    <!-- Application Entrypoint -->
-    <script type="module" crossorigin src="/react-cpp-wasm-app/assets/index-1f7a25a6.js"></script>
   </body>
 </html>
diff --git a/index.html b/index.html
@@ -13,7 +13,6 @@
     <div id="root"></div>
     <!-- WASM Entrypoint, Naive Approach -->
     <script type="text/javascript" src="/wasm/wasm.js"></script>
-    <!-- Application Entrypoint -->
     <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>
diff --git a/src/App.jsx b/src/App.jsx
@@ -31,6 +31,7 @@ function App() {
         <div className={styles.headingWpr}>
           <Input value={value} setValue={setValue} placeholder={ENUMS.SEARCH_PLACEHOLDER} />
           <Button
+            ariaLabel="Add Todo"
             variant={ENUMS.ADD_NOTE}
             onClick={addTodoButtonHandler}
             isDisabled={value.length === 0}

diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx
@@ -2,7 +2,7 @@ import { ENUMS } from '@/enums';
 
 import styles from './Button.module.css';
 
-const Button = ({ variant, children, onClick, isDisabled = false }) => {
+const Button = ({ variant, children, onClick, isDisabled = false, ariaLabel = "button" }) => {
   const buttonStyles = {
     [ENUMS.ADD_NOTE]: styles.addBtn,
     [ENUMS.DISABLED]: styles.disabledBtn,
@@ -11,6 +11,7 @@ const Button = ({ variant, children, onClick, isDisabled = false }) => {
 
   return (
     <button
+      ariaLabel={ariaLabel}
       disabled={isDisabled}
       className={`${styles.buttonWpr} ${isDisabled ? buttonStyles.DISABLED : buttonStyles[variant]}`}
       onClick={onClick}

diff --git a/src/components/Checkbox/Checkbox.jsx b/src/components/Checkbox/Checkbox.jsx
@@ -1,8 +1,9 @@
 import styles from './Checkbox.module.css';
 
-const Checkbox = ({ isChecked, onChange }) => {
+const Checkbox = ({ isChecked, onChange, ariaLabel = "checkbox" }) => {
   return (
     <input
+      ariaLabel={ariaLabel}
       type='checkbox'
       checked={isChecked}
       onChange={onChange}

diff --git a/src/components/Note/Note.jsx b/src/components/Note/Note.jsx
@@ -25,10 +25,10 @@ const Note = ({note, idx}) => {
   return (
     <div onClick={() => onNoteClick(idx)} className={`${styles.noteWpr} ${note.status ? styles.isCompleted : ''}`}>
       <div className={styles.noteLabel}>
-        <Checkbox isChecked={note.status} onChange={() => onNoteClick(idx)} />
+        <Checkbox ariaLabel={'Toggle done/undone Todo'} isChecked={note.status} onChange={() => onNoteClick(idx)} />
         <span className={note.status ? styles.isDone : ''}>{note?.description}</span>
       </div>
-      <Button variant={ENUMS.DELETE_NOTE} onClick={(e) => deleteButtonHandler(e, idx)}>
+      <Button ariaLabel="Remove Todo" variant={ENUMS.DELETE_NOTE} onClick={(e) => deleteButtonHandler(e, idx)}>
         <PiTrashLight size={25} />
       </Button>
     </div>