e.stopPropagation()}
- onMouseMove={(e) => e.stopPropagation()}
- onMouseUp={(e) => e.stopPropagation()}
- onDragStart={(e) => {
- e.stopPropagation();
- e.preventDefault();
- }}
- onDoubleClick={(e) => {
- e.stopPropagation();
- e.preventDefault();
- }}
- >
+ <>
{/* Map Actions - Fullscreen and Reset in same row, matching layers button width */}
+ {/* Layer Controls - Always rendered for tab order, but visually hidden on mobile */}
+
+
);
});
/**
* MapControls component
*
- * Floating action buttons positioned in the corners of the map.
- * Provides map interaction controls and layer management.
- *
- * Layout:
- * - Top-left: Zoom in, Zoom out (next to MapStats badge)
- * - Top-right: Reset view, Fullscreen toggle, Heatmap toggle, Layer controls
+ * Floating action buttons for map interaction controls.
+ * Can be rendered inside or outside the Leaflet MapContainer.
*
* Features:
* - Map fullscreen toggle (not browser fullscreen)
* - Reset view button (fit all markers)
- * - Zoom in/out buttons
+ * - Heatmap toggle
* - Layer controls via LayerPopover
* - Proper ARIA labels and keyboard support
- * - Leaflet event prevention to avoid map pan on button clicks
- *
- * Note: This component must be rendered inside a MapContainer to access the map instance.
*/
export const MapControls = observer(() => {
- return (
- <>
-
;
});
diff --git a/frontend/src/features/projects/components/map/MapFilters.tsx b/frontend/src/features/projects/components/map/MapFilters.tsx
index 6ed52d6fa..f2f8c97f0 100644
--- a/frontend/src/features/projects/components/map/MapFilters.tsx
+++ b/frontend/src/features/projects/components/map/MapFilters.tsx
@@ -16,6 +16,7 @@ import { useProjectMapStore } from "@/app/stores/store-context";
import { SearchControls } from "@/shared/components/SearchControls";
import { BusinessAreaMultiSelect } from "@/shared/components/BusinessAreaMultiSelect";
import { UserCombobox } from "@/shared/components/user";
+import { ResponsiveLayout } from "@/shared/components/ResponsiveLayout";
interface MapFiltersProps {
projectCount: number;
@@ -108,46 +109,83 @@ export const MapFilters = observer(
return (
- {/* Row 1: Search and User Filter (side by side on lg+, stacked on mobile) */}
-
+ {/* Row 2 Mobile: User Filter */}
+
+
+
+
+ }
+ desktopContent={
+
+ {/* Row 1 Desktop: User Filter (left) */}
+
+
+
+
+ {/* Row 1 Desktop: Search Input (right) */}
+
+
+
+ {localSearchTerm && (
+
+ )}
+
+
+ }
+ />
{/* Row 2: Year, Project Status, Project Kind, Business Area (4-column grid) */}
{
const store = useProjectMapStore();
const popupRef = useRef(null);
+ const markerRef = useRef(null);
const [isHovered, setIsHovered] = useState(false);
+ const lastFocusedElement = useRef(null);
+ const focusTimeoutRef = useRef(null);
// Determine if this marker is selected
const isSelected = store.isMarkerSelected(position);
@@ -48,16 +51,43 @@ const ProjectMarkerComponent = observer(
);
const icon = marker.getIcon();
- // Handle marker click for selection
- const handleMarkerClick = () => {
+ // Handle marker click for selection and open popup
+ const handleMarkerClick = useCallback(() => {
+ // Save the currently focused element before opening popup
+ lastFocusedElement.current = document.activeElement as HTMLElement;
+
store.selectMarker(position);
- };
+ // Open popup
+ if (markerRef.current) {
+ markerRef.current.openPopup();
+ }
+ }, [store, position]);
- // Handle popup close
+ // Handle popup close - return focus to marker
const handlePopupClose = () => {
if (popupRef.current) {
popupRef.current.close();
}
+
+ // Clear any existing timeout
+ if (focusTimeoutRef.current) {
+ clearTimeout(focusTimeoutRef.current);
+ }
+
+ // Return focus to the marker that opened the popup
+ if (lastFocusedElement.current) {
+ // Small delay to ensure popup is fully closed
+ focusTimeoutRef.current = setTimeout(() => {
+ // Check if element is still in the DOM before focusing
+ if (
+ lastFocusedElement.current &&
+ document.contains(lastFocusedElement.current)
+ ) {
+ lastFocusedElement.current.focus();
+ }
+ focusTimeoutRef.current = null;
+ }, 50);
+ }
};
// Handle mouse enter
@@ -77,8 +107,214 @@ const ProjectMarkerComponent = observer(
return 0; // Normal markers
};
+ // Make marker keyboard accessible
+ useEffect(() => {
+ if (!markerRef.current) return;
+
+ const marker = markerRef.current;
+ let cleanup: (() => void) | undefined;
+ let observer: MutationObserver | undefined;
+
+ const setupKeyboardAccess = () => {
+ // Access Leaflet's internal _icon property (HTMLElement)
+ const markerElement = (marker as L.Marker & { _icon?: HTMLElement })
+ ._icon;
+ if (!markerElement) return;
+
+ // Make marker focusable
+ markerElement.setAttribute("tabindex", "0");
+ markerElement.setAttribute("role", "button");
+ markerElement.setAttribute(
+ "aria-label",
+ `Project marker: ${projects.length} project${projects.length > 1 ? "s" : ""}. Press Enter to view details.`
+ );
+
+ // Function to disable all non-marker divs
+ const disableTooltipDivs = () => {
+ const markerPane = markerElement.closest(".leaflet-marker-pane");
+ if (markerPane) {
+ // Find all divs that are NOT project markers
+ const allDivs = markerPane.querySelectorAll("div");
+ allDivs.forEach((div: Element) => {
+ if (
+ div instanceof HTMLElement &&
+ !div.classList.contains("project-marker")
+ ) {
+ div.setAttribute("tabindex", "-1");
+ div.setAttribute("aria-hidden", "true");
+ div.style.pointerEvents = "none";
+ }
+ });
+ }
+ };
+
+ // Disable tooltip divs immediately
+ disableTooltipDivs();
+
+ // Set up MutationObserver to catch dynamically added tooltip divs
+ const markerPane = markerElement.closest(".leaflet-marker-pane");
+ if (markerPane) {
+ observer = new MutationObserver(() => {
+ disableTooltipDivs();
+ });
+
+ observer.observe(markerPane, {
+ childList: true,
+ subtree: true,
+ });
+ }
+
+ // Add keyboard event handler
+ const handleKeyDown = (e: KeyboardEvent) => {
+ // Only handle Enter and Space, ignore arrow keys
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ e.stopPropagation();
+ handleMarkerClick();
+ }
+ // Prevent arrow keys from doing anything (they would normally pan the map)
+ else if (
+ ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)
+ ) {
+ e.preventDefault();
+ e.stopPropagation();
+ // Keep focus on the marker, don't let it move
+ }
+ };
+
+ // Handle focus - apply visual effects and center map on marker
+ const handleFocus = (_e: FocusEvent) => {
+ // Pan map to center this marker
+ const map = (window as Window & { __leafletMap?: L.Map })
+ .__leafletMap;
+
+ if (map && marker) {
+ // Get marker's lat/lng position
+ const markerLatLng = marker.getLatLng();
+
+ // Pan to marker with smooth animation
+ map.panTo(markerLatLng, {
+ animate: true,
+ duration: 0.5, // 500ms
+ easeLinearity: 0.25,
+ });
+ }
+
+ // Find the marker pane - it's the parent of all marker containers
+ const markerPane = document.querySelector(".leaflet-marker-pane");
+ if (markerPane) {
+ // Get ALL marker divs (not img tags!) in the marker pane
+ const allMarkers = markerPane.querySelectorAll(".project-marker");
+
+ // First, restore ALL markers to normal (clear any previous focus)
+ allMarkers.forEach((marker: Element) => {
+ const el = marker as HTMLElement;
+ el.style.opacity = "1";
+ el.style.filter = "";
+ el.style.transition = "";
+ el.style.boxShadow = "";
+ el.style.borderRadius = "";
+ el.style.zIndex = "";
+ el.style.animation = "";
+ });
+
+ // Then dim all OTHER markers (make them gray but still visible)
+ allMarkers.forEach((marker: Element) => {
+ if (marker !== markerElement) {
+ const el = marker as HTMLElement;
+ el.style.opacity = "0.8";
+ el.style.filter = "grayscale(80%) blur(1px)";
+ el.style.transition = "all 0.2s ease-in-out";
+ }
+ });
+ }
+
+ // Apply glow effect to THIS marker
+ markerElement.style.opacity = "1";
+ markerElement.style.filter = "";
+ markerElement.style.boxShadow = `
+ 0 0 0 5px white,
+ 0 0 0 10px #2563eb,
+ 0 0 0 15px white,
+ 0 0 0 20px #2563eb,
+ 0 0 40px 20px rgba(37, 99, 235, 0.9),
+ 0 0 60px 30px rgba(37, 99, 235, 0.6),
+ 0 0 80px 40px rgba(37, 99, 235, 0.3)
+ `;
+ markerElement.style.borderRadius = "50%";
+ markerElement.style.zIndex = "9999";
+ markerElement.style.animation =
+ "marker-focus-pulse 1.5s ease-in-out infinite";
+ };
+
+ // Handle blur - restore all markers
+ const handleBlur = (_e: FocusEvent) => {
+ // Find the marker pane
+ const markerPane = document.querySelector(".leaflet-marker-pane");
+ if (markerPane) {
+ const allMarkers = markerPane.querySelectorAll(".project-marker");
+
+ // Restore ALL markers to normal
+ allMarkers.forEach((marker: Element) => {
+ const el = marker as HTMLElement;
+ el.style.opacity = "";
+ el.style.filter = "";
+ el.style.transition = "";
+ el.style.boxShadow = "";
+ el.style.borderRadius = "";
+ el.style.zIndex = "";
+ el.style.animation = "";
+ });
+ }
+ };
+
+ markerElement.addEventListener("keydown", handleKeyDown);
+ markerElement.addEventListener("focus", handleFocus);
+ markerElement.addEventListener("blur", handleBlur);
+
+ // Return cleanup function
+ cleanup = () => {
+ markerElement.removeEventListener("keydown", handleKeyDown);
+ markerElement.removeEventListener("focus", handleFocus);
+ markerElement.removeEventListener("blur", handleBlur);
+ if (observer) {
+ observer.disconnect();
+ }
+ };
+ };
+
+ // Try to set up immediately if icon exists
+ if ((marker as L.Marker & { _icon?: HTMLElement })._icon) {
+ setupKeyboardAccess();
+ }
+
+ // Also listen for 'add' event in case icon doesn't exist yet
+ const onAdd = () => {
+ // Small delay to ensure DOM is ready
+ setTimeout(setupKeyboardAccess, 0);
+ };
+
+ marker.on("add", onAdd);
+
+ // Cleanup
+ return () => {
+ marker.off("add", onAdd);
+ if (cleanup) cleanup();
+ };
+ }, [projects.length, handleMarkerClick]);
+
+ // Cleanup focus timeout on unmount
+ useEffect(() => {
+ return () => {
+ if (focusTimeoutRef.current) {
+ clearTimeout(focusTimeoutRef.current);
+ }
+ };
+ }, []);
+
return (
{
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "Escape" && onClose) {
+ event.preventDefault();
+ event.stopPropagation();
onClose();
mapAnnouncements.popupClosed();
}
@@ -148,6 +150,7 @@ function MultiProjectPopup({
const navigate = useNavigate();
const headerRef = useRef(null);
const [displayCount, setDisplayCount] = useState(20);
+ const focusIndexAfterLoadRef = useRef(null);
// Focus the first interactive element when popup opens
useEffect(() => {
@@ -162,10 +165,29 @@ function MultiProjectPopup({
mapAnnouncements.markerSelected(projects.length);
}, [projects.length]);
+ // Focus management after loading more items
+ useEffect(() => {
+ if (focusIndexAfterLoadRef.current !== null) {
+ const targetIndex = focusIndexAfterLoadRef.current;
+ // Small delay to ensure DOM has updated
+ setTimeout(() => {
+ const targetProject = document.querySelector(
+ `[data-project-item="${targetIndex}"]`
+ ) as HTMLElement;
+ if (targetProject) {
+ targetProject.focus();
+ }
+ focusIndexAfterLoadRef.current = null;
+ }, 50);
+ }
+ }, [displayCount]);
+
// Handle escape key to close popup
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "Escape" && onClose) {
+ event.preventDefault();
+ event.stopPropagation();
onClose();
mapAnnouncements.popupClosed();
}
@@ -190,6 +212,8 @@ function MultiProjectPopup({
};
const handleLoadMore = () => {
+ // Save the index of the last currently displayed item
+ focusIndexAfterLoadRef.current = displayProjects.length - 1;
// Load 10 more projects at a time
setDisplayCount((prev) => Math.min(prev + 10, projects.length));
};
@@ -202,39 +226,45 @@ function MultiProjectPopup({
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
handleProjectClick(projectId);
- } else if (event.key === "Tab") {
- // Handle circular tab navigation within the popup
- const isLastItem = currentIndex === displayProjects.length - 1;
- const isFirstItem = currentIndex === 0;
-
- if (!event.shiftKey && isLastItem && !hasMore) {
- // Tab on last item when no Load More button - go to first item
- event.preventDefault();
- const firstProject = document.querySelector(
- '[data-project-item="0"]'
+ } else if (event.key === "ArrowDown") {
+ // Arrow down - move to next project
+ event.preventDefault();
+ const nextIndex = currentIndex + 1;
+ if (nextIndex < displayProjects.length) {
+ const nextProject = document.querySelector(
+ `[data-project-item="${nextIndex}"]`
) as HTMLElement;
- if (firstProject) {
- firstProject.focus();
+ if (nextProject) {
+ nextProject.focus();
}
- } else if (event.shiftKey && isFirstItem) {
- // Shift+Tab on first item - go to last focusable item
- event.preventDefault();
- if (hasMore) {
- const loadMoreButton = document.querySelector(
- "[data-load-more-button]"
- ) as HTMLElement;
- if (loadMoreButton) {
- loadMoreButton.focus();
- }
- } else {
- const lastProject = document.querySelector(
- `[data-project-item="${displayProjects.length - 1}"]`
- ) as HTMLElement;
- if (lastProject) {
- lastProject.focus();
- }
+ } else if (hasMore) {
+ // If at last project and there's a Load More button, focus it
+ const loadMoreButton = document.querySelector(
+ "[data-load-more-button]"
+ ) as HTMLElement;
+ if (loadMoreButton) {
+ loadMoreButton.focus();
}
}
+ } else if (event.key === "ArrowUp") {
+ // Arrow up - move to previous project
+ event.preventDefault();
+ const prevIndex = currentIndex - 1;
+ if (prevIndex >= 0) {
+ const prevProject = document.querySelector(
+ `[data-project-item="${prevIndex}"]`
+ ) as HTMLElement;
+ if (prevProject) {
+ prevProject.focus();
+ }
+ }
+ } else if (event.key === "Tab") {
+ // Tab should close the popup - use setTimeout to avoid interfering with focus events
+ if (onClose) {
+ setTimeout(() => {
+ onClose();
+ }, 0);
+ }
}
};
@@ -242,25 +272,21 @@ function MultiProjectPopup({
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
handleLoadMore();
+ } else if (event.key === "ArrowUp") {
+ // Arrow up from Load More - go to last project
+ event.preventDefault();
+ const lastProject = document.querySelector(
+ `[data-project-item="${displayProjects.length - 1}"]`
+ ) as HTMLElement;
+ if (lastProject) {
+ lastProject.focus();
+ }
} else if (event.key === "Tab") {
- if (event.shiftKey) {
- // Shift+Tab on Load More - go to last project
- event.preventDefault();
- const lastProject = document.querySelector(
- `[data-project-item="${displayProjects.length - 1}"]`
- ) as HTMLElement;
- if (lastProject) {
- lastProject.focus();
- }
- } else {
- // Tab on Load More - go to first project
- event.preventDefault();
- const firstProject = document.querySelector(
- '[data-project-item="0"]'
- ) as HTMLElement;
- if (firstProject) {
- firstProject.focus();
- }
+ // Tab should close the popup - use setTimeout to avoid interfering with focus events
+ if (onClose) {
+ setTimeout(() => {
+ onClose();
+ }, 0);
}
}
};
diff --git a/frontend/src/features/projects/components/map/RegionLayer.tsx b/frontend/src/features/projects/components/map/RegionLayer.tsx
index eea1a0c33..43379bb91 100644
--- a/frontend/src/features/projects/components/map/RegionLayer.tsx
+++ b/frontend/src/features/projects/components/map/RegionLayer.tsx
@@ -54,7 +54,17 @@ export const RegionLayer = ({
// Store original style
const originalStyle = { ...style };
- // Hover effects
+ // CRITICAL: Immediately make non-focusable when layer is created
+ const element = (layer as any)._path;
+ if (element) {
+ element.setAttribute("tabindex", "-1");
+ element.setAttribute("aria-hidden", "true");
+ element.setAttribute("focusable", "false");
+ element.style.outline = "none";
+ element.style.pointerEvents = "auto"; // Keep mouse events
+ }
+
+ // Hover effects only (no keyboard interaction)
layer.on({
mouseover: (e) => {
const target = e.target;
@@ -80,9 +90,19 @@ export const RegionLayer = ({
});
}
},
+ add: () => {
+ // Double-check attributes after add event
+ const el = (layer as any)._path;
+ if (el) {
+ el.setAttribute("tabindex", "-1");
+ el.setAttribute("aria-hidden", "true");
+ el.setAttribute("focusable", "false");
+ el.style.outline = "none";
+ }
+ },
});
- // Add tooltip with region name if available
+ // Add tooltip with region name if available (hover only, not on focus)
const regionName =
feature.properties?.name ||
feature.properties?.NAME ||
@@ -94,10 +114,22 @@ export const RegionLayer = ({
"Unknown Region";
if (regionName && regionName !== "Unknown Region") {
- layer.bindTooltip(regionName, {
+ // CRITICAL: Bind tooltip but make it non-interactive
+ const tooltip = layer.bindTooltip(regionName, {
permanent: false,
direction: "center",
className: "region-tooltip",
+ interactive: false, // Prevent tooltip from being interactive
+ });
+
+ // Make tooltip element non-focusable
+ layer.on("tooltipopen", () => {
+ const tooltipElement = (tooltip as any)._tooltip?._container;
+ if (tooltipElement) {
+ tooltipElement.setAttribute("tabindex", "-1");
+ tooltipElement.setAttribute("aria-hidden", "true");
+ tooltipElement.style.pointerEvents = "none";
+ }
});
}
}
diff --git a/frontend/src/features/projects/components/map/map-accessibility.css b/frontend/src/features/projects/components/map/map-accessibility.css
new file mode 100644
index 000000000..116dce63c
--- /dev/null
+++ b/frontend/src/features/projects/components/map/map-accessibility.css
@@ -0,0 +1,104 @@
+/**
+ * Map Accessibility Styles
+ *
+ * These styles ensure proper keyboard navigation in the Leaflet map:
+ * - Region layer SVG paths are NOT focusable (no tab stops)
+ * - Project markers ARE focusable (handled via JavaScript)
+ * - TileLayer is NOT focusable
+ * - Tooltips and popups are NOT focusable
+ */
+
+/* CRITICAL: Prevent ALL SVG paths from being focusable */
+.leaflet-container svg path {
+ pointer-events: auto !important; /* Keep mouse events */
+ outline: none !important; /* Remove focus outline */
+}
+
+/* Prevent region layer SVG paths from being focusable */
+.leaflet-container .leaflet-overlay-pane svg path {
+ pointer-events: auto !important; /* Keep mouse events */
+ outline: none !important; /* Remove focus outline */
+}
+
+/* Prevent region layer tooltips from being keyboard-accessible */
+.leaflet-container .leaflet-tooltip {
+ pointer-events: none; /* Tooltips should not intercept events */
+}
+
+/* Ensure tile layer images are not focusable */
+.leaflet-container .leaflet-tile-pane img {
+ pointer-events: none;
+}
+
+/* Prevent ALL Leaflet panes from being focusable except marker pane */
+.leaflet-pane:not(.leaflet-marker-pane) {
+ pointer-events: auto !important;
+}
+
+.leaflet-pane:not(.leaflet-marker-pane) * {
+ outline: none !important;
+}
+
+/* CRITICAL: Prevent tooltip/popup divs from being focusable (causes double-tab issue) */
+.leaflet-marker-pane > div:not(.project-marker) {
+ pointer-events: none !important;
+ outline: none !important;
+}
+
+.leaflet-marker-pane > div:not(.project-marker) * {
+ pointer-events: none !important;
+ outline: none !important;
+}
+
+/* Ensure ONLY project-marker divs are focusable */
+.leaflet-marker-pane .project-marker {
+ pointer-events: auto !important;
+}
+
+/* Project markers should be focusable - ensure they have SUPER OBVIOUS focus */
+.leaflet-container .leaflet-marker-pane .project-marker {
+ cursor: pointer !important;
+ transition: all 0.15s ease-in-out !important;
+}
+
+/* Pulsing animation for focused marker - pulses the glow */
+@keyframes marker-focus-pulse {
+ 0%,
+ 100% {
+ box-shadow:
+ 0 0 0 5px white,
+ 0 0 0 10px #2563eb,
+ 0 0 0 15px white,
+ 0 0 0 20px #2563eb,
+ 0 0 40px 20px rgba(37, 99, 235, 0.9),
+ 0 0 60px 30px rgba(37, 99, 235, 0.6),
+ 0 0 80px 40px rgba(37, 99, 235, 0.3);
+ }
+ 50% {
+ box-shadow:
+ 0 0 0 5px white,
+ 0 0 0 10px #2563eb,
+ 0 0 0 15px white,
+ 0 0 0 20px #2563eb,
+ 0 0 50px 25px rgba(37, 99, 235, 1),
+ 0 0 70px 35px rgba(37, 99, 235, 0.8),
+ 0 0 90px 45px rgba(37, 99, 235, 0.5);
+ }
+}
+
+/* Prevent map container and tile pane from being focusable */
+.leaflet-container {
+ outline: none !important;
+}
+
+.leaflet-container:focus {
+ outline: none !important;
+}
+
+.leaflet-pane {
+ outline: none !important;
+}
+
+.leaflet-pane:focus {
+ outline: none !important;
+}
diff --git a/frontend/src/features/projects/components/map/map-utils.ts b/frontend/src/features/projects/components/map/map-utils.ts
new file mode 100644
index 000000000..8558392cb
--- /dev/null
+++ b/frontend/src/features/projects/components/map/map-utils.ts
@@ -0,0 +1,25 @@
+import { GEOJSON_PROPERTY_NAMES } from "@/features/projects/types/map.types";
+
+/**
+ * Mapping from layer type strings to GeoJSON data keys
+ */
+export const LAYER_TO_GEOJSON_KEY: Record<
+ string,
+ keyof typeof GEOJSON_PROPERTY_NAMES
+> = {
+ dbcaregion: "dbcaRegions",
+ dbcadistrict: "dbcaDistricts",
+ nrm: "nrm",
+ ibra: "ibra",
+ imcra: "imcra",
+};
+
+/**
+ * Map configuration
+ */
+export const MAP_CONFIG = {
+ center: [-25.2744, 122.2402] as [number, number],
+ zoom: 6,
+ minZoom: 5,
+ maxZoom: 18,
+};
diff --git a/frontend/src/pages/auth/Login.a11y.test.tsx b/frontend/src/pages/auth/Login.a11y.test.tsx
new file mode 100644
index 000000000..115aebb53
--- /dev/null
+++ b/frontend/src/pages/auth/Login.a11y.test.tsx
@@ -0,0 +1,25 @@
+/**
+ * Accessibility tests for Login page
+ * Tests WCAG 2.2 Level AA compliance using axe-core
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { renderPage, testAccessibility } from "@/test/page-test-utils";
+import Login from "./Login";
+
+// Mock authentication hook
+vi.mock("@/features/auth/hooks/useAuth", () => ({
+ useLogin: () => ({
+ mutate: vi.fn(),
+ isPending: false,
+ error: null,
+ }),
+}));
+
+describe("Login Page - Accessibility", () => {
+ it("should have no accessibility violations", async () => {
+ const { container } = renderPage();
+ const results = await testAccessibility(container);
+ expect(results).toHaveNoViolations();
+ });
+});
diff --git a/frontend/src/pages/dash/Dashboard.a11y.test.tsx b/frontend/src/pages/dash/Dashboard.a11y.test.tsx
new file mode 100644
index 000000000..2c4a07dc9
--- /dev/null
+++ b/frontend/src/pages/dash/Dashboard.a11y.test.tsx
@@ -0,0 +1,41 @@
+/**
+ * Accessibility tests for Dashboard page
+ * Tests WCAG 2.2 Level AA compliance using axe-core
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { renderPage, testAccessibility } from "@/test/page-test-utils";
+import Dashboard from "./Dashboard";
+
+// Mock hooks
+vi.mock("@/features/users/hooks/useCurrentUser", () => ({
+ useCurrentUser: () => ({
+ data: {
+ id: 1,
+ username: "testuser",
+ display_first_name: "Test",
+ display_last_name: "User",
+ email: "test@example.com",
+ },
+ isLoading: false,
+ }),
+}));
+
+vi.mock("@/features/dashboard/hooks/useDashboardData", () => ({
+ useDashboardData: () => ({
+ data: {
+ recentProjects: [],
+ pendingTasks: [],
+ notifications: [],
+ },
+ isLoading: false,
+ }),
+}));
+
+describe("Dashboard Page - Accessibility", () => {
+ it("should have no accessibility violations", async () => {
+ const { container } = renderPage();
+ const results = await testAccessibility(container);
+ expect(results).toHaveNoViolations();
+ });
+});
diff --git a/frontend/src/pages/dash/Dashboard.tsx b/frontend/src/pages/dash/Dashboard.tsx
index e4ba88b1b..b50d6bed3 100644
--- a/frontend/src/pages/dash/Dashboard.tsx
+++ b/frontend/src/pages/dash/Dashboard.tsx
@@ -80,6 +80,12 @@ const Dashboard = observer(() => {
refetch: refetchAdminTasks,
} = useAdminTasks();
+ // Debug logging for admin tasks
+ console.log("🎯 [DASHBOARD] Admin tasks received:", adminTasks);
+ console.log("🎯 [DASHBOARD] Admin tasks count:", adminTasks.length);
+ console.log("🎯 [DASHBOARD] Admin tasks loading:", adminTasksLoading);
+ console.log("🎯 [DASHBOARD] Admin tasks error:", adminTasksError);
+
// Fetch endorsement tasks
const {
data: endorsementTasks,
@@ -138,6 +144,13 @@ const Dashboard = observer(() => {
const adminTasksCount =
caretakerTasksCount + projectDeletionTasksCount + endorsementTasksCount;
+ // Debug logging for task counts
+ console.log("📊 [DASHBOARD] Task counts breakdown:");
+ console.log(" - Caretaker tasks:", caretakerTasksCount);
+ console.log(" - Project deletion tasks:", projectDeletionTasksCount);
+ console.log(" - Endorsement tasks:", endorsementTasksCount);
+ console.log(" - Total admin tasks count:", adminTasksCount);
+
const handleProjectClick = (projectId: number, event: React.MouseEvent) => {
const url = `/projects/${projectId}/overview`;
diff --git a/frontend/src/pages/dash/HowTo.a11y.test.tsx b/frontend/src/pages/dash/HowTo.a11y.test.tsx
new file mode 100644
index 000000000..79d5e5ca0
--- /dev/null
+++ b/frontend/src/pages/dash/HowTo.a11y.test.tsx
@@ -0,0 +1,16 @@
+/**
+ * Accessibility tests for HowTo page
+ * Tests WCAG 2.2 Level AA compliance using axe-core
+ */
+
+import { describe, it, expect } from "vitest";
+import { renderPage, testAccessibility } from "@/test/page-test-utils";
+import HowTo from "./HowTo";
+
+describe("HowTo Page - Accessibility", () => {
+ it("should have no accessibility violations", async () => {
+ const { container } = renderPage();
+ const results = await testAccessibility(container);
+ expect(results).toHaveNoViolations();
+ });
+});
diff --git a/frontend/src/pages/dash/UserGuide.a11y.test.tsx b/frontend/src/pages/dash/UserGuide.a11y.test.tsx
new file mode 100644
index 000000000..1f967a156
--- /dev/null
+++ b/frontend/src/pages/dash/UserGuide.a11y.test.tsx
@@ -0,0 +1,16 @@
+/**
+ * Accessibility tests for UserGuide page
+ * Tests WCAG 2.2 Level AA compliance using axe-core
+ */
+
+import { describe, it, expect } from "vitest";
+import { renderPage, testAccessibility } from "@/test/page-test-utils";
+import UserGuide from "./UserGuide";
+
+describe("UserGuide Page - Accessibility", () => {
+ it("should have no accessibility violations", async () => {
+ const { container } = renderPage();
+ const results = await testAccessibility(container);
+ expect(results).toHaveNoViolations();
+ });
+});
diff --git a/frontend/src/pages/projects/ProjectCreatePage.a11y.test.tsx b/frontend/src/pages/projects/ProjectCreatePage.a11y.test.tsx
new file mode 100644
index 000000000..23b2aa2da
--- /dev/null
+++ b/frontend/src/pages/projects/ProjectCreatePage.a11y.test.tsx
@@ -0,0 +1,34 @@
+/**
+ * Accessibility tests for ProjectCreatePage
+ * Tests WCAG 2.2 Level AA compliance using axe-core
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { renderPage, testAccessibility } from "@/test/page-test-utils";
+import ProjectCreatePage from "./ProjectCreatePage";
+
+// Mock hooks
+vi.mock("@/features/projects/hooks/useCreateProject", () => ({
+ useCreateProject: () => ({
+ mutate: vi.fn(),
+ isPending: false,
+ }),
+}));
+
+vi.mock("@/features/users/hooks/useCurrentUser", () => ({
+ useCurrentUser: () => ({
+ data: {
+ id: 1,
+ username: "testuser",
+ },
+ isLoading: false,
+ }),
+}));
+
+describe("ProjectCreatePage - Accessibility", () => {
+ it("should have no accessibility violations", async () => {
+ const { container } = renderPage();
+ const results = await testAccessibility(container);
+ expect(results).toHaveNoViolations();
+ });
+});
diff --git a/frontend/src/pages/projects/ProjectDetailPage.a11y.test.tsx b/frontend/src/pages/projects/ProjectDetailPage.a11y.test.tsx
new file mode 100644
index 000000000..1ac035d11
--- /dev/null
+++ b/frontend/src/pages/projects/ProjectDetailPage.a11y.test.tsx
@@ -0,0 +1,40 @@
+/**
+ * Accessibility tests for ProjectDetailPage
+ * Tests WCAG 2.2 Level AA compliance using axe-core
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { renderPage, testAccessibility } from "@/test/page-test-utils";
+import ProjectDetailPage from "./ProjectDetailPage";
+
+// Mock hooks
+vi.mock("@/features/projects/hooks/useProject", () => ({
+ useProject: () => ({
+ data: {
+ id: 1,
+ title: "Test Project",
+ description: "Test description",
+ status: "active",
+ created_at: "2024-01-01",
+ },
+ isLoading: false,
+ }),
+}));
+
+vi.mock("react-router", async () => {
+ const actual = await vi.importActual("react-router");
+ return {
+ ...actual,
+ useParams: () => ({ id: "1" }),
+ };
+});
+
+describe("ProjectDetailPage - Accessibility", () => {
+ it("should have no accessibility violations", async () => {
+ const { container } = renderPage(, {
+ initialEntries: ["/projects/1"],
+ });
+ const results = await testAccessibility(container);
+ expect(results).toHaveNoViolations();
+ });
+});
diff --git a/frontend/src/pages/projects/ProjectListPage.a11y.test.tsx b/frontend/src/pages/projects/ProjectListPage.a11y.test.tsx
new file mode 100644
index 000000000..b02fdd1b6
--- /dev/null
+++ b/frontend/src/pages/projects/ProjectListPage.a11y.test.tsx
@@ -0,0 +1,91 @@
+/**
+ * Accessibility tests for ProjectListPage
+ * Tests WCAG 2.2 Level AA compliance using axe-core
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { renderPage, testAccessibility } from "@/test/page-test-utils";
+
+// Mock all dependencies BEFORE importing the component
+vi.mock("@/features/projects/hooks/useProjects", () => ({
+ useProjects: () => ({
+ data: {
+ projects: [],
+ total_results: 0,
+ total_pages: 0,
+ },
+ isLoading: false,
+ error: null,
+ refetch: vi.fn(),
+ }),
+}));
+
+vi.mock("@/shared/hooks/useSearchStoreInit", () => ({
+ useSearchStoreInit: vi.fn(),
+}));
+
+vi.mock("@/app/stores/store-context", () => ({
+ useAuthStore: () => ({
+ state: {
+ isAuthenticated: true,
+ user: {
+ id: 1,
+ username: "testuser",
+ is_staff: false,
+ },
+ },
+ isSuperuser: false,
+ checkAuth: vi.fn(),
+ login: vi.fn(),
+ logout: vi.fn(),
+ }),
+ useProjectSearchStore: () => ({
+ state: {
+ searchTerm: "",
+ filters: {
+ businessArea: "All",
+ projectKind: "All",
+ projectStatus: "All",
+ year: 0,
+ user: null,
+ onlyActive: false,
+ onlyInactive: false,
+ },
+ currentPage: 1,
+ totalPages: 0,
+ totalResults: 0,
+ saveSearch: true,
+ },
+ setSearchTerm: vi.fn(),
+ setFilters: vi.fn(),
+ setCurrentPage: vi.fn(),
+ setPagination: vi.fn(),
+ resetFilters: vi.fn(),
+ toggleSaveSearch: vi.fn(),
+ hasActiveFilters: false,
+ filterCount: 0,
+ searchParams: new URLSearchParams(),
+ }),
+}));
+
+// Mock react-router to avoid navigation issues
+vi.mock("react-router", async () => {
+ const actual = await vi.importActual("react-router");
+ return {
+ ...actual,
+ useSearchParams: () => [new URLSearchParams(), vi.fn()],
+ };
+});
+
+// Now import the component AFTER all mocks are set up
+const ProjectListPage = await import("./ProjectListPage").then(
+ (m) => m.default
+);
+
+describe("ProjectListPage - Accessibility", () => {
+ it("should have no accessibility violations", async () => {
+ const { container } = renderPage();
+ const results = await testAccessibility(container);
+ expect(results).toHaveNoViolations();
+ });
+});
diff --git a/frontend/src/pages/projects/ProjectListPage.tsx b/frontend/src/pages/projects/ProjectListPage.tsx
index 41e837850..7303dabaa 100644
--- a/frontend/src/pages/projects/ProjectListPage.tsx
+++ b/frontend/src/pages/projects/ProjectListPage.tsx
@@ -105,7 +105,6 @@ const ProjectListPage = observer(() => {
const handlePageChange = (newPage: number) => {
projectSearchStore.setCurrentPage(newPage);
- window.scrollTo({ top: 0, behavior: "smooth" });
};
const handleClearFilters = () => {
diff --git a/frontend/src/pages/projects/ProjectMapPage.a11y.test.tsx b/frontend/src/pages/projects/ProjectMapPage.a11y.test.tsx
new file mode 100644
index 000000000..3fc5bf55d
--- /dev/null
+++ b/frontend/src/pages/projects/ProjectMapPage.a11y.test.tsx
@@ -0,0 +1,50 @@
+/**
+ * Accessibility tests for ProjectMapPage
+ * Tests WCAG 2.2 Level AA compliance using axe-core
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { renderPage, testAccessibility } from "@/test/page-test-utils";
+import ProjectMapPage from "./ProjectMapPage";
+
+// Mock map components
+vi.mock("@/features/projects/components/map/FullMapContainer", () => ({
+ FullMapContainer: () => Map
,
+}));
+
+vi.mock("@/features/projects/components/map/MapFilters", () => ({
+ MapFilters: () => Filters
,
+}));
+
+vi.mock("@/features/projects/hooks/useProjectsForMap", () => ({
+ useProjectsForMap: () => ({
+ data: {
+ projects: [],
+ total_projects: 0,
+ },
+ isLoading: false,
+ }),
+}));
+
+vi.mock("@/shared/hooks/useSearchStoreInit", () => ({
+ useSearchStoreInit: vi.fn(),
+}));
+
+vi.mock("@/app/stores/store-context", () => ({
+ useProjectMapStore: () => ({
+ state: {
+ mapFullscreen: false,
+ filtersMinimized: false,
+ },
+ toggleMapFullscreen: vi.fn(),
+ toggleFiltersMinimized: vi.fn(),
+ }),
+}));
+
+describe("ProjectMapPage - Accessibility", () => {
+ it("should have no accessibility violations", async () => {
+ const { container } = renderPage();
+ const results = await testAccessibility(container);
+ expect(results).toHaveNoViolations();
+ });
+});
diff --git a/frontend/src/pages/projects/ProjectMapPage.tsx b/frontend/src/pages/projects/ProjectMapPage.tsx
index ceaa7cd18..62e7f4f91 100644
--- a/frontend/src/pages/projects/ProjectMapPage.tsx
+++ b/frontend/src/pages/projects/ProjectMapPage.tsx
@@ -169,14 +169,14 @@ const ProjectMapPage = observer(() => {
// Fullscreen mode: true fullscreen map with floating sidebar or minimized filter button
return (
- {/* Fullscreen map */}
-
-
-
-
-
+ {/* Hide navigation menu in fullscreen mode */}
+
- {/* Minimized filter button - top right corner, positioned to not conflict with map controls */}
+ {/* FIRST: Minimized filter button - for tab order */}
{store.state.filtersMinimized && (
{
)}
- {/* Floating sidebar - animated */}
+ {/* SECOND: Floating sidebar - for tab order */}
{!store.state.filtersMinimized && (
{
+
+
+
+
);
});
diff --git a/frontend/src/pages/users/CaretakerModePage.a11y.test.tsx b/frontend/src/pages/users/CaretakerModePage.a11y.test.tsx
new file mode 100644
index 000000000..ac957bbe9
--- /dev/null
+++ b/frontend/src/pages/users/CaretakerModePage.a11y.test.tsx
@@ -0,0 +1,37 @@
+/**
+ * Accessibility tests for CaretakerModePage
+ * Tests WCAG 2.2 Level AA compliance using axe-core
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { renderPage, testAccessibility } from "@/test/page-test-utils";
+import CaretakerModePage from "./CaretakerModePage";
+
+// Mock hooks
+vi.mock("@/features/caretakers/hooks/useCaretakerRequests", () => ({
+ useCaretakerRequests: () => ({
+ data: {
+ results: [],
+ count: 0,
+ },
+ isLoading: false,
+ }),
+}));
+
+vi.mock("@/features/users/hooks/useCurrentUser", () => ({
+ useCurrentUser: () => ({
+ data: {
+ id: 1,
+ username: "testuser",
+ },
+ isLoading: false,
+ }),
+}));
+
+describe("CaretakerModePage - Accessibility", () => {
+ it("should have no accessibility violations", async () => {
+ const { container } = renderPage(
);
+ const results = await testAccessibility(container);
+ expect(results).toHaveNoViolations();
+ });
+});
diff --git a/frontend/src/pages/users/MyProfilePage.a11y.test.tsx b/frontend/src/pages/users/MyProfilePage.a11y.test.tsx
new file mode 100644
index 000000000..7a7a6bca8
--- /dev/null
+++ b/frontend/src/pages/users/MyProfilePage.a11y.test.tsx
@@ -0,0 +1,30 @@
+/**
+ * Accessibility tests for MyProfilePage
+ * Tests WCAG 2.2 Level AA compliance using axe-core
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { renderPage, testAccessibility } from "@/test/page-test-utils";
+import MyProfilePage from "./MyProfilePage";
+
+// Mock hooks
+vi.mock("@/features/users/hooks/useCurrentUser", () => ({
+ useCurrentUser: () => ({
+ data: {
+ id: 1,
+ username: "testuser",
+ display_first_name: "Test",
+ display_last_name: "User",
+ email: "test@example.com",
+ },
+ isLoading: false,
+ }),
+}));
+
+describe("MyProfilePage - Accessibility", () => {
+ it("should have no accessibility violations", async () => {
+ const { container } = renderPage(
);
+ const results = await testAccessibility(container);
+ expect(results).toHaveNoViolations();
+ });
+});
diff --git a/frontend/src/pages/users/UserDetailPage.a11y.test.tsx b/frontend/src/pages/users/UserDetailPage.a11y.test.tsx
new file mode 100644
index 000000000..3fc83c370
--- /dev/null
+++ b/frontend/src/pages/users/UserDetailPage.a11y.test.tsx
@@ -0,0 +1,40 @@
+/**
+ * Accessibility tests for UserDetailPage
+ * Tests WCAG 2.2 Level AA compliance using axe-core
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { renderPage, testAccessibility } from "@/test/page-test-utils";
+import UserDetailPage from "./UserDetailPage";
+
+// Mock hooks
+vi.mock("@/features/users/hooks/useUser", () => ({
+ useUser: () => ({
+ data: {
+ id: 1,
+ username: "testuser",
+ display_first_name: "Test",
+ display_last_name: "User",
+ email: "test@example.com",
+ },
+ isLoading: false,
+ }),
+}));
+
+vi.mock("react-router", async () => {
+ const actual = await vi.importActual("react-router");
+ return {
+ ...actual,
+ useParams: () => ({ id: "1" }),
+ };
+});
+
+describe("UserDetailPage - Accessibility", () => {
+ it("should have no accessibility violations", async () => {
+ const { container } = renderPage(
, {
+ initialEntries: ["/users/1"],
+ });
+ const results = await testAccessibility(container);
+ expect(results).toHaveNoViolations();
+ });
+});
diff --git a/frontend/src/pages/users/UserEditPage.a11y.test.tsx b/frontend/src/pages/users/UserEditPage.a11y.test.tsx
new file mode 100644
index 000000000..717720529
--- /dev/null
+++ b/frontend/src/pages/users/UserEditPage.a11y.test.tsx
@@ -0,0 +1,47 @@
+/**
+ * Accessibility tests for UserEditPage
+ * Tests WCAG 2.2 Level AA compliance using axe-core
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { renderPage, testAccessibility } from "@/test/page-test-utils";
+import UserEditPage from "./UserEditPage";
+
+// Mock hooks
+vi.mock("@/features/users/hooks/useUser", () => ({
+ useUser: () => ({
+ data: {
+ id: 1,
+ username: "testuser",
+ display_first_name: "Test",
+ display_last_name: "User",
+ email: "test@example.com",
+ },
+ isLoading: false,
+ }),
+}));
+
+vi.mock("@/features/users/hooks/useUpdateUser", () => ({
+ useUpdateUser: () => ({
+ mutate: vi.fn(),
+ isPending: false,
+ }),
+}));
+
+vi.mock("react-router", async () => {
+ const actual = await vi.importActual("react-router");
+ return {
+ ...actual,
+ useParams: () => ({ id: "1" }),
+ };
+});
+
+describe("UserEditPage - Accessibility", () => {
+ it("should have no accessibility violations", async () => {
+ const { container } = renderPage(
, {
+ initialEntries: ["/users/1/edit"],
+ });
+ const results = await testAccessibility(container);
+ expect(results).toHaveNoViolations();
+ });
+});
diff --git a/frontend/src/pages/users/UserListPage.a11y.test.tsx b/frontend/src/pages/users/UserListPage.a11y.test.tsx
new file mode 100644
index 000000000..b2f11240e
--- /dev/null
+++ b/frontend/src/pages/users/UserListPage.a11y.test.tsx
@@ -0,0 +1,84 @@
+/**
+ * Accessibility tests for UserListPage
+ * Tests WCAG 2.2 Level AA compliance using axe-core
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { renderPage, testAccessibility } from "@/test/page-test-utils";
+
+// Mock all dependencies BEFORE importing the component
+vi.mock("@/features/users/hooks/useUsers", () => ({
+ useUsers: () => ({
+ data: {
+ results: [],
+ count: 0,
+ },
+ isLoading: false,
+ error: null,
+ refetch: vi.fn(),
+ }),
+}));
+
+vi.mock("@/shared/hooks/useSearchStoreInit", () => ({
+ useSearchStoreInit: vi.fn(),
+}));
+
+vi.mock("@/app/stores/store-context", () => ({
+ useAuthStore: () => ({
+ state: {
+ isAuthenticated: true,
+ user: {
+ id: 1,
+ username: "testuser",
+ is_staff: false,
+ },
+ },
+ checkAuth: vi.fn(),
+ login: vi.fn(),
+ logout: vi.fn(),
+ }),
+ useUserSearchStore: () => ({
+ state: {
+ searchTerm: "",
+ filters: {
+ onlyExternal: false,
+ onlyStaff: false,
+ onlySuperuser: false,
+ onlyBALead: false,
+ businessArea: undefined,
+ },
+ currentPage: 1,
+ saveSearch: true,
+ totalResults: 0,
+ },
+ setSearchTerm: vi.fn(),
+ setFilters: vi.fn(),
+ setCurrentPage: vi.fn(),
+ setPagination: vi.fn(),
+ resetFilters: vi.fn(),
+ toggleSaveSearch: vi.fn(),
+ hasActiveFilters: false,
+ filterCount: 0,
+ searchParams: new URLSearchParams(),
+ }),
+}));
+
+// Mock react-router to avoid navigation issues
+vi.mock("react-router", async () => {
+ const actual = await vi.importActual("react-router");
+ return {
+ ...actual,
+ useSearchParams: () => [new URLSearchParams(), vi.fn()],
+ };
+});
+
+// Now import the component AFTER all mocks are set up
+const UserListPage = await import("./UserListPage").then((m) => m.default);
+
+describe("UserListPage - Accessibility", () => {
+ it("should have no accessibility violations", async () => {
+ const { container } = renderPage(
);
+ const results = await testAccessibility(container);
+ expect(results).toHaveNoViolations();
+ });
+});
diff --git a/frontend/src/pages/users/UserListPage.tsx b/frontend/src/pages/users/UserListPage.tsx
index dfa558155..c71445798 100644
--- a/frontend/src/pages/users/UserListPage.tsx
+++ b/frontend/src/pages/users/UserListPage.tsx
@@ -18,6 +18,17 @@ import { SearchControls } from "@/shared/components/SearchControls";
import { useAuthStore, useUserSearchStore } from "@/app/stores/store-context";
import { useSearchStoreInit } from "@/shared/hooks/useSearchStoreInit";
import { PageTransition } from "@/shared/components/PageTransition";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/shared/components/ui/select";
+import { Checkbox } from "@/shared/components/ui/checkbox";
+import { Label } from "@/shared/components/ui/label";
+import { useBusinessAreas } from "@/shared/hooks/queries/useBusinessAreas";
+import { ResponsiveLayout } from "@/shared/components/ResponsiveLayout";
/**
* UserListPage
@@ -56,6 +67,10 @@ const UserListPage = observer(() => {
page: userSearchStore.state.currentPage,
});
+ // Fetch business areas for desktop filter dropdown
+ const { data: businessAreas, isLoading: isLoadingBusinessAreas } =
+ useBusinessAreas();
+
// Delay sheet opening until after page transition completes
const [shouldShowSheet, setShouldShowSheet] = useState(false);
const [shouldShowError, setShouldShowError] = useState(false);
@@ -142,6 +157,24 @@ const UserListPage = observer(() => {
userSearchStore.clearSearchAndFilters();
};
+ // Sort business areas by division for desktop dropdown
+ const orderedDivisionSlugs = ["BCS", "CEM", "RFMS"];
+ const sortedBusinessAreas = businessAreas?.slice().sort((a, b) => {
+ const aDivSlug =
+ typeof a.division === "object" && a.division?.slug ? a.division.slug : "";
+ const bDivSlug =
+ typeof b.division === "object" && b.division?.slug ? b.division.slug : "";
+
+ const aIndex = orderedDivisionSlugs.indexOf(aDivSlug);
+ const bIndex = orderedDivisionSlugs.indexOf(bDivSlug);
+
+ if (aIndex !== bIndex) {
+ return aIndex - bIndex;
+ }
+
+ return a.name.localeCompare(b.name);
+ });
+
// Error state - only show if error persists
if (shouldShowError) {
return (
@@ -194,46 +227,215 @@ const UserListPage = observer(() => {
- {/* Layout: UserFilterPanel on left, UserSearchBar on right */}
-
- {/* Search Input - shows first on mobile */}
-
-
-
- {/* Remember my search and Clear - hidden on mobile, shown on desktop below search */}
-
-
+ {/* Search Input - visual position 1 on mobile */}
+
+
+ {/* Business Area + Filters - visual position 2 on mobile */}
+
+
+ {/* Remember my search and Clear - visual position 3 on mobile (at the bottom) */}
+
+
+
+
+ }
+ desktopContent={
+
+ {/* Row 1: Business Area (left) and Search (right) */}
+
+ {/* Business Area Dropdown - left side, row 1 */}
+
+
+
+
+ {/* Search Input - right side, row 1 */}
+
+
+
+
+
+ {/* Row 2: Filter Checkboxes (left) and Remember Search (right) */}
+
+ {/* Filter Checkboxes - left side, row 2 */}
+
+
+
+ {
+ handleFiltersChange({
+ ...userSearchStore.state.filters,
+ onlyExternal:
+ !userSearchStore.state.filters.onlyExternal,
+ onlyStaff: false,
+ onlySuperuser: false,
+ onlyBALead: false,
+ });
+ }}
+ />
+
+
+
+
+ {
+ handleFiltersChange({
+ ...userSearchStore.state.filters,
+ onlyStaff:
+ !userSearchStore.state.filters.onlyStaff,
+ onlyExternal: false,
+ onlySuperuser: false,
+ onlyBALead: false,
+ });
+ }}
+ className="data-[state=checked]:bg-green-600 data-[state=checked]:border-green-500"
+ />
+
+
+
+
+ {
+ handleFiltersChange({
+ ...userSearchStore.state.filters,
+ onlyBALead:
+ !userSearchStore.state.filters.onlyBALead,
+ onlyExternal: false,
+ onlyStaff: false,
+ onlySuperuser: false,
+ });
+ }}
+ className="data-[state=checked]:bg-orange-600 data-[state=checked]:border-orange-500"
+ />
+
+
+
+
+ {
+ handleFiltersChange({
+ ...userSearchStore.state.filters,
+ onlySuperuser:
+ !userSearchStore.state.filters
+ .onlySuperuser,
+ onlyExternal: false,
+ onlyStaff: false,
+ onlyBALead: false,
+ });
+ }}
+ className="data-[state=checked]:bg-blue-600 data-[state-checked]:border-blue-500"
+ />
+
+
+
+
+
+ {/* Remember Search Controls - right side, row 2 */}
+
+
+
+
-
-
- {/* Business Area + Filters - shows second on mobile, expands naturally */}
-
-
-
-
- {/* Remember my search and Clear - shown on mobile at bottom, hidden on desktop */}
-
-
-
-
+ }
+ />
diff --git a/frontend/src/shared/components/BusinessAreaMultiSelect.tsx b/frontend/src/shared/components/BusinessAreaMultiSelect.tsx
index dac224562..6d0824eb8 100644
--- a/frontend/src/shared/components/BusinessAreaMultiSelect.tsx
+++ b/frontend/src/shared/components/BusinessAreaMultiSelect.tsx
@@ -1,14 +1,12 @@
-import { useState, useMemo } from "react";
+import { useState, useMemo, useEffect, useRef } from "react";
import { observer } from "mobx-react-lite";
import { Button } from "@/shared/components/ui/button";
import {
- Popover,
- PopoverContent,
- PopoverTrigger,
-} from "@/shared/components/ui/popover";
-import { Checkbox } from "@/shared/components/ui/checkbox";
-import { Label } from "@/shared/components/ui/label";
-import { ChevronDown, X } from "lucide-react";
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuTrigger,
+} from "@/shared/components/ui/dropdown-menu";
+import { ChevronDown, X, Check } from "lucide-react";
import { useBusinessAreas } from "@/shared/hooks/queries/useBusinessAreas";
import type { IBusinessArea } from "@/shared/types/org.types";
@@ -27,12 +25,19 @@ interface BusinessAreaMultiSelectProps {
* BusinessAreaMultiSelect - Reusable multi-select component for business areas
*
* Features:
- * - Multi-select with checkboxes using shadcn Popover
+ * - Multi-select with checkboxes using DropdownMenu
* - "Select All" and "Clear All" functionality
* - Display selected count in trigger button
* - Show inactive business areas with "(Inactive)" label
- * - Keyboard navigation and accessibility
+ * - Keyboard navigation (Arrow keys, Enter, Escape, Tab)
+ * - Focus management and accessibility
* - Optional tags display for selected items
+ *
+ * Keyboard Navigation:
+ * - Arrow Up/Down: Navigate between items
+ * - Enter/Space: Toggle checkbox (menu stays open for multi-select)
+ * - Escape: Close menu and return focus to trigger
+ * - Tab/Shift+Tab: Close menu and move to next/previous element
*/
export const BusinessAreaMultiSelect = observer(
({
@@ -47,7 +52,10 @@ export const BusinessAreaMultiSelect = observer(
}: BusinessAreaMultiSelectProps) => {
const { data: businessAreas, isLoading: isLoadingBusinessAreas } =
useBusinessAreas();
- const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+ const [isOpen, setIsOpen] = useState(false);
+ const [focusedIndex, setFocusedIndex] = useState(0);
+ const menuItemsRef = useRef<(HTMLElement | null)[]>([]);
+ const preventCloseRef = useRef(false);
// Sort business areas alphabetically
const sortedBusinessAreas = useMemo(() => {
@@ -55,6 +63,9 @@ export const BusinessAreaMultiSelect = observer(
return [...businessAreas].sort((a, b) => a.name.localeCompare(b.name));
}, [businessAreas]);
+ // Total number of menu items (2 buttons + business areas)
+ const totalItems = 2 + sortedBusinessAreas.length;
+
// Get selected business area names for display
const selectedNames = useMemo(() => {
if (selectedBusinessAreas.length === 0) return placeholder;
@@ -106,74 +117,234 @@ export const BusinessAreaMultiSelect = observer(
return businessArea.name;
};
+ // Close handler - but NOT for checkbox clicks
+ const handleClose = () => {
+ setIsOpen(false);
+ setFocusedIndex(0);
+ };
+
+ // Prevent closing when clicking checkboxes
+ const handleOpenChange = (open: boolean) => {
+ // If trying to close and we're preventing close, re-open immediately
+ if (!open && preventCloseRef.current) {
+ preventCloseRef.current = false;
+ // Re-open immediately
+ setTimeout(() => setIsOpen(true), 0);
+ return;
+ }
+ setIsOpen(open);
+ if (!open) {
+ setFocusedIndex(0);
+ }
+ };
+
+ // Handle checkbox toggle - prevent menu from closing
+ const handleCheckboxToggle = (baId: number) => {
+ preventCloseRef.current = true;
+ onToggleBusinessArea(baId);
+ // Reset the flag after a short delay to allow the close event to be ignored
+ setTimeout(() => {
+ preventCloseRef.current = false;
+ }, 100);
+ };
+
+ // Keyboard navigation
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ switch (e.key) {
+ case "ArrowDown":
+ e.preventDefault();
+ // If on Select All (0) or Clear (1), jump to first checkbox (2)
+ if (focusedIndex < 2) {
+ setFocusedIndex(2);
+ menuItemsRef.current[2]?.focus();
+ } else {
+ // Normal down navigation through checkboxes
+ setFocusedIndex((prev) => {
+ const next = (prev + 1) % totalItems;
+ menuItemsRef.current[next]?.focus();
+ return next;
+ });
+ }
+ break;
+ case "ArrowUp":
+ e.preventDefault();
+ // If on first checkbox (2), jump to Clear button (1)
+ if (focusedIndex === 2) {
+ setFocusedIndex(1);
+ menuItemsRef.current[1]?.focus();
+ } else {
+ // Normal up navigation
+ setFocusedIndex((prev) => {
+ const next = (prev - 1 + totalItems) % totalItems;
+ menuItemsRef.current[next]?.focus();
+ return next;
+ });
+ }
+ break;
+ case "ArrowLeft":
+ e.preventDefault();
+ // Only works on Select All (0) and Clear (1) buttons
+ if (focusedIndex === 0 || focusedIndex === 1) {
+ const newIndex = focusedIndex === 0 ? 1 : 0;
+ setFocusedIndex(newIndex);
+ menuItemsRef.current[newIndex]?.focus();
+ }
+ break;
+ case "ArrowRight":
+ e.preventDefault();
+ // Only works on Select All (0) and Clear (1) buttons
+ if (focusedIndex === 0 || focusedIndex === 1) {
+ const newIndex = focusedIndex === 0 ? 1 : 0;
+ setFocusedIndex(newIndex);
+ menuItemsRef.current[newIndex]?.focus();
+ }
+ break;
+ case "Enter":
+ case " ":
+ e.preventDefault();
+ e.stopPropagation();
+ // Trigger click on focused item
+ menuItemsRef.current[focusedIndex]?.click();
+ break;
+ case "Escape":
+ e.preventDefault();
+ handleClose();
+ break;
+ case "Tab":
+ // Allow Tab to close and move focus
+ handleClose();
+ break;
+ }
+ };
+
+ // Focus first menu item when dropdown opens
+ useEffect(() => {
+ if (isOpen) {
+ // Small delay to ensure DOM is ready
+ const timer = setTimeout(() => {
+ menuItemsRef.current[0]?.focus();
+ setFocusedIndex(0);
+ }, 50);
+ return () => clearTimeout(timer);
+ }
+ }, [isOpen]);
+
return (
-
-
-
-
-
-
-
-
Business Areas
-
-
-
-
-
-
-
- {isLoadingBusinessAreas && (
-
- Loading...
-
- )}
- {sortedBusinessAreas.map((ba) => {
- if (ba.id === undefined) return null;
- return (
-
-
onToggleBusinessArea(ba.id!)}
- />
-
-
-
+
+
+
{/* Selected Business Area Tags */}
{shouldShowTags && (
diff --git a/frontend/src/shared/components/ResponsiveLayout.tsx b/frontend/src/shared/components/ResponsiveLayout.tsx
new file mode 100644
index 000000000..c677d2888
--- /dev/null
+++ b/frontend/src/shared/components/ResponsiveLayout.tsx
@@ -0,0 +1,97 @@
+import type { ReactNode } from "react";
+
+interface ResponsiveLayoutProps {
+ /**
+ * Content to render on mobile (< 768px)
+ * DOM order should match mobile visual order (top to bottom)
+ */
+ mobileContent: ReactNode;
+
+ /**
+ * Content to render on desktop (≥ 768px)
+ * DOM order should match desktop visual order (left to right, then down)
+ */
+ desktopContent: ReactNode;
+
+ /**
+ * Optional className for the container
+ */
+ className?: string;
+
+ /**
+ * Breakpoint at which to switch from mobile to desktop layout
+ * @default "md" (768px)
+ */
+ breakpoint?: "sm" | "md" | "lg" | "xl";
+}
+
+/**
+ * ResponsiveLayout component
+ *
+ * Solves the CSS `order` property tab navigation issue by rendering
+ * separate layouts for mobile and desktop, each with DOM order matching
+ * its visual order.
+ *
+ * **Problem**: CSS `order` property changes visual order but NOT DOM order,
+ * breaking keyboard tab navigation.
+ *
+ * **Solution**: Duplicate layouts with show/hide pattern - mobile layout
+ * hidden on desktop, desktop layout hidden on mobile.
+ *
+ * **Usage**:
+ * ```tsx
+ *
+ *
+ *
+ *
+ *
+ * }
+ * desktopContent={
+ *
+ *
+ *
+ *
+ *
+ * }
+ * />
+ * ```
+ *
+ * **Key Principles**:
+ * - Never use CSS `order` property for interactive elements
+ * - DOM order must match visual order at EACH breakpoint
+ * - Desktop: Left-to-right, then down (row-by-row scanning)
+ * - Mobile: Top-to-bottom (natural stacking)
+ *
+ * **WCAG Compliance**:
+ * - 2.4.3 Focus Order (Level A): Tab order follows meaningful sequence
+ * - 2.1.1 Keyboard (Level A): All functionality available via keyboard
+ * - 1.3.2 Meaningful Sequence (Level A): Reading order is correct
+ */
+export const ResponsiveLayout = ({
+ mobileContent,
+ desktopContent,
+ className = "",
+ breakpoint = "md",
+}: ResponsiveLayoutProps) => {
+ // Map breakpoint to Tailwind classes
+ const breakpointClasses = {
+ sm: { mobile: "sm:hidden", desktop: "hidden sm:block" },
+ md: { mobile: "md:hidden", desktop: "hidden md:block" },
+ lg: { mobile: "lg:hidden", desktop: "hidden lg:block" },
+ xl: { mobile: "xl:hidden", desktop: "hidden xl:block" },
+ };
+
+ const classes = breakpointClasses[breakpoint];
+
+ return (
+ <>
+ {/* Mobile layout - DOM order matches mobile visual order */}
+ {mobileContent}
+
+ {/* Desktop layout - DOM order matches desktop visual order */}
+ {desktopContent}
+
+ );
+};
diff --git a/frontend/src/shared/components/combobox/BaseCombobox.tsx b/frontend/src/shared/components/combobox/BaseCombobox.tsx
index a4923043f..b75651974 100644
--- a/frontend/src/shared/components/combobox/BaseCombobox.tsx
+++ b/frontend/src/shared/components/combobox/BaseCombobox.tsx
@@ -69,6 +69,7 @@ export const BaseCombobox = forwardRef(
debounceMs = 300,
maxResults = 10,
minSearchLength = 0,
+ ariaLabel,
} = props;
const inputRef = useRef(null);
@@ -79,6 +80,14 @@ export const BaseCombobox = forwardRef(
const [filteredItems, setFilteredItems] = useState([]);
const [isCreating, setIsCreating] = useState(false);
+ // Generate unique IDs for accessibility
+ const inputId = useRef(
+ `combobox-input-${Math.random().toString(36).substr(2, 9)}`
+ ).current;
+ const helperTextId = useRef(
+ `combobox-helper-${Math.random().toString(36).substr(2, 9)}`
+ ).current;
+
// Debounce search term
const debouncedSearchTerm = useDebouncedValue(searchTerm, debounceMs);
@@ -209,7 +218,11 @@ export const BaseCombobox = forwardRef(
ref={wrapperRef}
className={cn("w-full", isRequired && "required", wrapperClassName)}
>
- {label && }
+ {label && (
+
+ )}
{value && renderSelected ? (
renderSelected(value, handleClearSelection)
) : (
@@ -238,6 +251,7 @@ export const BaseCombobox = forwardRef(
)}
{
@@ -261,6 +275,9 @@ export const BaseCombobox = forwardRef(
autoFocus={autoFocus}
autoComplete="off"
disabled={disabled}
+ aria-required={isRequired}
+ aria-describedby={helperText ? helperTextId : undefined}
+ aria-label={!label ? ariaLabel : undefined}
/>
)}
{helperText && (
-
+
{helperText}
)}
diff --git a/frontend/src/shared/components/combobox/types.ts b/frontend/src/shared/components/combobox/types.ts
index a16249b45..4d5a3b4dd 100644
--- a/frontend/src/shared/components/combobox/types.ts
+++ b/frontend/src/shared/components/combobox/types.ts
@@ -38,6 +38,9 @@ export interface BaseComboboxProps
{
className?: string;
wrapperClassName?: string;
+ // Accessibility
+ ariaLabel?: string; // Fallback accessible name when label is not provided
+
// Search configuration
debounceMs?: number;
maxResults?: number;
diff --git a/frontend/src/shared/components/index.ts b/frontend/src/shared/components/index.ts
index 6fe4907b0..2d164f0a3 100644
--- a/frontend/src/shared/components/index.ts
+++ b/frontend/src/shared/components/index.ts
@@ -3,6 +3,7 @@ export { NoResultsState } from "./NoResultsState";
export { ErrorState } from "./ErrorState";
// Breadcrumb is exported from navigation/Breadcrumb.tsx
export { Pagination } from "./Pagination";
+export { ResponsiveLayout } from "./ResponsiveLayout";
// Effects
export { ConfettiPortal, SuccessAnimation } from "./effects";
diff --git a/frontend/src/shared/components/layout/AppLayout.tsx b/frontend/src/shared/components/layout/AppLayout.tsx
index 3d4bd8c6c..2928758b0 100644
--- a/frontend/src/shared/components/layout/AppLayout.tsx
+++ b/frontend/src/shared/components/layout/AppLayout.tsx
@@ -55,14 +55,18 @@ export function AppLayout() {
{/* Content Wrapper with responsive padding */}
-
+
{/* Background Image - Handles its own theme reactivity */}
-
+
{/* Footer */}
diff --git a/frontend/src/shared/components/layout/Header.tsx b/frontend/src/shared/components/layout/Header.tsx
index f8c0f398d..fda40902d 100644
--- a/frontend/src/shared/components/layout/Header.tsx
+++ b/frontend/src/shared/components/layout/Header.tsx
@@ -1,21 +1,15 @@
import { Link, useNavigate } from "react-router";
import { observer } from "mobx-react-lite";
-import { useState } from "react";
+import { useState, useEffect } from "react";
import { GiHamburgerMenu } from "react-icons/gi";
import { ImUsers } from "react-icons/im";
import { FaUserPlus, FaMapMarkedAlt } from "react-icons/fa";
import { CgBrowse, CgPlayListAdd } from "react-icons/cg";
-import { IoCaretDown } from "react-icons/io5";
import { Navitar } from "./Navitar";
import { Button } from "@/shared/components/ui/button";
-import { NavigationDropdownMenuItem } from "@/shared/components/navigation/NavigationDropdownMenuItem";
+import { NavigationDropdownMenu } from "@/shared/components/navigation/NavigationDropdownMenu";
+import { NavigationDropdownMenuContent } from "@/shared/components/navigation/NavigationDropdownMenuContent";
import { Sheet, SheetContent } from "@/shared/components/ui/sheet";
-import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuLabel,
- DropdownMenuTrigger,
-} from "@/shared/components/ui/dropdown-menu";
import { useWindowSize } from "@/shared/hooks/useWindowSize";
import { BREAKPOINTS } from "@/shared/constants/breakpoints";
import { useUIStore, useAuthStore } from "@/app/stores/store-context";
@@ -75,6 +69,29 @@ export const Header = observer(() => {
// Controlled dropdown state
const [projectsOpen, setProjectsOpen] = useState(false);
const [usersOpen, setUsersOpen] = useState(false);
+ const [navitarOpen, setNavitarOpen] = useState(false);
+
+ // Close other menus when one opens
+ useEffect(() => {
+ if (projectsOpen) {
+ setUsersOpen(false);
+ setNavitarOpen(false);
+ }
+ }, [projectsOpen]);
+
+ useEffect(() => {
+ if (usersOpen) {
+ setProjectsOpen(false);
+ setNavitarOpen(false);
+ }
+ }, [usersOpen]);
+
+ useEffect(() => {
+ if (navitarOpen) {
+ setProjectsOpen(false);
+ setUsersOpen(false);
+ }
+ }, [navitarOpen]);
// Show hamburger menu on screens smaller than lg breakpoint
const shouldShowHamburger = width < BREAKPOINTS.lg;
@@ -87,6 +104,21 @@ export const Header = observer(() => {
return (