Fix keyboard navigation on search pages

Some of our search pages (such as the room and user search) has a list
header item. Due to how this works, it's not actually a part of the
list view keyboard navigation and a whole separate item. So in the tab
order, it comes *after* the list view which makes no sense. And it's
part of the list view, so users must expect it to be selectable with the
up and down arrows like other items.

This simple change makes it so it behaves as expected. The first actual
list item is selected by default, but it's possible to navigate to the
list header item via the up arrow key and then return to the list view
using the down arrow. The list header item is also removed from the tab
order and the whole page is much nicer to use now.
This commit is contained in:
Joshua Goins
2024-06-08 11:00:17 -04:00
parent ccf34cfe20
commit 364eda6400
3 changed files with 11 additions and 0 deletions

View File

@@ -89,6 +89,7 @@ SearchPage {
listHeaderDelegate: Delegates.RoundedItemDelegate {
onClicked: _private.openManualRoomDialog()
activeFocusOnTab: false // We handle moving to this item via up/down arrows, otherwise the tab order is wacky
text: i18n("Enter a room address")
icon.name: "compass"
icon.width: Kirigami.Units.gridUnit * 2

View File

@@ -174,5 +174,14 @@ Kirigami.ScrollablePage {
anchors.centerIn: parent
visible: searchField.text.length > 0 && listView.count === 0 && root.model.searching
}
Keys.onUpPressed: {
if (listView.currentIndex > 0) {
listView.decrementCurrentIndex();
} else {
listView.currentIndex = -1; // This is so the list view doesn't appear to have two selected items
listView.headerItem.forceActiveFocus(Qt.TabFocusReason);
}
}
}
}

View File

@@ -42,6 +42,7 @@ SearchPage {
listHeaderDelegate: Delegates.RoundedItemDelegate {
onClicked: _private.openManualUserDialog()
activeFocusOnTab: false // We handle moving to this item via up/down arrows, otherwise the tab order is wacky
text: i18n("Enter a user ID")
icon.name: "list-add-user"
icon.width: Kirigami.Units.gridUnit * 2