Add keyboard accessibility demo page #2
Conversation
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
This PR is being reviewed by Cursor Bugbot
Details
You are on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle.
To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.
| if (!targetSelector) return; | ||
| const target = document.querySelector(targetSelector); | ||
| if (!target) return; | ||
| const text = target.textContent || target.value || ""; |
There was a problem hiding this comment.
Copy textarea gets initial content, not user input
The expression target.textContent || target.value checks textContent first, but for textarea elements, textContent returns the original HTML content between the tags, not the current user-entered value. Since the prompt textarea has initial content, textContent is always truthy, so target.value is never evaluated. This causes the "Copy prompt" button to copy the original text instead of any edits the user made.
| const randomButton = knob.querySelector(".knob-random"); | ||
| if (randomButton) { | ||
| randomButton.addEventListener("click", handleKnobActivation); | ||
| randomButton.addEventListener("keydown", handleKnobActivation); |
There was a problem hiding this comment.
Keydown event bubbles causing double knob randomization
When pressing Enter or Space on a .knob-random button, the keydown event fires the button's handler calling updateKnob, then bubbles up to the parent .knob div which also has a keydown listener, causing updateKnob to be called a second time. The handler lacks event.stopPropagation() to prevent this double execution.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 10acf76edc
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| const target = document.querySelector(targetSelector); | ||
| if (!target) return; | ||
| const text = target.textContent || target.value || ""; |
There was a problem hiding this comment.
In copyFromTarget (script.js lines 113‑115), the text to copy is taken from target.textContent || target.value, so the textarea’s initial text node is always used instead of the current value. After a user edits the prompt and clicks “Copy prompt”, the clipboard still receives the original default prompt because textContent on a <textarea> does not update with user input. This breaks the copy feature whenever the prompt is modified before copying.
Useful? React with 👍 / 👎.
Summary
Testing
Codex Task
Note
Introduces an accessible, keyboard-operable demo UI showcasing common controls and ARIA patterns.
index.htmlwithrole="tablist"tabs, focusableknobwidgets,mode-togglebuttons, copy actions, and anIgniteflow with live status regionsscript.jswires keyboard and click handlers: tab activation/arrow navigation, knob randomization, toggle exclusivity viaaria-pressed, clipboard copy vianavigator.clipboard, and an ignition sequence updatingaria-livestatusstyles.cssadds visual design and strong:focus-visibleoutlines fortab,.mode-toggle,.knob,.copy,.knob-random, and#igniteWritten by Cursor Bugbot for commit 10acf76. This will update automatically on new commits. Configure here.