From 432c6eaa5b6fd0cf435ada3b2841b0d5f1b440ec Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 21 Jun 2026 08:20:51 +0000
Subject: [PATCH 1/2] fix(a11y): Add label association to In-Game Name input

---
 .jules/palette.md                      | 3 +++
 activity/src/components/RoleEditor.tsx | 7 +++++--
 packages/shared/src/index.ts           | 1 +
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index f546c1f9..ee02f22b 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -5,3 +5,6 @@
 ## 2026-04-12 - Focus Visible Styles
 **Learning:** In custom components, applying global `:focus-visible` to interactive elements improves keyboard accessibility natively without specific component overrides.
 **Action:** Use global pseudo selectors for standard interactive elements if component-level focus states are missing, ensuring accessibility without bloat.
+## 2026-06-21 - Label association for custom inputs
+**Learning:** Some custom input UI components in this application wrap text inside `<div>` tags instead of semantic `<label>` tags linked via `htmlFor`, leading to missing programmatic associations for screen readers.
+**Action:** When implementing or modifying text inputs, always utilize React's `useId()` hook to uniquely bind semantic `<label>` tags to `<input>` IDs to ensure full accessibility compliance.
diff --git a/activity/src/components/RoleEditor.tsx b/activity/src/components/RoleEditor.tsx
index ef7d656a..b0cb0f67 100644
--- a/activity/src/components/RoleEditor.tsx
+++ b/activity/src/components/RoleEditor.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useRef } from 'react';
+import { useState, useCallback, useEffect, useRef, useId } from 'react';
 import { WoWPlayer } from '../types';
 import { useAppStore } from '../store/store';
 import { useSessionService } from '../hooks/useSession';
@@ -48,6 +48,8 @@ export function RoleEditor({ player, onMediaUrlChange, hideSitOut, isProfileEdit
   const rolesRef = useRef<Set<string>>(new Set());
   const nameRef = useRef<string>('');
 
+  const inGameNameInputId = useId();
+
   const playerId = player.discordId ?? null;
 
   // Sync roles when player data changes from Firestore (chips need to reflect
@@ -289,10 +291,11 @@ export function RoleEditor({ player, onMediaUrlChange, hideSitOut, isProfileEdit
   return (
     <>
       <div className="role-editor-section">
-        <div className="role-editor-label">In-Game Name</div>
+        <label htmlFor={inGameNameInputId} className="role-editor-label">In-Game Name</label>
         <div className="role-editor-row">
           <div className="role-editor-name-input">
             <input
+              id={inGameNameInputId}
               type="text"
               className="role-editor-input"
               placeholder="PlayerName-ServerName"
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index 9937707b..d707780d 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -28,6 +28,7 @@ export {
   shortestPath,
   parseSeasonPairs,
 } from './seasonPairs.js';
+export type { SeasonPairs } from './seasonPairs.js';
 
 export { generateInviteCommand } from './inviteCommand.js';
 

From c1ecad51a5b2c5aeb0dffa6cd0ea3e5af446fa09 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 21 Jun 2026 08:37:46 +0000
Subject: [PATCH 2/2] fix(a11y): Make role editor label display block

---
 activity/src/index.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/activity/src/index.css b/activity/src/index.css
index 13e9c5c3..7c0f4677 100644
--- a/activity/src/index.css
+++ b/activity/src/index.css
@@ -932,6 +932,7 @@ button:focus-visible,
 }
 
 .role-editor-label {
+  display: block;
   font-size: 0.7rem;
   font-weight: 700;
   text-transform: uppercase;