From fcbdac7a2fb47dcf28984d4035249559e6231cfc Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Sun, 22 Mar 2026 02:51:02 +0100
Subject: [PATCH] fix: improve skeleton loading accessibility and consistency

- Add role="status" and aria-label to all skeleton containers
- Refactor ChannelSidebar from conditional siblings to ternary
  for consistent mutual exclusivity with MemberSidebar pattern
---
 packages/web/src/components/chat/MessageList.tsx      | 4 ++--
 packages/web/src/components/layout/AppLayout.tsx      | 2 +-
 packages/web/src/components/layout/ChannelSidebar.tsx | 8 +++-----
 packages/web/src/components/layout/MemberSidebar.tsx  | 2 +-
 4 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/web/src/components/chat/MessageList.tsx b/packages/web/src/components/chat/MessageList.tsx
index b1b1d1f8..4cb263b6 100644
--- a/packages/web/src/components/chat/MessageList.tsx
+++ b/packages/web/src/components/chat/MessageList.tsx
@@ -260,7 +260,7 @@ export function MessageList({ channelId, jumpToMessageId, onJumpComplete }: Mess
 
   if (isLoading && messages.length === 0) {
     return (
-      <div className="flex-1 flex flex-col justify-end px-4 pb-6">
+      <div className="flex-1 flex flex-col justify-end px-4 pb-6" role="status" aria-label="Loading messages">
         {Array.from({ length: 7 }, (_, i) => (
           <div key={i} className="flex gap-3 mb-5" style={{ animationDelay: `${i * 0.15}s` }}>
             <div className="skeleton skeleton-circle w-10 h-10 flex-shrink-0" style={{ animationDelay: `${i * 0.15}s` }} />
@@ -285,7 +285,7 @@ export function MessageList({ channelId, jumpToMessageId, onJumpComplete }: Mess
         onScroll={handleScroll}
       >
         {isLoadingMore && (
-          <div className="px-4 pt-4">
+          <div className="px-4 pt-4" role="status" aria-label="Loading older messages">
             {Array.from({ length: 3 }, (_, i) => (
               <div key={i} className="flex gap-3 mb-5" style={{ animationDelay: `${i * 0.15}s` }}>
                 <div className="skeleton skeleton-circle w-10 h-10 flex-shrink-0" style={{ animationDelay: `${i * 0.15}s` }} />
diff --git a/packages/web/src/components/layout/AppLayout.tsx b/packages/web/src/components/layout/AppLayout.tsx
index a9ed9f77..7c1a2e6a 100644
--- a/packages/web/src/components/layout/AppLayout.tsx
+++ b/packages/web/src/components/layout/AppLayout.tsx
@@ -264,7 +264,7 @@ export function AppLayout() {
 
   if (isLoading || !user) {
     return (
-      <div className="h-full flex bg-surface-base">
+      <div className="h-full flex bg-surface-base" role="status" aria-label="Loading Backspace">
         {/* Space strip */}
         <div className="w-[72px] hidden md:flex flex-col items-center gap-3 pt-4 bg-surface-base flex-shrink-0">
           {Array.from({ length: 5 }, (_, i) => (
diff --git a/packages/web/src/components/layout/ChannelSidebar.tsx b/packages/web/src/components/layout/ChannelSidebar.tsx
index 09e1b6ce..c86029b1 100644
--- a/packages/web/src/components/layout/ChannelSidebar.tsx
+++ b/packages/web/src/components/layout/ChannelSidebar.tsx
@@ -626,9 +626,8 @@ export function ChannelSidebar() {
 
       {/* Channels — dynamic category layout */}
       <div ref={scrollContainerRef} className="flex-1 overflow-y-auto pt-3 px-2 space-y-[2px] no-scrollbar" style={{ paddingBottom: floatingPanelHeight + 24 }} onDrop={containerHandlers.onDrop} onDragOver={containerHandlers.onDragOver} onContextMenu={handleSidebarContextMenu}>
-        {/* Skeleton loading state */}
-        {isLoadingSpace && (
-          <div className="px-2 pt-3">
+        {isLoadingSpace ? (
+          <div className="px-2 pt-3" role="status" aria-label="Loading channels">
             {/* Category group 1 */}
             <div className="skeleton skeleton-bar h-2 w-[45%] ml-2 mb-3" />
             {Array.from({ length: 3 }, (_, i) => (
@@ -646,9 +645,8 @@ export function ChannelSidebar() {
               </div>
             ))}
           </div>
-        )}
+        ) : (<>
         {/* Uncategorized channels */}
-        {!isLoadingSpace && (<>
         {uncategorizedChannels.length > 0 && (
           <div className="mb-[19px]">
             {canManageChannels && sortedCategories.length === 0 && (
diff --git a/packages/web/src/components/layout/MemberSidebar.tsx b/packages/web/src/components/layout/MemberSidebar.tsx
index cdf77f22..d58a82fc 100644
--- a/packages/web/src/components/layout/MemberSidebar.tsx
+++ b/packages/web/src/components/layout/MemberSidebar.tsx
@@ -152,7 +152,7 @@ export function MemberSidebar() {
   return (
     <div className="w-60 bg-surface-members flex-shrink-0 overflow-y-auto select-none no-scrollbar hidden md:block border-l border-border-hard">
       {isLoadingSpace ? (
-        <div className="px-3 pt-4">
+        <div className="px-3 pt-4" role="status" aria-label="Loading members">
           {/* Role group 1 */}
           <div className="skeleton skeleton-bar h-2 w-[40%] mb-3" style={{ animationDelay: '0s' }} />
           {Array.from({ length: 2 }, (_, i) => (