Fix close-explicitly in Vue + update tests (see #36)

Author: pascalbaljet

demo-app/tests/Browser/ConfigPropsTest.php

@@ -17,8 +17,10 @@ public function it_can_set_config_globally(bool $navigate)
                 ->waitForText('Prop from Config')
                 ->clickLink('Open')
                 ->waitFor('.im-dialog')
-                ->keys('', ['{escape}'])
-                // ->assertAttribute('#app', 'inert', '') // Close explicitly TODO: FIX
+                ->keys('', ['{escape}']) // Escape key does not close the dialog
+                ->assertAttribute('#app', 'aria-hidden', 'true')
+                ->clickLink('Open') // Clicking outside the dialog does not close it
+                ->assertAttribute('#app', 'aria-hidden', 'true')
                 ->assertPresent('.im-slideover-content')   // Slideover
                 ->assertMissing('.im-close-button') // No close button
                 ->assertAttributeContains('.im-slideover-positioner', 'class', 'justify-start') // Left-aligned

demo-app/tests/Browser/ConfigTest.php

@@ -17,8 +17,10 @@ public function it_passes_the_props_from_the_modal(bool $navigate)
                 ->waitForText('Prop from Modal')
                 ->clickLink('Open Slideover')
                 ->waitFor('.im-dialog')
-                ->keys('', ['{escape}'])
-                // ->assertAttribute('#app', 'inert', '') // Close explicitly TODO: FIX
+                ->keys('', ['{escape}']) // Escape key does not close the dialog
+                ->assertAttribute('#app', 'aria-hidden', 'true')
+                ->clickLink('Open Slideover') // Clicking outside the dialog does not close it
+                ->assertAttribute('#app', 'aria-hidden', 'true')
                 ->assertPresent('.im-slideover-content')   // Slideover
                 ->assertMissing('.im-close-button') // No close button
                 ->assertAttributeContains('.im-slideover-positioner', 'class', 'justify-start') // Left-aligned

demo-app/tests/Browser/ModalLinkPropsTest.php

@@ -17,8 +17,10 @@ public function it_passes_the_props_from_the_modal_link(bool $navigate)
                 ->waitForText('Prop from ModalLink')
                 ->clickLink('Edit User 1')
                 ->waitFor('.im-dialog')
-                ->keys('', ['{escape}'])
-                // ->assertAttribute('#app', 'inert', '') // Close explicitly TODO: FIX
+                ->keys('', ['{escape}']) // Escape key does not close the dialog
+                ->assertAttribute('#app', 'aria-hidden', 'true')
+                ->clickLink('Edit User 1') // Clicking outside the dialog does not close it
+                ->assertAttribute('#app', 'aria-hidden', 'true')
                 ->assertPresent('.im-slideover-content')   // Slideover
                 ->assertMissing('.im-close-button') // No close button
                 ->assertAttributeContains('.im-slideover-positioner', 'class', 'justify-start') // Left-aligned

vue/src/ModalContent.vue

@@ -30,7 +30,6 @@ defineProps({
             >
                 <DialogContent
                     :aria-describedby="undefined"
-                    :trap-focus="config?.closeExplicitly"
                     :class="{
                         'im-modal-wrapper w-full transition duration-300 ease-in-out': true,
                         'blur-sm': !modalContext.onTopOfStack,
@@ -45,6 +44,8 @@ defineProps({
                         'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl': config.maxWidth == '6xl',
                         'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl': config.maxWidth == '7xl',
                     }"
+                    @escape-key-down="($event) => config?.closeExplicitly && $event.preventDefault()"
+                    @interact-outside="($event) => config?.closeExplicitly && $event.preventDefault()"
                 >
                     <VisuallyHidden as-child>
                         <DialogTitle />

vue/src/SlideoverContent.vue

@@ -29,7 +29,6 @@ defineProps({
             >
                 <DialogContent
                     :aria-describedby="undefined"
-                    :trap-focus="config?.closeExplicitly"
                     :class="{
                         'im-slideover-wrapper w-full transition duration-300 ease-in-out': true,
                         'blur-sm': !modalContext.onTopOfStack,
@@ -44,6 +43,8 @@ defineProps({
                         'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl': config.maxWidth == '6xl',
                         'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl': config.maxWidth == '7xl',
                     }"
+                    @escape-key-down="($event) => config?.closeExplicitly && $event.preventDefault()"
+                    @interact-outside="($event) => config?.closeExplicitly && $event.preventDefault()"
                 >
                     <VisuallyHidden as-child>
                         <DialogTitle />