wx44wx/ai-video-fullstack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(frontend): enhance MobileCallPage layout and button accessibility

Browse Source 
Refactor the layout of the MobileCallPage component to improve structure and accessibility. Replace the Button component with a native button element, adding appropriate aria-labels and titles for better screen reader support. Adjust the positioning of elements for a more cohesive user experience.
This commit is contained in:
Eric Wang
2026-08-05 15:15:54 +08:00
parent a9c70effae
commit 545536bdf3
1 changed files with 27 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/components/pages/MobileCallPage.tsx
View File

@@ -12,7 +12,6 @@ import {
ScanLine,
Video,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { NetworkQualityIndicator } from "@/components/network-quality-indicator";
import {
DropdownMenu,
@@ -542,12 +541,19 @@ export function MobileCallPage({ assistantId }: { assistantId: string }) {
</div>
{!inCall && (
<div className="absolute inset-0 z-[2] flex items-center justify-center px-8">
<div className="flex max-w-sm flex-col items-center text-center">
<h1 className="text-2xl font-medium leading-tight text-white">
{assistantName || "助手"}
</h1>
<div className="relative mt-10 inline-flex">
<>
<div className="absolute inset-0 z-[2] flex items-center justify-center px-8">
<div className="flex max-w-sm flex-col items-center text-center">
<h1 className="text-2xl font-medium leading-tight text-white">
{assistantName || "助手"}
</h1>
{error && (
<p className="mt-4 text-xs leading-5 text-white/65">{error}</p>
)}
</div>
</div>
<div className="absolute bottom-[max(1.25rem,env(safe-area-inset-bottom))] left-1/2 z-10 flex -translate-x-1/2 flex-col items-center gap-2 landscape:bottom-[max(1rem,env(safe-area-inset-bottom))]">
<div className="relative flex size-14 items-center justify-center min-[380px]:size-16">
<span
aria-hidden
className="mobile-call-ripple pointer-events-none absolute inset-0 rounded-full bg-white/35"
@@ -556,23 +562,28 @@ export function MobileCallPage({ assistantId }: { assistantId: string }) {
aria-hidden
className="mobile-call-ripple mobile-call-ripple-delay pointer-events-none absolute inset-0 rounded-full bg-white/25"
/>
<Button
<button
type="button"
onClick={() => {
setView("chat");
void startCall();
}}
className="relative z-10 h-12 gap-2 rounded-full bg-white px-6 text-[#07101a] shadow-[0_0_24px_rgba(255,255,255,0.35)] hover:bg-white/90"
aria-label={
status === "failed" || callEnded ? "重新开始通话" : "开始通话"
}
title={
status === "failed" || callEnded ? "重新开始通话" : "开始通话"
}
className="relative z-10 flex size-14 items-center justify-center rounded-full bg-white text-[#07101a] shadow-[0_0_24px_rgba(255,255,255,0.35)] transition-transform hover:scale-105 hover:bg-white/90 active:scale-95 min-[380px]:size-16"
>
<Phone size={19} />
{status === "failed" || callEnded ? "重新开始通话" : "开始通话"}
</Button>
<Phone className="size-6 min-[380px]:size-7" />
</button>
</div>
{error && (
<p className="mt-4 text-xs leading-5 text-white/65">{error}</p>
)}
<span className="text-xs text-white/65">
{status === "failed" || callEnded ? "重新开始通话" : "开始通话"}
</span>
</div>
</div>
</>
)}
{inCall && (