fix(panel-app): corrige camada do modal de unificação

app-modules/panel-app/tests/Feature/ConnectionHubTest.php

@@ -0,0 +1,25 @@
+<?php
+
+declare(strict_types=1);
+
+use App\Livewire\ConnectionHub;
+use He4rt\Identity\User\Models\User;
+
+use function Pest\Livewire\livewire;
+
+test('merge confirmation modal exposes accessible dialog semantics', function (): void {
+    $currentUser = User::factory()->create();
+    $mergeTarget = User::factory()->create();
+
+    $this->actingAs($currentUser);
+
+    session()->put('oauth_merge_pending', [
+        'conflicting_user_id' => $mergeTarget->id,
+    ]);
+
+    livewire(ConnectionHub::class)
+        ->assertSet('showMergeModal', value: true)
+        ->assertSeeHtml('role="dialog"')
+        ->assertSeeHtml('aria-modal="true"')
+        ->assertSeeHtml('@keydown.escape.window="$wire.cancelMerge()"');
+});

resources/views/livewire/connection-hub.blade.php

@@ -145,49 +145,54 @@ class="rounded bg-gray-100 px-1 py-0.5 font-mono text-[9px] text-gray-500 ring-1
 
     {{-- Merge Confirmation Modal --}}
     @if ($showMergeModal && $mergeTarget)
-        <div
-            x-data="{ open: true }"
-            x-show="open"
-            x-transition
-            class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"
-        >
+        @teleport('body')
             <div
-                class="w-full max-w-sm rounded-xl border border-gray-200 bg-white p-6 shadow-2xl dark:border-gray-700 dark:bg-gray-900"
+                x-data="{ open: true }"
+                x-show="open"
+                x-transition
+                @keydown.escape.window="$wire.cancelMerge()"
+                role="dialog"
+                aria-modal="true"
+                class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"
             >
-                <div class="mb-4 flex items-center gap-2">
-                    <x-filament::icon icon="heroicon-o-link" class="h-5 w-5 text-amber-400" />
-                    <h3 class="text-base font-semibold text-gray-900 dark:text-white">Conta existente encontrada</h3>
-                </div>
-
-                <p class="mb-4 text-sm text-gray-600 dark:text-gray-300">Já existe uma conta vinculada a esse provedor:</p>
-
                 <div
-                    class="mb-4 rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700/60 dark:bg-gray-800/50"
+                    class="w-full max-w-sm rounded-xl border border-gray-200 bg-white p-6 shadow-2xl dark:border-gray-700 dark:bg-gray-900"
                 >
-                    <div class="flex items-center justify-between">
-                        <span class="text-sm font-medium text-gray-900 dark:text-white"
-                            >@ {{ $mergeTarget['username'] }}</span
-                        >
-                        <span class="text-xs text-gray-500 dark:text-gray-400">{{ $mergeTarget['created_at'] }}</span>
+                    <div class="mb-4 flex items-center gap-2">
+                        <x-filament::icon icon="heroicon-o-link" class="h-5 w-5 text-amber-400" />
+                        <h3 class="text-base font-semibold text-gray-900 dark:text-white">Conta existente encontrada</h3>
                     </div>
-                    @if ($mergeTarget['messages_count'] > 0)
-                        <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                            {{ number_format($mergeTarget['messages_count']) }} mensagens
+
+                    <p class="mb-4 text-sm text-gray-600 dark:text-gray-300">Já existe uma conta vinculada a esse provedor:</p>
+
+                    <div
+                        class="mb-4 rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700/60 dark:bg-gray-800/50"
+                    >
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm font-medium text-gray-900 dark:text-white"
+                                >@ {{ $mergeTarget['username'] }}</span
+                            >
+                            <span class="text-xs text-gray-500 dark:text-gray-400">{{ $mergeTarget['created_at'] }}</span>
                         </div>
-                    @endif
-                </div>
+                        @if ($mergeTarget['messages_count'] > 0)
+                            <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                                {{ number_format($mergeTarget['messages_count']) }} mensagens
+                            </div>
+                        @endif
+                    </div>
 
-                <p class="mb-5 text-xs text-gray-500 dark:text-gray-400">Ao unificar, sua conta atual será absorvida por essa conta e você será relogado automaticamente.</p>
+                    <p class="mb-5 text-xs text-gray-500 dark:text-gray-400">Ao unificar, sua conta atual será absorvida por essa conta e você será relogado automaticamente.</p>
 
-                <div class="flex gap-2">
-                    <x-filament::button wire:click="confirmMerge" color="warning" class="flex-1">
-                        Unificar
-                    </x-filament::button>
-                    <x-filament::button wire:click="cancelMerge" color="gray" class="flex-1">
-                        Cancelar
-                    </x-filament::button>
+                    <div class="flex gap-2">
+                        <x-filament::button wire:click="confirmMerge" color="warning" class="flex-1">
+                            Unificar
+                        </x-filament::button>
+                        <x-filament::button wire:click="cancelMerge" color="gray" class="flex-1">
+                            Cancelar
+                        </x-filament::button>
+                    </div>
                 </div>
             </div>
-        </div>
+        @endteleport
     @endif
 </div>