fix(downloads): make active count accessible

libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.html

@@ -141,7 +141,10 @@
                         'WORKSPACE.SHELL.RAIL_DOWNLOADS' | translate
                     "
                     [attr.aria-label]="
-                        'WORKSPACE.SHELL.OPEN_DOWNLOADS' | translate
+                        ('WORKSPACE.SHELL.OPEN_DOWNLOADS' | translate) +
+                        (hasActiveDownloads()
+                            ? ' (' + activeDownloadsCount() + ')'
+                            : '')
                     "
                 >
                     <mat-icon>download</mat-icon>

libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.scss

@@ -227,8 +227,8 @@
     padding: 0 5px;
     border: 1px solid var(--mat-sys-surface-container-low);
     border-radius: 999px;
-    color: var(--app-selection-on-color, var(--mat-sys-on-primary));
-    background: var(--app-selection-color, var(--mat-sys-primary));
+    color: var(--mat-sys-on-primary);
+    background: var(--mat-sys-primary);
     box-shadow: 0 2px 8px var(--app-selection-glow);
     font-size: 0.6875rem;
     font-weight: 700;

libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.spec.ts

@@ -1,3 +1,5 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
 import {
     Component,
     input,
@@ -200,4 +202,40 @@ describe('WorkspaceShellHeaderComponent', () => {
             )
         ).toBeNull();
     });
+
+    it.each([
+        [0, 'WORKSPACE.SHELL.OPEN_DOWNLOADS'],
+        [1, 'WORKSPACE.SHELL.OPEN_DOWNLOADS (1)'],
+        [3, 'WORKSPACE.SHELL.OPEN_DOWNLOADS (3)'],
+    ])(
+        'exposes %i active downloads in the downloads button accessible name',
+        (activeDownloadsCount, expectedLabel) => {
+            fixture.componentRef.setInput('isElectron', true);
+            fixture.componentRef.setInput(
+                'activeDownloadsCount',
+                activeDownloadsCount
+            );
+            fixture.detectChanges();
+
+            const button: HTMLButtonElement =
+                fixture.nativeElement.querySelector(
+                    '.download-btn-wrap button'
+                );
+
+            expect(button.getAttribute('aria-label')).toBe(expectedLabel);
+        }
+    );
+
+    it('uses the paired Material primary tokens for the download badge', () => {
+        const styleSource = readFileSync(
+            join(__dirname, 'workspace-shell-header.component.scss'),
+            'utf8'
+        );
+        const badgeStyles = styleSource.match(
+            /\.download-count-badge\s*\{([^}]*)\}/
+        )?.[1];
+
+        expect(badgeStyles).toContain('color: var(--mat-sys-on-primary);');
+        expect(badgeStyles).toContain('background: var(--mat-sys-primary);');
+    });
 });