Merge pull request #58 from itk-dev/feature/accessibility-overhaul

Feature/accessibility overhaul

Author: Sine Jespersen

CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+- [PR-58](https://github.com/itk-dev/aapodwalk/pull/58)
+  - This pr handles accessibility
+  - Add [focus trap](https://www.npmjs.com/package/focus-trap-react) for "modals"
+  - Add skip link for main navigation
+  - Lock open street map on "presentation" mode
+  - Juggle a little contrast (we are now AA, not AAA)
+  - Add ARIA-labels and aria-hidden on decorative stuff
 - [PR-57](https://github.com/itk-dev/aapodwalk/pull/57)
   - Improve lightmode
 - [PR-56](https://github.com/itk-dev/aapodwalk/pull/56)

package-lock.json

@@ -9,6 +9,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.7.1",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@vitejs/plugin-react": "^4.3.0",
+    "focus-trap-react": "^11.0.1",
     "leaflet": "^1.9.4",
     "ol": "^7.4.0",
     "proj4": "^2.9.0",

package.json

@@ -9,6 +9,7 @@ import RoutePage from "./components/routes/RoutePage";
 import RoutePoints from "./components/routes/RoutePoints";
 import PersonalInformationPolicyPage from "./components/PersonalInformationPolicyPage";
 import Navbar from "./components/Navbar";
+import SkipLinks from "./components/SkipLinks";
 import FAQ from "./components/FAQ";
 import SeeOnMap from "./components/SeeOnMap";
 import ErrorContext from "./context/ErrorContext";
@@ -76,8 +77,12 @@ function App() {
               [selectedRoute, nextUnlockablePointId, listOfUnlocked],
             )}
           >
+            <SkipLinks />
             <Navbar />
-            <div className="relative grow overflow-hidden">
+            <main id="main" className="relative grow overflow-hidden">
+              <a id="main-content" href="/" tabIndex="-1" className="sr-only">
+                Hovedindhold
+              </a>
               <ErrorContext.Provider
                 value={useMemo(
                   () => ({
@@ -116,7 +121,7 @@ function App() {
                   </Route>
                 </Switch>
               </ErrorContext.Provider>
-            </div>
+            </main>
           </RouteContext.Provider>
         </PermissionContext.Provider>
       </LatLongContext.Provider>

src/App.jsx

@@ -5,11 +5,11 @@ import { faClose } from "@fortawesome/free-solid-svg-icons";
 function CloseButton({ closeOverlay, label = "luk", additionalClasses = "" }) {
   return (
     <button
-      className={`flex place-content-center items-center text-sm absolute right-3 rounded-full top-3 z-50 w-9 h-9 ${additionalClasses}`}
+      className={`${additionalClasses} flex place-content-center items-center text-sm absolute right-3 rounded-full top-3 w-9 h-9`}
       type="button"
       onClick={() => closeOverlay()}
     >
-      <FontAwesomeIcon className="z-50 w-5 h-5" icon={faClose} />
+      <FontAwesomeIcon className="z-40 w-5 h-5" icon={faClose} />
       <span className="sr-only">{label}</span>
     </button>
   );

src/components/CloseButton.jsx

@@ -17,13 +17,13 @@ const FAQ = () => {
       </section>
       <section className="bg-emerald-400 dark:bg-zinc-900 flex flex-row relative my-2 rounded font-bold p-5 flex flex-col mt-5">
         Sådan bruger du navigationen
-        <Link to={"/navigation-help"} className="text-zinc-900 dark:text-emerald-800 font-bold underline mt-3">
+        <Link to={"/navigation-help"} className="text-zinc-900 dark:text-emerald-600 font-bold underline mt-3">
           Vedledning til navigation
         </Link>
       </section>
       <section className="bg-emerald-400 dark:bg-zinc-900 flex flex-row relative my-2 rounded font-bold p-5 flex flex-col mt-5">
         Tilgængelighedserklæring
-        <Link className="text-zinc-900 dark:text-emerald-800 font-bold underline mt-5">
+        <Link className="text-zinc-900 dark:text-emerald-600 font-bold underline mt-5">
           {/* todo add Tilgængelighedserklæring */}
           Tilgængelighed og en erklæring herom
         </Link>

src/components/FAQ.jsx

@@ -1,6 +1,6 @@
 import { React, useState, useEffect } from "react";
 import Steps from "../icons/steps.svg?url";
-import Xmark from "../icons/xmark-solid.svg?url";
+import CloseButton from "./CloseButton";
 
 const LandingPage = () => {
   const [infoClosed, setInfoClosed] = useState(localStorage.getItem("info-closed") === "true");
@@ -23,16 +23,13 @@ const LandingPage = () => {
         </p>
         <p className="mt-5 font-bold">Vælg en rute nedenfor og start din lytteoplevelse.</p>
       </div>
+      <CloseButton
+        label="Luk introduktion"
+        closeOverlay={() => setInfoClosed(true)}
+        additionalClasses="flex justify-center items-center dark:bg-emerald-700 w-9 h-9 rounded-full justify-content-center z-40"
+      />
       <div className="w-2/5 flex justify-center relative">
-        <button
-          className="flex justify-center items-center dark:bg-emerald-700 dark:text-white absolute right-0 top-0 w-9 h-9 rounded-full justify-content-center"
-          type="button"
-          onClick={() => setInfoClosed(true)}
-        >
-          <img src={Xmark} alt="" className="w-6 h-6" />
-          <span className="sr-only">Luk introduktion</span>
-        </button>
-        <img src={Steps} alt="Tilbage" />
+        <img src={Steps} alt="" />
       </div>
     </div>
   );

src/components/LandingPage.jsx

@@ -16,7 +16,7 @@ function MapConsentBanner() {
   return (
     <div className="fixed left-3 bottom-3 right-3 dark:bg-zinc-600 flex flex-col gap-3 rounded-lg p-3 bg-zinc-300">
       <div>
-        <h2 className="mb-1 font-bold">Samtykke</h2>
+        <h2 className="mb-1 font-bold text-xl">Samtykke</h2>
         <div className="mt-1 flex flex-col">
           <div className="flex flex-col gap-2">
             <p>

src/components/MapConsentBanner.jsx

@@ -9,9 +9,14 @@ const Navbar = () => {
   const { pathname } = useLocation();
 
   return (
-    <div className="fixed top-0 left-0 right-0 p-2 bg-zinc-100 dark:bg-zinc-800 z-40">
+    <nav className="fixed top-0 left-0 right-0 p-3 bg-zinc-100 dark:bg-zinc-800 z-50">
       <div className="mb-6 mt-4 flex justify-between">
-        {pathname === "/" && <img src={Logo} alt="" className="w-10 h-10" />}
+        {pathname === "/" && (
+          <Link to="/">
+            <span className="sr-only">Hjem</span>
+            <img src={Logo} alt="" className="w-10 h-10" />
+          </Link>
+        )}
         {pathname !== "/" && <BackButton />}
         <Link
           className="flex place-content-center rounded-full text-xl w-9 h-9 bg-emerald-400 dark:bg-black justify-center items-center"
@@ -21,7 +26,7 @@ const Navbar = () => {
           <span className="sr-only">FAQ</span>
         </Link>
       </div>
-    </div>
+    </nav>
   );
 };
 

src/components/Navbar.jsx

@@ -0,0 +1,13 @@
+import { React } from "react";
+
+const SkipLinks = () => {
+  return (
+    <section>
+      <a className="sr-only focus:not-sr-only" href="#main-content">
+        Gå til hovedindhold
+      </a>
+    </section>
+  );
+};
+
+export default SkipLinks;