Ignore dynamic attributes in the HTML (e.g. ARIA attributes added by Tippy.js)

1

We are trying to show a Tippy.js tooltip from certain HTML nodes that are rendered by ProseMirror, but Tippy.js by default adds ARIA attributes to the node it bases it position from, which ProseMirror will immediately from its MutationObserver, is there any way to make ProseMirror ignore such attributes as they don’t need to effect the actual document, nor should they be removed by ProseMirror. (In actually, it looks like ProseMirror recreates the HTML element itself rather than only remove the attribute, which causes Tippy.js to trigger again, in a loop).

I can disable aria attributes in Tippy.js, but that’s less ideal for accessibility.

2

@segevfiner

This is my way. Hopefully @marjin will consider adding it to the codebase


    // @ts-ignore
    const original = view.domObserver.registerMutation;
    // @ts-ignore
    view.domObserver.registerMutation = function (this: any, mut: MutationRecord, added: ProsemirrorNode[]) {
      // console.log('wealthy registerMutation', mut, added);
      if (added.length === 0 && (mut.type === 'attributes') && (mut.attributeName === 'data-aria-hidden' || mut.attributeName === 'aria-hidden')) {
        return;
      }

      return original.call(this, mut, added);
    }