From b21807b6527bde4b9aa96bca65f9c7885798b748 Mon Sep 17 00:00:00 2001
From: jquispe-oddball <jennifer.quispe@oddball.io>
Date: Thu, 26 Dec 2024 19:01:01 -0500
Subject: [PATCH] 96894 - fix active state on navlink tabs

---
 .../containers/POARequestsPage.jsx             | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/applications/accredited-representative-portal/containers/POARequestsPage.jsx b/src/applications/accredited-representative-portal/containers/POARequestsPage.jsx
index 5acb932ff24c..e5229a2fb8b5 100644
--- a/src/applications/accredited-representative-portal/containers/POARequestsPage.jsx
+++ b/src/applications/accredited-representative-portal/containers/POARequestsPage.jsx
@@ -1,12 +1,13 @@
 import React from 'react';
-import { useLoaderData, NavLink, Outlet } from 'react-router-dom';
+import { useLoaderData, NavLink, Outlet, useLocation } from 'react-router-dom';
 import { apiRequest } from '@department-of-veterans-affairs/platform-utilities/api';
 import mockPOARequestsResponse from '../mocks/mockPOARequestsResponse.json';
 import DigitalSubmissionAlert from '../components/DigitalSubmissionAlert/DigitalSubmissionAlert';
 
 const POARequestsPage = () => {
   const poaRequests = useLoaderData();
-
+  const { search } = useLocation();
+  const status = new URLSearchParams(search).get('status');
   return (
     <>
       <h1 data-testid="poa-requests-heading">Power of attorney requests</h1>
@@ -21,7 +22,11 @@ const POARequestsPage = () => {
             <div role="tablist" className="poa-request__tabs">
               <NavLink
                 to="/poa-requests?status=pending"
-                className="poa-request__tab-link"
+                className={({ isActive }) =>
+                  isActive && status === 'pending'
+                    ? 'poa-request__tab-link active'
+                    : 'poa-request__tab-link'
+                }
                 role="tab"
                 aria-controls="panel-pending"
                 id="pending"
@@ -30,10 +35,15 @@ const POARequestsPage = () => {
               </NavLink>
               <NavLink
                 to="/poa-requests?status=completed"
-                className="poa-request__tab-link"
+                className={({ isActive }) =>
+                  isActive && status === 'completed'
+                    ? 'poa-request__tab-link active'
+                    : 'poa-request__tab-link'
+                }
                 role="tab"
                 aria-controls="panel-completed"
                 id="completed"
+                ariaSelected={({ isActive }) => (isActive ? 'true' : 'false')}
               >
                 Completed requests
               </NavLink>