fix: focus article view when item selected via keyboard navigation

Signed-off-by: Wolfgang <github@linux-dude.de>

Author: wofferl

CHANGELOG.md

@@ -11,6 +11,7 @@ You can also check [on GitHub](https://github.com/nextcloud/news/releases), the
 ### Changed
 
 ### Fixed
+- Focus article view when item selected via keyboard navigation
 
 # Releases
 ## [28.5.1] - 2026-06-04

src/components/ContentTemplate.vue

@@ -36,6 +36,7 @@
 					:itemCount="items.length"
 					:itemIndex="currentIndex + 1"
 					:fetchKey="fetchKey"
+					:selectedByKeyboard="selectedByKeyboard"
 					@prevItem="previousItem"
 					@nextItem="nextItem"
 					@showDetails="showItem(false)" />
@@ -74,6 +75,7 @@ import {
 	type PropType,
 
 	computed,
+	nextTick,
 	onBeforeMount,
 	onBeforeUnmount,
 	onMounted,
@@ -147,6 +149,7 @@ const stopPageDownHotkey = ref(null)
 
 const contentElement = ref()
 const itemListElement = ref()
+const selectedByKeyboard = ref(false)
 
 const displayMode = computed(() => {
 	return store.getters.displaymode
@@ -232,8 +235,10 @@ function selectItem(item: FeedItem) {
 function previousItem() {
 	// Jump to the previous item
 	if (currentIndex.value > 0) {
+		selectedByKeyboard.value = true
 		const previousItem = props.items[currentIndex.value - 1]
 		selectItem(previousItem)
+		resetSelectedByKeyboard()
 	}
 }
 
@@ -244,11 +249,22 @@ function previousItem() {
 function nextItem() {
 	// Jump to the first item, if none was selected, otherwise jump to the next item
 	if (props.items.length > 0 && currentIndex.value < props.items.length - 1) {
+		selectedByKeyboard.value = true
 		const nextItem = props.items[currentIndex.value + 1]
 		selectItem(nextItem)
+		resetSelectedByKeyboard()
 	}
 }
 
+/**
+ * reset selected by keyboard flag
+ */
+function resetSelectedByKeyboard() {
+	nextTick(() => {
+		selectedByKeyboard.value = false
+	})
+}
+
 /**
  * enable PageUp/Down hotkeys with screen reader mode
  */

src/components/feed-display/FeedItemDisplay.vue

@@ -1,8 +1,10 @@
 <template>
 	<div
+		ref="displayElement"
 		class="feed-item-display"
 		:class="{ screenreader: screenReaderMode }"
 		:style="screenReaderItemHeight"
+		:tabindex="screenReaderMode ? undefined : '-1'"
 		v-bind="screenReaderMode ? { 'aria-setsize': itemCount, 'aria-posinset': itemIndex } : {}"
 		@focusin="selectItemOnFocus">
 		<ShareItem v-if="showShareMenu" :itemId="item.id" @close="closeShareMenu()" />
@@ -294,6 +296,15 @@ export default defineComponent({
 			type: String,
 			required: true,
 		},
+
+		/**
+		 * Whether the item was selected via keyboard navigation
+		 */
+		selectedByKeyboard: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
 	},
 
 	emits: {
@@ -425,13 +436,21 @@ export default defineComponent({
 	},
 
 	watch: {
-		// Focus title link in article to emulate structural heading navigation
-		// with screen readers
-		async isSelected(newSelected) {
-			if (newSelected && this.screenReaderMode) {
-				await this.$nextTick()
-				this.$refs.titleLink.focus()
-			}
+		// Focus title link in article to emulate structural heading navigation with
+		// screen readers or focus the article view when selected via keyboard navigation
+		isSelected: {
+			async handler(newSelected) {
+				if (newSelected) {
+					await this.$nextTick()
+					if (this.screenReaderMode) {
+						this.$refs.titleLink?.focus()
+					} else if (this.selectedByKeyboard) {
+						this.$refs.displayElement?.focus()
+					}
+				}
+			},
+
+			immediate: true,
 		},
 	},
 
@@ -689,6 +708,10 @@ export default defineComponent({
 		flex-direction: column;
 	}
 
+	.feed-item-display:focus {
+		outline: none;
+	}
+
 	.feed-item-display.screenreader {
 		overflow: hidden;
 	}

tests/javascript/unit/components/feed-display/FeedItemDisplay.spec.ts

@@ -102,23 +102,40 @@ describe('FeedItemDisplay.vue', () => {
 		expect(feed).toEqual(mockFeeds[0])
 	})
 
-	it('should focus on new selected item when using screen reader mode', async () => {
+	it('should focus title on new selected item when using screen reader mode', async () => {
 		const el = { focus: vi.fn() }
 		Object.defineProperty(wrapper.vm.$refs, 'titleLink', { value: el, configurable: true })
 
 		vi.spyOn(wrapper.vm, 'screenReaderMode', 'get').mockReturnValue(true)
-		wrapper.vm.$options.watch.isSelected.call(wrapper.vm, true)
+		wrapper.vm.$options.watch.isSelected.handler.call(wrapper.vm, true)
 		await nextTick()
 
 		expect(el.focus).toHaveBeenCalled()
 	})
 
-	it('should not focus on new selected item when not using screen reader mode', async () => {
+	it('should focus article pane when selected using keyboard navigation', async () => {
+		await wrapper.setProps({
+			selectedByKeyboard: true,
+		})
 		const el = { focus: vi.fn() }
-		Object.defineProperty(wrapper.vm.$refs, 'titleLink', { value: el, configurable: true })
+		Object.defineProperty(wrapper.vm.$refs, 'displayElement', { value: el, configurable: true })
+
+		vi.spyOn(wrapper.vm, 'screenReaderMode', 'get').mockReturnValue(false)
+		wrapper.vm.$options.watch.isSelected.handler.call(wrapper.vm, true)
+		await nextTick()
+
+		expect(el.focus).toHaveBeenCalled()
+	})
+
+	it('should not focus article pane when selected without keyboard navigation', async () => {
+		await wrapper.setProps({
+			selectedByKeyboard: false,
+		})
+		const el = { focus: vi.fn() }
+		Object.defineProperty(wrapper.vm.$refs, 'displayElement', { value: el, configurable: true })
 
 		vi.spyOn(wrapper.vm, 'screenReaderMode', 'get').mockReturnValue(false)
-		wrapper.vm.$options.watch.isSelected.call(wrapper.vm, true)
+		wrapper.vm.$options.watch.isSelected.handler.call(wrapper.vm, true)
 		await nextTick()
 
 		expect(el.focus).not.toHaveBeenCalled()