🎨 Palette: Improve accessibility of generic visual text buttons in citation list

.jules/palette.md

@@ -5,3 +5,6 @@
 ## 2024-05-17 - Generic Visual Text Buttons and ARIA Context
 **Learning:** Components frequently use generic visual text buttons like `[hide]`, `[show]`, `[edit]`, or `[delete]` within lists or loops. Screen readers read these buttons without surrounding visual context, confusing users.
 **Action:** Always provide a contextual `aria-label` (e.g., `aria-label="Hide ${title}"`) for generic visual text buttons so screen reader users have proper context.
+## 2025-06-29 - Contextual ARIA Labels for Generic Text Buttons
+**Learning:** Generic visual text buttons (e.g., `[copy]`, `[edit]`, `[delete]`, `[clear]`) repeated inside lists without contextual `aria-label`s provide inadequate context to screen reader users. Additionally, buttons with temporary visual state changes (like `[copy]` changing to `[copied!]`) need conditionally dynamic `aria-label`s reflecting the updated state to avoid screen readers announcing inaccurate context.
+**Action:** Always add contextual `aria-label` attributes to generic icon-only and textual buttons (like `[edit citation]`), especially when repeated in list items. When a button visually indicates a temporary state change upon interaction, conditionally update its `aria-label` to accurately reflect that state.

dev_server.log

@@ -0,0 +1,145 @@
+
+> opencitation@0.1.0 dev
+> next dev
+
+▲ Next.js 16.2.9 (Turbopack)
+- Local:         http://localhost:3000
+- Network:       http://192.168.0.2:3000
+✓ Ready in 545ms
+Attention: Next.js now collects completely anonymous telemetry regarding usage.
+This information is used to shape Next.js' roadmap and prioritize features.
+You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
+https://nextjs.org/telemetry
+
+⚠ The "middleware" file convention is deprecated. Please use "proxy" instead. Learn more: https://nextjs.org/docs/messages/middleware-to-proxy
+
+○ Compiling / ...
+ GET / 200 in 6.1s (next.js: 5.2s, proxy.ts: 172ms, application-code: 673ms)
+ POST / 200 in 98ms (next.js: 17ms, proxy.ts: 51ms, application-code: 30ms)
+  └─ ƒ detectKeylessEnvDriftAction() in 1ms node_modules/.pnpm/@clerk+nextjs@6.39.5_next@16.2.9_@babel+core@7.29.7_react-dom@19.2.7_react@19.2.7__reac_8f1eeed651d7b0b559b07851c9a30e81/node_modules/@clerk/nextjs/dist/esm-router/keyless-actions.js
+[browser] Clerk: Clerk has been loaded with development keys. Development instances have strict usage limits and should not be used when deploying your application to production. Learn more: https://clerk.com/docs/deployments/overview (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:19:7048)
+ GET / 200 in 141ms (next.js: 19ms, proxy.ts: 17ms, application-code: 105ms)
+[browser] Error: ClerkJS: Something went wrong initializing Clerk in development mode. We were unable to attribute this request to an instance running on Clerk. Make sure that your Clerk Publishable Key is correct.
+    at s (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:1:2740)
+    at Object.e [as setup] (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:12799)
+    at async ei.setupDevelopment (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:13442)
+    at async ei.create (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:9737)
+    at async #U (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:70749)
+    at async e5.load (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:34379)
+    at async _IsomorphicClerk.loadClerkJS (http://localhost:3000/_next/static/chunks/10l9_%40clerk_clerk-react_dist_1p1w9c_._.js:3362:17)
+○ Compiling /api/stats ...
+ GET / 200 in 126ms (next.js: 5ms, proxy.ts: 7ms, application-code: 113ms)
+ GET /api/stats 200 in 26ms (next.js: 8ms, proxy.ts: 9ms, application-code: 9ms)
+ POST / 200 in 40ms (next.js: 5ms, proxy.ts: 10ms, application-code: 24ms)
+  └─ ƒ detectKeylessEnvDriftAction() in 0ms node_modules/.pnpm/@clerk+nextjs@6.39.5_next@16.2.9_@babel+core@7.29.7_react-dom@19.2.7_react@19.2.7__reac_8f1eeed651d7b0b559b07851c9a30e81/node_modules/@clerk/nextjs/dist/esm-router/keyless-actions.js
+[browser] Clerk: Clerk has been loaded with development keys. Development instances have strict usage limits and should not be used when deploying your application to production. Learn more: https://clerk.com/docs/deployments/overview (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:19:7048)
+[browser] Error: ClerkJS: Something went wrong initializing Clerk in development mode. We were unable to attribute this request to an instance running on Clerk. Make sure that your Clerk Publishable Key is correct.
+    at s (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:1:2740)
+    at Object.e [as setup] (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:12799)
+    at async ei.setupDevelopment (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:13442)
+    at async ei.create (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:9737)
+    at async #U (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:70749)
+    at async e5.load (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:34379)
+    at async _IsomorphicClerk.loadClerkJS (http://localhost:3000/_next/static/chunks/10l9_%40clerk_clerk-react_dist_1p1w9c_._.js:3362:17)
+ GET /lists 200 in 343ms (next.js: 169ms, proxy.ts: 12ms, application-code: 162ms)
+ GET / 200 in 349ms (next.js: 15ms, proxy.ts: 14ms, application-code: 321ms)
+ GET /cite 200 in 355ms (next.js: 57ms, proxy.ts: 13ms, application-code: 285ms)
+ GET /projects 200 in 100ms (next.js: 6ms, proxy.ts: 8ms, application-code: 86ms)
+ GET /cite 200 in 47ms (next.js: 5ms, proxy.ts: 6ms, application-code: 36ms)
+ GET /cite 200 in 107ms (next.js: 5ms, proxy.ts: 5ms, application-code: 97ms)
+[browser] Clerk: Clerk has been loaded with development keys. Development instances have strict usage limits and should not be used when deploying your application to production. Learn more: https://clerk.com/docs/deployments/overview (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:19:7048)
+ POST /cite 200 in 254ms (next.js: 21ms, proxy.ts: 16ms, application-code: 217ms)
+  └─ ƒ detectKeylessEnvDriftAction() in 0ms node_modules/.pnpm/@clerk+nextjs@6.39.5_next@16.2.9_@babel+core@7.29.7_react-dom@19.2.7_react@19.2.7__reac_8f1eeed651d7b0b559b07851c9a30e81/node_modules/@clerk/nextjs/dist/esm-router/keyless-actions.js
+[browser] Error: ClerkJS: Something went wrong initializing Clerk in development mode. We were unable to attribute this request to an instance running on Clerk. Make sure that your Clerk Publishable Key is correct.
+    at s (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:1:2740)
+    at Object.e [as setup] (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:12799)
+    at async ei.setupDevelopment (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:13442)
+    at async ei.create (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:9737)
+    at async #U (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:70749)
+    at async e5.load (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:34379)
+    at async _IsomorphicClerk.loadClerkJS (http://localhost:3000/_next/static/chunks/10l9_%40clerk_clerk-react_dist_1p1w9c_._.js:3362:17)
+ GET /lists 200 in 273ms (next.js: 54ms, proxy.ts: 12ms, application-code: 208ms)
+ GET / 200 in 276ms (next.js: 22ms, proxy.ts: 12ms, application-code: 242ms)
+ GET /cite 200 in 276ms (next.js: 84ms, proxy.ts: 11ms, application-code: 181ms)
+ GET /projects 200 in 161ms (next.js: 5ms, proxy.ts: 13ms, application-code: 143ms)
+ GET /cite 200 in 121ms (next.js: 8ms, proxy.ts: 6ms, application-code: 106ms)
+ POST /cite 200 in 51ms (next.js: 9ms, proxy.ts: 10ms, application-code: 33ms)
+  └─ ƒ detectKeylessEnvDriftAction() in 0ms node_modules/.pnpm/@clerk+nextjs@6.39.5_next@16.2.9_@babel+core@7.29.7_react-dom@19.2.7_react@19.2.7__reac_8f1eeed651d7b0b559b07851c9a30e81/node_modules/@clerk/nextjs/dist/esm-router/keyless-actions.js
+[browser] Clerk: Clerk has been loaded with development keys. Development instances have strict usage limits and should not be used when deploying your application to production. Learn more: https://clerk.com/docs/deployments/overview (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:19:7048)
+[browser] Error: ClerkJS: Something went wrong initializing Clerk in development mode. We were unable to attribute this request to an instance running on Clerk. Make sure that your Clerk Publishable Key is correct.
+    at s (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:1:2740)
+    at Object.e [as setup] (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:12799)
+    at async ei.setupDevelopment (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:13442)
+    at async ei.create (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:9737)
+    at async #U (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:70749)
+    at async e5.load (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:34379)
+    at async _IsomorphicClerk.loadClerkJS (http://localhost:3000/_next/static/chunks/10l9_%40clerk_clerk-react_dist_1p1w9c_._.js:3362:17)
+ GET /lists 200 in 409ms (next.js: 50ms, proxy.ts: 17ms, application-code: 342ms)
+ GET / 200 in 413ms (next.js: 11ms, proxy.ts: 18ms, application-code: 384ms)
+ GET /cite 200 in 409ms (next.js: 101ms, proxy.ts: 16ms, application-code: 293ms)
+ GET /projects 200 in 111ms (next.js: 6ms, proxy.ts: 9ms, application-code: 97ms)
+ GET /cite 200 in 99ms (next.js: 5ms, proxy.ts: 5ms, application-code: 88ms)
+ POST /cite 200 in 47ms (next.js: 18ms, proxy.ts: 11ms, application-code: 19ms)
+  └─ ƒ detectKeylessEnvDriftAction() in 0ms node_modules/.pnpm/@clerk+nextjs@6.39.5_next@16.2.9_@babel+core@7.29.7_react-dom@19.2.7_react@19.2.7__reac_8f1eeed651d7b0b559b07851c9a30e81/node_modules/@clerk/nextjs/dist/esm-router/keyless-actions.js
+[browser] Clerk: Clerk has been loaded with development keys. Development instances have strict usage limits and should not be used when deploying your application to production. Learn more: https://clerk.com/docs/deployments/overview (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:19:7048)
+[browser] Error: ClerkJS: Something went wrong initializing Clerk in development mode. We were unable to attribute this request to an instance running on Clerk. Make sure that your Clerk Publishable Key is correct.
+    at s (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:1:2740)
+    at Object.e [as setup] (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:12799)
+    at async ei.setupDevelopment (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:13442)
+    at async ei.create (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:9737)
+    at async #U (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:70749)
+    at async e5.load (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:34379)
+    at async _IsomorphicClerk.loadClerkJS (http://localhost:3000/_next/static/chunks/10l9_%40clerk_clerk-react_dist_1p1w9c_._.js:3362:17)
+ GET / 200 in 288ms (next.js: 10ms, proxy.ts: 26ms, application-code: 251ms)
+ GET /cite 200 in 284ms (next.js: 143ms, proxy.ts: 24ms, application-code: 117ms)
+ GET /lists 200 in 291ms (next.js: 44ms, proxy.ts: 25ms, application-code: 221ms)
+ GET /projects 200 in 113ms (next.js: 6ms, proxy.ts: 7ms, application-code: 100ms)
+ GET /cite 200 in 125ms (next.js: 6ms, proxy.ts: 6ms, application-code: 114ms)
+ POST /cite 200 in 39ms (next.js: 6ms, proxy.ts: 8ms, application-code: 25ms)
+  └─ ƒ detectKeylessEnvDriftAction() in 0ms node_modules/.pnpm/@clerk+nextjs@6.39.5_next@16.2.9_@babel+core@7.29.7_react-dom@19.2.7_react@19.2.7__reac_8f1eeed651d7b0b559b07851c9a30e81/node_modules/@clerk/nextjs/dist/esm-router/keyless-actions.js
+[browser] Clerk: Clerk has been loaded with development keys. Development instances have strict usage limits and should not be used when deploying your application to production. Learn more: https://clerk.com/docs/deployments/overview (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:19:7048)
+[browser] Error: ClerkJS: Something went wrong initializing Clerk in development mode. We were unable to attribute this request to an instance running on Clerk. Make sure that your Clerk Publishable Key is correct.
+    at s (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:1:2740)
+    at Object.e [as setup] (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:12799)
+    at async ei.setupDevelopment (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:13442)
+    at async ei.create (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:9737)
+    at async #U (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:70749)
+    at async e5.load (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:34379)
+    at async _IsomorphicClerk.loadClerkJS (http://localhost:3000/_next/static/chunks/10l9_%40clerk_clerk-react_dist_1p1w9c_._.js:3362:17)
+ GET / 200 in 394ms (next.js: 9ms, proxy.ts: 12ms, application-code: 372ms)
+ GET /lists 200 in 393ms (next.js: 58ms, proxy.ts: 12ms, application-code: 323ms)
+ GET /cite 200 in 393ms (next.js: 175ms, proxy.ts: 11ms, application-code: 206ms)
+ GET /projects 200 in 103ms (next.js: 7ms, proxy.ts: 8ms, application-code: 89ms)
+ GET /cite 200 in 96ms (next.js: 4ms, proxy.ts: 4ms, application-code: 87ms)
+ POST /cite 200 in 69ms (next.js: 29ms, proxy.ts: 17ms, application-code: 23ms)
+  └─ ƒ detectKeylessEnvDriftAction() in 0ms node_modules/.pnpm/@clerk+nextjs@6.39.5_next@16.2.9_@babel+core@7.29.7_react-dom@19.2.7_react@19.2.7__reac_8f1eeed651d7b0b559b07851c9a30e81/node_modules/@clerk/nextjs/dist/esm-router/keyless-actions.js
+[browser] Clerk: Clerk has been loaded with development keys. Development instances have strict usage limits and should not be used when deploying your application to production. Learn more: https://clerk.com/docs/deployments/overview (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:19:7048)
+[browser] Error: ClerkJS: Something went wrong initializing Clerk in development mode. We were unable to attribute this request to an instance running on Clerk. Make sure that your Clerk Publishable Key is correct.
+    at s (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:1:2740)
+    at Object.e [as setup] (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:12799)
+    at async ei.setupDevelopment (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:13442)
+    at async ei.create (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:9737)
+    at async #U (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:70749)
+    at async e5.load (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:34379)
+    at async _IsomorphicClerk.loadClerkJS (http://localhost:3000/_next/static/chunks/10l9_%40clerk_clerk-react_dist_1p1w9c_._.js:3362:17)
+ GET / 200 in 302ms (next.js: 34ms, proxy.ts: 16ms, application-code: 252ms)
+ GET /lists 200 in 301ms (next.js: 66ms, proxy.ts: 16ms, application-code: 219ms)
+ GET /cite 200 in 299ms (next.js: 149ms, proxy.ts: 32ms, application-code: 118ms)
+ GET /projects 200 in 90ms (next.js: 6ms, proxy.ts: 6ms, application-code: 79ms)
+ GET /cite 200 in 117ms (next.js: 6ms, proxy.ts: 6ms, application-code: 105ms)
+ POST /cite 200 in 40ms (next.js: 5ms, proxy.ts: 10ms, application-code: 24ms)
+  └─ ƒ detectKeylessEnvDriftAction() in 0ms node_modules/.pnpm/@clerk+nextjs@6.39.5_next@16.2.9_@babel+core@7.29.7_react-dom@19.2.7_react@19.2.7__reac_8f1eeed651d7b0b559b07851c9a30e81/node_modules/@clerk/nextjs/dist/esm-router/keyless-actions.js
+[browser] Clerk: Clerk has been loaded with development keys. Development instances have strict usage limits and should not be used when deploying your application to production. Learn more: https://clerk.com/docs/deployments/overview (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:19:7048)
+[browser] Error: ClerkJS: Something went wrong initializing Clerk in development mode. We were unable to attribute this request to an instance running on Clerk. Make sure that your Clerk Publishable Key is correct.
+    at s (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:1:2740)
+    at Object.e [as setup] (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:12799)
+    at async ei.setupDevelopment (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:13442)
+    at async ei.create (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:9737)
+    at async #U (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:70749)
+    at async e5.load (https://example-00.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js:5:34379)
+    at async _IsomorphicClerk.loadClerkJS (http://localhost:3000/_next/static/chunks/10l9_%40clerk_clerk-react_dist_1p1w9c_._.js:3362:17)
+ GET / 200 in 345ms (next.js: 10ms, proxy.ts: 11ms, application-code: 324ms)
+ GET /lists 200 in 345ms (next.js: 50ms, proxy.ts: 11ms, application-code: 284ms)
+ GET /cite 200 in 344ms (next.js: 169ms, proxy.ts: 10ms, application-code: 165ms)
+ GET /projects 200 in 148ms (next.js: 10ms, proxy.ts: 25ms, application-code: 113ms)
+ POST /api/stats/increment 401 in 1080ms (next.js: 1038ms, proxy.ts: 6ms, application-code: 36ms)