feat(viewer): keyboard navigation and accessibility improvements#10
Open
benvinegar wants to merge 1 commit into
Open
feat(viewer): keyboard navigation and accessibility improvements#10benvinegar wants to merge 1 commit into
benvinegar wants to merge 1 commit into
Conversation
… accessible Session rows are focusable role=button elements activated with Enter/Space, with a visible focus ring and focus preserved across sidebar re-renders. Hover-only actions (session delete, card open/delete) are now reachable by keyboard and touch and shown via :focus-within. The contenteditable session title gets role=textbox, an aria-label, and Escape-to-cancel. Snippet iframes carry the snippet title; the toast is a polite live region. Visual design for mouse users is unchanged. https://claude.ai/code/session_01CPrjGf4zMKuvx43Vg9cr2o
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Make the viewer usable by keyboard and assistive technology. Session rows are now focusable interactive elements that activate with Enter/Space, with focus preserved across live re-renders. Hover-only actions (session delete, card open/delete) are now reachable on focus and properly labeled. The editable session title supports Escape to cancel edits, snippet iframes carry descriptive titles, and toast notifications are announced via a polite live region.
Key changes:
role="button",tabIndex, and keyboard handlers (Enter/Space) to make session selection keyboard-accessible. Session rows now store their ID indata-idfor focus restoration after re-renders.renderSidebar()now tracks which session row (or delete button) had focus before re-rendering and restores it afterward, ensuring keyboard navigation survives live updates.display: none/blocktoopacity: 0/1and added:focus-withinselectors alongside:hoverfor session rows and cards, making all interactive elements reachable via keyboard.role="textbox"andaria-labelfor clarity.aria-labelwith the session name; session title hasaria-label; snippet iframes now carry the snippet title in theirtitleattribute.role="status"andaria-live="polite"to announce notifications to assistive technology.:focus-visibleoutline styling to session rows for visual keyboard focus feedback.CHANGELOG entry added documenting the accessibility improvements.
https://claude.ai/code/session_01CPrjGf4zMKuvx43Vg9cr2o