frontend: ARIA #8636
Draft
frontend: ARIA #8636
Conversation
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
haraldschilly
force-pushed
the
aria-20251024
branch
6 times, most recently
from
1d0860d to
c94b46b
Compare
haraldschilly
force-pushed
the
aria-20251024
branch
from
c94b46b to
5b74a7c
Compare
Enhanced ARIA accessibility for the core editor frame system (Phase 10) with comprehensive landmark labels and live region support: **Frame Tree System (title-bar.tsx)**: - Menu navigation: Changed div to <nav> with aria-label - Frame controls region: Added role="region" with layout controls label - Symbol/outline bar: Added role="region" with descriptive label - Control buttons: Added aria-labels to split, maximize, minimize, close buttons - Connection status: Added aria-live="polite" for real-time updates - All buttons: Added aria-expanded for dynamic state indication **Editor Container (editor.tsx)**: - Added role="application" with context-aware aria-label including editor type and path - Enables proper keyboard navigation and focus management **Status Bar (status-bar.tsx)**: - Converted to ARIA live region with role="status" - Added aria-live="polite" and aria-atomic="true" for status announcements - Made clear button keyboard accessible **Icon Component Enhancement (components/icon.tsx)**: - Added ARIA attribute support (role, aria-label, aria-expanded, aria-pressed, aria-live, tabIndex) - Enables Icon to be used with accessibility roles like "button" - Updated unicode and icon rendering paths to pass ARIA attributes **Testing**: - Build successful: pnpm build-dev in packages/static ✅ 🧠 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
haraldschilly
force-pushed
the
aria-20251024
branch
9 times, most recently
from
e303368 to
84c24f1
Compare
Document the pattern of applying ARIA attributes directly to Ant Design components that support them, rather than wrapping in unnecessary divs. Example: - ✅ <Space.Compact role="region" aria-label="Zoom controls"> - ❌ <div role="region"><Space.Compact> Also note that components should forward ARIA props to their DOM elements.
haraldschilly
force-pushed
the
aria-20251024
branch
from
84c24f1 to
f7b51b0
Compare
haraldschilly
force-pushed
the
aria-20251024
branch
2 times, most recently
from
4c669a1 to
f4af5f8
Compare
haraldschilly
force-pushed
the
aria-20251024
branch
from
f4af5f8 to
7ea5f91
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
just getting started. with the code here, there are aria landmarks with labels. those labels describe what this is (e.g. a jupyter cell, its number, type, and if it is active). Such descriptive labels are useful for those browsers, that read out loud the labels.
here is aria landmarks highlighting all so far. what I don't know yet, how to navigate with the keyboard. there must be a way, though, since this is a tree and has horizontal and vertical orientation.