Fixed all the a11y issues from lighthouse. Almost 100 across the board!

csprance · Jul 25, 2022 · d360b31 · d360b31
1 parent b1f4308
commit d360b31
Show file tree

Hide file tree

Showing 11 changed files with 94 additions and 31 deletions.
diff --git a/components/Button.tsx b/components/Button.tsx
@@ -21,9 +21,14 @@ const StyledButton = styled.button`
 `;
 interface Props extends React.PropsWithChildren {
   onClick: () => void;
+  name: string;
 }
-const Button: React.FC<Props> = ({ children, onClick }) => {
-  return <StyledButton onClick={onClick}>{children}</StyledButton>;
+const Button: React.FC<Props> = ({ children, onClick, name }) => {
+  return (
+    <StyledButton aria-label={name} onClick={onClick}>
+      {children}
+    </StyledButton>
+  );
 };
 
 export default Button;
diff --git a/components/Formula.tsx b/components/Formula.tsx
@@ -60,7 +60,11 @@ const FormulaComponent: React.FC<Props> = ({
         f<sub>{id}</sub>(x,t) = &nbsp;
       </div>
       <div style={{ width: '100%' }}>
+        <label className={'sr-only'} htmlFor={`f${id}-input`}>
+          Formula input field for formula {id}
+        </label>
         <FormulaInputField
+          textareaId={`f${id}-input`}
           value={value}
           error={error ? 'false' : undefined}
           onValueChange={(code) => setFormulaValue(id, code)}

diff --git a/components/Notes.tsx b/components/Notes.tsx
@@ -1,12 +1,11 @@
-import { AsyncLocalStorage } from 'async_hooks';
-import { highlight, languages } from 'prismjs';
-import 'prismjs/components/prism-markdown';
-import * as React from 'react';
-import Editor from 'react-simple-code-editor';
-import styled from 'styled-components';
+import { highlight, languages } from "prismjs";
+import "prismjs/components/prism-markdown";
+import * as React from "react";
+import Editor from "react-simple-code-editor";
+import styled from "styled-components";
 
-import { AsyncStorage, useStore } from '../store';
-import { bgColor, ctrlColor, inputBg } from '../styles';
+import { useStore } from "../store";
+import { bgColor, ctrlColor, inputBg } from "../styles";
 
 const Wrapper = styled.div`
   background: ${bgColor};
@@ -29,10 +28,14 @@ const Notes: React.FC<Props> = () => {
   const { notes, setNotes } = useStore();
   return (
     <Wrapper>
-      <h3 style={{ padding: 0, margin: 0, width: '100%', textAlign: 'center' }}>
+      <p style={{fontSize: '17.5px', padding: 0, margin: 0, width: '100%', textAlign: 'center' }}>
         Notes
-      </h3>
+      </p>
+      <label className={'sr-only'} htmlFor={`notes-input`}>
+        Notes
+      </label>
       <CustomTextArea
+        textareaId={'notes-input'}
         value={notes}
         className={'userInput'}
         highlight={(code) => highlight(code, languages.markdown, 'md')}

diff --git a/components/RangeSlider.tsx b/components/RangeSlider.tsx
@@ -41,6 +41,7 @@ const SliderInput = styled.input`
 `;
 
 interface Props {
+  name: string;
   id?: string;
   value?: number;
   min?: number;
@@ -50,6 +51,7 @@ interface Props {
   disabled?: boolean;
 }
 const RangeSlider: React.FC<Props> = ({
+  name,
   value = 0,
   min = -1,
   max = 1,
@@ -66,21 +68,27 @@ const RangeSlider: React.FC<Props> = ({
     } 0%, ${
       disabled ? inputBgDisabled : '#FFF'
     } ${t}%, ${inputBg} ${t}%, ${inputBg} 100%)`;
-  }, [value, min, max]);
+  }, [value, min, max, disabled]);
   return (
-    <SliderInput
-      disabled={disabled}
-      ref={inputRef}
-      type="range"
-      min={min}
-      max={max}
-      value={value}
-      step={step}
-      id={id}
-      onChange={(e) => {
-        onChange(e);
-      }}
-    />
+    <>
+      <label className={'sr-only'} htmlFor={name}>
+        Range Slider for {name}
+      </label>
+      <SliderInput
+        name={name}
+        id={name}
+        disabled={disabled}
+        ref={inputRef}
+        type="range"
+        min={min}
+        max={max}
+        value={value}
+        step={step}
+        onChange={(e) => {
+          onChange(e);
+        }}
+      />
+    </>
   );
 };
 

diff --git a/components/TimelineBar.tsx b/components/TimelineBar.tsx
@@ -28,6 +28,7 @@ const TimelineBar: React.FC<Props> = () => {
 
   return (
     <RangeSlider
+      name={'timeline-range-slider'}
       disabled={!paused}
       min={0}
       max={clamp(t + 150, 0, 1500)}

diff --git a/components/TimelineControls.tsx b/components/TimelineControls.tsx
@@ -30,11 +30,12 @@ const TimelineControls: React.FC<Props> = () => {
       <TimelineBar />
       <Time />
 
-      <Button onClick={() => grapher.resetTime()}>
+      <Button name={'reset-time'} onClick={() => grapher.resetTime()}>
         <ResetIcon />
       </Button>
 
       <Button
+        name={paused ? 'start-time' : 'pause-time'}
         onClick={() => {
           setPaused(!paused);
           grapher.togglePlay();

diff --git a/components/VariableComponent.tsx b/components/VariableComponent.tsx
@@ -34,7 +34,11 @@ const VariableComponent: React.FC<Props> = ({
     <Wrapper>
       <div style={{ textAlign: 'center' }}>{name}</div>
 
+      <label className={'sr-only'} htmlFor={`value-input-for-variable-${name}`}>
+        Value input for Variable {name}
+      </label>
       <input
+        id={`value-input-for-variable-${name}`}
         className={'userInput'}
         style={{ height: 20, marginLeft: 5, marginRight: 5 }}
         type="text"
@@ -43,23 +47,37 @@ const VariableComponent: React.FC<Props> = ({
       />
 
       <RangeSlider
+        name={`range-slider-for-variable-${name}`}
         min={min}
         max={max}
         value={value}
         step={step}
-        id="a"
         onChange={setVariableOnChange('value')}
       />
 
+      <label
+        className={'sr-only'}
+        htmlFor={`min-value-input-for-variable-${name}`}
+      >
+        Min Value input for Variable {name}
+      </label>
       <input
+        id={`min-value-input-for-variable-${name}`}
         className={'userInput'}
         style={{ height: 20, marginLeft: 5, marginRight: 5 }}
         type="text"
         value={min}
         onChange={setVariableOnChange('min')}
       />
 
+      <label
+        className={'sr-only'}
+        htmlFor={`max-value-input-for-variable-${name}`}
+      >
+        Max Value input for Variable {name}
+      </label>
       <input
+        id={`max-value-input-for-variable-${name}`}
         className={'userInput'}
         style={{ height: 20, marginLeft: 5, marginRight: 5 }}
         type="text"

diff --git a/components/Variables.tsx b/components/Variables.tsx
@@ -21,7 +21,7 @@ const Variables: React.FC<Props> = () => {
       <Wrapper>
         <div>Var</div>
         <div>Value</div>
-        <h3 style={{ padding: 0, margin: 0 }}>Variables</h3>
+        <p style={{ fontSize: '17.5px', padding: 0, margin: 0 }}>Variables</p>
         <div>Min</div>
         <div>Max</div>
       </Wrapper>

diff --git a/components/VisualizerOptions.tsx b/components/VisualizerOptions.tsx
@@ -43,23 +43,35 @@ const VisualizerOptions: React.FC<Props> = ({ r, g, b, id }) => {
   };
   return (
     <Wrapper>
+      <label className={'sr-only'} htmlFor={`red-visualizer-${id}`}>
+        Red Visualizer
+      </label>
       <MyCheckbox
+        id={`red-visualizer-${id}`}
         checked={r}
         onChange={(e) => setVisualizers(id, [e.target.checked, g, b])}
         onContextMenu={toggleOthersContextMenu}
         color={red}
         type="checkbox"
       />
 
+      <label className={'sr-only'} htmlFor={`green-visualizer-${id}`}>
+        Green Visualizer
+      </label>
       <MyCheckbox
+        id={`green-visualizer-${id}`}
         checked={g}
         onChange={(e) => setVisualizers(id, [r, e.target.checked, b])}
         onContextMenu={toggleOthersContextMenu}
         color={green}
         type="checkbox"
       />
 
+      <label className={'sr-only'} htmlFor={`blue-visualizer-${id}`}>
+        Blue Visualizer
+      </label>
       <MyCheckbox
+        id={`blue-visualizer-${id}`}
         checked={b}
         onChange={(e) => setVisualizers(id, [r, g, e.target.checked])}
         onContextMenu={toggleOthersContextMenu}

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -25,8 +25,10 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
         <meta
           name="viewport"
           content={
-            'user-scalable=0, initial-scale=1, ' +
-            'minimum-scale=1, width=device-width, height=device-height'
+            'initial-scale=1, ' +
+            'minimum-scale=1, ' +
+            'width=device-width, ' +
+            'height=device-height'
           }
         />
       </Head>

diff --git a/styles/index.ts b/styles/index.ts
@@ -15,6 +15,15 @@ export const GlobalStyles = createGlobalStyle`
     --ctrlColor: #606060;
     --ctrlColorHover: #b08010;
   }
+  
+  .sr-only {
+    position:absolute;
+    left:-10000px;
+    top:auto;
+    width:1px;
+    height:1px;
+    overflow:hidden;
+  }
 
   body {
     color: #ffffff;