fix(site): make extra roles keyboard accessible (#30342)

> 🤖 This PR was modified by Coder Agents on behalf of Jake Howell.

The extra-role tooltip in user tables was only reachable with a mouse.
Render its badge as a native button with an accessible name and focus
ring, preserving hover behavior and exposing the roles on keyboard
focus.

| Old | New |
| --- | --- |
| <img width="960" height="320" alt="image"
src="https://github.com/user-attachments/assets/fde4f207-bb59-4013-a20d-c7fa8973dbd9"
/> | <img width="960" height="320" alt="image"
src="https://github.com/user-attachments/assets/89d078d6-a065-4082-8e71-26133f9ef2ea"
/> |


<details>
<summary>Investigation and scope</summary>

Storybook stress testing reproduced Tab skipping the `+2 more` badge.
This fix reuses the existing interactive Badge pattern and affects both
deployment users and organization members through their shared role
cell. Role ordering, permissions, and the other stress-test findings are
unchanged.

Verified keyboard focus, Escape dismissal, subsequent Tab navigation,
and hover in Chromium with dark and light themes. The added regression
story was removed as requested. All four existing UsersTable stories and
frontend check, lint, and format commands passed after removal.

</details>

site/src/modules/users/UserRoleCell.tsx

@@ -46,7 +46,14 @@ const MoreRolePill: React.FC<MoreRolePillProps> = ({ roles }) => {
 		<TooltipProvider>
 			<Tooltip delayDuration={0}>
 				<TooltipTrigger asChild>
-					<Badge>+{roles.length} more</Badge>
+					<Badge asChild hover>
+						<button
+							type="button"
+							aria-label={`+${roles.length} more role${roles.length === 1 ? "" : "s"}`}
+						>
+							+{roles.length} more
+						</button>
+					</Badge>
 				</TooltipTrigger>
 
 				<TooltipContent className="flex flex-row flex-wrap content-around gap-x-2 gap-y-3 px-4 py-3 border-surface-quaternary">