Add accessibility attributes and logic to all puzzles

src/App.css

@@ -2,7 +2,3 @@
   box-sizing: border-box;
   margin: 0;
 }
-
-body {
-  overflow: hidden;
-}

src/App.js

@@ -5,7 +5,6 @@ import { Route, Routes } from 'react-router-dom';
 import LandingPage from './components/LandingPage/LandingPage';
 import RoomOne from './components/RoomOne/RoomOne';
 import ErrorHandling from './components/ErrorHandling/ErrorHandling';
-import Leaderboard from './components/Leaderboard/Leaderboard';
 
 function App() {
   return (
@@ -14,7 +13,6 @@ function App() {
           <Route path='/' element={<><Header /><LandingPage /></>} />
           <Route path='room/:displayedRoomName' element={<><Header /><Story /></>} />
           <Route path='roomOne/:displayedRoomName/:backendData' element={<RoomOne />} />
-          <Route path='leaderboard' element={<Leaderboard />}/>
           <Route path='*' element={<ErrorHandling />}/>
         </Routes>
       </div>

src/components/Header/Header.css

@@ -20,7 +20,7 @@ header {
   box-shadow: inset 20px 20px 40px rgb(29 180 216 / 10%);
 }
 
-h1 {
+.header-text {
   size: 3em;
   color: #edf9ff;
   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

src/components/Header/Header.js

@@ -3,7 +3,7 @@ import './Header.css'
 export default function Header() {
   return (
     <header>
-      <h1>Escape Link</h1>
+      <h1 className='header-text'>Escape Link</h1>
     </header>
   )
 }

src/components/PuzzleFive/PuzzleFive.css

@@ -49,6 +49,3 @@
   color: #333;
 }
 
-.popup button:hover {
-  background-color: #0056b3;
-}

src/components/PuzzleFive/PuzzleFive.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import './PuzzleFive.css';
 
-export default function PuzzleFive({   
+export default function PuzzleFive({
   onClose,
   winConditions,
   setWinConditions,
@@ -11,16 +11,23 @@ export default function PuzzleFive({
 }) {
   const [answer, setAnswer] = useState('');
   const [incorrect, setIncorrect] = useState('');
+  const modalRef = useRef();
+
+  useEffect(() => {
+    if (modalRef.current) {
+      modalRef.current.focus();
+    }
+  }, []);
 
   const handleChange = (e) => {
-    setIncorrect('')
-    setAnswer(e.target.value)
-  }
+    setIncorrect('');
+    setAnswer(e.target.value);
+  };
 
   const handleSubmit = () => {
     if (answer.toLowerCase() === 'will smith') {
       setWinConditions([...winConditions, answer]);
-      puzzleCompleted(5)
+      puzzleCompleted(5);
       onClose();
       setIsDisabled(true);
     } else {
@@ -29,11 +36,17 @@ export default function PuzzleFive({
   };
 
   return (
-    <div className="popup">
-      <p>{incorrect}</p>
-      <h2>The slap heard round the world.</h2>
-      <p>This actor is famous for defeating an enemy society with Jeff Goldblum and also notably slapped the human known as Chris Rock. We suspect Bob has disappeared to where they came from.</p>
+    <div tabIndex="-1" ref={modalRef} className="popup">
+      <p role="alert">{incorrect}</p>
+      <h1 tabIndex="0">The slap heard round the world.</h1>
+      <p tabIndex="0">
+        This actor is famous for defeating an enemy society with Jeff Goldblum
+        and also notably slapped the human known as Chris Rock. We suspect Bob
+        has disappeared to where they came from.
+      </p>
+      <label htmlFor="answer" />
       <input
+        id="answer"
         type="text"
         value={answer}
         onChange={handleChange}
@@ -49,5 +62,5 @@ PuzzleFive.propTypes = {
   onClose: PropTypes.func.isRequired,
   winConditions: PropTypes.array.isRequired,
   setWinConditions: PropTypes.func.isRequired,
-  setIsDisabled: PropTypes.func.isRequired,
+  setIsDisabled: PropTypes.func.isRequired
 };

src/components/PuzzleFour/PuzzleFour.css

@@ -48,7 +48,3 @@
   background-color: #ccc;
   color: #333;
 }
-
-.popup button:hover {
-  background-color: #0056b3;
-}

src/components/PuzzleFour/PuzzleFour.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import './PuzzleFour.css';
 
-export default function PuzzleFour({   
+export default function PuzzleFour({
   onClose,
   winConditions,
   setWinConditions,
@@ -11,16 +11,23 @@ export default function PuzzleFour({
 }) {
   const [answer, setAnswer] = useState('');
   const [incorrect, setIncorrect] = useState('');
+  const modalRef = useRef();
+
+  useEffect(() => {
+    if (modalRef.current) {
+      modalRef.current.focus();
+    }
+  }, []);
 
   const handleChange = (e) => {
-    setIncorrect('')
-    setAnswer(e.target.value)
-  }
+    setIncorrect('');
+    setAnswer(e.target.value);
+  };
 
   const handleSubmit = () => {
     if (answer.toLowerCase() === 'alpha centauri') {
       setWinConditions([...winConditions, answer]);
-      puzzleCompleted(4)
+      puzzleCompleted(4);
       onClose();
       setIsDisabled(true);
     } else {
@@ -29,11 +36,15 @@ export default function PuzzleFour({
   };
 
   return (
-    <div className="popup">
-      <p>{incorrect}</p>
-      <h2>Some truths can only be found in the dark. </h2>
-      <p>Search the room. Might there be a hidden message we can't see just yet?</p>
+    <div tabIndex="-1" ref={modalRef} className="popup">
+      <p role="alert">{incorrect}</p>
+      <h1 tabIndex="0">Some truths can only be found in the dark. </h1>
+      <p tabIndex="0">
+        Search the room. Might there be a hidden message we can't see just yet?
+      </p>
+      <label htmlFor="answer" />
       <input
+        id="answer"
         type="text"
         value={answer}
         onChange={handleChange}
@@ -49,5 +60,5 @@ PuzzleFour.propTypes = {
   onClose: PropTypes.func.isRequired,
   winConditions: PropTypes.array.isRequired,
   setWinConditions: PropTypes.func.isRequired,
-  setIsDisabled: PropTypes.func.isRequired,
+  setIsDisabled: PropTypes.func.isRequired
 };

src/components/PuzzleOne/PuzzleOne.css

@@ -48,7 +48,3 @@
   background-color: #ccc;
   color: #333;
 }
-
-.popup button:hover {
-  background-color: #0056b3;
-}

src/components/PuzzleOne/PuzzleOne.js

@@ -1,28 +1,34 @@
 import PropTypes from 'prop-types';
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import './PuzzleOne.css';
 
-export default function PuzzleOne({   
+export default function PuzzleOne({
   onClose,
   winConditions,
   setWinConditions,
   setIsDisabled,
-  puzzleCompleted,
-
+  puzzleCompleted
 }) {
   const [answer, setAnswer] = useState('');
-  const [incorrect, setIncorrect] = useState('');  
+  const [incorrect, setIncorrect] = useState('');
+  const modalRef = useRef();
+
+  useEffect(() => {
+    if (modalRef.current) {
+      modalRef.current.focus();
+    }
+  }, []);
 
   const handleChange = (e) => {
-    setIncorrect('')
-    setAnswer(e.target.value)
-  }
+    setIncorrect('');
+    setAnswer(e.target.value);
+  };
 
   const handleSubmit = () => {
     if (answer.toLowerCase() === 'portal') {
       setWinConditions([...winConditions, answer]);
-      puzzleCompleted(1)
-      
+      puzzleCompleted(1);
+
       onClose();
       setIsDisabled();
     } else {
@@ -31,11 +37,16 @@ export default function PuzzleOne({
   };
 
   return (
-    <div className="popup">
-      <p>{incorrect}</p>
-      <h2>Looks like Bob's been decoding a cipher...maybe he kept some notes on his whiteboard? </h2>
-      <p>What does ⌿⍜⍀⏁⏃⌰ mean?</p>
+    <div tabIndex="-1" ref={modalRef} className="popup">
+      <p role="alert">{incorrect}</p>
+      <h1 tabIndex="0">
+        Looks like Bob's been decoding a cipher...maybe he kept some notes on
+        his whiteboard?{' '}
+      </h1>
+      <p tabIndex="0">What does ⌿⍜⍀⏁⏃⌰ mean?</p>
+      <label htmlFor="answer" />
       <input
+        id="answer"
         type="text"
         value={answer}
         onChange={handleChange}
@@ -51,5 +62,5 @@ PuzzleOne.propTypes = {
   onClose: PropTypes.func.isRequired,
   winConditions: PropTypes.array.isRequired,
   setWinConditions: PropTypes.func.isRequired,
-  setIsDisabled: PropTypes.func.isRequired,
+  setIsDisabled: PropTypes.func.isRequired
 };

src/components/PuzzleThree/PuzzleThree.css

@@ -48,8 +48,3 @@
     background-color: #ccc;
     color: #333;
   }
-
-  .popup button:hover {
-    background-color: #0056b3;
-  }
-

src/components/PuzzleThree/PuzzleThree.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import './PuzzleThree.css';
 
 export default function PuzzleThree({
@@ -11,33 +11,42 @@ export default function PuzzleThree({
 }) {
   const [answer, setAnswer] = useState('');
   const [incorrect, setIncorrect] = useState('');
+  const modalRef = useRef();
+
+  useEffect(() => {
+    if (modalRef.current) {
+      modalRef.current.focus();
+    }
+  }, []);
 
   const handleChange = (e) => {
-    setIncorrect('')
-    setAnswer(e.target.value)
-  }
+    setIncorrect('');
+    setAnswer(e.target.value);
+  };
 
   const handleSubmit = () => {
     if (answer.toLowerCase() === 'aliens') {
       setWinConditions([...winConditions, answer]);
-      puzzleCompleted(3)
+      puzzleCompleted(3);
       onClose();
-      setIsDisabled()
+      setIsDisabled();
     } else {
       setIncorrect('Incorrect: Please try again');
     }
   };
 
   return (
-    <div className="popup">
-      <p>{incorrect}</p>
-      <h2>Riddle</h2>
-      <p>
+    <div tabIndex="-1" ref={modalRef} className="popup">
+      <p role="alert">{incorrect}</p>
+      <h1 tabIndex="0">Riddle</h1>
+      <p tabIndex="0">
         "We come from a place beyond the stars, With shiny ships that blink near
         and far. You've seen us in movies, books, and more, Do you know what we
         are, or are you unsure?"
       </p>
+      <label htmlFor="answer" />
       <input
+        id="answer"
         type="text"
         value={answer}
         onChange={handleChange}
@@ -53,5 +62,5 @@ PuzzleThree.propTypes = {
   onClose: PropTypes.func.isRequired,
   winConditions: PropTypes.array.isRequired,
   setWinConditions: PropTypes.func.isRequired,
-  setIsDisabled: PropTypes.func.isRequired,
+  setIsDisabled: PropTypes.func.isRequired
 };

src/components/PuzzleTwo/PuzzleTwo.css

@@ -48,7 +48,3 @@
   background-color: #ccc;
   color: #333;
 }
-
-.popup button:hover {
-  background-color: #0056b3;
-}