fix(ui): improve tooltip a11y and settings select layout

Make button and helper tooltips keyboard-focusable with ARIA roles,
close helper popups on outside pointer/focus leave, reserve select
chevron padding, rotate DNS chevron when open, and re-key the service
domain list after row changes.

resources/views/components/helper.blade.php

@@ -33,6 +33,21 @@
         this.pinned = false;
         this.open = false;
     },
+    closeWhenFocusLeaves() {
+        this.$nextTick(() => {
+            const activeElement = document.activeElement;
+            if (!this.$refs.trigger?.contains(activeElement) && !this.$refs.popup?.contains(activeElement)) {
+                this.close();
+            }
+        });
+    },
+    closeWhenPointerIsOutside(event) {
+        if (!this.open || this.$refs.trigger?.contains(event.target) || this.$refs.popup?.contains(event.target)) {
+            return;
+        }
+
+        this.close();
+    },
     position() {
         const trigger = this.$refs.trigger;
         const popup = this.$refs.popup;
@@ -56,7 +71,8 @@
 
         this.style = `top: ${top}px; left: ${left}px;`;
     }
-}" @click.outside="close" @keydown.window.escape="close" @resize.window="open && position()" @scroll.window="open && position()"
+}" @pointerdown.window="closeWhenPointerIsOutside($event)" @keydown.window.escape="close"
+    @resize.window="open && position()" @scroll.window="open && position()"
     {{ $attributes->merge(['class' => 'relative z-10 inline-block align-middle']) }}>
     {{-- button (not div) so label-for associations do not steal the click on mobile --}}
     <button type="button" x-ref="trigger"
@@ -64,7 +80,8 @@
             'info-helper relative z-10 inline-flex shrink-0 items-center justify-center border-0 bg-transparent p-0 leading-none',
             'size-3.5' => ! isset($trigger),
         ])
-        aria-label="{{ $label }}" @mouseenter="show(false)" @mouseleave="hide"
+        aria-label="{{ $label }}" :aria-describedby="open ? $id('helper-popup') : null"
+        @mouseenter="show(false)" @mouseleave="hide" @focus="show(false)" @blur="closeWhenFocusLeaves()"
         @click.prevent.stop="open && pinned ? close() : show(true)">
         @isset($trigger)
             {{ $trigger }}
@@ -77,7 +94,7 @@
         @endisset
     </button>
     <template x-teleport="body">
-        <div x-ref="popup" x-show="open" x-cloak
+        <div x-ref="popup" x-show="open" x-cloak :id="$id('helper-popup')" role="tooltip"
             x-transition:enter="transition ease-out duration-100"
             x-transition:enter-start="opacity-0 translate-y-0.5"
             x-transition:enter-end="opacity-100 translate-y-0"
@@ -86,7 +103,7 @@
             x-transition:leave-end="opacity-0"
             :style="style"
             class="info-helper-popup fixed z-[9999] w-max max-w-[min(20rem,calc(100vw-2rem))]"
-            @mouseenter="cancelHide()" @mouseleave="hide()" @click.stop>
+            @mouseenter="cancelHide()" @mouseleave="hide()" @focusout="closeWhenFocusLeaves()" @click.stop>
             <div class="px-3 py-2.5 text-[13px] leading-5">
                 {!! $helper !!}
             </div>