adding basic a11y to links and buttons

leannepepper · Feb 24, 2022 · aeb2ea7 · aeb2ea7
1 parent 845ce28
commit aeb2ea7
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 41 deletions.
diff --git a/packages/site/components/ExampleText.tsx b/packages/site/components/ExampleText.tsx
@@ -35,6 +35,7 @@ export const ExampleText = ({ ...props }) => {
           className="gh-link"
           href="https://github.com/leannepepper/3d-quick-measure"
           target="_blank"
+          aria-label="Go to the 3d-quick-measure repository on GitHub"
         >
           <svg
             aria-hidden="false"
@@ -52,6 +53,7 @@ export const ExampleText = ({ ...props }) => {
           </svg>
         </a>
       </Html>
+
       <Html
         as="div"
         wrapperClass={"html"}
@@ -65,16 +67,23 @@ export const ExampleText = ({ ...props }) => {
           react three quick measure
         </pre>
       </Html>
+
       <Html
         as="div"
         wrapperClass={"html"}
         position={[-gridWidth / 5.2, gridHeight / 2.2, 0]}
         transform
       >
-        <a
+        <button
           onClick={() => {
             copyTextToClipboard("npm install react three quick measure");
           }}
+          aria-label="Copy npm install react three quick measure to clipboard"
+          style={{
+            backgroundColor: "transparent",
+            border: "none",
+            cursor: "pointer",
+          }}
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -91,7 +100,7 @@ export const ExampleText = ({ ...props }) => {
             <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
             <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
           </svg>
-        </a>
+        </button>
       </Html>
 
       <Html
@@ -119,7 +128,8 @@ function MeasureComponent(){
         position={[gridWidth / 2.09, gridHeight / 8, 0]}
         transform
       >
-        <a
+        <button
+          aria-label="Copy QuickMeasure example to clipboard"
           onClick={() => {
             copyTextToClipboard(`function MeasureComponent(){
               return (
@@ -129,6 +139,11 @@ function MeasureComponent(){
                 </QuickMeasure>
             )}`);
           }}
+          style={{
+            backgroundColor: "transparent",
+            border: "none",
+            cursor: "pointer",
+          }}
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -145,7 +160,7 @@ function MeasureComponent(){
             <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
             <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
           </svg>
-        </a>
+        </button>
       </Html>
     </>
   );

diff --git a/packages/site/components/Scene.tsx b/packages/site/components/Scene.tsx
@@ -10,6 +10,7 @@ import { GridLines } from "./GridLines";
 import { MeasureText } from "./MeasureText";
 import { Panels } from "./Panels";
 import { ExampleShapes } from "./Shapes";
+import { A11yAnnouncer } from "@react-three/a11y";
 
 export default function Scene() {
   const [windowSize, setWindowSize] = useState({
@@ -33,45 +34,60 @@ export default function Scene() {
 
   if (windowSize.width < 768) {
     return (
-      <Canvas camera={{ position: [0, 0, 20], near: 0.1, far: 100, fov: 50 }}>
-        <pointLight position={[5, 15, 10]} intensity={1.0} />
-        <ambientLight intensity={0.7} />
-        <OrbitControls autoRotate={false} enableZoom={true} enablePan={false} />
-        <Line
-          points={[
-            new THREE.Vector3(-windowSize.width, -3, 0),
-            new THREE.Vector3(windowSize.width, -3, 0),
-          ]}
-          color={"#000000"}
-          lineWidth={2.0}
-          alphaWrite={undefined}
-        ></Line>
-        <QuickMeasure>
-          <Cube />
-          <Suspense fallback={null}>
-            <MeasureText text="Quick" position={[-1.5, -4.8, 0]} size={1.5} />
-            <MeasureText text="Measure" position={[0, -7.8, 0]} size={1.5} />
-          </Suspense>
-        </QuickMeasure>
-      </Canvas>
+      <>
+        <Canvas camera={{ position: [0, 0, 20], near: 0.1, far: 100, fov: 50 }}>
+          <pointLight position={[5, 15, 10]} intensity={1.0} />
+          <ambientLight intensity={0.7} />
+          <OrbitControls
+            autoRotate={false}
+            enableZoom={true}
+            enablePan={false}
+          />
+          <Line
+            points={[
+              new THREE.Vector3(-windowSize.width, -3, 0),
+              new THREE.Vector3(windowSize.width, -3, 0),
+            ]}
+            color={"#000000"}
+            lineWidth={2.0}
+            alphaWrite={undefined}
+          ></Line>
+
+          <QuickMeasure>
+            <Cube />
+            <Suspense fallback={null}>
+              <MeasureText text="Quick" position={[-1.5, -4.8, 0]} size={1.5} />
+              <MeasureText text="Measure" position={[0, -7.8, 0]} size={1.5} />
+            </Suspense>
+          </QuickMeasure>
+        </Canvas>
+        <A11yAnnouncer />
+      </>
     );
   } else if (windowSize.width >= 768) {
     return (
-      <Canvas camera={{ position: [0, 0, 20], near: 0.1, far: 100, fov: 50 }}>
-        <pointLight position={[5, 15, 10]} intensity={1.0} />
-        <ambientLight intensity={0.7} />
-        <OrbitControls autoRotate={false} enableZoom={true} enablePan={false} />
-        <GridLines />
-        <Panels />
-        <ExampleText />
-        <QuickMeasure>
-          <Suspense fallback={null}>
-            <MeasureText text="Quick" position={[0.5, -4.8, 0]} />
-            <MeasureText text="Measure" position={[2.5, -7.8, 0]} />
-          </Suspense>
-          <ExampleShapes />
-        </QuickMeasure>
-      </Canvas>
+      <>
+        <Canvas camera={{ position: [0, 0, 20], near: 0.1, far: 100, fov: 50 }}>
+          <pointLight position={[5, 15, 10]} intensity={1.0} />
+          <ambientLight intensity={0.7} />
+          <OrbitControls
+            autoRotate={false}
+            enableZoom={true}
+            enablePan={false}
+          />
+          <GridLines />
+          <Panels />
+          <ExampleText />
+          <QuickMeasure>
+            <Suspense fallback={null}>
+              <MeasureText text="Quick" position={[0.5, -4.8, 0]} />
+              <MeasureText text="Measure" position={[2.5, -7.8, 0]} />
+            </Suspense>
+            <ExampleShapes />
+          </QuickMeasure>
+        </Canvas>
+        <A11yAnnouncer />
+      </>
     );
   }
 }
diff --git a/packages/site/components/TriangleFracture.tsx b/packages/site/components/TriangleFracture.tsx
@@ -84,6 +84,7 @@ export function Triangle({
         <a
           target="_blank"
           href="https://medium.com/@leannewerner/creating-cell-fractured-animations-using-blender-and-react-three-fiber-dbd0299d4767"
+          aria-label="link to Medium article, creating cell fractured animations using blender and react three fiber"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/site/package.json b/packages/site/package.json
@@ -6,6 +6,7 @@
     "build": "next build && next export"
   },
   "dependencies": {
+    "@react-three/a11y": "^2.2.3",
     "feather-icons": "^4.28.0",
     "framer-motion": "^6.2.6",
     "framer-motion-3d": "^6.2.6",

diff --git a/yarn.lock b/yarn.lock
@@ -1132,6 +1132,14 @@
   resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.4.3.tgz#8926d7a09812374127b1f8a904a755c7579124e6"
   integrity sha512-dzJrPvUc42K2un9y6D1IsrPQO5tKsbWwUo+wsATnXjG3ePWyuDBIOMJuPe605NhIXUmPH+Vik2wMoZz06hD1uA==
 
+"@react-three/a11y@^2.2.3":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@react-three/a11y/-/a11y-2.2.3.tgz#aedfe0b4cf125c833ab46e831d19d0ac2b7954ba"
+  integrity sha512-hcPbGOLfYnBzv0EgBMWfq9upQL4EBSVjb20AUH5t5nZ6qoY/2II0yWHM3xFVzk8ZdZBDTHMe9tpoI0aQ0u82hQ==
+  dependencies:
+    utility-types "^3.10.0"
+    zustand "^3.2.0"
+
 "@react-three/drei@^8.6.1":
   version "8.10.6"
   resolved "https://registry.yarnpkg.com/@react-three/drei/-/drei-8.10.6.tgz#a44382c60e60e59e6d21c17c6403a00e015e9121"
@@ -3773,7 +3781,7 @@ zstddec@^0.0.2:
   resolved "https://registry.yarnpkg.com/zstddec/-/zstddec-0.0.2.tgz#57e2f28dd1ff56b750e07d158a43f0611ad9eeb4"
   integrity sha512-DCo0oxvcvOTGP/f5FA6tz2Z6wF+FIcEApSTu0zV5sQgn9hoT5lZ9YRAKUraxt9oP7l4e8TnNdi8IZTCX6WCkwA==
 
-zustand@^3.5.1, zustand@^3.5.13:
+zustand@^3.2.0, zustand@^3.5.1, zustand@^3.5.13:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.7.0.tgz#a5c68fb06bdee9c63ad829de2432635be6d0ce69"
   integrity sha512-USzVzLGrvZ8VK1/sEsOAmeqa8N7D3OBdZskVaL7DL89Q4QLTYD053iIlZ5KDidyZ+Od80Dttin/f8ZulOLFFDQ==