fix: add proper title to icons in item list and details view for bett…

…er accessibility

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

CHANGELOG.md

@@ -8,11 +8,12 @@ You can also check [on GitHub](https://github.com/nextcloud/news/releases), the
 ## [25.x.x]
 ### Changed
 - Items list style in compact mode to improve readability (and better match v24's style) (#2918)
-- add shortcuts 'enter' and 'esc' to open/close article details in compact mode
+- add shortcuts `enter` and `esc` to open/close article details in compact mode
 
 ### Fixed
 - scrollbar in sidebar subscribe area / move new folder button in same area than subscribe (#2932)
 - move shortcuts to list component to work also in compact mode
+- add proper title to icons in item list and details view for better accessibility
 
 # Releases
 ## [25.0.2] - 2024-11-25

src/components/feed-display/FeedItemDisplay.vue

@@ -11,10 +11,21 @@
 					</template>
 				</NcActionButton>
 			</NcActions>
-			<StarIcon :class="{'starred': item.starred }" tabindex="0" @click="toggleStarred(item)" />
-			<EyeIcon v-if="item.unread" tabindex="0" @click="toggleRead(item)" />
-			<EyeCheckIcon v-if="!item.unread" tabindex="0" @click="toggleRead(item)" />
-			<CloseIcon tabindex="0" @click="compactMode ? $emit('show-details') : clearSelected()" />
+			<StarIcon :class="{'starred': item.starred }"
+				:title="t('news', 'Toggle star article')"
+				tabindex="0"
+				@click="toggleStarred(item)" />
+			<EyeIcon v-if="item.unread"
+				:title="t('news', 'Mark read')"
+				tabindex="0"
+				@click="toggleRead(item)" />
+			<EyeCheckIcon v-if="!item.unread"
+				:title="t('news', 'Mark unread')"
+				tabindex="0"
+				@click="toggleRead(item)" />
+			<CloseIcon :title="t('news', 'Close details')"
+				tabindex="0"
+				@click="compactMode ? $emit('show-details') : clearSelected()" />
 			<button v-if="compactMode"
 				v-shortkey="{s: ['s'], l: ['l'], i: ['i']}"
 				class="hidden"

src/components/feed-display/FeedItemRow.vue

@@ -37,10 +37,23 @@
 		</div>
 
 		<div class="button-container" @click="$event.stopPropagation()">
-			<StarIcon :class="{'starred': item.starred }" @click="toggleStarred(item)" />
-			<EyeIcon v-if="item.unread && !item.keepUnread" @click="toggleKeepUnread(item)" />
-			<EyeCheckIcon v-if="!item.unread && !item.keepUnread" @click="toggleKeepUnread(item)" />
-			<EyeLockIcon v-if="item.keepUnread" class="keep-unread" @click="toggleKeepUnread(item)" />
+			<StarIcon :class="{'starred': item.starred }"
+				:title="t('news', 'Toggle star article')"
+				tabindex="0"
+				@click="toggleStarred(item)" />
+			<EyeIcon v-if="item.unread && !item.keepUnread"
+				:title="t('news', 'Keep article unread')"
+				tabindex="0"
+				@click="toggleKeepUnread(item)" />
+			<EyeCheckIcon v-if="!item.unread && !item.keepUnread"
+				:title="t('news', 'Toggle keep current article unread')"
+				tabindex="0"
+				@click="toggleKeepUnread(item)" />
+			<EyeLockIcon v-if="item.keepUnread"
+				:title="t('news', 'Remove keep article unread')"
+				tabindex="0"
+				class="keep-unread"
+				@click="toggleKeepUnread(item)" />
 			<NcActions>
 				<NcActionButton :title="t('news', 'Share within Instance')" @click="shareItem = item.id; showShareMenu = true">
 					{{ t('news', 'Share') }}