fix: missing accessibility labels and tests

Signed-off-by: rare-magma <[email protected]>

e2e/accessibility.test.ts

@@ -0,0 +1,25 @@
+import { expect, test } from "@playwright/test";
+import { AxeBuilder } from "@axe-core/playwright";
+
+test("should not have any automatically detectable accessibility issues on landing page", async ({
+  page,
+}) => {
+  await page.goto("/");
+  const accessibilityScanResults = await new AxeBuilder({ page })
+    .disableRules("color-contrast")
+    .analyze();
+
+  expect(accessibilityScanResults.violations).toStrictEqual([]);
+});
+
+test("should not have any automatically detectable accessibility issues", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.getByText("get started").click();
+  const accessibilityScanResults = await new AxeBuilder({ page })
+    .disableRules("color-contrast")
+    .analyze();
+
+  expect(accessibilityScanResults.violations).toStrictEqual([]);
+});

src/components/Budget/BudgetPage.tsx

@@ -1,4 +1,4 @@
-import { Suspense, lazy, useEffect, useState } from "react";
+import { lazy, Suspense, useEffect, useState } from "react";
 import { Col, Container, Row, ToastContainer } from "react-bootstrap";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useParams } from "react-router-dom";
@@ -79,8 +79,8 @@ export function BudgetPage() {
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     try {
-      const shouldLoadBudgetsFromList =
-        budgetList && budgetList.length >= 1 && Array.isArray(budgetList);
+      const shouldLoadBudgetsFromList = budgetList && budgetList.length >= 1 &&
+        Array.isArray(budgetList);
 
       if (shouldLoadBudgetsFromList) {
         if (name.trim() !== "undefined") {
@@ -102,7 +102,12 @@ export function BudgetPage() {
   }, [name, loadingFromDB]);
 
   return (
-    <Container fluid style={{ zIndex: 1 }} key={`${budget?.id}-${needReload}`}>
+    <Container
+      fluid
+      style={{ zIndex: 1 }}
+      key={`${budget?.id}-${needReload}`}
+      role="main"
+    >
       <ToastContainer
         className="p-2"
         position={"bottom-center"}
@@ -133,7 +138,8 @@ export function BudgetPage() {
                 <div className="card-columns">
                   <StatCard
                     key={`${budget?.expenses.total} + ${budget?.incomes.total}-${budget.id}-stat-card`}
-                    onShowGraphs={() => setShowGraphs(true)}
+                    onShowGraphs={() =>
+                      setShowGraphs(true)}
                   />
 
                   <div className="mt-3" />

src/components/NavBar/NavBar.tsx

@@ -139,7 +139,7 @@ export function NavBar() {
       onToggle={() => setExpanded(!expanded)}
       data-testid="header"
     >
-      <Container fluid className="flex-row">
+      <Container fluid className="flex-row" role="heading" aria-level={1}>
         {shouldShowBrand && (
           <OverlayTrigger
             delay={250}

src/components/StatCard/StatCard.tsx

@@ -43,13 +43,15 @@ export function StatCard({ onShowGraphs }: StatCardProps) {
   const stat = budget?.stats;
   const [autoGoal, setAutoGoal] = useState(false);
 
-  const shouldCalculateAvailablePerc =
-    revenuePercentage <= 100 && stat && stat.available > 0;
+  const shouldCalculateAvailablePerc = revenuePercentage <= 100 && stat &&
+    stat.available > 0;
 
-  const goalRef =
-    useRef<HTMLInputElement>() as React.MutableRefObject<HTMLInputElement>;
-  const reservesRef =
-    useRef<HTMLInputElement>() as React.MutableRefObject<HTMLInputElement>;
+  const goalRef = useRef<HTMLInputElement>() as React.MutableRefObject<
+    HTMLInputElement
+  >;
+  const reservesRef = useRef<HTMLInputElement>() as React.MutableRefObject<
+    HTMLInputElement
+  >;
 
   useHotkeys("g", (e) => !e.repeat && focusRef(goalRef), {
     preventDefault: true,
@@ -120,7 +122,6 @@ export function StatCard({ onShowGraphs }: StatCardProps) {
                 min={0}
                 max={100}
                 now={revenuePercentage}
-                label={`${revenuePercentage}%`}
                 visuallyHidden
               />
             </Col>