apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-01 20:03:30 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #1034 from JoeMakuta/feat/add-aria-label-and-replaced-hardcoded-colors

Browse source 
feat : add aria label and replaced hardcoded colors
This commit is contained in:
Rohan Verma 2026-03-30 15:21:19 -07:00 • committed by GitHub
commit 30cb8ad44c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 20 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

36
surfsense_web/app/(home)/login/LocalLoginForm.tsx
View file

@ -96,7 +96,7 @@ export function LocalLoginForm() {
animate={{ opacity: 1, y: 0, scale: 1 }} animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: -10, scale: 0.95 }} exit={{ opacity: 0, y: -10, scale: 0.95 }}
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
className="rounded-lg border border-red-200 bg-red-50 p-4 text-red-900 shadow-sm dark:border-red-900/30 dark:bg-red-900/20 dark:text-red-200" className="rounded-lg border border-destructive/20 bg-destructive/10 p-4 text-destructive shadow-sm"
> >
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<svg <svg
@ -109,7 +109,7 @@ export function LocalLoginForm() {
strokeWidth="2" strokeWidth="2"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
className="flex-shrink-0 mt-0.5 text-red-500 dark:text-red-400" className="flex-shrink-0 mt-0.5 text-destructive"
> >
<title>Error Icon</title> <title>Error Icon</title>
<circle cx="12" cy="12" r="10" /> <circle cx="12" cy="12" r="10" />
@ -118,13 +118,13 @@ export function LocalLoginForm() {
</svg> </svg>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<p className="text-sm font-semibold mb-1">{error.title}</p> <p className="text-sm font-semibold mb-1">{error.title}</p>
<p className="text-sm text-red-700 dark:text-red-300">{error.message}</p> <p className="text-sm text-destructive">{error.message}</p>
</div> </div>
<button <button
onClick={() => { onClick={() => {
setError({ title: null, message: null }); setError({ title: null, message: null });
}} }}
className="flex-shrink-0 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-200 transition-colors" className="flex-shrink-0 text-destructive hover:text-destructive/90 transition-colors"
aria-label="Dismiss error" aria-label="Dismiss error"
type="button" type="button"
> >
@ -152,7 +152,7 @@ export function LocalLoginForm() {
<div> <div>
<label <label
htmlFor="email" htmlFor="email"
className="block text-sm font-medium text-gray-700 dark:text-gray-300" className="block text-sm font-medium text-foreground"
> >
{t("email")} {t("email")}
</label> </label>
@ -163,10 +163,10 @@ export function LocalLoginForm() {
placeholder="you@example.com" placeholder="you@example.com"
value={username} value={username}
onChange={(e) => setUsername(e.target.value)} onChange={(e) => setUsername(e.target.value)}
className={`mt-1 block w-full rounded-md border px-3 py-1.5 md:py-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:bg-gray-800 dark:text-white transition-all ${ className={`mt-1 block w-full rounded-md border px-3 py-1.5 md:py-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 bg-background text-foreground transition-all ${
error.title error.title
? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700" ? "border-destructive focus:border-destructive focus:ring-destructive"
: "border-gray-300 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700" : "border-border focus:border-primary focus:ring-primary"
}`} }`}
disabled={isLoggingIn} disabled={isLoggingIn}
/> />
@ -175,7 +175,7 @@ export function LocalLoginForm() {
<div> <div>
<label <label
htmlFor="password" htmlFor="password"
className="block text-sm font-medium text-gray-700 dark:text-gray-300" className="block text-sm font-medium text-foreground"
> >
{t("password")} {t("password")}
</label> </label>
@ -187,17 +187,17 @@ export function LocalLoginForm() {
placeholder="Enter your password" placeholder="Enter your password"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
className={`mt-1 block w-full rounded-md border pr-10 px-3 py-1.5 md:py-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:bg-gray-800 dark:text-white transition-all ${ className={`mt-1 block w-full rounded-md border pr-10 px-3 py-1.5 md:py-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 bg-background text-foreground transition-all ${
error.title error.title
? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700" ? "border-destructive focus:border-destructive focus:ring-destructive"
: "border-gray-300 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700" : "border-border focus:border-primary focus:ring-primary"
}`} }`}
disabled={isLoggingIn} disabled={isLoggingIn}
/> />
<button <button
type="button" type="button"
onClick={() => setShowPassword((prev) => !prev)} onClick={() => setShowPassword((prev) => !prev)}
className="absolute inset-y-0 right-0 flex items-center pr-3 mt-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" className="absolute inset-y-0 right-0 flex items-center pr-3 mt-1 text-muted-foreground hover:text-foreground"
aria-label={showPassword ? t("hide_password") : t("show_password")} aria-label={showPassword ? t("hide_password") : t("show_password")}
> >
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />} {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
@ -208,12 +208,12 @@ export function LocalLoginForm() {
<button <button
type="submit" type="submit"
disabled={isLoggingIn} disabled={isLoggingIn}
className="relative w-full rounded-md bg-blue-600 px-4 py-1.5 md:py-2 text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all text-sm md:text-base flex items-center justify-center gap-2" className="relative w-full rounded-md bg-primary px-4 py-1.5 md:py-2 text-primary-foreground shadow-sm hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all text-sm md:text-base flex items-center justify-center gap-2"
> >
<span className={isLoggingIn ? "invisible" : ""}>{t("sign_in")}</span> <span className={isLoggingIn ? "invisible" : ""}>{t("sign_in")}</span>
{isLoggingIn && ( {isLoggingIn && (
<span className="absolute inset-0 flex items-center justify-center"> <span className="absolute inset-0 flex items-center justify-center">
<Spinner size="sm" className="text-white" /> <Spinner size="sm" className="text-primary-foreground" />
</span> </span>
)} )}
</button> </button>
@ -221,11 +221,11 @@ export function LocalLoginForm() {
{authType === "LOCAL" && ( {authType === "LOCAL" && (
<div className="mt-4 text-center text-sm"> <div className="mt-4 text-center text-sm">
<p className="text-gray-600 dark:text-gray-400"> <p className="text-muted-foreground">
{t("dont_have_account")}{" "} {t("dont_have_account")}{" "}
<Link <Link
href="/register" href="/register"
className="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400" className="font-medium text-primary hover:text-primary/90"
> >
{t("sign_up")} {t("sign_up")}
</Link> </Link>

3
surfsense_web/components/tool-ui/audio.tsx
View file

@ -223,6 +223,7 @@ export function Audio({ id, src, title, durationMs, className }: AudioProps) {
onClick={togglePlayPause} onClick={togglePlayPause}
disabled={isLoading} disabled={isLoading}
className="size-7 sm:size-8" className="size-7 sm:size-8"
aria-label={isPlaying ? "Pause" : "Play"}
> >
{isLoading ? ( {isLoading ? (
<div className="size-3 sm:size-4 animate-spin rounded-full border-2 border-current border-t-transparent" /> <div className="size-3 sm:size-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
@ -234,7 +235,7 @@ export function Audio({ id, src, title, durationMs, className }: AudioProps) {
</Button> </Button>
<div className="group/volume flex items-center gap-1 sm:gap-1.5"> <div className="group/volume flex items-center gap-1 sm:gap-1.5">
<Button variant="ghost" size="icon" onClick={toggleMute} className="size-7 sm:size-8"> <Button variant="ghost" size="icon" onClick={toggleMute} className="size-7 sm:size-8" aria-label={isMuted ? "Unmute" : "Mute"}>
{isMuted ? ( {isMuted ? (
<VolumeXIcon className="size-3.5 sm:size-4" /> <VolumeXIcon className="size-3.5 sm:size-4" />
) : ( ) : (