chore: improve unread badge content a11y

apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx

@@ -161,8 +161,14 @@ function SideBarItemTemplateWithData({
 	const badges = (
 		<Margins inlineStart={8}>
 			{showBadge && isUnread && (
-				<Badge role='status' {...({ style: { display: 'inline-flex', flexShrink: 0 } } as any)} variant={variant} title={badgeTitle}>
-					{unread + tunread?.length}
+				<Badge
+					role='status'
+					{...({ style: { display: 'inline-flex', flexShrink: 0 } } as any)}
+					variant={variant}
+					title={badgeTitle}
+					aria-label={`${badgeTitle} ${t('from')} ${title}`}
+				>
+					<span aria-hidden>{unread + tunread?.length}</span>
 				</Badge>
 			)}
 			{isOmnichannelRoom(room) && <OmnichannelBadges room={room} />}
@@ -181,7 +187,7 @@ function SideBarItemTemplateWithData({
 			onClick={(): void => {
 				!selected && sidebar.toggle();
 			}}
-			aria-label={title}
+			aria-label={showBadge && isUnread ? `${badgeTitle} ${t('from')} ${title}` : title}
 			title={title}
 			time={lastMessage?.ts}
 			subtitle={subtitle}

apps/meteor/client/sidebarv2/RoomList/SidebarItemTemplateWithData.tsx

@@ -123,8 +123,8 @@ const SidebarItemTemplateWithData = ({
 	const badges = (
 		<>
 			{showUnread && (
-				<SidebarV2ItemBadge variant={unreadVariant} title={unreadTitle} role='status'>
-					{unreadCount.total}
+				<SidebarV2ItemBadge variant={unreadVariant} title={unreadTitle} role='status' aria-label={`${unreadTitle} ${t('from')} ${title}`}>
+					<span aria-hidden>{unreadCount.total}</span>
 				</SidebarV2ItemBadge>
 			)}
 			{isOmnichannelRoom(room) && <OmnichannelBadges room={room} />}
@@ -143,7 +143,7 @@ const SidebarItemTemplateWithData = ({
 			onClick={(): void => {
 				!selected && sidebar.toggle();
 			}}
-			aria-label={title}
+			aria-label={showUnread ? `${unreadTitle} ${t('from')} ${title}` : title}
 			title={title}
 			time={lastMessage?.ts}
 			subtitle={subtitle}

apps/meteor/client/views/room/Sidepanel/hooks/useItemData.tsx

@@ -30,7 +30,7 @@ export const useItemData = (
 			<>
 				{showUnread && (
 					<SidebarItemBadge variant={unreadVariant} title={unreadTitle} role='status'>
-						{unreadCount.total}
+						<span aria-hidden>{unreadCount.total}</span>
 					</SidebarItemBadge>
 				)}
 			</>

apps/meteor/tests/e2e/mark-unread.spec.ts

@@ -26,15 +26,15 @@ test.describe.serial('mark-unread', () => {
 		test('should not mark empty room as unread', async () => {
 			await poHomeChannel.sidenav.selectMarkAsUnread(targetChannel);
 
-			await expect(poHomeChannel.sidenav.getRoomBadge(targetChannel)).not.toBeVisible();
+			await expect(poHomeChannel.sidenav.getSidebarItemBadge(targetChannel)).not.toBeVisible();
 		});
 
 		test('should mark a populated room as unread', async () => {
 			await poHomeChannel.sidenav.openChat(targetChannel);
 			await poHomeChannel.content.sendMessage('this is a message for reply');
 			await poHomeChannel.sidenav.selectMarkAsUnread(targetChannel);
 
-			await expect(poHomeChannel.sidenav.getRoomBadge(targetChannel)).toBeVisible();
+			await expect(poHomeChannel.sidenav.getSidebarItemBadge(targetChannel)).toBeVisible();
 		});
 
 		test('should mark a populated room as unread - search', async () => {
@@ -43,29 +43,27 @@ test.describe.serial('mark-unread', () => {
 			await poHomeChannel.sidenav.selectMarkAsUnread(targetChannel);
 			await poHomeChannel.sidenav.searchRoom(targetChannel);
 
-			await expect(poHomeChannel.sidenav.getSearchChannelBadge(targetChannel)).toBeVisible();
+			await expect(poHomeChannel.sidenav.getSearchItemBadge(targetChannel)).toBeVisible();
 		});
 	});
 
 	test.describe('Mark Unread - Message Action', () => {
 		let poHomeChannelUser2: HomeChannel;
 
-		test('should mark a populated room as unread', async ({ browser }) => {
+		test('should mark a populated room as unread - message', async ({ browser }) => {
 			const { page: user2Page } = await createAuxContext(browser, Users.user2);
 			poHomeChannelUser2 = new HomeChannel(user2Page);
 
 			await poHomeChannelUser2.sidenav.openChat(targetChannel);
 			await poHomeChannelUser2.content.sendMessage('this is a message for reply');
 			await user2Page.close();
 
-			await poHomeChannel.sidenav.openChat(targetChannel);
-
-			// wait for the sidebar item to be read
-			await poHomeChannel.sidenav.getSidebarItemByName(targetChannel, true).waitFor();
-			await poHomeChannel.content.openLastMessageMenu();
-			await poHomeChannel.markUnread.click();
-
-			await expect(poHomeChannel.sidenav.getRoomBadge(targetChannel)).toBeVisible();
+			await expect(async () => {
+				await poHomeChannel.sidenav.openChat(targetChannel);
+				await poHomeChannel.content.openLastMessageMenu();
+				await poHomeChannel.markUnread.click();
+				await expect(poHomeChannel.sidenav.getSidebarItemBadge(targetChannel)).toBeVisible();
+			}).toPass();
 		});
 	});
 });

apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts

@@ -68,11 +68,20 @@ export class HomeSidenav {
 		return this.page.locator('role=menuitemcheckbox[name="Profile"]');
 	}
 
-	// TODO: refactor getSidebarItemByName to not use data-qa
-	getSidebarItemByName(name: string, isRead?: boolean): Locator {
-		return this.page.locator(
-			['[data-qa="sidebar-item"]', `[aria-label="${name}"]`, isRead && '[data-unread="false"]'].filter(Boolean).join(''),
-		);
+	getSidebarItemByName(name: string): Locator {
+		return this.page.getByRole('link', { name, exact: true });
+	}
+
+	getSearchItemByName(name: string): Locator {
+		return this.page.getByRole('search').getByRole('listbox').getByRole('link', { name, exact: true });
+	}
+
+	getSidebarItemBadge(name: string): Locator {
+		return this.getSidebarItemByName(`1 unread message from ${name}`).getByRole('status');
+	}
+
+	getSearchItemBadge(name: string): Locator {
+		return this.getSearchItemByName(`1 unread message from ${name}`).getByRole('status');
 	}
 
 	async selectMarkAsUnread(name: string) {
@@ -108,10 +117,6 @@ export class HomeSidenav {
 		await this.page.locator('role=navigation >> role=button[name=Search]').click();
 	}
 
-	getSearchRoomByName(name: string): Locator {
-		return this.page.locator(`role=search >> role=listbox >> role=link >> text="${name}"`);
-	}
-
 	async searchRoom(name: string): Promise<void> {
 		await this.openSearch();
 		await this.page.locator('role=search >> role=searchbox').fill(name);
@@ -129,7 +134,7 @@ export class HomeSidenav {
 
 	async openChat(name: string): Promise<void> {
 		await this.searchRoom(name);
-		await this.getSearchRoomByName(name).click();
+		await this.getSearchItemByName(name).click();
 		await this.waitForChannel();
 	}
 
@@ -180,12 +185,4 @@ export class HomeSidenav {
 		await this.checkboxEncryption.click();
 		await this.btnCreate.click();
 	}
-
-	getRoomBadge(roomName: string): Locator {
-		return this.getSidebarItemByName(roomName).getByRole('status', { exact: true });
-	}
-
-	getSearchChannelBadge(name: string): Locator {
-		return this.page.locator(`[data-qa="sidebar-item"][aria-label="${name}"]`).first().getByRole('status', { exact: true });
-	}
 }

apps/meteor/tests/e2e/team-management.spec.ts

@@ -383,7 +383,7 @@ test.describe.serial('teams-management', () => {
 
 		await poHomeTeam.tabs.room.confirmDeleteTeam();
 		await poHomeTeam.sidenav.searchRoom(targetTeamNonPrivate);
-		await expect(poHomeTeam.sidenav.getSearchRoomByName(targetTeamNonPrivate)).not.toBeVisible();
+		await expect(poHomeTeam.sidenav.getSearchItemByName(targetTeamNonPrivate)).not.toBeVisible();
 	});
 
 	test('should user1 leave from targetTeam', async ({ browser }) => {

packages/i18n/src/locales/en.i18n.json

@@ -6655,5 +6655,6 @@
   "Sidepanel_navigation_description": "Display channels and/or discussions associated with teams by default. This allows team owners to customize communication methods to best meet their team’s needs. This is currently in feature preview and will be a premium capability once fully released.",
   "Show_channels_description": "Show team channels in second sidebar",
   "Show_discussions_description": "Show team discussions in second sidebar",
-  "Recent": "Recent"
+  "Recent": "Recent",
+  "for": "for"
 }