From 2a470dd26d6c4be1f46516140b59bec6eb46bf92 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 21 Feb 2026 17:20:25 +0000
Subject: [PATCH] feat(ui): improve accessibility in Lobby component

- Add `aria-label` and `title` to "Assign Team" buttons.
- Add `aria-label` and `title` to "Make Captain" button.
- Add `aria-label` to "Remove CPU" button.
- Add `focus-visible` styles to these buttons for better keyboard navigation.

Co-authored-by: Horus0305 <98160215+Horus0305@users.noreply.github.com>
---
 CricketGame/frontend/package-lock.json        | 16 ----------------
 CricketGame/frontend/src/components/Lobby.tsx | 13 ++++++++++---
 2 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/CricketGame/frontend/package-lock.json b/CricketGame/frontend/package-lock.json
index 6f55e6a..296ccf7 100644
--- a/CricketGame/frontend/package-lock.json
+++ b/CricketGame/frontend/package-lock.json
@@ -92,7 +92,6 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -544,7 +543,6 @@
       "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
       "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@dnd-kit/accessibility": "^3.1.1",
         "@dnd-kit/utilities": "^3.2.2",
@@ -1670,7 +1668,6 @@
       "integrity": "sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": "^14.21.3 || >=16"
       },
@@ -3995,7 +3992,6 @@
       "integrity": "sha512-oH72nZRfDv9lADUBSo104Aq7gPHpQZc4BTx38r9xf9pg5LfP6EzSyH2n7qFmmxRQXh7YlUXODcYsg6PuTDSxGg==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -4006,7 +4002,6 @@
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -4017,7 +4012,6 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -4081,7 +4075,6 @@
       "integrity": "sha512-4z2nCSBfVIMnbuu8uinj+f0o4qOeggYJLbjpPHka3KH1om7e+H9yLKTYgksTaHcGco+NClhhY2vyO3HsMH1RGw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.55.0",
         "@typescript-eslint/types": "8.55.0",
@@ -4347,7 +4340,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4591,7 +4583,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -5385,7 +5376,6 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -6250,7 +6240,6 @@
       "integrity": "sha512-Eaw2YTGM6WOxA6CXbckaEvslr2Ne4NFsKrvc0v97JD5awbmeBLO5w9Ho9L9kmKonrwF9RJlW6BxT1PVv/agBHQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=16.9.0"
       }
@@ -8016,7 +8005,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8026,7 +8014,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -8987,7 +8974,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -9195,7 +9181,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -9521,7 +9506,6 @@
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/CricketGame/frontend/src/components/Lobby.tsx b/CricketGame/frontend/src/components/Lobby.tsx
index 87b34a5..975c9f5 100644
--- a/CricketGame/frontend/src/components/Lobby.tsx
+++ b/CricketGame/frontend/src/components/Lobby.tsx
@@ -367,6 +367,7 @@ export default function Lobby({ lobby, username, sendMsg }: Props) {
                                         </button>
                                         <button
                                             onClick={() => sendMsg({ action: 'REMOVE_CPU' })}
+                                            aria-label="Remove the last added CPU player"
                                             disabled={cpuCount === 0}
                                             className="px-4 py-2 bg-white border border-slate-200 text-slate-400 text-xs font-bold uppercase tracking-wider rounded disabled:opacity-50 disabled:cursor-not-allowed"
                                         >
@@ -579,12 +580,16 @@ function DraggablePlayer({ player, sendMsg }: {
             </div>
             <div className="flex gap-1 flex-shrink-0 ml-2">
                 <button
+                    aria-label={`Assign ${player.username} to Team A`}
+                    title="Assign to Team A"
                     onClick={(e) => { e.stopPropagation(); sendMsg({ action: 'ASSIGN_TEAM', player: player.username, team: 'A' }) }}
-                    className="h-5 px-1.5 text-[9px] font-bold rounded bg-blue-50 hover:bg-blue-100 text-blue-600 border border-blue-200 transition-colors"
+                    className="h-5 px-1.5 text-[9px] font-bold rounded bg-blue-50 hover:bg-blue-100 text-blue-600 border border-blue-200 transition-colors focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none"
                 >A</button>
                 <button
+                    aria-label={`Assign ${player.username} to Team B`}
+                    title="Assign to Team B"
                     onClick={(e) => { e.stopPropagation(); sendMsg({ action: 'ASSIGN_TEAM', player: player.username, team: 'B' }) }}
-                    className="h-5 px-1.5 text-[9px] font-bold rounded bg-purple-50 hover:bg-purple-100 text-purple-600 border border-purple-200 transition-colors"
+                    className="h-5 px-1.5 text-[9px] font-bold rounded bg-purple-50 hover:bg-purple-100 text-purple-600 border border-purple-200 transition-colors focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:outline-none"
                 >B</button>
             </div>
         </div>
@@ -634,8 +639,10 @@ function TeamDropZone({ team, lobby, sendMsg, isHost }: {
                             </div>
                             {isHost && captain !== playerName && (
                                 <button
+                                    aria-label={`Make ${playerName} captain`}
+                                    title="Make Captain"
                                     onClick={() => sendMsg({ action: 'SET_CAPTAIN', team, captain: playerName })}
-                                    className={`h-5 px-1.5 text-[9px] font-bold rounded border transition-colors ${captainBtnColor}`}
+                                    className={`h-5 px-1.5 text-[9px] font-bold rounded border transition-colors ${captainBtnColor} focus-visible:ring-2 focus-visible:ring-yellow-500 focus-visible:outline-none`}
                                 >
                                     👑
                                 </button>