fix(ui): announce sidebar logo once to screen readers

Both sidebar logos stay in the DOM and crossfade via CSS opacity, so
screen readers announced the shared alt="ShellHub" twice. Mark whichever
logo is visually hidden as aria-hidden so only the active one is exposed.

Fixes: shellhub-io/team#135

Author: Luann Curioso

ui/apps/console/src/components/layout/SidebarShell.tsx

@@ -157,11 +157,13 @@ export default function SidebarShell({
           <img
             src="/logo.svg"
             alt="ShellHub"
+            aria-hidden={!expanded}
             className={`h-8 transition-opacity duration-200 ${expanded ? "opacity-100" : "opacity-0 absolute"}`}
           />
           <img
             src="/cloud-icon.svg"
             alt="ShellHub"
+            aria-hidden={expanded}
             className={`h-6 w-6 transition-opacity duration-200 ${expanded ? "opacity-0 absolute" : "opacity-100"}`}
           />
         </NavLink>

ui/apps/console/src/components/layout/__tests__/SidebarShell.test.tsx

@@ -46,4 +46,18 @@ describe("SidebarShell", () => {
     const button = screen.getByRole("button", { name: "Close sidebar" });
     expect(button).toHaveAttribute("title", "Close sidebar");
   });
+
+  it("exposes only the expanded logo to assistive tech when expanded", () => {
+    renderSidebarShell({ expanded: true });
+
+    // Both logos stay in the DOM (CSS opacity crossfade); aria-hidden keeps the
+    // collapsed icon out of the accessibility tree so "ShellHub" is announced once.
+    expect(screen.getAllByRole("img", { name: "ShellHub" })).toHaveLength(1);
+  });
+
+  it("exposes only the collapsed logo to assistive tech when collapsed", () => {
+    renderSidebarShell({ expanded: false });
+
+    expect(screen.getAllByRole("img", { name: "ShellHub" })).toHaveLength(1);
+  });
 });