fix(web): start supporting rendering inside shadow dom

[eirikbacker]

• Resolves https://designsystemet.slack.com/archives/C05RK9VEGJ0/p1782892420404979
• Tooltip is refactored to simplify and strengthen both readability and performance
• Remaining issue: onMutation still does not check Shadow DOM of custom elements, affecting:
  • dialog - resulting in missing aria-haspopup attribute (could be added on focus which is sufficient as this is not part of screen reader rotor)
    • Meeting 14.07.26: We move to focus event to add aria-haspopup and add changeset about this
  • fieldset - resulting in missing aria-labelledby attributes (could be added on focus, but not sufficient due to screen reader rotor navigation). I would argue though that this is not a deal breaker since the only result is description not being added to legend announcement, which is the default in most websites anyway, and also a quite narrow scenario.
    • Meeting 14.07.26: We do no changes, as this behavior is not a W3C standard and should be more researched, before we decide it is worth the performance to add this
  • toggle-group - resulting in missing aria-labelledby attributes (could be added on focus, but not sufficient due to screen reader rotor navigation). This could be solved by making toggle-group a custom element, or use focusgroup
    • Meeting 14.07.26: We move focusgroup and deprecate the data-tooltip attribute
  • tooltip - resulting in aria attributes not getting added before focus (not sufficient due to screen reader rotor navigation). The only way to solve this, is making the consumer set aria-label or aria-labelledby themselves. We could move to a <button data-tooltip aria-label="Hei"> structure, and if the aria-label should have been a aria-description we give the consumer a warning in the console maybe? This will also speed up the script, but require more work from our consumers.
    • Meeting 14.07.26: We document the need to add aria-label/aria-labelledby manually if in ShadowDom
• Headsup: mouseover in tooltip and clickdelegatefor is now changed to mousemove as this event triggers also when moving between elements inside shadow dom. This can cause issues if consumer has implemented testing with manual dispatchEvent(new MouseEvent('mouseover'))

[changeset-bot]

🦋 Changeset detected

Latest commit: 3e06866

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@digdir/designsystemet-web	Patch
@digdir/designsystemet	Patch
@digdir/designsystemet-css	Patch
@digdir/designsystemet-types	Patch
@digdir/designsystemet-react	Patch

Not sure what this means? Click here to learn what changesets are.

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

[github-actions]

Preview deployments for this pull request:

storybook - 24. Jul 2026 - 10:46