Accessibility fixes.

app/components/DevLoginPanel.vue

@@ -4,7 +4,9 @@
     <div class="dev-actions">
       <div class="dev-buttons">
         <a href="/api/dev/test-login" class="dev-button">Admin</a>
-        <button class="dev-button dev-logout" @click="handleLogout">Log out</button>
+        <button class="dev-button dev-logout" @click="handleLogout">
+          Log out
+        </button>
       </div>
       <USelectMenu
         v-model="selectedEmail"
@@ -22,22 +24,24 @@
 </template>
 
 <script setup>
-const selectedEmail = ref(null)
-const { logout } = useAuth()
+const selectedEmail = ref(null);
+const { logout } = useAuth();
 
-const { data: members } = await useFetch('/api/dev/members', {
-  default: () => []
-})
+const { data: members } = await useFetch("/api/dev/members", {
+  default: () => [],
+});
 
 const loginAsEmail = (email) => {
   if (email) {
-    navigateTo(`/api/dev/member-login?email=${encodeURIComponent(email)}`, { external: true })
+    navigateTo(`/api/dev/member-login?email=${encodeURIComponent(email)}`, {
+      external: true,
+    });
   }
-}
+};
 
 const handleLogout = async () => {
-  await logout()
-}
+  await logout();
+};
 </script>
 
 <style scoped>
@@ -86,8 +90,16 @@ const handleLogout = async () => {
   color: var(--bg);
 }
 
-
 .dev-select {
   width: 100%;
 }
+
+:deep([data-slot="base"]) {
+  background: var(--bg);
+  border-color: var(--border);
+}
+
+:deep([data-slot="placeholder"]) {
+  color: var(--text-dim);
+}
 </style>