feat: apply inert to outroing elements

that way they are invisible to assistive technology and can't be interacted with, which makes sense since the element is already "dead" and only transitioning out at this point
closes #8445

CHANGELOG.md

@@ -16,6 +16,7 @@
 * **breaking** Error on falsy values instead of stores passed to `derived` ([#7947](https://github.com/sveltejs/svelte/pull/7947))
 * **breaking** Custom store implementers now need to pass an `update` function additionally to the `set` function ([#6750](https://github.com/sveltejs/svelte/pull/6750))
 * **breaking** Change order in which preprocessors are applied ([#8618](https://github.com/sveltejs/svelte/pull/8618))
+* **breaking** apply `inert` to outroing elements ([#8627](https://github.com/sveltejs/svelte/pull/8627))
 * Add a way to modify attributes for script/style preprocessors ([#8618](https://github.com/sveltejs/svelte/pull/8618))
 * Improve hydration speed by adding `data-svelte-h` attribute to detect unchanged HTML elements ([#7426](https://github.com/sveltejs/svelte/pull/7426))
 * Add `a11y no-noninteractive-element-interactions` rule ([#8391](https://github.com/sveltejs/svelte/pull/8391))

src/runtime/internal/transitions.js

@@ -186,14 +186,15 @@ export function create_in_transition(node, fn, params) {
  * @returns {{ end(reset: any): void; }}
  */
 export function create_out_transition(node, fn, params) {
-	/**
-	 * @type {TransitionOptions} */
+	/** @type {TransitionOptions} */
 	const options = { direction: 'out' };
 	let config = fn(node, params, options);
 	let running = true;
 	let animation_name;
 	const group = outros;
 	group.r += 1;
+	/** @type {boolean} */
+	let original_inert_value;
 
 	/**
 	 * @returns {void} */
@@ -205,10 +206,18 @@ export function create_out_transition(node, fn, params) {
 			tick = noop,
 			css
 		} = config || null_transition;
+
 		if (css) animation_name = create_rule(node, 1, 0, duration, delay, easing, css);
+
 		const start_time = now() + delay;
 		const end_time = start_time + duration;
 		add_render_callback(() => dispatch(node, false, 'start'));
+
+		if ('inert' in node) {
+			original_inert_value = /** @type {HTMLElement} */ (node).inert;
+			node.inert = true;
+		}
+
 		loop((now) => {
 			if (running) {
 				if (now >= end_time) {
@@ -229,6 +238,7 @@ export function create_out_transition(node, fn, params) {
 			return running;
 		});
 	}
+
 	if (is_function(config)) {
 		wait().then(() => {
 			// @ts-ignore
@@ -238,8 +248,12 @@ export function create_out_transition(node, fn, params) {
 	} else {
 		go();
 	}
+
 	return {
 		end(reset) {
+			if (reset && 'inert' in node) {
+				node.inert = original_inert_value;
+			}
 			if (reset && config.tick) {
 				config.tick(1, 0);
 			}
@@ -274,6 +288,9 @@ export function create_bidirectional_transition(node, fn, params, intro) {
 	let pending_program = null;
 	let animation_name = null;
 
+	/** @type {boolean} */
+	let original_inert_value;
+
 	/**
 	 * @returns {void} */
 	function clear_animation() {
@@ -318,11 +335,25 @@ export function create_bidirectional_transition(node, fn, params, intro) {
 			start: now() + delay,
 			b
 		};
+
 		if (!b) {
 			// @ts-ignore todo: improve typings
 			program.group = outros;
 			outros.r += 1;
 		}
+
+		if ('inert' in node) {
+			if (b) {
+				if (original_inert_value !== undefined) {
+					// aborted/reversed outro — restore previous inert value
+					node.inert = original_inert_value;
+				}
+			} else {
+				original_inert_value = /** @type {HTMLElement} */ (node).inert;
+				node.inert = true;
+			}
+		}
+
 		if (running_program || pending_program) {
 			pending_program = program;
 		} else {

test/runtime/samples/transition-inert/_config.js

@@ -0,0 +1,28 @@
+export default {
+	async test({ assert, component, target, raf }) {
+		// jsdom doesn't set the inert attribute, and the transition checks if it exists, so set it manually to trigger the inert logic
+		target.querySelector('button.a').inert = false;
+		target.querySelector('button.b').inert = false;
+
+		// check and abort halfway through the outro transition
+		component.visible = false;
+		raf.tick(50);
+		assert.strictEqual(target.querySelector('button.a').inert, true);
+		assert.strictEqual(target.querySelector('button.b').inert, true);
+
+		component.visible = true;
+		assert.strictEqual(target.querySelector('button.a').inert, false);
+		assert.strictEqual(target.querySelector('button.b').inert, false);
+
+		// let it transition out completely and then back in
+		component.visible = false;
+		raf.tick(101);
+		component.visible = true;
+		raf.tick(50);
+		assert.strictEqual(target.querySelector('button.a').inert, false);
+		assert.strictEqual(target.querySelector('button.b').inert, false);
+		raf.tick(51);
+		assert.strictEqual(target.querySelector('button.a').inert, false);
+		assert.strictEqual(target.querySelector('button.b').inert, false);
+	}
+};

test/runtime/samples/transition-inert/main.svelte

@@ -0,0 +1,16 @@
+<script>
+	export let visible = true;
+
+	function slide(_, params) {
+		return params;
+	}
+</script>
+
+{#if visible}
+	<button class="a" transition:slide={{ duration: 100 }}>
+		foo
+	</button>
+	<button class="b" out:slide={{ duration: 100 }}>
+		bar
+	</button>
+{/if}