mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-19 14:14:17 +00:00
Claude
3cc0875e9c
Toggles were spelled out at each site as a variant picked from state, which left the accessible state optional: of the twelve places that do this, six style themselves as pressed without ever saying so, including the blackout and message visibility controls. ToggleButton ties the two together so a toggle cannot look active without announcing it. Adopted in the finder and the log, which were already pairing the two by hand. The remaining sites in message and client control still need migrating, and the emphasis on the submit button in the link form is deliberately not a toggle. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DzALEq9gGWwFmwTdgAiFcY
19 lines
634 B
TypeScript
19 lines
634 B
TypeScript
import { ComponentProps } from 'react';
|
|
|
|
import Button from './Button';
|
|
|
|
type ToggleButtonProps = Omit<ComponentProps<typeof Button>, 'variant'> & {
|
|
/** whether the option this button controls is currently on */
|
|
pressed: boolean;
|
|
};
|
|
|
|
/**
|
|
* A button which carries an on / off state.
|
|
*
|
|
* Keeps the pressed styling and the accessible state together, so that a toggle
|
|
* cannot end up looking active without also announcing that it is.
|
|
*/
|
|
export default function ToggleButton({ pressed, ...buttonProps }: ToggleButtonProps) {
|
|
return <Button variant={pressed ? 'primary' : 'subtle'} aria-pressed={pressed} {...buttonProps} />;
|
|
}
|