diff --git a/app/(admin)/monitor/page.tsx b/app/(admin)/monitor/page.tsx index 4a7543c..0082f3d 100644 --- a/app/(admin)/monitor/page.tsx +++ b/app/(admin)/monitor/page.tsx @@ -1,6 +1,6 @@ -import WebVitalsDashboard from "../components/WebVitalsDashboard"; -import TopNav from "../components/navigation/TopNav"; -import Footer from "../components/navigation/Footer"; +import WebVitalsDashboard from "../../components/WebVitalsDashboard"; +import TopNav from "../../components/navigation/TopNav"; +import Footer from "../../components/navigation/Footer"; export default function MonitorPage() { return ( diff --git a/app/components/progress/ProportionBar/ProportionBar.view.tsx b/app/components/progress/ProportionBar/ProportionBar.view.tsx index c98f26f..ea01386 100644 --- a/app/components/progress/ProportionBar/ProportionBar.view.tsx +++ b/app/components/progress/ProportionBar/ProportionBar.view.tsx @@ -22,6 +22,19 @@ export function ProportionBarView({ } const maxProgress = 3; const progressPercentage = Math.round((totalProgress / maxProgress) * 100); + // Check if at 100% completion (all 3 segments fully filled) + // Note: Current type system max is "3-2" (88.9%), true 100% would require "3-3" or all segments fully filled + const isFull = totalProgress >= maxProgress; + // Generate descriptive aria-label + const ariaLabelText = isFull + ? "Progress: Complete (100%)" + : fullSegments === 3 && partialSegment === 2 + ? `Progress: ${fullSegments} segments complete, maximum state (${progressPercentage}%)` + : fullSegments === 3 + ? `Progress: ${fullSegments} segments, ${partialSegment} of 3 parts filled (${progressPercentage}%)` + : fullSegments === 2 + ? `Progress: ${fullSegments} segments, ${partialSegment} of 3 parts filled (${progressPercentage}%)` + : `Progress: ${fullSegments} segment, ${partialSegment + 1} of 6 parts filled (${progressPercentage}%)`; return (