🎨 Palette: Add proper label association to In-Game Name input

.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.

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"

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;

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';