From a5a97e41c749552df1dc7d5097304f83604a68d9 Mon Sep 17 00:00:00 2001
From: Wolfgang <github@linux-dude.de>
Date: Thu, 28 Nov 2024 21:51:39 +0100
Subject: [PATCH] fix: use aria-posinset to give screen readers an orientation
 of where they are in the dynamic list

Signed-off-by: Wolfgang <github@linux-dude.de>
---
 src/components/feed-display/FeedItemDisplayList.vue |  4 +++-
 src/components/feed-display/FeedItemRow.vue         | 10 ++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/feed-display/FeedItemDisplayList.vue b/src/components/feed-display/FeedItemDisplayList.vue
index cf3852961..5ab797119 100644
--- a/src/components/feed-display/FeedItemDisplayList.vue
+++ b/src/components/feed-display/FeedItemDisplayList.vue
@@ -56,9 +56,11 @@
 				:fetch-key="fetchKey"
 				@load-more="fetchMore()">
 				<template v-if="items && items.length > 0">
-					<template v-for="item in filteredItemcache">
+					<template v-for="(item, index) in filteredItemcache">
 						<FeedItemRow :key="item.id"
 							:ref="'feedItemRow' + item.id"
+							:item-count="filteredItemcache.length"
+							:item-index="index + 1"
 							:item="item"
 							:class="{ 'active': selectedItem && selectedItem.id === item.id }"
 							@show-details="$emit('show-details')" />
diff --git a/src/components/feed-display/FeedItemRow.vue b/src/components/feed-display/FeedItemRow.vue
index 337023cc4..1b4815f1c 100644
--- a/src/components/feed-display/FeedItemRow.vue
+++ b/src/components/feed-display/FeedItemRow.vue
@@ -2,6 +2,8 @@
 	<li class="feed-item-row"
 		:class="{ 'compact': compactMode }"
 		:aria-label="item.title"
+		:aria-setsize="itemCount"
+		:aria-posinset="itemIndex"
 		@click="select()">
 		<ShareItem v-if="showShareMenu" :item-id="shareItem" @close="closeShareMenu()" />
 		<div class="link-container">
@@ -111,6 +113,14 @@ export default Vue.extend({
 			type: Object,
 			required: true,
 		},
+		itemCount: {
+			type: Number,
+			required: true,
+		},
+		itemIndex: {
+			type: Number,
+			required: true,
+		},
 	},
 	data: () => {
 		return {