fix(stories) : make graph container focusable by LOUISNOYEZ · Pull Request #1027 · maxGraph/maxGraph

LOUISNOYEZ · 2026-03-24T13:44:58Z

PR Checklist

Addresses an existing open issue: closes #<the_issue_number_here>. If not, explain why (minor changes, etc.).
You have discussed this issue with the maintainers of maxGraph, and you are assigned to the issue.
The scope of the PR is sufficiently narrow to be examined in a single session. A PR covering several issues must be split into separate PRs. Do not create a large PR, otherwise it cannot be reviewed and you will be asked to split it later or the PR will be closed.
I have added tests to prove my fix is effective or my feature works. This can be done in the form of automatic tests in packages/core/_tests_ or a new or altered Storybook story in packages/html/stories (an existing story may also demonstrate the change).
I have provided screenshot/videos to demonstrate the change. If no releavant, explain why.
I have added or edited necessary documentation, or no docs changes are needed.
The PR title follows the "Conventional Commits" guidelines.

Overview

In stories involving keyboard events, they don't seem to be registered and propagated to the graph container, and are thus not handled.
This pull request is intended to fix #910, although this issue is present on all stories which involve the handling of keyboard events by the graph.

Analysis

In the current stories involving keyboard events such as the Validation story, keyboard events do not seem to be detected/propagated to the graph container. I believe this is because the container HTML element linked to the graph has no tabindex attribute.
This was NOT required by the initial mxgraph example. I believe this is because in the mxgraph example, the container HTML div is the ONLY element on the page. I suppose in that case it might get focused by default and directly propagate keyboard events, but in storybook, multiple UI elements are focusable and have tabindex attributes.
The fix consists in setting the tabindex attribute of the container div, and registering a click event listener to transfer the focus to the container when it is clicked for ease of use. The validation story now works as expected.

Notes

It doesn't seem sufficient to set the tabindex attribute and focus callback on parent HTML elements of the graph container.
This affects all stories dependant on keyboard events displayed in storybook.
I've added no demonstration video, which don't illustrate well the 'absence' of event.
The correct behavior can be tested in the Validation story.

Keywords

closes #910

Summary by CodeRabbit

New Features
- Enhanced graph container with improved keyboard accessibility by making it focusable via click interaction and keyboard navigation.

coderabbitai · 2026-03-24T13:45:11Z

Walkthrough

The Validation story now makes the graph container focusable by adding tabindex="0" and a click event listener that programmatically focuses the container. This ensures keyboard events are properly captured for the KeyHandler functionality within the Storybook environment.

Changes

Cohort / File(s)	Summary
Focus Management `packages/html/stories/Validation.stories.ts`	Added container focus handling: sets `tabindex="0"` and attaches click listener to call `container.focus()`, enabling keyboard event capture in Storybook.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

maxGraph/maxGraph#914: Modifies the same Validation.stories.ts file with related container behavior changes.

Suggested labels

bug

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: making the graph container focusable in stories to fix keyboard event handling.
Description check	✅ Passed	The description is complete with all required sections: checklist items, detailed overview explaining the problem and solution, and issue reference. Keywords like 'closes `#910`' are included.
Linked Issues check	✅ Passed	The PR addresses the core requirement from `#910` by making the graph container focusable with tabindex and adding click focus listeners, enabling keyboard event propagation in Storybook stories.
Out of Scope Changes check	✅ Passed	All changes are narrowly scoped to the Validation story file and directly address the linked issue `#910`. No unrelated modifications were introduced.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

sonarqubecloud · 2026-03-24T13:46:10Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

coderabbitai

🧹 Nitpick comments (1)

packages/html/stories/Validation.stories.ts (1)
186-188: Consider focusing the iframe window before focusing the container

In Storybook iframe scenarios, container.focus() alone can still be flaky for keyboard delivery. Add window.focus() in the same click handler for better reliability.
Suggested patch
-  container.addEventListener('click', () => {
-    container.focus();
-  })
+  container.addEventListener('click', () => {
+    window.focus();
+    container.focus();
+  });
Based on learnings: "KeyHandler issues in Storybook are due to iframe isolation - ... ensure the iframe window has focus by calling window.focus() and focusing the target element in the preview configuration or story setup."

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 05861f1c-e2e2-4b42-91c9-21be26ab003b

📥 Commits

Reviewing files that changed from the base of the PR and between 24357a7 and 6717525.

📒 Files selected for processing (1)

packages/html/stories/Validation.stories.ts

fix(stories) : make graph container focusable

6717525

LOUISNOYEZ marked this pull request as ready for review March 24, 2026 13:46

coderabbitai bot reviewed Mar 24, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(stories) : make graph container focusable#1027

fix(stories) : make graph container focusable#1027
LOUISNOYEZ wants to merge 1 commit intomaxGraph:mainfrom
LOUISNOYEZ:fix(stories)/propagate_stories_keyboard_events_to_graph_container

LOUISNOYEZ commented Mar 24, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Mar 24, 2026 •

edited

Loading

Uh oh!

sonarqubecloud bot commented Mar 24, 2026

Uh oh!

coderabbitai bot left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

LOUISNOYEZ commented Mar 24, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Checklist

Overview

Analysis

Notes

Keywords

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Uh oh!

sonarqubecloud bot commented Mar 24, 2026

Quality Gate passed

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

LOUISNOYEZ commented Mar 24, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 24, 2026 •

edited

Loading