How to Add Arrow-Key Shortcuts to Confirmation Dialogs Without Harming Accessibility

·1 views

A recent change to the MonkeyCode project, tracked in Issue #862 and PR #863, introduced ArrowLeft and ArrowRight keyboard shortcuts to a slash-command confirmation dialog, mapping the keys to Cancel and Confirm buttons respectively. The implementation uses button refs to move focus and is designed as an enhancement, not a replacement for core accessibility requirements. Essential dialog accessibility foundations — including focus containment, Escape to dismiss, visible focus indicators, and proper ARIA semantics — must remain intact alongside any added shortcuts. The arrow-key handler is intentionally narrow, ignoring Tab, Shift+Tab, Escape, Enter, and any modifier-key combinations to avoid conflicting with native browser and screen-reader behavior. The author recommends building such shortcuts on top of a well-tested modal primitive and verifying that all unhandled keys continue to function correctly through both automated tests and manual screen-reader checks.

Read the full story at DEV Community

This is an AI-generated summary. ShortSingh links to the original source for the complete article.

Discussion (0)

Claude Code's 33K-Token Load vs OpenCode's 7K: What the Gap Actually Means

A logging proxy placed between coding agents and an AI model revealed that Claude Code sends roughly 33,000 tokens of scaffolding before any user prompt, compared to OpenCode's approximately 7,000 tokens. The bulk of Claude Code's token load comes from 27 tool definitions totaling nearly 100,000 characters, covering orchestration features like subagent delegation, worktree management, and monitoring — not just coding functions. OpenCode, by contrast, ships 10 tools and no scaffolding, making it leaner but also less capable out of the box. Testing showed the tradeoff is task-dependent: on complex multi-step work, Claude Code's batched tool calls made full sessions cheaper, while simple tasks farmed out to subagents ballooned token usage to over 500,000. The core question is not which baseline is smaller, but whether the extra capabilities justify their per-turn cost for a given workload.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

nuqs Library Brings Shareable, URL-Based State Management to Next.js Apps

nuqs is a library for Next.js that replaces component-level useState with URL query parameters, making UI state such as filters, search terms, and pagination persistent and shareable. It offers a useState-compatible API via a useQueryState hook, so developers can adopt it with minimal changes to existing code. The library supports typed parsers for integers, booleans, arrays, enums, and ISO dates, and allows multiple related parameters to be updated atomically through useQueryStates. Options like shallow: false ensure Server Components re-fetch when query parameters change, while history: push enables back-button navigation between filter states. nuqs is available via npm and integrates with the Next.js App Router through a dedicated adapter component.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

16-Year-Old Begins Web Dev Journey Using Only a Tablet and Acode App

A 16-year-old aspiring developer has begun learning web development without access to a traditional laptop, relying solely on a tablet and a mobile coding app called Acode. On Day 1, they covered the basics of HTML structure, including the difference between container tags and empty tags, as well as an introduction to semantic HTML elements. Their first project is a personal portfolio website built entirely on the mobile device. The learner plans to document their progress, including bugs and mistakes, as they continue through the challenge. Next steps include deepening their HTML knowledge before moving on to CSS and JavaScript.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Solo dev builds n8n workflow to auto-draft devlogs for four platforms at once

A solo indie game developer has built an automated workflow using n8n, Google Gemini, and Notion to eliminate the repetitive task of rewriting devlogs for multiple platforms. The system takes a single devlog entry and reformats it into tailored drafts for Twitter, Reddit, Discord, and a newsletter in one run. Drafts are saved as separate fields in a Notion database for the developer to review and publish manually, preserving authenticity and platform compliance. The workflow runs locally via Docker and requires only a Notion integration and a free-tier Google Gemini API key. The developer shared the setup as a replicable template aimed at other solo creators facing the same content-distribution bottleneck.

0 comments Read more at DEV Community