Skip to content

fix: improve accessibility - #210

Merged
Exeloo merged 2 commits into
mainfrom
fix/improve-accessibility
Nov 5, 2026
Merged

Exeloo merged 2 commits into
mainfrom
fix/improve-accessibility

Conversation

@Exeloo

@Exeloo Exeloo commented Oct 30, 2026

Copy link
Copy Markdown
Member

What does this PR do?

The PR improve the accessibility of the app

How do you test this PR?

@Exeloo
Exeloo requested a review from Tchips46 as a code owner October 30, 2026 09:23
@github-actions github-actions Bot added documentation Improvements or additions to documentation apps:editor Related to Editor app packages:sdk Related to SDK package packages:ui Related to UI package plugins:code-editor Related to Code editor plugin plugins:console Related to Console plugin plugins:ecs Related to ECS plugin plugins:file-manager Related to File manager plugin plugins:git Related to Git plugin plugins:inspectors Related to Inspectors plugin plugins:viewport Related to Viewport plugin labels Oct 30, 2026
@Exeloo
Exeloo added this pull request to stack #212 October 30, 2026 09:29
@Tchips46

Copy link
Copy Markdown
Member

Review: keyboard support (3c4e294)

Line numbers are at this PR's head.

Should fix

1. Keyboard bugs in the places this PR targets

  • Context menu: Shift+F10 or the menu key in Hierarchy and Scenes shows only "Add entity". The Tree handler sets menuTarget = focused, then the wrapping .list div's oncontextmenu resets it to undefined, because the event target is the tree, not a [data-id] row (plugins/ecs/src/widgets/hierarchy/Hierarchy.svelte:247-248, plugins/scene/src/widgets/scenes/Scenes.svelte:217-218). So Move up / Move down, Rename and Remove can't be reached from the keyboard. FilesView already has the right guard.
    • Fix: copy it: if (!isKeyboardMenu(event) && !(event.target as HTMLElement).closest('[data-id]')).
  • File grid: in a subfolder, Up/Down move diagonally. columns counts only [role="option"], and the .. button takes the first cell (plugins/file-manager/src/widgets/files/GridView.svelte:64-66). With 5 columns, ArrowDown from the first file lands one column to the left, and the arrow keys never reach ...
    • Fix: count columns over every .tile (or read gridTemplateColumns), and navigate over .tile.
  • Tables with no tab stop: the tab stop is selectedHash ?? commits[0] / selectedId ?? shown[0] (plugins/git/src/widgets/log/CommitTable.svelte:105, plugins/inspectors/src/widgets/network/NetworkView.svelte:170). Select a commit, then filter it out (text, user, date), or select a packet, then pick Direction "Out". No row has tabindex=0, so Tab skips the whole table.
    • Fix: fall back to the first shown row when the selected one is filtered out.
  • F6 stops on the tool stripes: data-nf-part="stripe" (packages/ui/src/workbench/parts/ToolStripe.svelte:118) puts both stripes in focusPart's F6 cycle (workbench.svelte:128). That is two extra stops, and docs/docs/editor/layout.mdx:33 no longer matches.
    • Fix: give the stripes their own attribute (data-nf-stripe), also in panel-focus.ts:33.
  • Controls nested in a button: in plugins/git/src/widgets/commit/ChangeGroupNode.svelte:99-104, the group header has role="button" and holds the chevron <button> and the "Include all" checkbox. Under ARIA, a button's children are presentational: screen readers flatten them, and axe flags it as nested-interactive. aria-pressed and aria-expanded together on one element are also contradictory.
    • Fix: make the chevron and the checkbox siblings of the header, and drop aria-pressed.

2. Toasts may stop dismissing themselves (plausible, not run)

  • release() is called only from focusout or pointerleave (packages/ui/src/components/toasts.svelte:28, notification-service.ts:83-101). Tab to a toast's Dismiss button and press Enter: the focused button is removed, so focusout may never reach the section, and _held stays true. No later toast then dismisses itself.
  • Fix: in dismiss(), call release() once no toast is left.

Nice to have

3. Splitter keyboard edge cases (packages/ui/src/components/splitter.svelte:12, 52, 64)

  • keyDelta keeps growing past the 120 px clamp: press ArrowLeft several times at 130 px, then ArrowRight within 600 ms, and nothing moves.
  • The max prop is never passed.
  • If the splitter unmounts within 600 ms, the cleanup only clears the timer, so the resize is never saved. SceneView's nudge timer has the same pattern.
  • Fix: clamp keyDelta, drop max, and commit in the cleanup.

4. Lean

  • The same 11-line moving/movingTimer guard is copied in Hierarchy.svelte:101-111 and Systems.svelte:100-110: one small helper under plugins/ecs/src/widgets/ would do.
  • panel-focus.ts has its own FOCUSABLE selector next to focusPart's.
  • ChangesTab.svelte (310 lines) and SceneView.svelte (316) crossed the ~300-line rule in this PR.

@Exeloo
Exeloo force-pushed the fix/improve-accessibility branch from 3c4e294 to 85a44b2 Compare November 1, 2026 13:21
@github-actions github-actions Bot added the plugins:scene Related to Scene plugin label Nov 1, 2026
@Exeloo
Exeloo requested a review from Tchips46 November 1, 2026 13:22
- remove the vitest failure screenshots and ignore their folder
- hierarchy and scenes: the menu key opens the focused row's menu
- file grid: arrows move by rows in a subfolder and reach the parent tile
- commit and packet tables keep a tab stop when the selection is filtered out
- stripes leave the f6 cycle, one focusable selector for panels and parts
- commit groups: no nested controls, no aria-pressed
- toasts stop holding once dismissed from the keyboard
- splitter keys stop at the size limit, and are saved on unmount
- ecs: one move guard for hierarchy and systems
- git and ecs: the changes tree keys, the scene's key nudges and camera
  move to their own files (both views back under 300 lines)
@Exeloo
Exeloo force-pushed the fix/improve-accessibility branch from 85a44b2 to 8553d3e Compare November 5, 2026 11:55
@Exeloo
Exeloo merged commit f86cfc5 into main Nov 5, 2026
4 checks passed
@Exeloo
Exeloo deleted the fix/improve-accessibility branch November 5, 2026 15:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

apps:editor Related to Editor app documentation Improvements or additions to documentation packages:sdk Related to SDK package packages:ui Related to UI package plugins:code-editor Related to Code editor plugin plugins:console Related to Console plugin plugins:ecs Related to ECS plugin plugins:file-manager Related to File manager plugin plugins:git Related to Git plugin plugins:inspectors Related to Inspectors plugin plugins:scene Related to Scene plugin plugins:viewport Related to Viewport plugin

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants