feat(core): add dom attributes option for nodes

[cmath10]

🚀 What's changed?

Added the possibility to customize HTML attributes of .vue-flow__node elements, globally through the nodesAttributes prop, and for each single node.

🐛 Fixes

None

🪴 To-Dos

None

Motivation

For my use case, I need greater flexibility in customizing ARIA attributes — for example, being able to explicitly set a role or provide additional aria-* properties.

Currently, role="button" is set automatically when focusable is true and omitted otherwise, with no way to override this behavior. While aria-label can be configured, this alone is often not sufficient for proper accessibility. Other attributes, such as aria-describedby, are managed internally and cannot be customized externally, which limits the ability to implement more advanced accessibility patterns.

According to WAI-ARIA specifications, for example, aria-describedby may include multiple ID references — something that is currently not supported via the API.

This PR is intended as a starting point for discussion, and I’m open to feedback on how to make this more flexible while fitting within the existing design.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[changeset-bot]

⚠️ No Changeset found

Latest commit: 903439f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

@cmath10 is attempting to deploy a commit to the Burak Cakmakoglu's projects Team on Vercel.

A member of the Team first needs to authorize it.

[bcakmakoglu]

Thanks for the PR - I'll have a look although I can't promise it lands since VueFlow 1.x is technically in a feature freeze so I usually only accept bugfix PRs atm :/ (I should add a warning for this to the repo, my bad ^^)

Although this looks like a rather small change so this might be fine, but again no promises, sorry.

Customizing a11y attributes will be possible in 2.x though which should be released some time this year so whether this lands or not you will get the ability to customize them to your liking at some point either way.

[bcakmakoglu]

I will consider adding this feature to VueFlow 1.x
After deliberation with the XYFlow team we agreed that this idea is useful and will most likely be added to ReactFlow/SvelteFlow as well and I don't wanna have people wait for VF 2.x since it will probably be a while before it is released.

Will report back here once I finally decided to move forward with this or not ^^

[bcakmakoglu]

I will be adding this with a couple changes though:

1. No global nodeAttributes object - define it per node as node.domAttrs
2. Typing is slightly more narrow
3. Added edge.domAttrs as well so the same can be done for edges

[bcakmakoglu]

This is released in 1.45.0 :)