fixed focus issue

Author: jonathanwelch1-nhs

packages/cpt-ui/src/components/EpsCard.tsx

@@ -20,7 +20,7 @@ export default function EpsCard({role, link}: EpsCardProps) {
   const navigate = useNavigate()
   const authContext = useAuth()
 
-  const handleSetSelectedRole = async (e: React.MouseEvent) => {
+  const handleSetSelectedRole = async (e: React.MouseEvent | React.KeyboardEvent) => {
     e.preventDefault()
     try {
       await authContext.updateSelectedRole(role)
@@ -42,25 +42,35 @@ export default function EpsCard({role, link}: EpsCardProps) {
     noODSCode,
     noOrgName,
     noRoleName,
-    noAddress
+    noAddress,
+    odsLabel
   } = EPS_CARD_STRINGS
 
   return (
     <Card clickable className="eps-card" data-testid="eps-card">
       <Card.Content>
         <Row className="nhsuk-grid-row eps-card__content">
-
           <Col width='one-half'>
-            <Card.Link
-              href={link}
-              onClick={handleSetSelectedRole}
+            <div
+              className="eps-card__org-focus-area"
+              tabIndex={0}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault()
+                  handleSetSelectedRole(e)
+                }
+              }}
+              onClick={(e) => {
+                e.stopPropagation()
+                handleSetSelectedRole(e)
+              }}
             >
-              <Card.Heading className="nhsuk-heading-s">
-                {role.org_name || noOrgName}
-                <br />
-                (ODS: {role.org_code || noODSCode})
-              </Card.Heading>
-            </Card.Link>
+              <div className="eps-card__org-name">
+                <Card.Heading className="nhsuk-heading-s">
+                  {role.org_name || noOrgName} ({odsLabel}: {role.org_code || noODSCode})
+                </Card.Heading>
+              </div>
+            </div>
             <Card.Description className="eps-card__roleName">
               {role.role_name || noRoleName}
             </Card.Description>

packages/cpt-ui/src/constants/ui-strings/CardStrings.ts

@@ -33,5 +33,6 @@ export const EPS_CARD_STRINGS = {
   noOrgName: "NO ORG NAME",
   noODSCode: "No ODS code",
   noRoleName: "No role name",
-  noAddress: "Address not found"
+  noAddress: "Address not found",
+  odsLabel: "ODS"
 }

packages/cpt-ui/src/styles/card.scss

@@ -1,5 +1,5 @@
 .eps-card {
-    margin-bottom: 1.5rem;
+    margin-bottom: 1rem;
     padding: 0rem;
 
     &__content {
@@ -8,6 +8,39 @@
         align-items: flex-start;
     }
 
+    &__org-focus-area {
+        outline: none;
+        
+        &:hover {
+            .eps-card__org-name {
+                color: #7c2d12 !important;
+                text-decoration: none !important;
+            }
+        }
+        
+        &:focus {
+            outline: 3px solid #ffeb3b;
+            outline-offset: 0;
+            box-shadow: inset 0 -4px 0 0 #212b32;
+            background-color: #ffeb3b;
+            
+            .eps-card__org-name {
+                text-decoration: none !important;
+            }
+            
+            .nhsuk-heading-s {
+                color: #212b32;
+                text-decoration: none;
+            }
+        }
+    }
+
+    &__org-name {
+        color: #005eb8;
+        text-decoration: underline;
+        cursor: pointer;
+    }
+
     &__roleName {
         margin-top: 0.5rem;
         margin-bottom: 24px;
@@ -29,6 +62,8 @@
         }
     }
 
+
+
     &__link {
         background-color: #ffffff;
         border: 1px solid transparent;