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

**URL:** <https://discuss.prosemirror.net/t/ignore-dynamic-attributes-in-the-html-e-g-aria-attributes-added-by-tippy-js/5442>\
**Category:** Uncategorized\
**Created:** [April 17, 2023, 7:23pm UTC](https://discuss.prosemirror.net/t/ignore-dynamic-attributes-in-the-html-e-g-aria-attributes-added-by-tippy-js/5442 "2023-04-17T19:23:43Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![segevfiner](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/segevfiner/32/3393_2.png) [@segevfiner](https://discuss.prosemirror.net/u/segevfiner)\
**Post date:** [April 17, 2023, 7:23pm UTC](https://discuss.prosemirror.net/t/ignore-dynamic-attributes-in-the-html-e-g-aria-attributes-added-by-tippy-js/5442/1 "2023-04-17T19:23:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![addlistener](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/addlistener/32/3521_2.png) [@addlistener](https://discuss.prosemirror.net/u/addlistener)\
**Post date:** [July 19, 2023, 8:30am UTC](https://discuss.prosemirror.net/t/ignore-dynamic-attributes-in-the-html-e-g-aria-attributes-added-by-tippy-js/5442/2 "2023-07-19T08:30:10Z")

</div>

@segevfiner

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

```auto

    // @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);
    }

```

---

<div class="post-metadata">

**Author:** ![bhl](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/bhl/32/4074_2.png) [@bhl](https://discuss.prosemirror.net/u/bhl)\
**Post date:** [March 5, 2024, 12:43am UTC](https://discuss.prosemirror.net/t/ignore-dynamic-attributes-in-the-html-e-g-aria-attributes-added-by-tippy-js/5442/3 "2024-03-05T00:43:54Z")

</div>

Ran into a similar issue with integrating a Radix dropdown menu with ProseMirror. When `modal=true`, the menu component uses [GitHub - theKashey/aria-hidden: 🗣Cast aria-hidden to everything, except...](https://github.com/theKashey/aria-hidden/tree/master) to add `aria-hidden` and `data-aria-hidden` to all other elements.

For some reason, only with a CodeMirror Nodeview, it causes the node selection to be lost because there are mutations pending when `domObsever.stop()` is called when view dom is blurred.

[https://i.imgur.com/PYHuykx.mp4](https://i.imgur.com/PYHuykx.mp4)

 ![image](https://discuss.prosemirror.net/uploads/secondsite/original/2X/0/01175397f11dd67eb12164893acf370d0474b941.jpeg)

There are no mutations if I don’t use a CodeMirror node view.

```tsx
	ignoreMutation() {
		return true;
	}

	stopEvent(event: Event) {
		return this.cmView && this.cmView.dom.contains((event as any).target);
	}

```

---

<div class="post-metadata">

**Author:** ![bhl](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/bhl/32/4074_2.png) [@bhl](https://discuss.prosemirror.net/u/bhl)\
**Post date:** [March 5, 2024, 8:09am UTC](https://discuss.prosemirror.net/t/ignore-dynamic-attributes-in-the-html-e-g-aria-attributes-added-by-tippy-js/5442/4 "2024-03-05T08:09:01Z")

</div>

Unsure about the consequences for accessibility but adding the following helps, because it excludes ProseMirror descendants from receiving `aria-hidden`. This only works if you’re directly or indirectly using [GitHub - theKashey/aria-hidden: 🗣Cast aria-hidden to everything, except...](https://github.com/theKashey/aria-hidden).

```ts
	new Plugin({
		props: {
			attributes: {
				'aria-live': 'polite',
			},
		},
	}),

```

I was debugging why I only noticed a domObserver issue with aria-hidden when I had a CodeMirror node view. It’s because it has a `cm-announced` which has `aria-live` set, so the library `aria-hidden` marks all of its surrounding siblings as hidden instead of its parent or an ancestor – and that in turn, causes a bunch of mutation records.

Similar issue:

> [@NodeView selection is lost if div.ProseMirror is altered on tab focus](https://discuss.prosemirror.net/t/nodeview-selection-is-lost-if-div-prosemirror-is-altered-on-tab-focus/3977):
>
> We’ve discovered some strange behavior that I wanted to discuss before filing a bug. A 3rd party library in our application is listening to blur/focus events and on focus, they are setting their own data-attribute on our root ProseMirror div. (I believe they are binding to document.activeElement, which at the time that their code runs is the editor). The result is that, if a NodeView is selected when you switch tabs away and return, the editor selection is recomputed and actually moves to the p…

Ideally, we could define an `ignoreMutation` at the root node view or passed to EditorView, that’s used in the domObserver and can filter out these third-party libraries.
