front: add aria labels

GiraffeReversed · Oct 13, 2024 · 33548c0 · 33548c0
1 parent f938dca
commit 33548c0
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/src/Navbar.jsx b/src/Navbar.jsx
@@ -19,8 +19,8 @@ export default function Navbar({ mode, onSettingsClick }) {
           <NavLink className="nav-link" to={`about`}>About</NavLink>
         </Nav>
         <Nav>
-          <Nav.Link onClick={() => toggleDarkmode(current, setMode)}>{modeSymbol}</Nav.Link>
-          <Nav.Link><GearFill onClick={onSettingsClick} /></Nav.Link>
+          <Nav.Link aria-label="toggle light and dark mode" onClick={() => toggleDarkmode(current, setMode)}>{modeSymbol}</Nav.Link>
+          <Nav.Link aria-label="settings" k><GearFill onClick={onSettingsClick} /></Nav.Link>
         </Nav>
       </Container>
     </NB >

diff --git a/src/editor/ExplanationsFeedback.jsx b/src/editor/ExplanationsFeedback.jsx
@@ -41,10 +41,11 @@ export function ExplanationFeedback({ defectCode, sourceCodeHash, line }) {
         <InputGroup.Text id="inputGroup-sizing-sm" className="flex-fill">Was this helpful?</InputGroup.Text>
         {
           [
-            { value: "good", variant: "success", label: <HandThumbsUp /> },
-            { value: "bad", variant: "danger", label: <HandThumbsDown /> }
+            { value: "good", variant: "success", label: <HandThumbsUp />, ariaLabel: "yes" },
+            { value: "bad", variant: "danger", label: <HandThumbsDown />, ariaLabel: "no" }
           ].map((opinion_data, idx) => (
             <ToggleButton
+              aria-label={opinion_data.ariaLabel}
               className="d-flex align-items-center justify-content-center feedback flex-fill"
               key={idx}
               type="radio"
@@ -57,6 +58,7 @@ export function ExplanationFeedback({ defectCode, sourceCodeHash, line }) {
         }
 
         <Button
+          aria-label="leave a comment"
           variant="secondary-outline"
           className="feedback flex-fill"
           onClick={() => setCommentBlockOpen(!commentBlockOpen)}
@@ -76,6 +78,7 @@ export function ExplanationFeedback({ defectCode, sourceCodeHash, line }) {
               onChange={(e) => setComment(e.target.value)}
             />
             <Button
+              aria-label="submit"
               variant="primary"
               onClick={() => handleCommentSubmitClick(comment, defectCode, sourceCodeHash, line)}
             >Submit</Button>

diff --git a/src/editor/Problem.jsx b/src/editor/Problem.jsx
@@ -19,6 +19,7 @@ function CollapseToggle({ eventKey, hasExplanation, onClick }) {
       className={"explCollapseButton" + (hasExplanation ? "" : " noExpl")}
       variant={hasExplanation ? "outline-secondary" : mode === "light" ? "outline-light" : "outline-dark"}
       onClick={onClick}
+      aria-label={(!hasExplanation ? "no" : isCurrentEventKey ? "hide" : "show") + " explanation"}
     >
       {isCurrentEventKey ? <ChevronUp /> : <ChevronDown />}
     </Button>
@@ -47,7 +48,13 @@ export default function Problem({ path, line, enabled_by, source, code, text, ex
     <Card className={(active ? "active " : "") + "problem my-2"}>
       <Card.Header className="p-0 border-bottom-0">
         <ButtonGroup className="d-flex">
-          <Button variant="outline-warning" onClick={onProblemGotoClick}><Bullseye /></Button>
+          <Button
+            variant="outline-warning"
+            aria-label="highlight line in editor"
+            onClick={onProblemGotoClick}
+          >
+            <Bullseye />
+          </Button>
           <div className={"p-1 small w-100" + (Object.values(settings).some(v => v) ? " clickable" : "")} onClick={onTextClick}>
             {line}: [{enabled_by}] {text}
           </div>