fix(emcn): announce avatar status in the person's label and keep the name on email-only rows

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx

@@ -28,7 +28,7 @@ interface MemberRowProps {
 export function MemberRow({ name, email, image, status, roleControl, menu }: MemberRowProps) {
   return (
     <div className={ROW_CLASSES}>
-      <Avatar size='xs' name={name} src={image} aria-hidden />
+      <Avatar size='xs' name={name} src={image} />
       <OverflowText label={email} className='flex-1 text-[var(--text-body)] text-sm' />
       <span className={ROW_STATUS_CLASSES}>{status}</span>
       {roleControl}

packages/emcn/src/components/avatar/avatar.test.tsx

@@ -75,6 +75,16 @@ describe('Avatar', () => {
     expect(view.querySelector('[role="img"]')?.getAttribute('aria-label')).toBe('Ada Lovelace')
   })
 
+  it('announces a status as part of the person, not as a second image', async () => {
+    const view = await mount(<Avatar size='sm' name='Ada' status='online' />)
+    const images = view.querySelectorAll('[role="img"]')
+    expect(images).toHaveLength(1)
+    expect(images[0]?.getAttribute('aria-label')).toBe('Ada, online')
+    expect(view.querySelector('[data-slot="avatar-status"]')?.getAttribute('aria-hidden')).toBe(
+      'true'
+    )
+  })
+
   it('never labels an image with an empty name', async () => {
     const view = await mount(<Avatar size='xs' name='  ' />)
     expect(view.querySelector('[role="img"]')).toBeNull()

packages/emcn/src/components/avatar/avatar.tsx

@@ -94,9 +94,9 @@ type AvatarProps = AvatarBaseProps &
   (
     | {
         /**
-         * A person's name, used as the accessible label — pass `aria-hidden` where the
-         * name is already visible beside it. The avatar renders `src` with the name's
-         * initial as its fallback.
+         * A person's name, used as the accessible label (with any `status`) — pass
+         * `aria-hidden` where the name is already visible beside it. The avatar renders
+         * `src` with the name's initial as its fallback.
          */
         name: string
         /** Photo for the person; the initial shows while it loads, or if it fails. */
@@ -136,7 +136,9 @@ const Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, A
           <AvatarPrimitive.Root
             ref={ref}
             className={cn(avatarVariants({ size }), className)}
-            {...(label && !hidden ? { role: 'img', 'aria-label': label } : {})}
+            {...(label && !hidden
+              ? { role: 'img', 'aria-label': status ? `${label}, ${status}` : label }
+              : {})}
             {...props}
           >
             {name === undefined ? (
@@ -151,10 +153,8 @@ const Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, A
           {status && (
             <span
               data-slot='avatar-status'
-              role='img'
               className={cn(avatarStatusVariants({ status, size }))}
-              aria-label={`Status: ${status}`}
-              aria-hidden={hidden || undefined}
+              aria-hidden
             />
           )}
         </div>