🐛 FIX: accessibility issue

Author: mehmoodak

client/layout/sidebar/expandable-heading.tsx

@@ -9,6 +9,7 @@ import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 interface ExpandableSidebarHeadingProps {
 	title: TranslateResult;
 	count?: number;
+	countLabel?: string;
 	compactCount?: boolean;
 	onClick?: ( event?: MouseEvent< HTMLAnchorElement > ) => void;
 	customIcon?: ReactNode;
@@ -30,6 +31,7 @@ interface ExpandableSidebarHeadingProps {
 const ExpandableSidebarHeading = ( {
 	title,
 	count,
+	countLabel,
 	compactCount,
 	icon,
 	customIcon,
@@ -68,7 +70,9 @@ const ExpandableSidebarHeading = ( {
 				{ renderedTitle }
 				<span className="sidebar__actions-and-count">
 					{ moreMenuActions }
-					{ count && count > 0 ? <Count count={ count } compact={ compactCount } /> : null }
+					{ count && count > 0 ? (
+						<Count count={ count } compact={ compactCount } aria-label={ countLabel } />
+					) : null }
 				</span>
 				{ inlineText && <span className="sidebar__inline-text">{ inlineText }</span> }
 			</span>

client/layout/sidebar/expandable.tsx

@@ -26,6 +26,7 @@ interface ExpandableSidebarMenuProps {
 	className?: string;
 	title: TranslateResult;
 	count?: number;
+	countLabel?: string;
 	compactCount?: boolean;
 	onClick?: ( event?: MouseEvent< HTMLAnchorElement > ) => void;
 	icon?: string | null;
@@ -71,6 +72,7 @@ export const ExpandableSidebarMenu = ( menuProps: ExpandableSidebarMenuProps ) =
 		className,
 		title,
 		count,
+		countLabel,
 		compactCount,
 		onClick,
 		icon,
@@ -142,6 +144,7 @@ export const ExpandableSidebarMenu = ( menuProps: ExpandableSidebarMenuProps ) =
 				<ExpandableSidebarHeading
 					title={ title }
 					count={ count }
+					countLabel={ countLabel }
 					compactCount={ compactCount }
 					onClick={
 						typeof onClick === 'function'

client/reader/list-manage/types.d.ts

@@ -20,7 +20,7 @@ export type ReaderList = {
 	is_public?: boolean;
 	is_immutable?: boolean;
 	feeds: {
-		id: number;
+		feed_id: number;
 		unseen_count: number;
 	}[];
 };

client/reader/sidebar/reader-sidebar-lists/index.tsx

@@ -38,13 +38,19 @@ const ReaderSidebarLists = ( {
 				( list.feeds?.reduce( ( total, feed ) => total + ( feed.unseen_count ?? 0 ), 0 ) ?? 0 ),
 			0 // Initial value of the list unseen count accumulator.
 		) || 0;
+	const unseenCountLabel = translate( '%(count)d unseen post', '%(count)d unseen posts', {
+		count: totalUnseenCount,
+		args: { count: totalUnseenCount },
+		comment: '%(count)d is the number of unseen posts.',
+	} );
 
 	return (
 		<li>
 			<ExpandableSidebarMenu
 				expanded={ isOpen ?? false }
 				title={ translate( 'Lists' ) }
 				count={ isSeenEnabled ? totalUnseenCount : 0 }
+				countLabel={ unseenCountLabel as string }
 				compactCount
 				onClick={ onClick }
 				disableFlyout

client/reader/sidebar/reader-sidebar-lists/list-item.tsx

@@ -71,6 +71,11 @@ const ReaderSidebarListsListItem = ( {
 	const displayTitle = isOwnedByCurrentUser ? list.title : `${ list.title } (${ list.owner })`;
 	const isSeenEnabled = isAutomattician;
 	const unseenCount = list.feeds?.reduce( ( t, feed ) => t + ( feed.unseen_count ?? 0 ), 0 ) ?? 0;
+	const unseenCountLabel = translate( '%(count)d unseen post', '%(count)d unseen posts', {
+		count: unseenCount,
+		args: { count: unseenCount },
+		comment: '%(count)d is the number of unseen posts.',
+	} );
 
 	return (
 		<MenuItem
@@ -94,7 +99,9 @@ const ReaderSidebarListsListItem = ( {
 					<div className="sidebar__menu-item-title" title={ displayTitle }>
 						{ displayTitle }
 					</div>
-					{ isSeenEnabled && unseenCount > 0 && <Count count={ unseenCount } compact /> }
+					{ isSeenEnabled && unseenCount > 0 && (
+						<Count count={ unseenCount } compact aria-label={ unseenCountLabel as string } />
+					) }
 				</AutoDirection>
 			</MenuItemLink>
 		</MenuItem>

packages/api-core/src/read-lists/types.ts

@@ -8,7 +8,7 @@ export interface ReadList {
 	is_public: boolean;
 	is_immutable?: boolean;
 	feeds: {
-		id: number;
+		feed_id: number;
 		unseen_count: number;
 	}[];
 }