adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-15 03:32:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Gregor Vostrak
2025-09-30 16:45:48 +02:00
parent d2b636842a
commit 65e145b20f
2 changed files with 14 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
resources/js/Components/UserSettingsIcon.vue
View File

@@ -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>