feat: Enhance accessibility by adding ARIA labels and explicit button types to various UI components.

Author: mreshank

apps/web/.eslintignore

@@ -0,0 +1,2 @@
+public/sw.js
+**/sw.js

apps/web/.eslintrc.json

@@ -0,0 +1,11 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
+    ]
+  },
+  "ignorePatterns": ["public/sw.js", "**/sw.js", "node_modules"]
+}

apps/web/eslint.config.mjs

@@ -1,18 +1,20 @@
-import { defineConfig, globalIgnores } from "eslint/config";
-import nextVitals from "eslint-config-next/core-web-vitals";
-import nextTs from "eslint-config-next/typescript";
+import js from "@eslint/js";
+import tseslint from "typescript-eslint";
 
-const eslintConfig = defineConfig([
-  ...nextVitals,
-  ...nextTs,
-  // Override default ignores of eslint-config-next.
-  globalIgnores([
-    // Default ignores of eslint-config-next:
-    ".next/**",
-    "out/**",
-    "build/**",
-    "next-env.d.ts",
-  ]),
-]);
-
-export default eslintConfig;
+export default tseslint.config(
+  {
+    ignores: ["**/sw.js", "public/sw.js", ".next/**", "node_modules/**"],
+  },
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    rules: {
+      "@typescript-eslint/no-explicit-any": "warn",
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
+      ],
+      "no-undef": "off", // TypeScript handles this
+    },
+  },
+);

apps/web/package.json

@@ -6,7 +6,7 @@
     "dev": "next dev --port 6951",
     "build": "npx prisma generate && next build",
     "start": "next start",
-    "lint": "eslint",
+    "lint": "eslint src",
     "db:push": "prisma db push",
     "db:generate": "prisma generate",
     "db:studio": "prisma studio",
@@ -55,4 +55,4 @@
     "tailwindcss": "^4",
     "typescript": "^5"
   }
-}
+}

apps/web/src/components/DrumRoll.tsx

@@ -3,7 +3,7 @@ import { useState, useEffect, useRef } from "react";
 import { motion } from "framer-motion";
 import { useStore } from "@/lib/store";
 import { playDrum, DrumType, DRUM_TYPES } from "@/lib/audio/drums";
-import { useToast } from "./ui/ToastProvider";
+// import { useToast } from "./ui/ToastProvider";
 
 // Simple drum labels
 const DRUM_INFO: Record<DrumType, { label: string; colorClass: string; shadowClass: string }> = {
@@ -40,7 +40,7 @@ export function DrumRoll() {
     const [currentPattern, setCurrentPattern] = useState<string | null>(null);
     const [patternName, setPatternName] = useState("");
     const lastPlayedStep = useRef<number>(-1);
-    const { success, error } = useToast();
+    // const { success, error } = useToast();
 
     // Toggle step
     const toggleStep = (drum: DrumType, step: number) => {

apps/web/src/components/Drums.tsx

@@ -232,6 +232,7 @@ export function Drums() {
                                 onClick={() => handleKitChange(kit.id)}
                                 className={`px-2 py-0.5 text-[9px] font-bold rounded-full transition-all ${currentKit === kit.id ? "bg-primary text-primary-foreground" : "opacity-60 hover:opacity-100"
                                     }`}
+                                aria-label={`Select ${kit.name} Kit`}
                             >
                                 {kit.name}
                             </button>
@@ -251,6 +252,7 @@ export function Drums() {
                             onClick={() => setMode(m.id)}
                             className={`px-3 py-1 rounded-full font-bold transition-all ${mode === m.id ? "bg-primary text-primary-foreground" : "opacity-60 hover:opacity-100"
                                 }`}
+                            aria-label={`Switch to ${m.label} Mode`}
                         >
                             {m.label}
                         </button>
@@ -316,6 +318,7 @@ export function Drums() {
                                         onClick={() => handleHit(type)}
                                         animate={{ scale: isHit ? 1.2 : 1 }}
                                         transition={{ duration: 0.08 }}
+                                        aria-label={`Play ${DRUM_INFO[type].label}`}
                                         className="absolute rounded-full flex flex-col items-center justify-center font-bold text-white cursor-pointer border-2 border-white/20"
                                         style={{
                                             left: `${pos.x}%`,
@@ -355,6 +358,7 @@ export function Drums() {
                                 onChange={(e) => setPatternName(e.target.value)}
                                 placeholder="New pattern..."
                                 className="text-[10px] bg-surface border border-border rounded px-2 py-1 w-24 focus:outline-none focus:border-primary"
+                                aria-label="Pattern Name"
                             />
                             <button
                                 onClick={savePattern}
@@ -377,6 +381,7 @@ export function Drums() {
                                 disabled={isGenerating}
                                 className="px-2 py-1.5 text-[10px] font-bold bg-purple-600 text-white rounded hover:bg-purple-700 disabled:opacity-50 flex items-center gap-1 transition-colors shadow-sm"
                                 title="Generate with AI"
+                                aria-label="Generate with AI"
                             >
                                 {isGenerating ? <Loader2 size={12} className="animate-spin" /> : <Sparkles size={12} />}
                                 {/* Magic AI */}
@@ -426,6 +431,7 @@ export function Drums() {
                                                                 outline: isPlayhead ? '2px solid var(--accent)' : 'none',
                                                                 outlineOffset: '-1px',
                                                             }}
+                                                            aria-label={`Toggle ${DRUM_INFO[drum].label} step ${step + 1}`}
                                                         />
                                                     </td>
                                                 );

apps/web/src/components/InstrumentSelect.tsx

@@ -46,9 +46,13 @@ export function InstrumentSelect() {
     return (
         <div className="relative z-50">
             <button
+                type="button"
                 onClick={() => setIsOpen(!isOpen)}
                 className="flex items-center gap-2 bg-surface hover:bg-surface-hover/50 rounded transition-colors pr-2"
                 title="Select Instrument"
+                aria-label="Select Instrument"
+                aria-haspopup="true"
+                aria-expanded={isOpen}
             >
                 <div className={`p-1 rounded ${isSynth ? 'bg-indigo-500/10 text-indigo-400' : 'bg-orange-500/10 text-orange-400'}`}>
                     {isSynth ? <Piano size={14} /> : <Drum size={14} />}
@@ -76,13 +80,15 @@ export function InstrumentSelect() {
                             {/* Instrument Type Switch */}
                             <div className="flex p-1 bg-zinc-900 rounded-lg">
                                 <button
+                                    type="button"
                                     onClick={() => setPianoRollInstrument("synth")}
                                     className={`flex-1 flex items-center justify-center gap-2 py-1.5 rounded-md text-[10px] font-bold uppercase transition-all ${isSynth ? "bg-indigo-600 text-white shadow-sm" : "text-zinc-500 hover:text-zinc-300"
                                         }`}
                                 >
                                     <Piano size={12} /> Synth
                                 </button>
                                 <button
+                                    type="button"
                                     onClick={() => setPianoRollInstrument("drums")}
                                     className={`flex-1 flex items-center justify-center gap-2 py-1.5 rounded-md text-[10px] font-bold uppercase transition-all ${!isSynth ? "bg-orange-600 text-white shadow-sm" : "text-zinc-500 hover:text-zinc-300"
                                         }`}
@@ -102,6 +108,7 @@ export function InstrumentSelect() {
                                 {isSynth ? (
                                     SYNTH_PRESETS.map((preset) => (
                                         <button
+                                            type="button"
                                             key={preset.id}
                                             onClick={() => {
                                                 setSynthPreset(preset.id);
@@ -122,6 +129,7 @@ export function InstrumentSelect() {
                                 ) : (
                                     DRUM_KITS.map((kit) => (
                                         <button
+                                            type="button"
                                             key={kit.id}
                                             onClick={() => {
                                                 setActiveDrumKit(kit.id);

apps/web/src/components/LooperPanel.tsx

@@ -13,6 +13,7 @@ export function LooperPanel() {
         <>
             {/* Floating Toggle Button */}
             {isOpen ? null : <motion.button
+                type="button"
                 onClick={() => setIsOpen(!isOpen)}
                 className={`fixed bottom-24 right-6 z-30 w-12 h-12 rounded-full shadow-2xl flex items-center justify-center transition-colors bg-primary text-primary-foreground `}
                 whileHover={{ scale: 1.1 }}
@@ -119,12 +120,12 @@ function LoopTrackCard({
                 <span className="text-xs font-bold font-mono text-muted-foreground">LOOP {track.id}</span>
                 <div className="flex items-center gap-2">
                     {hasLoop && track.url && (
-                        <button onClick={handleDownload} className="text-muted-foreground hover:text-primary transition-colors" title="Download Loop">
+                        <button type="button" onClick={handleDownload} className="text-muted-foreground hover:text-primary transition-colors" title="Download Loop">
                             <Download size={14} />
                         </button>
                     )}
                     {hasLoop && (
-                        <button onClick={onClear} className="text-muted-foreground hover:text-destructive transition-colors" title="Clear Loop">
+                        <button type="button" onClick={onClear} className="text-muted-foreground hover:text-destructive transition-colors" title="Clear Loop">
                             <Trash2 size={14} />
                         </button>
                     )}
@@ -136,30 +137,31 @@ function LoopTrackCard({
                 <div className="flex items-center gap-2 justify-center relative">
                     {/* Record / Stop Record */}
                     {isRecording ? (
-                        <button onClick={onStopRecord} className="w-8 h-8 rounded-full bg-red-500 text-white flex items-center justify-center shadow-lg hover:scale-105 active:scale-95 transition-all">
+                        <button type="button" onClick={onStopRecord} className="w-8 h-8 rounded-full bg-red-500 text-white flex items-center justify-center shadow-lg hover:scale-105 active:scale-95 transition-all" title="Stop Recording" aria-label="Stop Recording">
                             <Square size={12} fill="currentColor" />
                         </button>
                     ) : (
-                        <button onClick={onRecord} disabled={hasLoop} className="w-8 h-8 rounded-full bg-background border border-border text-red-500 flex items-center justify-center hover:bg-red-500 hover:text-white disabled:opacity-20 disabled:hover:bg-background disabled:hover:text-red-500 transition-all">
+                        <button type="button" onClick={onRecord} disabled={hasLoop} className="w-8 h-8 rounded-full bg-background border border-border text-red-500 flex items-center justify-center hover:bg-red-500 hover:text-white disabled:opacity-20 disabled:hover:bg-background disabled:hover:text-red-500 transition-all" title="Record Loop" aria-label="Record Loop">
                             <Mic size={14} />
                         </button>
                     )}
 
                     {/* Play / Stop */}
                     {hasLoop && (
                         isPlaying ? (
-                            <button onClick={onStop} className="w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center shadow-lg hover:scale-105 active:scale-95 transition-all">
+                            <button type="button" onClick={onStop} className="w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center shadow-lg hover:scale-105 active:scale-95 transition-all" title="Stop Playback" aria-label="Stop Playback">
                                 <Square size={12} fill="currentColor" />
                             </button>
                         ) : (
-                            <button onClick={onPlay} className="w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center shadow-lg hover:scale-105 active:scale-95 transition-all">
+                            <button type="button" onClick={onPlay} className="w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center shadow-lg hover:scale-105 active:scale-95 transition-all" title="Play Loop" aria-label="Play Loop">
                                 <Play size={14} fill="currentColor" className="ml-0.5" />
                             </button>
                         )
                     )}
 
                     {/* Volume Button */}
                     <button
+                        type="button"
                         onClick={handleClick}
                         onContextMenu={(e) => { e.preventDefault(); setShowVolume(!showVolume); }}
                         onTouchStart={handleTouchStart}
@@ -200,6 +202,7 @@ function LoopTrackCard({
                                 value={track.volume}
                                 onChange={(e) => onVolume(Number(e.target.value))}
                                 className="w-full origin-center accent-primary cursor-pointer bg-white/20 rounded-full appearance-none"
+                                aria-label="Loop Volume"
                             />
                             <span className="text-[10px] font-mono font-bold">{track.volume}dB</span>
                         </motion.div>