hacklab/strudel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

accessibility

Browse source
This commit is contained in:
Jade (Rose) Rowland 2025-02-21 20:03:17 -05:00
parent dfb7d7bb7f
commit bbb88a2302
6 changed files with 18 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

26
website/src/repl/components/incrementor/Incrementor.jsx
View file

@ -1,26 +1,26 @@
import { cn } from 'tailwind_utils.mjs';
import { Textbox } from '../textbox/Textbox';
import cx from '@src/cx.mjs';
function IncButton({ children, label, className, ...buttonProps }) {
function IncButton({ children, className, ...buttonProps }) {
return (
<button
aria-label={label}
className={cn(
'border border-transparent p-1 text-center text-sm transition-all hover:bg-foreground active:bg-lineBackground disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none',
tabIndex={-1}
className={cx(
'border border-transparent p-1 text-center text-sm transition-all hover:bg-foreground active:bg-lineBackground disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none',
className,
)}
type="button"
{...buttonProps}
>
{children ?? label}
{children}
</button>
);
}
export function Incrementor({ onChange, value, min = -Infinity, max = Infinity, className }) {
export function Incrementor({ onChange, value, min = -Infinity, max = Infinity, className, ...incrementorProps }) {
value = parseInt(value);
value = isNaN(value) ? '' : value;
return (
<div className={cn('w-fit bg-background relative flex items-center"> rounded-md', className)}>
<div className={cx('w-fit bg-background relative flex items-center"> rounded-md', className)}>
<Textbox
min={min}
max={max}
@ -34,19 +34,15 @@ export function Incrementor({ onChange, value, min = -Infinity, max = Infinity,
placeholder=""
value={value}
className="w-32 mb-0 mt-0 border-none rounded-r-none bg-transparent appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
{...incrementorProps}
/>
<div className="flex gap-1 ">
<IncButton label={'increment'} disabled={value <= min} onClick={() => onChange(value - 1)}>
<IncButton disabled={value <= min} onClick={() => onChange(value - 1)}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" className="w-4 h-4">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
</IncButton>
<IncButton
label={'decrement'}
className="rounded-r-md"
disabled={value >= max}
onClick={() => onChange(value + 1)}
>
<IncButton className="rounded-r-md" disabled={value >= max} onClick={() => onChange(value + 1)}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" className="w-4 h-4">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>