diff --git a/CHANGELOG.md b/CHANGELOG.md index 8468f5de6..9a6619e58 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/components/ContentTemplate.vue b/src/components/ContentTemplate.vue index 8dcca9834..6656e8509 100644 --- a/src/components/ContentTemplate.vue +++ b/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 */ diff --git a/src/components/feed-display/FeedItemDisplay.vue b/src/components/feed-display/FeedItemDisplay.vue index 423b81f21..3259252ef 100644 --- a/src/components/feed-display/FeedItemDisplay.vue +++ b/src/components/feed-display/FeedItemDisplay.vue @@ -1,8 +1,10 @@