syntaxbullet/image-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance accessibility by adding ARIA attributes and focus styles; improve canvas and button elements

Browse Source
This commit is contained in:
syntaxbullet
2026-07-11 11:28:57 +02:00
parent 53cf25c132
commit d8fdd43416
8 changed files with 89 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
view/bottom-controls/BrushControls.tsx
View File

@@ -33,8 +33,8 @@ export function BrushControls({ tool, settings, editingMask = false, maskViewMod
<BottomControlDivider />
{editingMask ? (
<>
<button type="button" className={maskModeButtonClass(tool === "brush")} onClick={() => dispatch(commandIds.toolSetActive, { tool: "brush" })}>Reveal</button>
<button type="button" className={maskModeButtonClass(tool === "eraser")} onClick={() => dispatch(commandIds.toolSetActive, { tool: "eraser" })}>Hide</button>
<button type="button" className={maskModeButtonClass(tool === "brush")} aria-pressed={tool === "brush"} onClick={() => dispatch(commandIds.toolSetActive, { tool: "brush" })}>Reveal</button>
<button type="button" className={maskModeButtonClass(tool === "eraser")} aria-pressed={tool === "eraser"} onClick={() => dispatch(commandIds.toolSetActive, { tool: "eraser" })}>Hide</button>
<BottomControlDivider />
</>
) : null}

4
view/bottom-controls/MagicWandControls.tsx
View File

@@ -19,10 +19,10 @@ export function MagicWandControls({ settings, dispatch }: { settings: MagicWandS
<BottomControlDivider />
<Slider label="Clean" value={settings.despeckle} min={0} max={20} onChange={(despeckle) => dispatch(commandIds.toolSetMagicWandSettings, { despeckle })} />
<BottomControlDivider />
<button type="button" className={`rounded-full px-4 py-2 text-base font-medium transition ${settings.contiguous ? "bg-white text-black" : "bg-white/10 text-white"}`} onClick={() => dispatch(commandIds.toolSetMagicWandSettings, { contiguous: !settings.contiguous })}>Contig</button>
<button type="button" className={`rounded-full px-4 py-2 text-base font-medium transition ${settings.contiguous ? "bg-white text-black" : "bg-white/10 text-white"}`} aria-label="Contiguous selection" aria-pressed={settings.contiguous} title="Select only connected pixels" onClick={() => dispatch(commandIds.toolSetMagicWandSettings, { contiguous: !settings.contiguous })}>Contiguous</button>
<BottomControlDivider />
{(["replace", "add", "subtract"] as const).map((mode) => (
<button key={mode} type="button" className={`rounded-full px-4 py-2 text-base font-medium capitalize transition ${settings.mode === mode ? "bg-white text-black" : "bg-white/10 text-white"}`} onClick={() => dispatch(commandIds.toolSetMagicWandSettings, { mode })}>{mode === "subtract" ? "Sub" : mode}</button>
<button key={mode} type="button" className={`rounded-full px-4 py-2 text-base font-medium capitalize transition ${settings.mode === mode ? "bg-white text-black" : "bg-white/10 text-white"}`} aria-pressed={settings.mode === mode} onClick={() => dispatch(commandIds.toolSetMagicWandSettings, { mode })}>{mode}</button>
))}
<span className="px-2 text-sm text-white/60">Shift-click adds, Alt-click subtracts</span>
</div>

56
view/bottom-controls/SelectMenu.tsx
View File

@@ -1,5 +1,5 @@
import { Check, CaretDown } from "@phosphor-icons/react";
import { useEffect, useRef, useState, type CSSProperties, type RefObject } from "react";
import { useEffect, useId, useRef, useState, type CSSProperties, type KeyboardEvent, type RefObject } from "react";
import { createPortal } from "react-dom";
export type BottomControlSelectOption<TValue extends string> = {
@@ -20,6 +20,7 @@ export function BottomControlSelectMenu<TValue extends string>({ value, options,
const rootRef = useRef<HTMLDivElement>(null);
const buttonRef = useRef<HTMLButtonElement>(null);
const menuRef = useRef<HTMLDivElement>(null);
const listboxId = useId();
const [open, setOpen] = useState(false);
const [menuStyle, setMenuStyle] = useState<CSSProperties>();
const selectedOption = options.find((option) => option.value === value) ?? options[0];
@@ -50,8 +51,11 @@ export function BottomControlSelectMenu<TValue extends string>({ value, options,
if (!rootRef.current?.contains(target) && !menuRef.current?.contains(target)) setOpen(false);
};
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "Escape") setOpen(false);
const handleKeyDown = (event: globalThis.KeyboardEvent) => {
if (event.key === "Escape") {
setOpen(false);
buttonRef.current?.focus();
}
};
window.addEventListener("pointerdown", handlePointerDown);
@@ -66,6 +70,21 @@ export function BottomControlSelectMenu<TValue extends string>({ value, options,
};
}, [open, placement]);
const openAndFocusOption = (index: number) => {
setOpen(true);
window.requestAnimationFrame(() => {
const optionButtons = menuRef.current?.querySelectorAll<HTMLButtonElement>('[role="option"]');
optionButtons?.[Math.max(0, Math.min(index, options.length - 1))]?.focus();
});
};
const handleTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
if (event.key !== "ArrowDown" && event.key !== "ArrowUp" && event.key !== "Home" && event.key !== "End") return;
event.preventDefault();
const selectedIndex = Math.max(0, options.findIndex((option) => option.value === value));
openAndFocusOption(event.key === "End" ? options.length - 1 : event.key === "Home" ? 0 : selectedIndex);
};
return (
<div ref={rootRef} className={`relative min-w-0 ${placement === "inline" ? "w-full" : ""}`}>
<button
@@ -75,6 +94,8 @@ export function BottomControlSelectMenu<TValue extends string>({ value, options,
aria-label={props["aria-label"]}
aria-haspopup="listbox"
aria-expanded={open}
aria-controls={listboxId}
onKeyDown={handleTriggerKeyDown}
onClick={() => setOpen((current) => !current)}
>
{placement === "inline" && label ? <span className="shrink-0 pr-3 text-sm font-medium text-white/55">{label}</span> : null}
@@ -86,6 +107,7 @@ export function BottomControlSelectMenu<TValue extends string>({ value, options,
{open && placement === "inline" ? (
<SelectOptions
menuRef={menuRef}
id={listboxId}
options={options}
value={value}
onValueChange={onValueChange}
@@ -97,6 +119,7 @@ export function BottomControlSelectMenu<TValue extends string>({ value, options,
createPortal(
<SelectOptions
menuRef={menuRef}
id={listboxId}
options={options}
value={value}
onValueChange={onValueChange}
@@ -114,6 +137,7 @@ export function BottomControlSelectMenu<TValue extends string>({ value, options,
type SelectOptionsProps<TValue extends string> = {
menuRef: RefObject<HTMLDivElement | null>;
id: string;
options: readonly BottomControlSelectOption<TValue>[];
value: TValue;
className: string;
@@ -123,10 +147,28 @@ type SelectOptionsProps<TValue extends string> = {
setOpen: (open: boolean) => void;
};
function SelectOptions<TValue extends string>({ menuRef, options, value, className, style, onValueChange, setOpen, ...props }: SelectOptionsProps<TValue>) {
function SelectOptions<TValue extends string>({ menuRef, id, options, value, className, style, onValueChange, setOpen, ...props }: SelectOptionsProps<TValue>) {
const handleOptionKeyDown = (event: KeyboardEvent<HTMLButtonElement>, index: number) => {
const optionButtons = menuRef.current?.querySelectorAll<HTMLButtonElement>('[role="option"]');
if (!optionButtons) return;
if (event.key === "Escape") {
event.preventDefault();
setOpen(false);
return;
}
const nextIndex = event.key === "ArrowDown" ? (index + 1) % options.length
: event.key === "ArrowUp" ? (index - 1 + options.length) % options.length
: event.key === "Home" ? 0
: event.key === "End" ? options.length - 1
: undefined;
if (nextIndex === undefined) return;
event.preventDefault();
optionButtons[nextIndex]?.focus();
};
return (
<div ref={menuRef} className={className} style={style} role="listbox" aria-label={props["aria-label"]}>
{options.map((option) => {
<div ref={menuRef} id={id} className={className} style={style} role="listbox" aria-label={props["aria-label"]}>
{options.map((option, index) => {
const selected = option.value === value;
return (
<button
@@ -135,6 +177,8 @@ function SelectOptions<TValue extends string>({ menuRef, options, value, classNa
className={`flex h-10 w-full items-center gap-3 rounded-full px-3 text-left text-sm transition ${selected ? "bg-white !text-black" : "text-white/80 hover:bg-white/10 hover:text-white"}`}
role="option"
aria-selected={selected}
tabIndex={selected ? 0 : -1}
onKeyDown={(event) => handleOptionKeyDown(event, index)}
onClick={() => {
onValueChange(option.value);
setOpen(false);