fix(app): accessibility improvements

stdavis · stdavis · commit cbca6d9c5030 · 2026-03-30T14:33:36.000-06:00
Ref: agrc/planning-queue#813
diff --git a/index.html b/index.html
@@ -15,6 +15,15 @@
   </head>
 
   <body>
+    <noscript>
+      <div role="alert">
+        <h1>JavaScript is required</h1>
+        <p>
+          We're sorry, but this application requires JavaScript to be enabled to function. Please enable JavaScript in
+          your browser settings and reload.
+        </p>
+      </div>
+    </noscript>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>
diff --git a/src/components/app/App.jsx b/src/components/app/App.jsx
@@ -8,7 +8,7 @@ export default function App() {
   const [state, dispatch] = useImmerReducer(reduce, defaults);
 
   return (
-    <main className="app grid h-full w-screen">
+    <main id="main-content" tabIndex="-1" className="app grid h-full w-screen">
       <Map state={state.map} color={state.addPoint.color} drawerOpen={state.drawerOpen} dispatch={dispatch} />
       <Menu drawerOpen={state.drawerOpen} dispatch={dispatch}>
         menu
diff --git a/src/components/pageElements/Welcome.jsx b/src/components/pageElements/Welcome.jsx
@@ -14,6 +14,7 @@ export default function Welcome({ dispatch }) {
 
   return (
     <main className="mt-3 inline-grid gap-4">
+      <h1 className="sr-only">Utah PLSS Corner Points</h1>
       <h2 className="text-2xl font-semibold">What is the PLSS</h2>
       <p className="ml-3">
         Section corners in the Public Land Survey System (PLSS) form the foundation for all descriptions of private
