Chrome warning about aria-hidden when using .inert with x-trap

[nikitaourazbaev]

In recent versions of Chrome and other Chromium browsers, there’s a new warning when using the .inert modifier with x-trap.

This seems to be a timing issue as adding a short delay or an await Alpine.nextTick() to the beginning of the setInert function clears this warning.

alpine/packages/focus/src/index.js

Line 169 in be9c5c5

function setInert(el) {

Here’s a minimal reproduction:

https://codepen.io/magiclantern/pen/vEOjaVg/9827b04ae16fffe57feb1f762870aeaa

This happens in Chrome 137.0.7151.104 on macOS and in Arc 137.0.7151.104 on macOS.

---

On a related note, support for inert is pretty reasonable these days, maybe it would be possible for the Focus plugin to allow using that instead of aria-hidden as an option?

[ekwoka]

@alpine/focus uses focus-trap to handle all of this logic

[nikitaourazbaev]

@alpine/focus uses focus-trap to handle all of this logic

For .inert specifically, it looks like the Focus plugin adds this functionality itself:

alpine/packages/focus/src/index.js

Lines 169 to 183 in be9c5c5

	function setInert(el) {
	let undos = []
	crawlSiblingsUp(el, (sibling) => {
	let cache = sibling.hasAttribute('aria-hidden')
	sibling.setAttribute('aria-hidden', 'true')
	undos.push(() => cache || sibling.removeAttribute('aria-hidden'))
	})
	return () => {
	while(undos.length) undos.pop()()
	}
	}

[ekwoka]

ah, interesting.

I guess there might need to be a way to try to ensure the focus has moved the trapped area before applying this...

[nikitaourazbaev]

Moving the call to setInert into focus-trap’s onPostActivate callback is sometimes enough to do the trick, sometimes it needs an additional tick.

I’ve opened a PR here:
#4640