Corina/644 fix a11y picks page

api/apiFunctions.interface.ts

@@ -46,7 +46,10 @@ export interface INFLTeam {
   teamLogo: string;
   teamName: string;
 }
+export interface IPickHistoryTeam extends Omit<INFLTeam, 'teamId'> {}
+
 export interface IUserPicksData extends IUserPick {}
+
 export interface ILeague {
   leagueId: string;
   leagueName: string;

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 { IPickHistoryTeam } from '@/api/apiFunctions.interface';
 import WeekTeams from './WeekTeams';
 import GlobalSpinner from '@/components/GlobalSpinner/GlobalSpinner';
 import { onWeeklyPickChange } from './WeekHelper';
@@ -43,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<string[]>([]);
+  const [pickHistory, setPickHistory] = useState<IPickHistoryTeam[]>([]);
   const [entryName, setEntryName] = useState<string>('');
   const [error, setError] = useState<string | null>(null);
   const [schedule, setSchedule] = useState<ISchedule[]>([]);
@@ -160,15 +161,16 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
       }
 
       setEntryName(currentEntry.name);
-      let entryHistory = currentEntry?.selectedTeams || [];
+      const entryHistory = currentEntry?.selectedTeams || [];
 
       if (currentEntry?.selectedTeams.length > 0) {
-        entryHistory = entryHistory.map((teamName) =>
-          getNFLTeamLogo(NFLTeams, teamName),
-        );
+        const entryHistoryObject = entryHistory.map((teamName) => ({
+          teamName: teamName,
+          teamLogo: getNFLTeamLogo(NFLTeams, teamName),
+        }));
+        setPickHistory(entryHistoryObject);
       }
 
-      setPickHistory(entryHistory);
     } catch (error) {
       throw new Error("Error fetching user's pick history");
     } finally {
@@ -291,14 +293,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((team, index) => {
                   const isCurrentWeek = index === pickHistory.length - 1;
                   const hasCurrentWeekPick =
                     pickHistory.length === Number(week);
 
                   return (
                     <div
-                      key={`${logoURL ? 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
@@ -311,15 +313,17 @@ 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"
-                        />
+                      {team.teamLogo ? (
+                        <>
+                          <Image
+                            className="league-entry-logo"
+                            width={64}
+                            height={64}
+                            data-testid="league-history-logo"
+                            src={team.teamLogo}
+                            alt={team.teamName}
+                          />
+                        </>
                       ) : (
                         <span
                           className="text-xs h-16 w-16 text-primary pt-6 text-center"

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 flex-row-reverse 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,12 +112,14 @@ const WeekTeams = ({
                     />
                   </FormControl>
                 </FormItem>
-              </>
-            ),
-          )}
+              </React.Fragment>
+            ))}
+          </RadioGroup>
         </div>
       );
     })}
-  </RadioGroup>
+  </>
 );
+
 export default WeekTeams;
+

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'
       },
     },
   }

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', () => {

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">
@@ -56,7 +56,7 @@ const WeeklyPickButton: React.FC<WeeklyPickButtonProps> = ({
         >
           <Image
             src={src}
-            alt={team}
+            alt=""
             width={48}
             height={48}
             priority