Skip to content

Add tabbable input to control the diagram's Tab order - #795

Merged
lukasz-jazwa merged 3 commits into
mainfrom
ngd-313-tabbable-input
Aug 31, 2026
Merged

Add tabbable input to control the diagram's Tab order#795
lukasz-jazwa merged 3 commits into
mainfrom
ngd-313-tabbable-input

Conversation

@lukasz-jazwa

@lukasz-jazwa lukasz-jazwa commented Aug 21, 2026

Copy link
Copy Markdown
Collaborator

The diagram host and the watermark link were two Tab stops an application could not remove. <ng-diagram [tabbable]="false"> takes both out of the sequential Tab order; both stay clickable, stay in the accessibility tree, and keyboard shortcuts keep working once focus is inside the diagram. Defaults to true, so current behavior is unchanged.

The input lives on NgDiagramComponent rather than on the KeyboardInputsDirective host directive: api-extractor's d.ts rollup drops the host-directive reference, so a forwarded input does not compile for consumers installing from npm.

Backward compatibility

  • Default is true, so applications that do not use the input keep the current behavior — the diagram container and the watermark link stay in the Tab order.
  • One behavior change: a static tabindex attribute written on <ng-diagram> in an application template no longer takes effect. Until now the template attribute won over the directive's static host tabindex="0", so tabindex="-1" worked as a workaround to remove the Tab stop. The attribute is now driven by a host binding, and a host binding overwrites the template attribute. Migration is one attribute: replace tabindex="-1" with [tabbable]="false" (called out in the CHANGELOG).
  • A template binding [attr.tabindex] on <ng-diagram> was never reliable — it always fought the attribute set by the library — and still is not.
  • A positive tabindex (for example tabindex="3" to give the diagram a fixed place in the page's Tab order) has no replacement: tabbable produces only 0 or -1. Accepted trade-off — positive tabindex values are a WCAG anti-pattern.
  • Everything else is additive: one new optional input, no changes to any existing signature or type (the api-report diff is the new input only).

The diagram host and the watermark link were two Tab stops an application
could not remove. `<ng-diagram [tabbable]="false">` takes both out of the
sequential Tab order; both stay clickable, stay in the accessibility tree,
and keyboard shortcuts keep working once focus is inside the diagram.
Defaults to true, so current behavior is unchanged.

The input lives on NgDiagramComponent rather than on the KeyboardInputsDirective
host directive: api-extractor's d.ts rollup drops the host-directive reference,
so a forwarded input does not compile for consumers installing from npm.
"Whether the diagram takes part in the Tab order" could read as if Tab
would not enter the diagram at all. What leaves the Tab order is the
container element and the watermark link; focusable content in the
application's own node and edge templates keeps its own Tab stops.
Comment thread apps/docs/scripts/sync-changelog.js
@lukasz-jazwa
lukasz-jazwa merged commit a623abe into main Aug 31, 2026
2 checks passed
@lukasz-jazwa
lukasz-jazwa deleted the ngd-313-tabbable-input branch August 31, 2026 21:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants