fix(emcn): keep a composed avatar's status announced and export fallback variants

Author: waleedlatif1

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

@@ -85,6 +85,18 @@ describe('Avatar', () => {
     )
   })
 
+  it('announces the status dot itself on a composed avatar', async () => {
+    const view = await mount(
+      <Avatar status='away'>
+        <AvatarFallback>AL</AvatarFallback>
+      </Avatar>
+    )
+    const dot = view.querySelector('[data-slot="avatar-status"]')
+    expect(dot?.getAttribute('role')).toBe('img')
+    expect(dot?.getAttribute('aria-label')).toBe('Status: away')
+    expect(dot?.hasAttribute('aria-hidden')).toBe(false)
+  })
+
   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

@@ -130,13 +130,14 @@ const Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, A
   ({ className, size, status, name, src, children, ...props }, ref) => {
     const hidden = props['aria-hidden'] === true || props['aria-hidden'] === 'true'
     const label = name?.trim()
+    const labelled = Boolean(label) && !hidden
     return (
       <AvatarSizeContext.Provider value={size}>
         <div className='relative inline-flex'>
           <AvatarPrimitive.Root
             ref={ref}
             className={cn(avatarVariants({ size }), className)}
-            {...(label && !hidden
+            {...(labelled
               ? { role: 'img', 'aria-label': status ? `${label}, ${status}` : label }
               : {})}
             {...props}
@@ -150,11 +151,17 @@ const Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, A
               </>
             )}
           </AvatarPrimitive.Root>
+          {/**
+           * A named avatar carries its status in its own label, and a hidden one
+           * carries nothing; only a composed avatar announces the dot itself.
+           */}
           {status && (
             <span
               data-slot='avatar-status'
               className={cn(avatarStatusVariants({ status, size }))}
-              aria-hidden
+              {...(labelled || hidden
+                ? { 'aria-hidden': true }
+                : { role: 'img', 'aria-label': `Status: ${status}` })}
             />
           )}
         </div>
@@ -206,4 +213,11 @@ const AvatarFallback = React.forwardRef<
 })
 AvatarFallback.displayName = 'AvatarFallback'
 
-export { Avatar, AvatarImage, AvatarFallback, avatarVariants, avatarStatusVariants }
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  avatarVariants,
+  avatarStatusVariants,
+  avatarFallbackVariants,
+}