Resolved all known issues

README.md

@@ -53,5 +53,8 @@ This application contains the following pages:
 - **Filter page**: Adjusts the page index to skip unnecessary pages such as those with less than a quarter of text, publisher information, or back cover text
 - **Cookie manager**: Handles everything related to cookies
 
+## Known errors
 
-
+- ** ~~ Router didn't work properly in the Static Web App ~~ (resolved with useNavigate).
+- ** ~~<a> tags in the header could not be tabbed ~~ (resolved by using buttons instead of <a> tags).
+- ** ~~ It couldn't upload files in Chrome ~~ (resolved by setting "useFsAccessApi: false" in dropzone settings).

src/components/navbar.jsx

@@ -1,27 +1,30 @@
-import CookieBanner from "./cookie-banner"
+import CookieBanner from "./cookie-banner";
 
 export default function Navbar({ showCookieBanner, setCookiePermission }) {
-
   return (
     <header>
       <div>
-        <a href="#MainContentArea"
-          className="sr-only focus:not-sr-only bg-black text-white">
-            Till huvudinnehåll
-        </a>
-        <a href="/instruktion"
-          className="sr-only focus:not-sr-only bg-black text-white">
-            Till instruktion för använding av webbapplikationen
-        </a>
+        <button
+          onClick={() => document.getElementById('MainContentArea').focus()}
+          className="sr-only focus:not-sr-only focus:bg-black focus:text-white"
+          tabIndex={0}
+        >
+          Till huvudinnehåll
+        </button>
+        <button
+          onClick={() => window.location.href = '/instruktion'}
+          className="sr-only focus:not-sr-only focus:bg-black focus:text-white"
+          tabIndex={0}
+        >
+          Till instruktion för använding av webbapplikationen
+        </button>
       </div>
 
       {showCookieBanner && <CookieBanner setCookiePermission={setCookiePermission} />}
 
-      <div className="flex justify-between items-center px-4 py-1 mx-auto
-      border-y border-neutral-400 bg-gradient-to-b from-neutral-300 via-neutral-200 to-neutral-300">
+      <div className="flex justify-between items-center px-4 py-1 mx-auto border-y border-neutral-400 bg-gradient-to-b from-neutral-300 via-neutral-200 to-neutral-300">
         <h1 className="text-lg font-bold" tabIndex={0}>Digital punktläsare</h1>
       </div>
-
     </header>
-  )
+  );
 }

src/components/upload-file.jsx

@@ -19,6 +19,7 @@ export default function UploadFile({ setSavedPageIndex, setReadmode, pefObject,
             'application/x-pentax-pef': ['.pef']
         },
         onDrop: handleAddFile,
+        useFsAccessApi: false,
     });
 
     useEffect(() => {

src/pages/not-found.jsx

@@ -1,4 +1,5 @@
 export default function NotFoundPage() {
+
     return (
       <main className="mx-auto px-20 pt-10 pb-20">
     <h2 className="mb-6 text-4xl font-bold text-slate-600 tracking-tight" tabIndex={0}>