🎨 Palette: Add keyboard navigation to browser example tabs#754
🎨 Palette: Add keyboard navigation to browser example tabs#754EffortlessSteven wants to merge 1 commit intomainfrom
Conversation
- Added `keydown` event listener to the `.tabs` container in `main.js`. - Implemented `ArrowRight`, `ArrowLeft`, `Home`, and `End` key handling for navigating between tabs. - Ensured focus moves to the new tab and it is automatically activated (clicked). - This improves accessibility for keyboard users and aligns with ARIA Tab Pattern practices.
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
Warning You have reached your daily quota limit. Please wait up to 24 hours and I will start processing your requests again! |
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
Adds keyboard navigation to the BitNet WASM browser example’s tab UI to improve accessibility and match expected role="tablist" interactions.
Changes:
- Initialize tab keyboard navigation during app startup.
- Add
keydownhandling for ArrowLeft/ArrowRight/Home/End to move between tabs and activate them. - Document the accessibility learning in Palette’s journal.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| crates/bitnet-wasm/examples/browser/main.js | Adds setupTabNavigation() and wires it into initialization to enable keyboard-driven tab navigation. |
| .jules/palette.md | Records a learning/action item about implementing keyboard interactions for custom ARIA tabs. |
| if (!tabsContainer) return; | ||
|
|
||
| tabsContainer.addEventListener('keydown', (e) => { | ||
| const tabs = Array.from(document.querySelectorAll('.tab')); |
There was a problem hiding this comment.
setupTabNavigation collects tabs via document.querySelectorAll('.tab'), which can accidentally include any other .tab elements on the page (now or in the future) and break navigation ordering. Prefer scoping to the tablist container (e.g., tabsContainer.querySelectorAll(...)) and/or selecting by role ([role="tab"]) within the container.
| const tabs = Array.from(document.querySelectorAll('.tab')); | |
| const tabs = Array.from(tabsContainer.querySelectorAll('.tab')); |
| if (handled) { | ||
| e.preventDefault(); | ||
| const nextTab = tabs[nextIndex]; | ||
| nextTab.focus(); | ||
| nextTab.click(); // Activate the tab | ||
| } |
There was a problem hiding this comment.
The ARIA tabs pattern typically uses a roving tabindex (active tab tabindex=0, inactive tabs tabindex=-1) so Tab moves out of the tablist rather than visiting every tab. This change moves focus with arrow keys but never updates tabindex, so all tabs remain in the Tab order and keyboard UX won’t match the expected pattern.
💡 What: Added full keyboard navigation support for the tabs in the browser example.
🎯 Why: The previous implementation relied solely on click events, making it difficult for keyboard users to navigate between sections efficiently.
📸 Before/After: No visual changes, but behavioral improvement verified via Playwright script showing focus moving with arrow keys.
♿ Accessibility: Supports ArrowRight/ArrowLeft/Home/End keys for navigating the tab list, fulfilling ARIA authoring practices for
role="tablist".PR created automatically by Jules for task 14475259408153707242 started by @EffortlessSteven