Skip to content

fix: React Doctor audit - fix errors and accessibility warnings #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adewale merged 1 commit into from
Feb 19, 2026
Merged

fix: React Doctor audit - fix errors and accessibility warnings #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion app/src/components/BottomSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,14 @@ export function BottomSheet({ isOpen, onClose, title, children }: BottomSheetPro
if (!isOpen) return null;

return (
<div className="bottom-sheet-backdrop" onClick={handleBackdropClick}>
<div
className="bottom-sheet-backdrop"
onClick={handleBackdropClick}
onKeyDown={(e) => { if (e.key === 'Escape') onClose(); }}
role="dialog"
aria-modal="true"
aria-label={title || 'Bottom sheet'}
>
<div className="bottom-sheet" ref={sheetRef}>
<div className="bottom-sheet-handle" />
{title && <div className="bottom-sheet-title">{title}</div>}
Expand Down
30 changes: 20 additions & 10 deletions app/src/components/EffectsPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,8 +128,9 @@ export function EffectsPanel({
<span className="effect-label">Reverb</span>
<div className="effect-controls">
<div className="effect-param">
<label>Mix</label>
<label htmlFor="fx-reverb-mix">Mix</label>
<input
id="fx-reverb-mix"
type="range"
min="0"
max="1"
Expand All @@ -142,8 +143,9 @@ export function EffectsPanel({
<span className="param-value">{Math.round(effects.reverb.wet * 100)}%</span>
</div>
<div className="effect-param">
<label>Decay</label>
<label htmlFor="fx-reverb-decay">Decay</label>
<input
id="fx-reverb-decay"
type="range"
min="0.1"
max="10"
Expand All @@ -163,8 +165,9 @@ export function EffectsPanel({
<span className="effect-label">Delay</span>
<div className="effect-controls">
<div className="effect-param">
<label>Mix</label>
<label htmlFor="fx-delay-mix">Mix</label>
<input
id="fx-delay-mix"
type="range"
min="0"
max="1"
Expand All @@ -177,8 +180,9 @@ export function EffectsPanel({
<span className="param-value">{Math.round(effects.delay.wet * 100)}%</span>
</div>
<div className="effect-param">
<label>Time</label>
<label htmlFor="fx-delay-time">Time</label>
<select
id="fx-delay-time"
value={effects.delay.time}
onChange={(e) => updateEffect('delay', 'time', e.target.value)}
disabled={disabled}
Expand All @@ -190,8 +194,9 @@ export function EffectsPanel({
</select>
</div>
<div className="effect-param">
<label>Feedback</label>
<label htmlFor="fx-delay-feedback">Feedback</label>
<input
id="fx-delay-feedback"
type="range"
min="0"
max="0.95"
Expand All @@ -211,8 +216,9 @@ export function EffectsPanel({
<span className="effect-label">Chorus</span>
<div className="effect-controls">
<div className="effect-param">
<label>Mix</label>
<label htmlFor="fx-chorus-mix">Mix</label>
<input
id="fx-chorus-mix"
type="range"
min="0"
max="1"
Expand All @@ -225,8 +231,9 @@ export function EffectsPanel({
<span className="param-value">{Math.round(effects.chorus.wet * 100)}%</span>
</div>
<div className="effect-param">
<label>Rate</label>
<label htmlFor="fx-chorus-rate">Rate</label>
<input
id="fx-chorus-rate"
type="range"
min="0.1"
max="10"
Expand All @@ -239,8 +246,9 @@ export function EffectsPanel({
<span className="param-value">{effects.chorus.frequency.toFixed(1)}Hz</span>
</div>
<div className="effect-param">
<label>Depth</label>
<label htmlFor="fx-chorus-depth">Depth</label>
<input
id="fx-chorus-depth"
type="range"
min="0"
max="1"
Expand All @@ -260,8 +268,9 @@ export function EffectsPanel({
<span className="effect-label">Distortion</span>
<div className="effect-controls">
<div className="effect-param">
<label>Mix</label>
<label htmlFor="fx-distortion-mix">Mix</label>
<input
id="fx-distortion-mix"
type="range"
min="0"
max="1"
Expand All @@ -274,8 +283,9 @@ export function EffectsPanel({
<span className="param-value">{Math.round(effects.distortion.wet * 100)}%</span>
</div>
<div className="effect-param">
<label>Drive</label>
<label htmlFor="fx-distortion-drive">Drive</label>
<input
id="fx-distortion-drive"
type="range"
min="0"
max="1"
Expand Down
3 changes: 3 additions & 0 deletions app/src/components/LandingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,9 @@ export function LandingPage({ onStartSession }: LandingPageProps) {
if (el) cardsRef.current[i] = el;
}}
onClick={() => handleExampleClick(ex)}
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleExampleClick(ex); }}
role="button"
tabIndex={0}
>
<div className="landing-example-thumb">
{pattern.map((row, ri) => (
Expand Down
3 changes: 2 additions & 1 deletion app/src/components/MixerPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,8 +149,9 @@ const MixerChannel = memo(function MixerChannel({
{/* Per-track swing (if handler provided) */}
{onSetSwing && (
<div className="channel-swing">
<label className="swing-label">Swing</label>
<label className="swing-label" htmlFor={`mixer-swing-${track.id}`}>Swing</label>
<input
id={`mixer-swing-${track.id}`}
type="range"
className="swing-slider"
min="0"
Expand Down
8 changes: 3 additions & 5 deletions app/src/components/PitchOverview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,11 +84,9 @@ export const PitchOverview = memo(function PitchOverview({
}, [melodicTracks]);

// Count visible tracks (for header info)
const visibleTrackCount = useMemo(() => {
return melodicTracks.filter(track =>
anySoloed ? track.soloed : !track.muted
).length;
}, [melodicTracks, anySoloed]);
const visibleTrackCount = melodicTracks.filter(track =>
anySoloed ? track.soloed : !track.muted
).length;

// Build per-step pitch data
const stepData = useMemo((): StepPitchData[] => {
Expand Down
19 changes: 11 additions & 8 deletions app/src/components/QROverlay/QRCode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,18 @@ interface QRCodeProps {
className?: string;
}

interface QRState {
svgString: string;
error: string | null;
}

export function QRCode({
value,
size = 200,
errorCorrection = 'M',
className = '',
}: QRCodeProps) {
const [svgString, setSvgString] = useState<string>('');
const [error, setError] = useState<string | null>(null);
const [state, setState] = useState<QRState>({ svgString: '', error: null });

useEffect(() => {
let cancelled = false;
Expand All @@ -45,12 +49,11 @@ export function QRCode({
});

if (!cancelled) {
setSvgString(svg);
setError(null);
setState({ svgString: svg, error: null });
}
} catch (err) {
if (!cancelled) {
setError(err instanceof Error ? err.message : 'Failed to generate QR code');
setState({ svgString: '', error: err instanceof Error ? err.message : 'Failed to generate QR code' });
}
}
}
Expand All @@ -62,7 +65,7 @@ export function QRCode({
};
}, [value, size, errorCorrection]);

if (error) {
if (state.error) {
return (
<div
className={`qr-code qr-code-error ${className}`}
Expand All @@ -75,7 +78,7 @@ export function QRCode({
);
}

if (!svgString) {
if (!state.svgString) {
return (
<div
className={`qr-code qr-code-loading ${className}`}
Expand All @@ -92,7 +95,7 @@ export function QRCode({
style={{ width: size, height: size }}
role="img"
aria-label={`QR code linking to ${value}`}
dangerouslySetInnerHTML={{ __html: svgString }}
dangerouslySetInnerHTML={{ __html: state.svgString }}
/>
);
}
10 changes: 2 additions & 8 deletions app/src/components/SessionName.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,6 @@ export function SessionName({ name, sessionId, onRename, disabled = false }: Ses
const [isSaving, setIsSaving] = useState(false);
const inputRef = useRef<HTMLInputElement>(null);

// Sync edit value when name prop changes
useEffect(() => {
if (!isEditing) {
setEditValue(name || '');
}
}, [name, isEditing]);

// Focus input when entering edit mode
useEffect(() => {
if (isEditing && inputRef.current) {
Expand All @@ -42,9 +35,10 @@ export function SessionName({ name, sessionId, onRename, disabled = false }: Ses

const handleClick = useCallback(() => {
if (!disabled && !isSaving) {
setEditValue(name || '');
setIsEditing(true);
}
}, [disabled, isSaving]);
}, [disabled, isSaving, name]);

const handleSave = useCallback(async () => {
if (isSaving) return;
Expand Down
4 changes: 1 addition & 3 deletions app/src/components/StepSequencer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,9 +321,7 @@ export function StepSequencer() {
}, [dragState.targetTrackId, state.tracks, dispatch, multiplayer]);

// Phase 31D: Count muted tracks for button display
const mutedTrackCount = useMemo(() => {
return state.tracks.filter(t => t.muted).length;
}, [state.tracks]);
const mutedTrackCount = state.tracks.filter(t => t.muted).length;

// Phase 31F: Selection state and handler
const handleSelectStep = useCallback((trackId: string, step: number, mode: 'toggle' | 'extend') => {
Expand Down
3 changes: 3 additions & 0 deletions app/src/components/ToastNotification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,9 @@ function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: (id: string)
<div
className={`toast toast-url ${isExiting ? 'exiting' : ''}`}
onClick={handleUrlTap}
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleUrlTap(); }}
role="button"
tabIndex={0}
>
<div className="toast-url-header">
<span className="toast-message">{toast.message}</span>
Expand Down
1 change: 1 addition & 0 deletions app/src/components/TrackRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -771,6 +771,7 @@ export const TrackRow = React.memo(function TrackRow({
<div
className={`mobile-edit-panel ${isMenuOpen ? 'expanded' : ''}`}
onClick={() => setIsMenuOpen(!isMenuOpen)}
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') setIsMenuOpen(!isMenuOpen); }}
role="button"
tabIndex={0}
>
Expand Down
30 changes: 20 additions & 10 deletions app/src/components/Transport.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,8 +304,9 @@ export function Transport({
/>
<div className="fx-sliders">
<div className="fx-param">
<label>Mix</label>
<label htmlFor="transport-reverb-mix">Mix</label>
<input
id="transport-reverb-mix"
type="range"
min="0"
max="1"
Expand All @@ -317,8 +318,9 @@ export function Transport({
<span className="fx-value">{Math.round(effects.reverb.wet * 100)}%</span>
</div>
<div className="fx-param">
<label>Decay</label>
<label htmlFor="transport-reverb-decay">Decay</label>
<input
id="transport-reverb-decay"
type="range"
min="0.1"
max="10"
Expand All @@ -338,8 +340,9 @@ export function Transport({
<span className="fx-label">Delay</span>
<div className="fx-controls">
<div className="fx-param">
<label>Mix</label>
<label htmlFor="transport-delay-mix">Mix</label>
<input
id="transport-delay-mix"
type="range"
min="0"
max="1"
Expand All @@ -351,8 +354,9 @@ export function Transport({
<span className="fx-value">{Math.round(effects.delay.wet * 100)}%</span>
</div>
<div className="fx-param">
<label>Time</label>
<label htmlFor="transport-delay-time">Time</label>
<select
id="transport-delay-time"
value={effects.delay.time}
onChange={(e) => updateEffect('delay', 'time', e.target.value)}
disabled={effectsDisabled}
Expand All @@ -363,8 +367,9 @@ export function Transport({
</select>
</div>
<div className="fx-param">
<label>Feedback</label>
<label htmlFor="transport-delay-feedback">Feedback</label>
<input
id="transport-delay-feedback"
type="range"
min="0"
max="0.95"
Expand All @@ -383,8 +388,9 @@ export function Transport({
<span className="fx-label">Chorus</span>
<div className="fx-controls">
<div className="fx-param">
<label>Mix</label>
<label htmlFor="transport-chorus-mix">Mix</label>
<input
id="transport-chorus-mix"
type="range"
min="0"
max="1"
Expand All @@ -396,8 +402,9 @@ export function Transport({
<span className="fx-value">{Math.round(effects.chorus.wet * 100)}%</span>
</div>
<div className="fx-param">
<label>Rate</label>
<label htmlFor="transport-chorus-rate">Rate</label>
<input
id="transport-chorus-rate"
type="range"
min="0.1"
max="10"
Expand All @@ -409,8 +416,9 @@ export function Transport({
<span className="fx-value">{effects.chorus.frequency.toFixed(1)}Hz</span>
</div>
<div className="fx-param">
<label>Depth</label>
<label htmlFor="transport-chorus-depth">Depth</label>
<input
id="transport-chorus-depth"
type="range"
min="0"
max="1"
Expand All @@ -429,8 +437,9 @@ export function Transport({
<span className="fx-label">Distortion</span>
<div className="fx-controls">
<div className="fx-param">
<label>Mix</label>
<label htmlFor="transport-distortion-mix">Mix</label>
<input
id="transport-distortion-mix"
type="range"
min="0"
max="1"
Expand All @@ -442,8 +451,9 @@ export function Transport({
<span className="fx-value">{Math.round(effects.distortion.wet * 100)}%</span>
</div>
<div className="fx-param">
<label>Drive</label>
<label htmlFor="transport-distortion-drive">Drive</label>
<input
id="transport-distortion-drive"
type="range"
min="0"
max="1"
Expand Down
Loading
Loading