From ebedd5a3b7c6a6b3a6b7c2a6d9badbbac299468b Mon Sep 17 00:00:00 2001
From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com>
Date: Fri, 8 Nov 2024 11:06:38 -0500
Subject: [PATCH 01/17] fix(644): add focus outline to radio button

---
 .../entry/[entryId]/week/WeekTeams.tsx        | 62 +++++++++++++++++++
 .../WeeklyPickButton/WeeklyPickButton.tsx     |  8 +--
 2 files changed, 66 insertions(+), 4 deletions(-)

diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx
index 0f60c44e..2b5372cc 100644
--- a/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx
+++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx
@@ -119,4 +119,66 @@ const WeekTeams = ({
     })}
   </RadioGroup>
 );
+
+
+// const WeekTeams = ({
+//   field,
+//   schedule,
+//   selectedTeams,
+//   userPick,
+//   onWeeklyPickChange,
+//   loadingTeamName,
+// }: IWeekTeamsProps): JSX.Element => (
+//   <>
+//     {schedule.map((scheduledGame) => {
+//       const disableGame = checkCurrentGameTime(scheduledGame.date);
+  
+//       return (
+//         <div
+//           className="grid w-full grid-cols-[1fr_auto_1fr] gap-4 pb-8"
+//           style={{ direction: 'rtl' }}
+//           key={scheduledGame.id}
+//         >
+//           <div className="week-page-game-schedule col-span-3 text-center">
+//             <p>{formatDateTime(scheduledGame.date)}</p>
+//           </div>
+  
+//           <RadioGroup
+//             onChange={field.onChange}
+//             defaultValue={userPick}
+//             value={userPick}
+//             onValueChange={(value: string) => onWeeklyPickChange(value as NFLTeams)}
+//           >
+//             {scheduledGame.competitions[0].competitors.map((competition, index) => (
+//               <React.Fragment key={competition.id}>
+//                 {index > 0 && (
+//                   <div className="h-20 flex self-end items-center">
+//                     <span>@</span>
+//                   </div>
+//                 )}
+//                 <FormItem key={competition.id} className="text-center">
+//                 <FormControl>
+//                 <WeeklyPickButton
+//                   loadingTeamName={loadingTeamName}
+//                   selectedTeam={competition.team.shortDisplayName.toLowerCase()}
+//                   homeAway={competition.homeAway}
+//                   team={competition.team.name}
+//                   src={competition.team.logo}
+//                   isDisabled={
+//                     disableGame ||
+//                     Boolean(loadingTeamName) ||
+//                     hasTeamBeenPicked(competition.team.name, selectedTeams)
+//                   }
+//                 />
+//                 </FormControl>
+//                 </FormItem>
+//               </React.Fragment>
+//             ))}
+//           </RadioGroup>
+//         </div>
+//       );
+//     })}
+//   </>
+// );
+
 export default WeekTeams;
diff --git a/components/WeeklyPickButton/WeeklyPickButton.tsx b/components/WeeklyPickButton/WeeklyPickButton.tsx
index 382c43f8..5f824cef 100644
--- a/components/WeeklyPickButton/WeeklyPickButton.tsx
+++ b/components/WeeklyPickButton/WeeklyPickButton.tsx
@@ -40,23 +40,23 @@ const WeeklyPickButton: React.FC<WeeklyPickButtonProps> = ({
       <label htmlFor="home" className="capitalize" data-testid="home-away">
         {homeAway}
       </label>
-      <div style={{ direction: 'ltr' }} className="flex items-center mt-4">
+      <div style={{ direction: 'ltr' }} className="flex items-center mt-4 focus-within:ring-2 focus-within:ring-white focus-within:rounded-xl focus-within:ring-offset-1">
         <RadioGroupItem
           value={team}
           id={team}
-          disabled={isDisabled}
+          //   disabled={isDisabled}
           data-testid="team-radio"
         />
 
         <Label
           htmlFor={team}
           data-testid="team-label"
-          disabled={isDisabled}
+          //   disabled={isDisabled}
           className="flex-col sm:flex-row"
         >
           <Image
             src={src}
-            alt={team}
+            alt=""
             width={48}
             height={48}
             priority

From 29b2ea98d5e8cd12ffb39b83d6a68b948d6fef26 Mon Sep 17 00:00:00 2001
From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com>
Date: Fri, 8 Nov 2024 12:07:42 -0500
Subject: [PATCH 02/17] fix(644): create a radio group for each game

---
 .../entry/[entryId]/week/WeekTeams.tsx        | 97 ++++---------------
 1 file changed, 19 insertions(+), 78 deletions(-)

diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx
index 2b5372cc..532f276e 100644
--- a/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx
+++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx
@@ -69,33 +69,34 @@ const WeekTeams = ({
   onWeeklyPickChange,
   loadingTeamName,
 }: IWeekTeamsProps): JSX.Element => (
-  <RadioGroup
-    onValueChange={(value: string) => onWeeklyPickChange(value as NFLTeams)}
-    defaultValue={userPick}
-    value={userPick}
-    onChange={field.onChange}
-  >
+  <>
     {schedule.map((scheduledGame) => {
       const disableGame = checkCurrentGameTime(scheduledGame.date);
 
       return (
         <div
-          className="grid w-full grid-cols-[1fr_auto_1fr] gap-4 pb-8"
-          style={{ direction: 'rtl' }}
           key={scheduledGame.id}
+          className="pb-8"
         >
-          <div className="week-page-game-schedule col-span-3 text-center">
+          <div className="text-center mb-4">
             <p>{formatDateTime(scheduledGame.date)}</p>
           </div>
-          {scheduledGame.competitions[0].competitors.map(
-            (competition, index) => (
-              <>
+
+          <RadioGroup
+            className="flex gap-4 justify-between items-center w-full"
+            onChange={field.onChange}
+            defaultValue={userPick}
+            value={userPick}
+            onValueChange={(value: string) => onWeeklyPickChange(value as NFLTeams)}
+          >
+            {scheduledGame.competitions[0].competitors.map((competition, index) => (
+              <React.Fragment key={competition.id}>
                 {index > 0 && (
                   <div className="h-20 flex self-end items-center">
                     <span>@</span>
                   </div>
                 )}
-                <FormItem key={competition.id} className="text-center">
+                <FormItem className="text-center">
                   <FormControl>
                     <WeeklyPickButton
                       loadingTeamName={loadingTeamName}
@@ -111,74 +112,14 @@ const WeekTeams = ({
                     />
                   </FormControl>
                 </FormItem>
-              </>
-            ),
-          )}
+              </React.Fragment>
+            ))}
+          </RadioGroup>
         </div>
       );
     })}
-  </RadioGroup>
+  </>
 );
-
-
-// const WeekTeams = ({
-//   field,
-//   schedule,
-//   selectedTeams,
-//   userPick,
-//   onWeeklyPickChange,
-//   loadingTeamName,
-// }: IWeekTeamsProps): JSX.Element => (
-//   <>
-//     {schedule.map((scheduledGame) => {
-//       const disableGame = checkCurrentGameTime(scheduledGame.date);
   
-//       return (
-//         <div
-//           className="grid w-full grid-cols-[1fr_auto_1fr] gap-4 pb-8"
-//           style={{ direction: 'rtl' }}
-//           key={scheduledGame.id}
-//         >
-//           <div className="week-page-game-schedule col-span-3 text-center">
-//             <p>{formatDateTime(scheduledGame.date)}</p>
-//           </div>
-  
-//           <RadioGroup
-//             onChange={field.onChange}
-//             defaultValue={userPick}
-//             value={userPick}
-//             onValueChange={(value: string) => onWeeklyPickChange(value as NFLTeams)}
-//           >
-//             {scheduledGame.competitions[0].competitors.map((competition, index) => (
-//               <React.Fragment key={competition.id}>
-//                 {index > 0 && (
-//                   <div className="h-20 flex self-end items-center">
-//                     <span>@</span>
-//                   </div>
-//                 )}
-//                 <FormItem key={competition.id} className="text-center">
-//                 <FormControl>
-//                 <WeeklyPickButton
-//                   loadingTeamName={loadingTeamName}
-//                   selectedTeam={competition.team.shortDisplayName.toLowerCase()}
-//                   homeAway={competition.homeAway}
-//                   team={competition.team.name}
-//                   src={competition.team.logo}
-//                   isDisabled={
-//                     disableGame ||
-//                     Boolean(loadingTeamName) ||
-//                     hasTeamBeenPicked(competition.team.name, selectedTeams)
-//                   }
-//                 />
-//                 </FormControl>
-//                 </FormItem>
-//               </React.Fragment>
-//             ))}
-//           </RadioGroup>
-//         </div>
-//       );
-//     })}
-//   </>
-// );
-
 export default WeekTeams;
+  
\ No newline at end of file

From 2514642920cb5610abc1457e32b8ceeab599ae69 Mon Sep 17 00:00:00 2001
From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com>
Date: Fri, 8 Nov 2024 12:33:31 -0500
Subject: [PATCH 03/17] fix(644): add focus outline offset to radio button

---
 components/WeeklyPickButton/WeeklyPickButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/WeeklyPickButton/WeeklyPickButton.tsx b/components/WeeklyPickButton/WeeklyPickButton.tsx
index 5f824cef..7d91e698 100644
--- a/components/WeeklyPickButton/WeeklyPickButton.tsx
+++ b/components/WeeklyPickButton/WeeklyPickButton.tsx
@@ -40,7 +40,7 @@ const WeeklyPickButton: React.FC<WeeklyPickButtonProps> = ({
       <label htmlFor="home" className="capitalize" data-testid="home-away">
         {homeAway}
       </label>
-      <div style={{ direction: 'ltr' }} className="flex items-center mt-4 focus-within:ring-2 focus-within:ring-white focus-within:rounded-xl focus-within:ring-offset-1">
+      <div style={{ direction: 'ltr' }} className="flex items-center mt-4 ring-offset-background focus:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:rounded-xl focus-within:ring-offset-4">
         <RadioGroupItem
           value={team}
           id={team}

From 2d0006157d31c22e0d1c6da6b29c2980776b9ceb Mon Sep 17 00:00:00 2001
From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com>
Date: Fri, 8 Nov 2024 12:42:22 -0500
Subject: [PATCH 04/17] fix(644): correct the htmlFor value for radio buttons

---
 components/WeeklyPickButton/WeeklyPickButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/WeeklyPickButton/WeeklyPickButton.tsx b/components/WeeklyPickButton/WeeklyPickButton.tsx
index 7d91e698..50111cbf 100644
--- a/components/WeeklyPickButton/WeeklyPickButton.tsx
+++ b/components/WeeklyPickButton/WeeklyPickButton.tsx
@@ -37,7 +37,7 @@ const WeeklyPickButton: React.FC<WeeklyPickButtonProps> = ({
 }): JSX.Element => {
   return (
     <>
-      <label htmlFor="home" className="capitalize" data-testid="home-away">
+      <label htmlFor={team} className="capitalize" data-testid="home-away">
         {homeAway}
       </label>
       <div style={{ direction: 'ltr' }} className="flex items-center mt-4 ring-offset-background focus:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:rounded-xl focus-within:ring-offset-4">

From b7f829eb18970343a2c662d7b2d632a1d891e5f3 Mon Sep 17 00:00:00 2001
From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com>
Date: Mon, 11 Nov 2024 11:18:08 -0500
Subject: [PATCH 05/17] fix(644): reverse teams order in radio group

---
 .../league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx
index 532f276e..84f0a984 100644
--- a/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx
+++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx
@@ -83,7 +83,9 @@ const WeekTeams = ({
           </div>
 
           <RadioGroup
-            className="flex gap-4 justify-between items-center w-full"
+            aria-labelledby="team"
+            className="flex flex-row-reverse gap-4 justify-between items-center w-full"
+            // style={{ direction: 'ltr' }}
             onChange={field.onChange}
             defaultValue={userPick}
             value={userPick}

From 25803e7f619df2f52cee67180623826c235cbb01 Mon Sep 17 00:00:00 2001
From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com>
Date: Mon, 11 Nov 2024 12:08:38 -0500
Subject: [PATCH 06/17] fix(644): remove direction ltr from radio group div
 container

---
 components/WeeklyPickButton/WeeklyPickButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/WeeklyPickButton/WeeklyPickButton.tsx b/components/WeeklyPickButton/WeeklyPickButton.tsx
index 50111cbf..9cef7881 100644
--- a/components/WeeklyPickButton/WeeklyPickButton.tsx
+++ b/components/WeeklyPickButton/WeeklyPickButton.tsx
@@ -40,7 +40,7 @@ const WeeklyPickButton: React.FC<WeeklyPickButtonProps> = ({
       <label htmlFor={team} className="capitalize" data-testid="home-away">
         {homeAway}
       </label>
-      <div style={{ direction: 'ltr' }} className="flex items-center mt-4 ring-offset-background focus:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:rounded-xl focus-within:ring-offset-4">
+      <div className="flex items-center mt-4 ring-offset-background focus:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:rounded-xl focus-within:ring-offset-4">
         <RadioGroupItem
           value={team}
           id={team}

From 8887e09762cb841bc2739842673a2d0e6cd37a9c Mon Sep 17 00:00:00 2001
From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com>
Date: Tue, 12 Nov 2024 10:21:02 -0500
Subject: [PATCH 07/17] fix(644): add focus outline with focus-visible, remove
 focus-within

---
 components/WeeklyPickButton/WeeklyPickButton.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/WeeklyPickButton/WeeklyPickButton.tsx b/components/WeeklyPickButton/WeeklyPickButton.tsx
index 9cef7881..bc1beef3 100644
--- a/components/WeeklyPickButton/WeeklyPickButton.tsx
+++ b/components/WeeklyPickButton/WeeklyPickButton.tsx
@@ -40,19 +40,20 @@ const WeeklyPickButton: React.FC<WeeklyPickButtonProps> = ({
       <label htmlFor={team} className="capitalize" data-testid="home-away">
         {homeAway}
       </label>
-      <div className="flex items-center mt-4 ring-offset-background focus:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:rounded-xl focus-within:ring-offset-4">
+      <div className="flex items-center mt-4">
         <RadioGroupItem
           value={team}
           id={team}
           //   disabled={isDisabled}
           data-testid="team-radio"
+          className="peer focus:outline-none"
         />
 
         <Label
           htmlFor={team}
           data-testid="team-label"
-          //   disabled={isDisabled}
-          className="flex-col sm:flex-row"
+        //   disabled={isDisabled}
+          className="flex-col sm:flex-row peer-aria-checked:border-accent peer-focus:outline-none peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-white peer-focus-visible:rounded-xl peer-focus-visible:outline-offset-4"
         >
           <Image
             src={src}

From affca6900e73f570c1b4ee5055862b0d2b806948 Mon Sep 17 00:00:00 2001
From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com>
Date: Tue, 12 Nov 2024 10:57:11 -0500
Subject: [PATCH 08/17] fix(644): move focus related classes to Label component

---
 .../[leagueId]/entry/[entryId]/week/WeekTeams.tsx     | 11 ++++++-----
 components/Label/Label.tsx                            |  2 +-
 components/WeeklyPickButton/WeeklyPickButton.tsx      |  7 +++----
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx
index 84f0a984..b65dd0ba 100644
--- a/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx
+++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx
@@ -106,11 +106,12 @@ const WeekTeams = ({
                       homeAway={competition.homeAway}
                       team={competition.team.name}
                       src={competition.team.logo}
-                      isDisabled={
-                        disableGame ||
-                        Boolean(loadingTeamName) ||
-                        hasTeamBeenPicked(competition.team.name, selectedTeams)
-                      }
+                      isDisabled={false}
+                      //   isDisabled={
+                      //     disableGame ||
+                      //     Boolean(loadingTeamName) ||
+                      //     hasTeamBeenPicked(competition.team.name, selectedTeams)
+                      //   }
                     />
                   </FormControl>
                 </FormItem>
diff --git a/components/Label/Label.tsx b/components/Label/Label.tsx
index 2a93646e..240bd470 100644
--- a/components/Label/Label.tsx
+++ b/components/Label/Label.tsx
@@ -14,7 +14,7 @@ const labelVariants = cva(
     variants: {
       disabled: {
         true: 'opacity-50 cursor-not-allowed',
-        false: 'peer-aria-checked:border-accent peer-hover:border-white'
+        false: 'peer-aria-checked:border-accent peer-hover:border-white peer-focus:outline-none peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-white peer-focus-visible:rounded-xl peer-focus-visible:outline-offset-4'
       },
     },
   }
diff --git a/components/WeeklyPickButton/WeeklyPickButton.tsx b/components/WeeklyPickButton/WeeklyPickButton.tsx
index bc1beef3..7d8d00eb 100644
--- a/components/WeeklyPickButton/WeeklyPickButton.tsx
+++ b/components/WeeklyPickButton/WeeklyPickButton.tsx
@@ -44,16 +44,15 @@ const WeeklyPickButton: React.FC<WeeklyPickButtonProps> = ({
         <RadioGroupItem
           value={team}
           id={team}
-          //   disabled={isDisabled}
+          disabled={isDisabled}
           data-testid="team-radio"
-          className="peer focus:outline-none"
         />
 
         <Label
           htmlFor={team}
           data-testid="team-label"
-        //   disabled={isDisabled}
-          className="flex-col sm:flex-row peer-aria-checked:border-accent peer-focus:outline-none peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-white peer-focus-visible:rounded-xl peer-focus-visible:outline-offset-4"
+          disabled={isDisabled}
+          className="flex-col sm:flex-row"
         >
           <Image
             src={src}

From 7c77bf2da28beceb1e26faee9085817284964f18 Mon Sep 17 00:00:00 2001
From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com>
Date: Tue, 12 Nov 2024 14:48:15 -0500
Subject: [PATCH 09/17] fix(644): add sr only label to current week pick logo

---
 .../[leagueId]/entry/[entryId]/week/Week.tsx  | 47 ++++++++++++-------
 1 file changed, 29 insertions(+), 18 deletions(-)

diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx
index 6edab010..f1fb9ed0 100644
--- a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx
+++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx
@@ -36,6 +36,11 @@ import LinkCustom from '@/components/LinkCustom/LinkCustom';
 import { ChevronLeft } from 'lucide-react';
 import Heading from '@/components/Heading/Heading';
 
+interface TeamInfo {
+    teamName: string;
+    logoURL: string;
+}
+
 /**
  * Renders the weekly picks page.
  * @param {IWeekProps} props The parameters for the weekly picks page.
@@ -43,7 +48,7 @@ import Heading from '@/components/Heading/Heading';
  */
 // eslint-disable-next-line no-unused-vars
 const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
-  const [pickHistory, setPickHistory] = useState<string[]>([]);
+  const [pickHistory, setPickHistory] = useState<TeamInfo[]>([]);
   const [entryName, setEntryName] = useState<string>('');
   const [error, setError] = useState<string | null>(null);
   const [schedule, setSchedule] = useState<ISchedule[]>([]);
@@ -160,15 +165,18 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
       }
       
       setEntryName(currentEntry.name);
-      let entryHistory = currentEntry?.selectedTeams || [];
+      const entryHistory = currentEntry?.selectedTeams || [];
+      
+      let entryHistoryObject: TeamInfo[] = [];
 
-      if (currentEntry?.selectedTeams.length > 0) {
-        entryHistory = entryHistory.map((teamName) =>
-          getNFLTeamLogo(NFLTeams, teamName),
-        );
+      if (entryHistory.length > 0) {
+        entryHistoryObject = entryHistory.map((teamName) => ({
+          teamName: teamName,
+          logoURL: getNFLTeamLogo(NFLTeams, teamName),
+        }));
       }
 
-      setPickHistory(entryHistory);
+      setPickHistory(entryHistoryObject);
     } catch (error) {
       throw new Error("Error fetching user's pick history");
     } finally {
@@ -291,14 +299,14 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
                 className="flex flex-wrap w-[90%] gap-4 overflow-x-scroll justify-center pb-10 items-center"
                 data-testid="user-pick-history"
               >
-                {pickHistory?.map((logoURL, index) => {
+                {pickHistory?.map((historyObject, index) => {
                   const isCurrentWeek = index === pickHistory.length - 1;
                   const hasCurrentWeekPick =
                     pickHistory.length === Number(week);
 
                   return (
                     <div
-                      key={`${logoURL ? logoURL : 'no-pick'}-${index + 1}`}
+                      key={`${historyObject.logoURL ? historyObject.logoURL : 'no-pick'}-${index + 1}`}
                       className={cn(
                         'flex flex-col items-center justify-center border p-2 rounded-lg gap-1',
                         isCurrentWeek && hasCurrentWeekPick
@@ -311,15 +319,18 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
                           ? 'CURRENT'
                           : `WEEK ${index + 1}`}
                       </span>
-                      {logoURL ? (
-                        <Image
-                          className="league-entry-logo"
-                          width={64}
-                          height={64}
-                          data-testid="league-history-logo"
-                          src={logoURL}
-                          alt="teamLogo"
-                        />
+                      {historyObject.logoURL ? (
+                        <>
+                          <Image
+                            className="league-entry-logo"
+                            width={64}
+                            height={64}
+                            data-testid="league-history-logo"
+                            src={historyObject.logoURL}
+                            alt=""
+                          />
+                          <span className='sr-only'>{historyObject.teamName}</span>
+                        </>
                       ) : (
                         <span
                           className="text-xs h-16 w-16 text-primary pt-6 text-center"

From 1110acf5a367d483660698fe8b3d0064c4072b46 Mon Sep 17 00:00:00 2001
From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com>
Date: Tue, 12 Nov 2024 18:24:17 -0500
Subject: [PATCH 10/17] fix(644): import INFLTeam in Week module

---
 api/apiFunctions.interface.ts                 |  2 +-
 .../[leagueId]/entry/[entryId]/week/Week.tsx  | 22 ++++++++-----------
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/api/apiFunctions.interface.ts b/api/apiFunctions.interface.ts
index e5d1f6fb..be82539a 100644
--- a/api/apiFunctions.interface.ts
+++ b/api/apiFunctions.interface.ts
@@ -42,7 +42,7 @@ export interface IWeeklyPicks {
   userResults: IUserPicksData;
 }
 export interface INFLTeam {
-  teamId: string;
+  teamId?: string;
   teamLogo: string;
   teamName: string;
 }
diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx
index f1fb9ed0..dce15d4e 100644
--- a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx
+++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx
@@ -22,6 +22,7 @@ import {
   getGameWeek,
 } from '@/api/apiFunctions';
 import { ILeague } from '@/api/apiFunctions.interface';
+import { INFLTeam } from '@/api/apiFunctions.interface';
 import WeekTeams from './WeekTeams';
 import GlobalSpinner from '@/components/GlobalSpinner/GlobalSpinner';
 import { onWeeklyPickChange } from './WeekHelper';
@@ -36,11 +37,6 @@ import LinkCustom from '@/components/LinkCustom/LinkCustom';
 import { ChevronLeft } from 'lucide-react';
 import Heading from '@/components/Heading/Heading';
 
-interface TeamInfo {
-    teamName: string;
-    logoURL: string;
-}
-
 /**
  * Renders the weekly picks page.
  * @param {IWeekProps} props The parameters for the weekly picks page.
@@ -48,7 +44,7 @@ interface TeamInfo {
  */
 // eslint-disable-next-line no-unused-vars
 const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
-  const [pickHistory, setPickHistory] = useState<TeamInfo[]>([]);
+  const [pickHistory, setPickHistory] = useState<INFLTeam[]>([]);
   const [entryName, setEntryName] = useState<string>('');
   const [error, setError] = useState<string | null>(null);
   const [schedule, setSchedule] = useState<ISchedule[]>([]);
@@ -167,12 +163,12 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
       setEntryName(currentEntry.name);
       const entryHistory = currentEntry?.selectedTeams || [];
       
-      let entryHistoryObject: TeamInfo[] = [];
+      let entryHistoryObject: INFLTeam[] = [];
 
       if (entryHistory.length > 0) {
         entryHistoryObject = entryHistory.map((teamName) => ({
           teamName: teamName,
-          logoURL: getNFLTeamLogo(NFLTeams, teamName),
+          teamLogo: getNFLTeamLogo(NFLTeams, teamName),
         }));
       }
 
@@ -299,14 +295,14 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
                 className="flex flex-wrap w-[90%] gap-4 overflow-x-scroll justify-center pb-10 items-center"
                 data-testid="user-pick-history"
               >
-                {pickHistory?.map((historyObject, index) => {
+                {pickHistory?.map((team, index) => {
                   const isCurrentWeek = index === pickHistory.length - 1;
                   const hasCurrentWeekPick =
                     pickHistory.length === Number(week);
 
                   return (
                     <div
-                      key={`${historyObject.logoURL ? historyObject.logoURL : 'no-pick'}-${index + 1}`}
+                      key={`${team.teamLogo ? team.teamLogo : 'no-pick'}-${index + 1}`}
                       className={cn(
                         'flex flex-col items-center justify-center border p-2 rounded-lg gap-1',
                         isCurrentWeek && hasCurrentWeekPick
@@ -319,17 +315,17 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
                           ? 'CURRENT'
                           : `WEEK ${index + 1}`}
                       </span>
-                      {historyObject.logoURL ? (
+                      {team.teamLogo ? (
                         <>
                           <Image
                             className="league-entry-logo"
                             width={64}
                             height={64}
                             data-testid="league-history-logo"
-                            src={historyObject.logoURL}
+                            src={team.teamLogo}
                             alt=""
                           />
-                          <span className='sr-only'>{historyObject.teamName}</span>
+                          <span className='sr-only'>{team.teamName}</span>
                         </>
                       ) : (
                         <span

From 79e5934f4730e6da8383038f8f8832ec1ce560f3 Mon Sep 17 00:00:00 2001
From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com>
Date: Tue, 12 Nov 2024 20:56:30 -0500
Subject: [PATCH 11/17] fix(644): remove unused code

---
 app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx
index b65dd0ba..274ca8db 100644
--- a/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx
+++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx
@@ -83,9 +83,7 @@ const WeekTeams = ({
           </div>
 
           <RadioGroup
-            aria-labelledby="team"
             className="flex flex-row-reverse gap-4 justify-between items-center w-full"
-            // style={{ direction: 'ltr' }}
             onChange={field.onChange}
             defaultValue={userPick}
             value={userPick}

From af7604016cc5123ab5213ecd98649a05c6ed4c3a Mon Sep 17 00:00:00 2001
From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com>
Date: Tue, 12 Nov 2024 21:01:52 -0500
Subject: [PATCH 12/17] fix(644): add direction ltr to radio group div

---
 components/WeeklyPickButton/WeeklyPickButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/WeeklyPickButton/WeeklyPickButton.tsx b/components/WeeklyPickButton/WeeklyPickButton.tsx
index 7d8d00eb..362d5b47 100644
--- a/components/WeeklyPickButton/WeeklyPickButton.tsx
+++ b/components/WeeklyPickButton/WeeklyPickButton.tsx
@@ -40,7 +40,7 @@ const WeeklyPickButton: React.FC<WeeklyPickButtonProps> = ({
       <label htmlFor={team} className="capitalize" data-testid="home-away">
         {homeAway}
       </label>
-      <div className="flex items-center mt-4">
+      <div style={{ direction: 'ltr' }} className="flex items-center mt-4">
         <RadioGroupItem
           value={team}
           id={team}

From 75b0d4f1da6d18c6b3f162c8bedfcc74a9d3ca4f Mon Sep 17 00:00:00 2001
From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com>
Date: Tue, 12 Nov 2024 21:15:25 -0500
Subject: [PATCH 13/17] fix(644): remove alt text value from test

---
 components/WeeklyPickButton/WeeklyPickButton.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/WeeklyPickButton/WeeklyPickButton.test.tsx b/components/WeeklyPickButton/WeeklyPickButton.test.tsx
index 408470b2..155bf77e 100644
--- a/components/WeeklyPickButton/WeeklyPickButton.test.tsx
+++ b/components/WeeklyPickButton/WeeklyPickButton.test.tsx
@@ -8,7 +8,7 @@ const weeklyPickData = {
   src: '/path/to/ravens.svg',
   height: '48',
   width: '48',
-  alt: 'Ravens',
+  alt: '',
 };
 
 describe('WeeklyPickButton', () => {

From 2c784f38e4d3f71e73cca18003066e9cbbef68cb Mon Sep 17 00:00:00 2001
From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com>
Date: Fri, 15 Nov 2024 13:29:58 -0500
Subject: [PATCH 14/17] fix(644): add comment to inflteam interface

---
 api/apiFunctions.interface.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/api/apiFunctions.interface.ts b/api/apiFunctions.interface.ts
index be82539a..0cbeb69b 100644
--- a/api/apiFunctions.interface.ts
+++ b/api/apiFunctions.interface.ts
@@ -41,6 +41,9 @@ export interface IWeeklyPicks {
   gameWeekId: string;
   userResults: IUserPicksData;
 }
+// Currently, the pick history section on the
+// Picks page uses this interface without requiring the teamId. Future
+// accessibility fixes will most likely make use of the teamId.
 export interface INFLTeam {
   teamId?: string;
   teamLogo: string;

From 3318d553be78b9fa06edb68d033b77c49bf732aa Mon Sep 17 00:00:00 2001
From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com>
Date: Mon, 18 Nov 2024 17:26:51 -0500
Subject: [PATCH 15/17] fix(644): replace sr-only span with alt text for logos
 of previous weeks picks

---
 app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx
index dce15d4e..91273fca 100644
--- a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx
+++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx
@@ -323,9 +323,8 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
                             height={64}
                             data-testid="league-history-logo"
                             src={team.teamLogo}
-                            alt=""
+                            alt={team.teamName}
                           />
-                          <span className='sr-only'>{team.teamName}</span>
                         </>
                       ) : (
                         <span

From 7cf34d4593ea6e52f6b1871fea77fa1b53f03e16 Mon Sep 17 00:00:00 2001
From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com>
Date: Tue, 19 Nov 2024 21:09:00 -0500
Subject: [PATCH 16/17] fix(644): create interface for previous weeks picks

---
 api/apiFunctions.interface.ts                              | 6 ++----
 app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx | 6 +++---
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/api/apiFunctions.interface.ts b/api/apiFunctions.interface.ts
index 0cbeb69b..8685e2f9 100644
--- a/api/apiFunctions.interface.ts
+++ b/api/apiFunctions.interface.ts
@@ -41,14 +41,12 @@ export interface IWeeklyPicks {
   gameWeekId: string;
   userResults: IUserPicksData;
 }
-// Currently, the pick history section on the
-// Picks page uses this interface without requiring the teamId. Future
-// accessibility fixes will most likely make use of the teamId.
 export interface INFLTeam {
-  teamId?: string;
+  teamId: string;
   teamLogo: string;
   teamName: string;
 }
+export interface IEntryHistoryTeam extends Omit<INFLTeam, 'teamId'> {}
 export interface IUserPicksData extends IUserPick {}
 export interface ILeague {
   leagueId: string;
diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx
index 91273fca..ca9b32ba 100644
--- a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx
+++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx
@@ -22,7 +22,7 @@ import {
   getGameWeek,
 } from '@/api/apiFunctions';
 import { ILeague } from '@/api/apiFunctions.interface';
-import { INFLTeam } from '@/api/apiFunctions.interface';
+import { IEntryHistoryTeam } from '@/api/apiFunctions.interface';
 import WeekTeams from './WeekTeams';
 import GlobalSpinner from '@/components/GlobalSpinner/GlobalSpinner';
 import { onWeeklyPickChange } from './WeekHelper';
@@ -44,7 +44,7 @@ import Heading from '@/components/Heading/Heading';
  */
 // eslint-disable-next-line no-unused-vars
 const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
-  const [pickHistory, setPickHistory] = useState<INFLTeam[]>([]);
+  const [pickHistory, setPickHistory] = useState<IEntryHistoryTeam[]>([]);
   const [entryName, setEntryName] = useState<string>('');
   const [error, setError] = useState<string | null>(null);
   const [schedule, setSchedule] = useState<ISchedule[]>([]);
@@ -163,7 +163,7 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
       setEntryName(currentEntry.name);
       const entryHistory = currentEntry?.selectedTeams || [];
       
-      let entryHistoryObject: INFLTeam[] = [];
+      let entryHistoryObject: IEntryHistoryTeam[] = [];
 
       if (entryHistory.length > 0) {
         entryHistoryObject = entryHistory.map((teamName) => ({

From 192ad24cf69139d57bf9047fc897e2f975ffa81a Mon Sep 17 00:00:00 2001
From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com>
Date: Tue, 19 Nov 2024 23:02:16 -0500
Subject: [PATCH 17/17] fix(644): remove comments, refactor entryHistoryObject

---
 api/apiFunctions.interface.ts                        |  4 +++-
 .../league/[leagueId]/entry/[entryId]/week/Week.tsx  | 12 +++++-------
 .../[leagueId]/entry/[entryId]/week/WeekTeams.tsx    | 11 +++++------
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/api/apiFunctions.interface.ts b/api/apiFunctions.interface.ts
index 8685e2f9..516c9bf8 100644
--- a/api/apiFunctions.interface.ts
+++ b/api/apiFunctions.interface.ts
@@ -46,8 +46,10 @@ export interface INFLTeam {
   teamLogo: string;
   teamName: string;
 }
-export interface IEntryHistoryTeam extends Omit<INFLTeam, 'teamId'> {}
+export interface IPickHistoryTeam extends Omit<INFLTeam, 'teamId'> {}
+
 export interface IUserPicksData extends IUserPick {}
+
 export interface ILeague {
   leagueId: string;
   leagueName: string;
diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx
index ca9b32ba..d9a28a8b 100644
--- a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx
+++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx
@@ -22,7 +22,7 @@ import {
   getGameWeek,
 } from '@/api/apiFunctions';
 import { ILeague } from '@/api/apiFunctions.interface';
-import { IEntryHistoryTeam } from '@/api/apiFunctions.interface';
+import { IPickHistoryTeam } from '@/api/apiFunctions.interface';
 import WeekTeams from './WeekTeams';
 import GlobalSpinner from '@/components/GlobalSpinner/GlobalSpinner';
 import { onWeeklyPickChange } from './WeekHelper';
@@ -44,7 +44,7 @@ import Heading from '@/components/Heading/Heading';
  */
 // eslint-disable-next-line no-unused-vars
 const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
-  const [pickHistory, setPickHistory] = useState<IEntryHistoryTeam[]>([]);
+  const [pickHistory, setPickHistory] = useState<IPickHistoryTeam[]>([]);
   const [entryName, setEntryName] = useState<string>('');
   const [error, setError] = useState<string | null>(null);
   const [schedule, setSchedule] = useState<ISchedule[]>([]);
@@ -162,17 +162,15 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
       
       setEntryName(currentEntry.name);
       const entryHistory = currentEntry?.selectedTeams || [];
-      
-      let entryHistoryObject: IEntryHistoryTeam[] = [];
 
-      if (entryHistory.length > 0) {
-        entryHistoryObject = entryHistory.map((teamName) => ({
+      if (currentEntry?.selectedTeams.length > 0) {
+        const entryHistoryObject = entryHistory.map((teamName) => ({
           teamName: teamName,
           teamLogo: getNFLTeamLogo(NFLTeams, teamName),
         }));
+        setPickHistory(entryHistoryObject);
       }
 
-      setPickHistory(entryHistoryObject);
     } catch (error) {
       throw new Error("Error fetching user's pick history");
     } finally {
diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx
index 274ca8db..756bbae4 100644
--- a/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx
+++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx
@@ -104,12 +104,11 @@ const WeekTeams = ({
                       homeAway={competition.homeAway}
                       team={competition.team.name}
                       src={competition.team.logo}
-                      isDisabled={false}
-                      //   isDisabled={
-                      //     disableGame ||
-                      //     Boolean(loadingTeamName) ||
-                      //     hasTeamBeenPicked(competition.team.name, selectedTeams)
-                      //   }
+                      isDisabled={
+                        disableGame ||
+                        Boolean(loadingTeamName) ||
+                        hasTeamBeenPicked(competition.team.name, selectedTeams)
+                      }
                     />
                   </FormControl>
                 </FormItem>