QuickandClaude Opus 4.8
234869d41e
Accessibility (WCAG AA):
- Lighten the Standard-theme `--muted-foreground` (#6e6e78 -> #9696a0,
~3.4:1 -> >=5.3:1) and darken the light-theme equivalent so secondary
text meets 1.4.3 contrast app-wide; the opt-in High Contrast mode is no
longer the only conformant path.
- Give icon-only controls accessible names (4.1.2): the password show/hide
toggle (also drop tabIndex={-1} so it's keyboard reachable), and the
Edit/Delete/health/copy/refresh actions across the Users, Libraries,
Nodes, API Keys, Catalog Maintenance and Job History admin tables.
- Fix the Switch off-state (invisible track -> visible border + fill) and
the PlaybackSettings SettingRow label association (the <label htmlFor>
pointed at a wrapping <div>; the id now lands on the Switch/SelectTrigger).
- Login: wrap the card in <main> and add an <h1>; Profiles: add an
accessible PIN-protected label and a corner lock badge.
- Player + catalog: role="status" on the initial loading overlay; scope the
catalog count ("0 in library" for search) and announce it via aria-live;
trim the verbose poster-link name to the title.
UX / consistency:
- Emphasize overdue scheduled tasks (warning colour + icon + word, not
colour alone).
- Per-source catalog subtitles instead of one shared string.
- Add a Reconnect affordance when the admin log stream drops (it does not
auto-retry).
- Page titles for Watch Party + all admin sub-pages (incl. plugins); admin
heading capitalisation normalised to Title Case.
- Show "dev build" instead of "unavailable" when no build revision is
stamped.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
import { useState, forwardRef } from "react";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Eye, EyeOff } from "lucide-react";
|
|
|
|
export const PasswordInput = forwardRef<HTMLInputElement, React.ComponentProps<typeof Input>>(
|
|
function PasswordInput(props, ref) {
|
|
const [visible, setVisible] = useState(false);
|
|
return (
|
|
<div className="relative">
|
|
<Input ref={ref} {...props} type={visible ? "text" : "password"} className="pr-10" />
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="text-muted-foreground hover:text-foreground absolute top-0 right-0 h-full w-10"
|
|
onClick={() => setVisible((v) => !v)}
|
|
aria-label={visible ? "Hide password" : "Show password"}
|
|
aria-pressed={visible}
|
|
>
|
|
{visible ? (
|
|
<EyeOff className="h-4 w-4" aria-hidden="true" />
|
|
) : (
|
|
<Eye className="h-4 w-4" aria-hidden="true" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
);
|
|
},
|
|
);
|