From 6247ebe9ff560bebb3887bccce981d0d1d1ee6d8 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 12 Jul 2026 07:45:09 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20aria-label?=
 =?UTF-8?q?=20to=20unwrapped=20input=20field?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What: Added an `aria-label` attribute to the native `<input>` element for "In-Game Name" in `activity/src/components/RoleEditor.tsx`. Also fixed a TypeScript compilation issue in `shared` by exporting the missing `SeasonPairs` type.
🎯 Why: To improve keyboard navigation and screen reader accessibility for users editing their character details. Using only a placeholder on an unwrapped input isn't a robust accessibility pattern.
📸 Before/After: Visuals remain unchanged, but screen readers will now accurately announce "In-Game Name" when focus lands on the input field.
♿ Accessibility: Ensures that raw text inputs that aren't tied explicitly to a visible `<label>` element provide semantic meaning to assistive technologies.
---
 .jules/palette.md                      | 4 ++++
 activity/src/components/RoleEditor.tsx | 1 +
 packages/shared/src/index.ts           | 2 ++
 3 files changed, 7 insertions(+)

diff --git a/.jules/palette.md b/.jules/palette.md
index f546c1f9..f054ea05 100644
--- a/.jules/palette.md
+++ b/.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.
diff --git a/activity/src/components/RoleEditor.tsx b/activity/src/components/RoleEditor.tsx
index ef7d656a..654b24ed 100644
--- a/activity/src/components/RoleEditor.tsx
+++ b/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}
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index 9937707b..7bd44469 100644
--- a/packages/shared/src/index.ts
+++ b/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';

From d5b96f6773c322accfed246c95e82b8b2653792e Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 12 Jul 2026 08:06:55 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20aria-label?=
 =?UTF-8?q?=20to=20unwrapped=20input=20field?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What: Added an `aria-label` attribute to the native `<input>` element for "In-Game Name" in `activity/src/components/RoleEditor.tsx`. Also fixed a TypeScript compilation issue in `shared` by exporting the missing `SeasonPairs` type.
🎯 Why: To improve keyboard navigation and screen reader accessibility for users editing their character details. Using only a placeholder on an unwrapped input isn't a robust accessibility pattern.
📸 Before/After: Visuals remain unchanged, but screen readers will now accurately announce "In-Game Name" when focus lands on the input field.
♿ Accessibility: Ensures that raw text inputs that aren't tied explicitly to a visible `<label>` element provide semantic meaning to assistive technologies.
---
 activity/package.json |   2 +-
 package-lock.json     | 124 ++++++++++++++++++++++--------------------
 2 files changed, 66 insertions(+), 60 deletions(-)

diff --git a/activity/package.json b/activity/package.json
index fe4fbad8..36b4f6da 100644
--- a/activity/package.json
+++ b/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",
diff --git a/package-lock.json b/package-lock.json
index e4dc3fa4..8a23542a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "MythicPlusDiscordBot",
+  "name": "app",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
@@ -32,7 +32,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",
@@ -572,20 +572,6 @@
         "node": "^8.13.0 || >=10.10.0"
       }
     },
-    "activity/node_modules/@playwright/test": {
-      "version": "1.58.2",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "playwright": "1.58.2"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "activity/node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-rc.3",
       "dev": true,
@@ -1082,21 +1068,6 @@
         "@firebase/util": "1.13.0"
       }
     },
-    "activity/node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "activity/node_modules/graceful-fs": {
       "version": "4.2.11",
       "dev": true,
@@ -1196,34 +1167,6 @@
         "source-map-js": "^1.2.1"
       }
     },
-    "activity/node_modules/playwright": {
-      "version": "1.58.2",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "playwright-core": "1.58.2"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "fsevents": "2.3.2"
-      }
-    },
-    "activity/node_modules/playwright-core": {
-      "version": "1.58.2",
-      "dev": true,
-      "license": "Apache-2.0",
-      "bin": {
-        "playwright-core": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "activity/node_modules/react-refresh": {
       "version": "0.18.0",
       "dev": true,
@@ -4001,6 +3944,22 @@
         "node": ">=14"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.61.1.tgz",
+      "integrity": "sha512-8nKv6+0RJSL9FE4jYOEGXnPeM/Hg12qZpmqzZjRh3qM0Y7c3z1mrOTfFLids72RDQYVh9WpLEfR5WdpNX4fkig==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.29",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
@@ -10204,6 +10163,53 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/playwright": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.1.tgz",
+      "integrity": "sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.1.tgz",
+      "integrity": "sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/pngjs": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-7.0.0.tgz",