delete all onKeyDown arguments since onClick can be called by keyboard

nora-kauczor · Nov 20, 2024 · 610df9e · 610df9e
1 parent ba6c039
commit 610df9e
Show file tree

Hide file tree

Showing 14 changed files with 43 additions and 86 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -32,6 +32,7 @@ function App() {
 
     useEffect(() => {
         getUserId()
+        setDisplayNewVocabsPopUp(false)
     }, []);
 
     useEffect(() => {
@@ -320,6 +321,7 @@ function App() {
                            activateVocab={activateVocab}/>}/>
                 <Route path={"/calendar"} element={<CalendarPage
                     userId={userId}
+                    setDisplayNewVocabsPopUp={setDisplayNewVocabsPopUp}
                     setUseForm={setUseForm}
                     openForm={openForm}
                     vocabs={vocabs}
@@ -329,12 +331,13 @@ function App() {
                 <Route path={"/review"}
                        element={<ReviewPage
                            language={language}
-                           removeVocabFromVocabsToReview={removeVocabFromVocabsToReview}
                            vocabsToReview={vocabsToReview}
+                           removeVocabFromVocabsToReview={removeVocabFromVocabsToReview}
                            changeReviewDates={changeReviewDates}
                        />}/>
                 <Route path={"/backlog"}
                        element={<BacklogPage
+                           setDisplayNewVocabsPopUp={setDisplayNewVocabsPopUp}
                            vocabs={getInactiveVocabs()}
                            allVocabsActivated={getInactiveVocabs().length < 1}
                            deleteVocab={deleteVocab}
@@ -348,7 +351,6 @@ function App() {
                        element={<DisplayPage
                            vocabs={vocabs}
                            setDisplayNewVocabsPopUp={setDisplayNewVocabsPopUp}
-
                        />}/>
             </Route>
         </Routes>

diff --git a/frontend/src/components/CalendarDay/CalendarDay.tsx b/frontend/src/components/CalendarDay/CalendarDay.tsx
@@ -23,13 +23,6 @@ export default function CalendarDay(props: Readonly<Props>) {
                                              onClick={() => props.vocabIdsOfDate &&
                                                  props.openDayPopUpAndPassItVocabs(
                                                      props.vocabIdsOfDate)}
-                                             onKeyDown={(e) => {
-                                                 if (e.key === 'Enter' ||
-                                                     e.key === ' ') {
-                                                     props.openDayPopUpAndPassItVocabs(
-                                                         props.vocabIdsOfDate!);
-                                                 }
-                                             }}
                                              aria-label={`Open details for ${displayDate}`}
                                              aria-disabled={!props.vocabIdsOfDate}>
                 <p id={"calendar-date"}> {displayDate}</p>

diff --git a/frontend/src/components/NavBar/NavBar.tsx b/frontend/src/components/NavBar/NavBar.tsx
@@ -20,15 +20,13 @@ export default function NavBar(props: Readonly<Props>) {
     };
     return (<ul id={"navbar"}>
         <li onClick={() => navigate('/backlog')}
-            onKeyDown={(event) => handleKeyDown(event, '/backlog')}
             className={`navbar-button ${path === '/backlog' && !props.useForm ?
                 'highlighted' : ''}`}
             aria-label={"Go to Backlog"}
         ><p className={"navbar-button-text"}>Backlog</p>
         </li>
         <li
             onClick={() => props.setUseForm(true)}
-            onKeyDown={(event) => handleKeyDown(event, '')}
             className={`navbar-button ${props.useForm ? 'highlighted' : ''}`}
             aria-label={"Create a new item"}
         ><p className={"navbar-button-text"}>Create</p>
@@ -37,9 +35,6 @@ export default function NavBar(props: Readonly<Props>) {
             onClick={() => {
                 navigate('/calendar')
             }}
-            onKeyDown={(event) => {
-                handleKeyDown(event, '/calendar')
-            }}
             className={`navbar-button ${path === '/calendar' && !props.useForm ?
                 'highlighted' : ''}`}
             aria-label={"Go to Calendar"}

diff --git a/frontend/src/components/NewVocabsPopUp/NewVocabsPopUp.tsx b/frontend/src/components/NewVocabsPopUp/NewVocabsPopUp.tsx
@@ -66,31 +66,20 @@ export default function NewVocabsPopUp(props: Readonly<Props>) {
         <div id={"button-wrapper"}>
             <button className={"new-vocabs-button"}
                     onClick={handleClick}
-                    onKeyDown={(e) => {
-                        if (e.key === 'Enter' || e.key === ' ') handleClick();
-                    }}
                     aria-label={"Enter new vocabulary"}
             >Enter new
                 vocab
             </button>
             {!props.allVocabsActivated &&
                 <button className={"new-vocabs-button"}
                         onClick={() => navigate("/backlog")}
-                        onKeyDown={(e) => {
-                            if (e.key === 'Enter' || e.key === ' ') navigate(
-                                "/backlog");
-                        }}
                         aria-label={"Pick from backlog"}
                 >Pick
                     from backlog
                 </button>}
             {!props.allVocabsActivated &&
                 <button className={"new-vocabs-button"}
                         onClick={activateAndGoToDisplayPageWithRandomVocab}
-                        onKeyDown={(e) => {
-                            if (e.key === 'Enter' || e.key ===
-                                ' ') activateAndGoToDisplayPageWithRandomVocab();
-                        }}
                         aria-label={"Get random vocabulary"}
                 >Get random
                     vocab

diff --git a/frontend/src/components/PickLanguagePopUp/PickLanguagePopUp.tsx b/frontend/src/components/PickLanguagePopUp/PickLanguagePopUp.tsx
@@ -11,21 +11,13 @@ export default function PickLanguagePopUp(props: Readonly<Props>) {
         <article id={"language-pop-up-button-container"}>
             <button className={"language-pop-up-button"}
                     onClick={() => props.setLanguage("Spanish")}
-                    onKeyDown={(e) => {
-                        if (e.key === 'Enter' || e.key ===
-                            ' ') props.setLanguage("Spanish");
-                    }}
                     aria-label={"Select Spanish language"}
             ><p className={"language-icon"}>🇪🇸</p><p
                 className={"language-name"}>Spanish</p>
 
             </button>
             <button className={"language-pop-up-button"}
                     onClick={() => props.setLanguage("French")}
-                    onKeyDown={(e) => {
-                        if (e.key === 'Enter' || e.key ===
-                            ' ') props.setLanguage("French");
-                    }}
                     aria-label={"Select French language"}
             >
 
@@ -34,10 +26,6 @@ export default function PickLanguagePopUp(props: Readonly<Props>) {
             </button>
             <button className={"language-pop-up-button"}
                     onClick={() => props.setLanguage("Italian")}
-                    onKeyDown={(e) => {
-                        if (e.key === 'Enter' || e.key ===
-                            ' ') props.setLanguage("Italian");
-                    }}
                     aria-label={"Select Italian language"}
             >
                 <p className={"language-icon"}>🇮🇹</p><p

diff --git a/frontend/src/components/VocabList/VocabList.tsx b/frontend/src/components/VocabList/VocabList.tsx
@@ -77,7 +77,6 @@ export default function VocabList(props: Readonly<Props>) {
                        onChange={handleChangeInput}/>
                 <button id={"reset-button"}
                         onClick={reset}
-                        onKeyDown={reset}
                 >Reset
                 </button>
             </div>

diff --git a/frontend/src/components/VocabListItem/VocabListItem.tsx b/frontend/src/components/VocabListItem/VocabListItem.tsx
@@ -67,10 +67,6 @@ export default function VocabListItem(props: Readonly<Props>) {
                 {props.vocab.createdBy === props.userId && props.vocab.id &&
                     <button className={"list-item-button"}
                             onClick={() => handleClickEdit(props.vocab.id)}
-                            onKeyDown={(e) => {
-                                if (e.key === 'Enter' || e.key ===
-                                    ' ') handleClickEdit(props.vocab.id);
-                            }}
                             aria-label={`Edit ${props.vocab.word}`}
                     >edit</button>}
 
@@ -81,16 +77,6 @@ export default function VocabListItem(props: Readonly<Props>) {
                     onClick={() => props.vocab.id && (props.calendarMode ?
                         handleClickDeactivate(props.vocab.id) :
                         handleClickActivate(props.vocab.id))}
-                    onKeyDown={(e) => {
-                        if (props.vocab.id &&
-                            (e.key === 'Enter' || e.key === ' ')) {
-                            if (props.calendarMode) {
-                                handleClickDeactivate(props.vocab.id);
-                            } else {
-                                handleClickActivate(props.vocab.id);
-                            }
-                        }
-                    }}
                     aria-label={props.calendarMode ?
                         `Deactivate ${props.vocab.word}` :
                         `Activate ${props.vocab.word}`}>
@@ -101,10 +87,6 @@ export default function VocabListItem(props: Readonly<Props>) {
                     <button
                         className={"vocab-list-button"}
                         onClick={() => handleClickDelete(props.vocab.id)}
-                        onKeyDown={(e) => {
-                            if (e.key === 'Enter' || e.key ===
-                                ' ') handleClickDelete(props.vocab.id);
-                        }}
                         aria-label={`Delete ${props.vocab.word}`}>
                         delete
                     </button>}

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -62,7 +62,7 @@ button {
     right: 15px;
 }
 
-.back-button {
+.home-button {
     margin-top: 1rem;
     padding: 5px
 }

diff --git a/frontend/src/pages/BacklogPage/BacklogPage.tsx b/frontend/src/pages/BacklogPage/BacklogPage.tsx
@@ -2,6 +2,7 @@ import './BacklogPage.css'
 import {Vocab} from "../../types/Vocab.ts";
 import VocabList from "../../components/VocabList/VocabList.tsx";
 import React from "react";
+import {useNavigate} from "react-router-dom";
 
 
 type Props = {
@@ -11,26 +12,36 @@ type Props = {
     language: string
     openForm: (id: string) => void
     setUseForm: React.Dispatch<React.SetStateAction<boolean>>
+    setDisplayNewVocabsPopUp: React.Dispatch<React.SetStateAction<boolean>>
     userId: string
     allVocabsActivated: boolean
 }
 
 export default function BacklogPage(props: Readonly<Props>) {
-
+    const navigate = useNavigate()
     if (props.vocabs.length < 1 && !props.allVocabsActivated) return <p
         className={"loading-message"}>Loading...</p>
     if (!Array.isArray(props.vocabs)) return <p
         className={"loading-message"}>Loading...</p>
     if(props.allVocabsActivated) return <p className={"loading-message"}>Backlog is empty</p>
 
+    function handleClick(){
+        navigate("/")
+        props.setDisplayNewVocabsPopUp(false)
+    }
+
     return (<div id={"backlog-page"} className={"page"} role={"main"}>
         <div style={{height: "50px"}}/>
         <VocabList vocabs={props.vocabs}
-                    calendarMode={false}
-                    activateVocab={props.activateVocab}
-                    deleteVocab={props.deleteVocab}
-                    openForm={props.openForm}
-                    userId={props.userId}/>
+                   calendarMode={false}
+                   activateVocab={props.activateVocab}
+                   deleteVocab={props.deleteVocab}
+                   openForm={props.openForm}
+                   userId={props.userId}/>
+        <button onClick={handleClick}
+                aria-label={"Go back to the homepage"}
+                className={"home-button"}>Home
+        </button>
         <div style={{height: "10px"}}/>
     </div>)
 

diff --git a/frontend/src/pages/CalendarPage/CalendarPage.css b/frontend/src/pages/CalendarPage/CalendarPage.css
@@ -23,7 +23,3 @@
     margin: 0;
     padding: 0;
 }
-
-#calendar-back-button {
-    margin-bottom: 0;
-}
diff --git a/frontend/src/pages/CalendarPage/CalendarPage.tsx b/frontend/src/pages/CalendarPage/CalendarPage.tsx
@@ -16,12 +16,14 @@ import {useNavigate} from "react-router-dom";
 
 type Props = {
     vocabs: Vocab[]
+    language: string
+    userId: string
     deactivateVocab: (id: string) => void
     deleteVocab: (id: string) => void
-    language: string
     openForm: (id: string) => void
     setUseForm: React.Dispatch<React.SetStateAction<boolean>>
-    userId: string
+    setDisplayNewVocabsPopUp: React.Dispatch<React.SetStateAction<boolean>>
+
 }
 
 export default function CalendarPage(props: Readonly<Props>) {
@@ -148,23 +150,26 @@ export default function CalendarPage(props: Readonly<Props>) {
         setDayOfDayPopUp("")
     }
 
+    function handleClick(){
+        navigate("/")
+        props.setDisplayNewVocabsPopUp(false)
+    }
+
     if (!month.yearMonthName) {
         return <p className={"loading-message"}>Loading...</p>
     }
 
     return (<div id={"calendar-page"} className={"page"} role={"main"}>
-        <div style={{height: "40px"}}/>
+        <div style={{height: "30px"}}/>
         <div id={"button-and-header-container"}>
             {month && <button
                 className={"calendar-button"}
                 onClick={() => changeMonth("previous")}
-                onKeyDown={() => changeMonth("previous")}
                 aria-label={"Previous month"}>◀︎
             </button>}
             {month && <h2>{month.yearMonthName}</h2>}
             {month && <button className={"calendar-button"}
                               onClick={() => changeMonth("next")}
-                              onKeyDown={() => changeMonth("next")}
                               aria-label={"Next month"}>▶︎
             </button>}
         </div>
@@ -183,12 +188,10 @@ export default function CalendarPage(props: Readonly<Props>) {
             deactivateVocab={props.deactivateVocab}
             deleteVocab={props.deleteVocab}
             userId={props.userId}/>}
-        <button className={"back-button"} id={"calendar-back-button"}
-                onClick={() => navigate("/")}
-                onKeyDown={() => navigate("/")}
-                aria-label={"Go back to the main page"}>
-            Go to homepage
+        <button onClick={handleClick}
+                aria-label={"Go back to the homepage"}
+                className={"home-button"}>Home
         </button>
-        <div style={{height: "40px"}}/>
+        <div style={{height: "10px"}}/>
     </div>)
 }
diff --git a/frontend/src/pages/DisplayPage/DisplayPage.tsx b/frontend/src/pages/DisplayPage/DisplayPage.tsx
@@ -28,7 +28,6 @@ if (!props.vocabs) return <p className={"loading-message"}>Loading...</p>
     function handleClick(){
         navigate("/")
         props.setDisplayNewVocabsPopUp(false)
-
     }
 
     return (<div id={"display-page"} className={"page"} role={"main"}>
@@ -38,7 +37,7 @@ if (!props.vocabs) return <p className={"loading-message"}>Loading...</p>
             <CardContainer displayedVocab={displayedVocab} displayWord={true}/>
             <button onClick={handleClick}
                     aria-label={"Go back to the homepage"}
-                    className={"back-button"}>Go back to Home
+                    className={"home-button"}>Home
             </button>
         </div>)
 }
diff --git a/frontend/src/pages/HomePage/HomePage.tsx b/frontend/src/pages/HomePage/HomePage.tsx
@@ -40,15 +40,13 @@ export default function HomePage(props: Readonly<Props>) {
             {props.finishedReviewing && props.language && <button
                 className={"big-button"}
                 onClick={() => props.setDisplayNewVocabsPopUp(true)}
-                onKeyDown={(e) => e.key === 'Enter' &&
-                    props.setDisplayNewVocabsPopUp(true)}
                 aria-label={"Open new vocabulary popup"}
             >
                 New vocabulary</button>}
             {!props.finishedReviewing && props.language && <button
                 className={"big-button"}
                 onClick={() => navigate("/review")}
-                onKeyDown={(e) => e.key === 'Enter' && navigate("/review")}
+
                 aria-label={"Start vocabulary review"}
             >Review
             </button>}

diff --git a/frontend/src/pages/ReviewPage/ReviewPage.tsx b/frontend/src/pages/ReviewPage/ReviewPage.tsx
@@ -118,14 +118,16 @@ export default function ReviewPage(props: Readonly<Props>) {
                    disabled={displayAnswer}
             />
             {!displayAnswer && !showBackButton &&
-                <button className={"review-page-button big-button"}
+                <button type={"button"}
+                    className={"review-page-button big-button"}
                         onClick={handleClickShowAnswer}
                         aria-label={"Submit your answer"}>show answer
                 </button>}
             {displayAnswer && !showBackButton &&
-                <button className={"review-page-button big-button"}
+                <button
+                    className={"review-page-button big-button"}
                         onClick={getNextVocab}>next</button>}
-            {showBackButton && <button className={"back-button"}
+            {showBackButton && <button className={"home-button"}
                                        onClick={() => navigate(
                                            "/")}>Back</button>}
         </div>