fix: use aria-posinset to give screen readers an orientation of where…

… they are in the dynamic list

Signed-off-by: Wolfgang <[email protected]>

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')" />

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 {