Skip to content

Simplify account nav and signup role #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bobbleteeb merged 1 commit into from
Apr 23, 2026
Merged

Simplify account nav and signup role #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 0 additions & 7 deletions app/components/AccountNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,13 +70,6 @@ export function AccountNav({ userName, sidebarView, onSelectView, onClosePanel,
<Separator className="my-4" />

<div className="space-y-2">
<Link
href="/orders/history"
onClick={onClosePanel}
className="flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium hover:bg-muted transition-all"
>
🧾 Order History
</Link>
<Link
href="/rewards"
onClick={onClosePanel}
Expand Down
44 changes: 25 additions & 19 deletions app/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,6 +239,28 @@ export default function LoginPage() {

<TabsContent value="signup" className="pt-4">
<form onSubmit={handleSubmit} className="space-y-4">
<div className="rounded-lg border bg-background/50 p-3">
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2">
Role
</p>
<div className="grid grid-cols-2 gap-2">
<Button
type="button"
variant={role === "customer" ? "default" : "outline"}
onClick={() => setRole("customer")}
>
🛒 Customer
</Button>
<Button
type="button"
variant={role === "driver" ? "default" : "outline"}
onClick={() => setRole("driver")}
Comment on lines +246 to +257
Copy link

Copilot AI Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These two buttons behave like mutually-exclusive radio options, but they don't expose that state to assistive tech. Add appropriate ARIA (e.g., role="radio" on each with aria-checked, or aria-pressed on toggle buttons) and ensure keyboard navigation matches the chosen pattern.

Suggested change
<div className="grid grid-cols-2 gap-2">
<Button
type="button"
variant={role === "customer" ? "default" : "outline"}
onClick={() => setRole("customer")}
>
🛒 Customer
</Button>
<Button
type="button"
variant={role === "driver" ? "default" : "outline"}
onClick={() => setRole("driver")}
<div className="grid grid-cols-2 gap-2" role="radiogroup" aria-label="Role">
<Button
type="button"
variant={role === "customer" ? "default" : "outline"}
role="radio"
aria-checked={role === "customer"}
tabIndex={role === "customer" ? 0 : -1}
onClick={() => setRole("customer")}
onKeyDown={(e) => {
if (e.key === "ArrowRight" || e.key === "ArrowDown") {
e.preventDefault();
setRole("driver");
} else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
e.preventDefault();
setRole("customer");
}
}}
>
🛒 Customer
</Button>
<Button
type="button"
variant={role === "driver" ? "default" : "outline"}
role="radio"
aria-checked={role === "driver"}
tabIndex={role === "driver" ? 0 : -1}
onClick={() => setRole("driver")}
onKeyDown={(e) => {
if (e.key === "ArrowRight" || e.key === "ArrowDown") {
e.preventDefault();
setRole("driver");
} else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
e.preventDefault();
setRole("customer");
}
}}

Copilot uses AI. Check for mistakes.
>
🚗 Driver
</Button>
</div>
</div>
Comment on lines +242 to +262
Copy link

Copilot AI Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The role selector is visually labeled with a

, but it isn't semantically associated with the two options for screen readers. Consider using a

/ (or a container with role="radiogroup" + aria-labelledby pointing at a heading id) so the group is announced correctly as a single form control.

Suggested change
<div className="rounded-lg border bg-background/50 p-3">
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2">
Role
</p>
<div className="grid grid-cols-2 gap-2">
<Button
type="button"
variant={role === "customer" ? "default" : "outline"}
onClick={() => setRole("customer")}
>
🛒 Customer
</Button>
<Button
type="button"
variant={role === "driver" ? "default" : "outline"}
onClick={() => setRole("driver")}
>
🚗 Driver
</Button>
</div>
</div>
<fieldset className="rounded-lg border bg-background/50 p-3">
<legend className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2">
Role
</legend>
<div className="grid grid-cols-2 gap-2">
<label
className={`inline-flex cursor-pointer items-center justify-center rounded-md border px-4 py-2 text-sm font-medium transition-colors ${
role === "customer"
? "bg-primary text-primary-foreground border-primary"
: "border-input bg-background hover:bg-accent hover:text-accent-foreground"
}`}
>
<input
type="radio"
name="role"
value="customer"
checked={role === "customer"}
onChange={() => setRole("customer")}
className="sr-only"
/>
🛒 Customer
</label>
<label
className={`inline-flex cursor-pointer items-center justify-center rounded-md border px-4 py-2 text-sm font-medium transition-colors ${
role === "driver"
? "bg-primary text-primary-foreground border-primary"
: "border-input bg-background hover:bg-accent hover:text-accent-foreground"
}`}
>
<input
type="radio"
name="role"
value="driver"
checked={role === "driver"}
onChange={() => setRole("driver")}
className="sr-only"
/>
🚗 Driver
</label>
</div>
</fieldset>

Copilot uses AI. Check for mistakes.

<div>
<label className="block text-sm font-semibold mb-2">Full name</label>
<Input
Expand Down Expand Up @@ -296,25 +318,9 @@ export default function LoginPage() {
</div>

<div className="pt-1">
<p className="text-sm font-semibold mb-2">I am a:</p>
<div className="grid grid-cols-2 gap-2">
<Button
type="button"
variant={role === "customer" ? "default" : "outline"}
onClick={() => setRole("customer")}
className="justify-between"
>
🛒 Customer
</Button>
<Button
type="button"
variant={role === "driver" ? "default" : "outline"}
onClick={() => setRole("driver")}
className="justify-between"
>
🚗 Driver
</Button>
</div>
<p className="text-xs text-muted-foreground">
You can switch roles above before creating the account.
</p>
</div>

{(error || localError) && (
Expand Down
Loading