From b2185c5b3bfd9dbd3ccdbf694474b1036f0242ce Mon Sep 17 00:00:00 2001
From: zachery with an e <45150570+zweatshirt@users.noreply.github.com>
Date: Mon, 4 May 2026 08:59:10 -0500
Subject: [PATCH] Add tooltip to goal name in PdsGoalCard for better
 accessibility

---
 .../GoalCard/PdsGoalCard.test.tsx             | 37 +++++++++++++++++++
 .../GoalCard/PdsGoalCard.tsx                  | 17 +++++++--
 2 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/src/components/HrTools/PdsGoalCalculator/GoalCard/PdsGoalCard.test.tsx b/src/components/HrTools/PdsGoalCalculator/GoalCard/PdsGoalCard.test.tsx
index f1f26d6487..4e257c3c1b 100644
--- a/src/components/HrTools/PdsGoalCalculator/GoalCard/PdsGoalCard.test.tsx
+++ b/src/components/HrTools/PdsGoalCalculator/GoalCard/PdsGoalCard.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { PdsGoalsList } from '../GoalsList/PdsGoalsList';
 import { PdsGoalCalculatorTestWrapper } from '../PdsGoalCalculatorTestWrapper';
 
@@ -65,6 +66,42 @@ describe('PdsGoalCard', () => {
     expect(await findByTestId('date-value')).toHaveTextContent('March 15');
   });
 
+  it('shows the full goal name in a tooltip on hover', async () => {
+    const longName =
+      'A very long goal name that would otherwise stretch the card';
+    const { findByTestId, findByRole } = render(
+      <PdsGoalCalculatorTestWrapper
+        withProvider={false}
+        calculationsMock={{
+          nodes: [{ name: longName }],
+        }}
+      >
+        <PdsGoalsList />
+      </PdsGoalCalculatorTestWrapper>,
+    );
+
+    userEvent.hover(await findByTestId('goal-name'));
+
+    expect(await findByRole('tooltip')).toHaveTextContent(longName);
+  });
+
+  it('shows the unnamed goal fallback in a tooltip on hover', async () => {
+    const { findByTestId, findByRole } = render(
+      <PdsGoalCalculatorTestWrapper
+        withProvider={false}
+        calculationsMock={{
+          nodes: [{ name: null }],
+        }}
+      >
+        <PdsGoalsList />
+      </PdsGoalCalculatorTestWrapper>,
+    );
+
+    userEvent.hover(await findByTestId('goal-name'));
+
+    expect(await findByRole('tooltip')).toHaveTextContent('Unnamed Goal');
+  });
+
   it('renders the calculated goal amount', async () => {
     const { findByTestId } = render(
       <PdsGoalCalculatorTestWrapper
diff --git a/src/components/HrTools/PdsGoalCalculator/GoalCard/PdsGoalCard.tsx b/src/components/HrTools/PdsGoalCalculator/GoalCard/PdsGoalCard.tsx
index 1567a551b2..e2c5034e2f 100644
--- a/src/components/HrTools/PdsGoalCalculator/GoalCard/PdsGoalCard.tsx
+++ b/src/components/HrTools/PdsGoalCalculator/GoalCard/PdsGoalCard.tsx
@@ -6,6 +6,7 @@ import {
   Card,
   Divider,
   Skeleton,
+  Tooltip,
   Typography,
   styled,
 } from '@mui/material';
@@ -24,7 +25,7 @@ import {
 } from '../calculations/calculatePdsGoalTotal';
 
 const StyledCard = styled(Card)(({ theme }) => ({
-  minWidth: 350,
+  width: 350,
   borderRadius: theme.shape.borderRadius,
 }));
 
@@ -34,6 +35,7 @@ const StyledHeaderBox = styled(Box)(({ theme }) => ({
   justifyContent: 'center',
   marginBottom: theme.spacing(2),
   marginTop: theme.spacing(2),
+  paddingInline: theme.spacing(2),
 }));
 
 const StyledContentBox = styled(Box)(({ theme }) => ({
@@ -127,9 +129,16 @@ export const PdsGoalCard: React.FC<PdsGoalCardProps> = ({ goal, onDelete }) => {
 
       <StyledCard>
         <StyledHeaderBox>
-          <Typography data-testid="goal-name" variant="h6">
-            {goal.name ?? t('Unnamed Goal')}
-          </Typography>
+          <Tooltip title={goal.name ?? t('Unnamed Goal')}>
+            <Typography
+              data-testid="goal-name"
+              variant="h6"
+              noWrap
+              sx={{ width: '100%', textAlign: 'center' }}
+            >
+              {goal.name ?? t('Unnamed Goal')}
+            </Typography>
+          </Tooltip>
         </StyledHeaderBox>
 
         <Divider />