opensource/sim
3
0
Fork 0
mirror of https://github.com/simstudioai/sim.git synced 2026-09-24 15:45:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

improvement(sidebar): overlay lock indicator on leading icon (#4412)

Browse Source 
* improvement(sidebar): overlay lock indicator on leading icon

* fix(sidebar): correct lock indicator HTML nesting and a11y

* improvement(sidebar): swap lock indicator with more button on hover

* fix(sidebar): gate pointer-events on lock and more button visibility

* fix(sidebar): add role=img so lock indicator is announced by AT
This commit is contained in:
Waleed
2026-05-02 18:19:25 -07:00
committed by GitHub
parent af55bad491
commit 23d74ac2bd
2 changed files with 45 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
+27 -18
View File
@@ -552,26 +552,35 @@ export function FolderItem({
>
{folder.name}
</span>
{folder.locked && (
<Lock
className='pointer-events-none h-[12px] w-[12px] flex-shrink-0 text-[var(--text-icon)]'
aria-label='Folder is locked'
/>
)}
</div>
<button
type='button'
aria-label='Folder options'
onPointerDown={handleMorePointerDown}
onClick={handleMoreClick}
className={clsx(
'flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm opacity-0 transition-opacity',
!isAnyDragActive && 'group-hover:opacity-100',
isContextMenuOpen && 'opacity-100'
<div className='relative h-[18px] w-[18px] flex-shrink-0'>
{folder.locked && (
<span
role='img'
aria-label='Folder is locked'
className={clsx(
'pointer-events-none absolute inset-0 flex items-center justify-center transition-opacity',
!isAnyDragActive && 'group-hover:opacity-0',
isContextMenuOpen && 'opacity-0'
)}
>
<Lock className='h-[14px] w-[14px] text-[var(--text-icon)]' aria-hidden='true' />
</span>
)}
>
<MoreHorizontal className='h-[16px] w-[16px] text-[var(--text-icon)]' />
</button>
<button
type='button'
aria-label='Folder options'
onPointerDown={handleMorePointerDown}
onClick={handleMoreClick}
className={clsx(
'pointer-events-none absolute inset-0 flex items-center justify-center rounded-sm opacity-0 transition-opacity',
!isAnyDragActive && 'group-hover:pointer-events-auto group-hover:opacity-100',
isContextMenuOpen && 'pointer-events-auto opacity-100'
)}
>
<MoreHorizontal className='h-[16px] w-[16px] text-[var(--text-icon)]' />
</button>
</div>
</div>
)}
</div>
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
+18 -11
View File
@@ -468,31 +468,38 @@ export function WorkflowItem({
{workflow.name}
</div>
)}
{!isEditing && workflow.locked && (
<Lock
className='pointer-events-none h-[12px] w-[12px] flex-shrink-0 text-[var(--text-icon)]'
aria-label='Workflow is locked'
/>
)}
{!isEditing && <Avatars workflowId={workflow.id} />}
</div>
</div>
{!isEditing && (
<>
<div className='relative h-[18px] w-[18px] flex-shrink-0'>
{workflow.locked && (
<span
role='img'
aria-label='Workflow is locked'
className={clsx(
'pointer-events-none absolute inset-0 flex items-center justify-center transition-opacity',
!isAnyDragActive && 'group-hover:opacity-0',
isContextMenuOpen && 'opacity-0'
)}
>
<Lock className='h-[14px] w-[14px] text-[var(--text-icon)]' aria-hidden='true' />
</span>
)}
<button
type='button'
aria-label='Workflow options'
onPointerDown={handleMorePointerDown}
onClick={handleMoreClick}
className={clsx(
'flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm opacity-0 transition-opacity',
!isAnyDragActive && 'group-hover:opacity-100',
isContextMenuOpen && 'opacity-100'
'pointer-events-none absolute inset-0 flex items-center justify-center rounded-sm opacity-0 transition-opacity',
!isAnyDragActive && 'group-hover:pointer-events-auto group-hover:opacity-100',
isContextMenuOpen && 'pointer-events-auto opacity-100'
)}
>
<MoreHorizontal className='h-[16px] w-[16px] text-[var(--text-icon)]' />
</button>
</>
</div>
)}
</Link>