🎨 Palette: Add aria-label to unwrapped input field

.jules/palette.md

@@ -5,3 +5,7 @@
 ## 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-07-12 - Unwrapped Native Form Inputs need explicit ARIA labels
+**Learning:** In custom views (like `RoleEditor.tsx` or `ReportBadGroupDialog.tsx`), raw inputs (`<input>`, `<textarea>`) often bypass generic wrapped components, causing them to lack proper accessibility. Specifically, depending solely on the `placeholder` attribute makes them less reliable for screen readers.
+**Action:** When working with raw `input` or `textarea` elements, always check for an explicit `aria-label` or an associated `id`/`<label>`. Add `aria-label` if they are missing.

activity/package.json

@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.10.0",
-    "@playwright/test": "^1.58.2",
+    "@playwright/test": "^1.61.1",
     "@sentry/vite-plugin": "^5.2.0",
     "@storybook/addon-a11y": "^10.3.5",
     "@storybook/addon-docs": "^10.3.5",

activity/src/components/RoleEditor.tsx

@@ -296,6 +296,7 @@ export function RoleEditor({ player, onMediaUrlChange, hideSitOut, isProfileEdit
               type="text"
               className="role-editor-input"
               placeholder="PlayerName-ServerName"
+              aria-label="In-Game Name"
               value={inGameName}
               onChange={(e) => handleNameChange(e.target.value)}
               maxLength={50}

packages/shared/src/index.ts

@@ -29,6 +29,8 @@ export {
   parseSeasonPairs,
 } from './seasonPairs.js';
 
+export type { SeasonPairs } from './seasonPairs.js';
+
 export { generateInviteCommand } from './inviteCommand.js';
 
 export { getUtilitiesForClass, getRoleForSpec } from './classData.js';