fix(ui): announce background activity on resource tabs

Author: waleedlatif1

packages/emcn/src/components/tab-strip/tab-strip.dom.test.tsx

@@ -131,12 +131,13 @@ describe('TabStrip interactions', () => {
     mount(renderStrip(items, vi.fn(), onClose))
 
     const slot = stripItem('two').querySelector('[data-row-actions]')
-    expect(slot?.querySelector('[aria-label="Background activity"]')).not.toBeNull()
+    expect(slot?.querySelector('[data-row-action-indicator]')).not.toBeNull()
+    expect(tabButton('two').getAttribute('aria-label')).toBe('Two, Background activity')
     const close = slot?.querySelector<HTMLButtonElement>('[aria-label="Close Two"]')
     expect(close).not.toBeNull()
-    expect(tabButton('two').querySelector('[aria-label="Background activity"]')).toBeNull()
-    expect(stripItem('one').querySelector('[aria-label="Background activity"]')).toBeNull()
-    expect(tabButton('pinned').querySelector('[aria-label="Background activity"]')).not.toBeNull()
+    expect(tabButton('two').querySelector('[data-row-actions]')).toBeNull()
+    expect(tabButton('one').hasAttribute('aria-label')).toBe(false)
+    expect(tabButton('pinned').getAttribute('aria-label')).toBe('Pinned, Background activity')
     act(() => close?.click())
     expect(onClose).toHaveBeenCalledWith('two')
   })
@@ -474,9 +475,10 @@ describe('TabStrip interactions', () => {
   it('shows background activity without marking that tab selected', () => {
     mount(renderStrip(tabs.map((tab) => ({ ...tab, attention: tab.id === 'two' }))))
 
-    expect(stripItem('two').querySelector('[aria-label="Background activity"]')).not.toBeNull()
+    expect(stripItem('two').querySelector('[data-row-action-indicator]')).not.toBeNull()
+    expect(tabButton('two').getAttribute('aria-label')).toBe('Two, Background activity')
     expect(tabButton('two').getAttribute('aria-selected')).toBe('false')
-    expect(tabButton('one').querySelector('[aria-label="Background activity"]')).toBeNull()
+    expect(tabButton('one').hasAttribute('aria-label')).toBe(false)
   })
 
   it('does not reserve phantom space after a pointer close', () => {

packages/emcn/src/components/tab-strip/tab-strip.tsx

@@ -370,7 +370,13 @@ const Tab = forwardRef<HTMLDivElement, TabProps>(function Tab(
       role='tab'
       aria-selected={Boolean(tab.active)}
       aria-keyshortcuts={closeable ? 'Delete' : undefined}
-      aria-label={tab.pinned ? tab.title : undefined}
+      aria-label={
+        tab.attention && !tab.active
+          ? `${tab.title}, Background activity`
+          : tab.pinned
+            ? tab.title
+            : undefined
+      }
       data-tab-strip-button={tab.id}
       tabIndex={focusable ? 0 : -1}
       className={cn(
@@ -411,7 +417,7 @@ const Tab = forwardRef<HTMLDivElement, TabProps>(function Tab(
             'size-1.5 shrink-0 rounded-full bg-[var(--brand-blue)]',
             tab.pinned && 'absolute right-1 bottom-1'
           )}
-          aria-label='Background activity'
+          aria-hidden='true'
         />
       )}
     </Button>
@@ -466,10 +472,7 @@ const Tab = forwardRef<HTMLDivElement, TabProps>(function Tab(
           open={tab.active}
           indicator={
             tab.attention && !tab.active ? (
-              <span
-                className='size-1.5 rounded-full bg-[var(--brand-blue)]'
-                aria-label='Background activity'
-              />
+              <span className='size-1.5 rounded-full bg-[var(--brand-blue)]' aria-hidden='true' />
             ) : undefined
           }
           className='-translate-y-1/2 absolute top-1/2 right-0.5 z-20'