add handle keyboard focus for accessibility

[vanpertsch]

add focus-trap (https://github.com/focus-trap/focus-trap) for accessibility

focus-trap.mp4

Signed-off-by: Vanessa Pertsch vanessa.pertsch@posteo.de

[artonge]

👍

[szaimen]

Does it also work with multiple modals on top of each other e.g. like the text app uses?

[skjnldsv]

Does it also work with multiple modals on top of each other e.g. like the text app uses?

Tested, works fine

<template>
	<div>
		<button @click="modal = true">Show Modal</button>
		<modal v-if="modal" @close="modal = false" size="small">
			<div class="modal__content">Hello world</div>

			<button @click="modal2 = true">Show Modal 2</button>
			<modal v-if="modal2" @close="modal2 = false" size="small">
				<div class="modal__content">Hello world 2</div>
			</modal>

		</modal>
	</div>
</template>
<script>
export default {
	data() {
		return {
			modal: false,
			modal2: false
		}
	},
}
</script>