improve focus states and keyboard navigation for organization switcher and user settings dropdown

Author: Onatcer

resources/js/Components/OrganizationSwitcher.vue

@@ -40,10 +40,10 @@ const switchToTeam = (organization: Organization) => {
 
 <template>
     <DropdownMenu v-if="page.props.jetstream.hasTeamFeatures">
-        <DropdownMenuTrigger class="w-full text-left">
-            <div
-                data-testid="organization_switcher"
-                class="flex hover:bg-white/10 cursor-pointer transition pl-2 py-1 rounded w-full items-center justify-between">
+        <DropdownMenuTrigger
+            class="flex w-full text-left hover:bg-white/10 focus-visible:ring-2 focus-visible:ring-ring cursor-pointer transition pl-2 py-1 rounded w-full items-center justify-between"
+            as-child>
+            <button data-testid="organization_switcher">
                 <div class="flex flex-1 space-x-2 items-center w-[calc(100%-30px)]">
                     <div
                         class="rounded bg-blue-900 font-medium text-xs flex-shrink-0 text-white w-5 h-5 flex items-center justify-center">
@@ -58,7 +58,7 @@ const switchToTeam = (organization: Organization) => {
                         <ChevronDownIcon class="w-4 sm:w-full mt-[1px]"></ChevronDownIcon>
                     </div>
                 </div>
-            </div>
+            </button>
         </DropdownMenuTrigger>
 
         <DropdownMenuContent align="start">

resources/js/Components/UserSettingsIcon.vue

@@ -48,41 +48,16 @@ const openFeedback = () => {
 <template>
     <div class="relative">
         <DropdownMenu>
-            <DropdownMenuTrigger>
-                <template v-if="page.props.jetstream.managesProfilePhotos">
-                    <button
-                        data-testid="current_user_button"
-                        class="flex text-sm border-2 outline-none border-transparent rounded-full focus:border-gray-300 transition">
-                        <img
-                            class="h-8 w-8 rounded-full object-cover"
-                            :src="page.props.auth.user.profile_photo_url"
-                            :alt="page.props.auth.user.name" />
-                    </button>
-                </template>
-                <template v-else>
-                    <span class="inline-flex rounded-md">
-                        <button
-                            type="button"
-                            class="inline-flex outline-none items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:bg-gray-50 active:bg-gray-50 transition ease-in-out duration-150">
-                            {{ page.props.auth.user.name }}
-
-                            <svg
-                                class="ms-2 -me-0.5 h-4 w-4"
-                                xmlns="http://www.w3.org/2000/svg"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke-width="1.5"
-                                stroke="currentColor">
-                                <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
-                            </svg>
-                        </button>
-                    </span>
-                </template>
+            <DropdownMenuTrigger
+                class="flex text-sm border-2 outline-none border-transparent rounded-full focus-visible:ring-2 focus-visible:ring-ring transition"
+                as-child>
+                <button data-testid="current_user_button">
+                    <img
+                        class="h-8 w-8 rounded-full object-cover"
+                        :src="page.props.auth.user.profile_photo_url"
+                        :alt="page.props.auth.user.name" />
+                </button>
             </DropdownMenuTrigger>
-
             <DropdownMenuContent align="center" class="min-w-40">
                 <DropdownMenuLabel>Manage Account</DropdownMenuLabel>