Android: How to make ListView accessible for TalkBack



  • Hello.
    I am working on an Android app for the visually impaired, which is why I test the app continuously with TalkBack. The screenshot shows a page on which a ListView lists categories (for places) that the user can edit and delete. So far everything works.

    If the user marks a category in the ListView (gets focus from TalkBack) and wipes with a finger to the side to go through the list to have the categories read to him one after the other, then the focus of TalkBack leaves the visible area of the ListView. On the screenshot you can see that the blue focus of TalkBack leaves the bottom of the screen.

    Is there a possibility to scroll the ListView in such a way that the focus of TalkBack remains in the visible area? I tried the Accessible.ScrollDownAction signal, but the signal doesn't seem to be emitted.

    The following is a section of the source code that shows the ListView. The ListModel is filled with data by a JavaScript function.

    Thank you very much for your efforts.

    Item {
        id: item
        anchors.fill: parent
        ListView {
            id: listView
            anchors.fill: parent
            anchors.margins: defaultMargin
            ScrollIndicator.vertical: ScrollIndicator {
                parent: item
                width: defaultMargin
                anchors.top: parent.top
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                Accessible.ignored: true
            }
            model: ListModel {
                id: listModel
            }
            delegate: ItemDelegate {
                width: listView.width
                height: menuItemHeight
                leftPadding: defaultMargin
                rightPadding: defaultMargin
                spacing: defaultMargin
                icon.source: Qt.resolvedUrl(model.icon)
                icon.width: iconSize
                icon.height: iconSize
                icon.color: Material.foreground
                text: model.name
                Menu {
                    id: menuOptions
                    width: root.width
                    y: parent.height
                    MenuItem {
                        height: menuItemHeight
                        leftPadding: defaultMargin
                        rightPadding: defaultMargin
                        spacing: defaultMargin
                        text: qsTr("Bearbeiten")
                        icon.source: Qt.resolvedUrl("qrc:/icons/materialicons/editor/ic_mode_edit_48px.svg")
                        icon.color: Material.foreground
                        icon.width: iconSize
                        icon.height: iconSize
                        Accessible.name: qsTr("%1 bearbeiten").arg(model.name)
                        Accessible.description: qsTr("%1 bearbeiten").arg(model.name)
                        Accessible.role: Accessible.MenuItem
                        onClicked: {
                            var params = {
                                pageTitle: qsTr("Kategorie bearbeiten"),
                                categoryId: model.id,
                                categoryName: model.name,
                                categoryDescription: model.description,
                                categoryIcon: model.icon
                            }
                            switchToPage("qrc:/qml/qml/DialogEditCategory.qml", params)
                        }
                    }
                    MenuItem {
                        height: menuItemHeight
                        leftPadding: defaultMargin
                        rightPadding: defaultMargin
                        spacing: defaultMargin
                        text: qsTr("Löschen")
                        icon.source: Qt.resolvedUrl("qrc:/icons/materialicons/content/ic_remove_48px.svg")
                        icon.color: Material.foreground
                        icon.width: iconSize
                        icon.height: iconSize
                        Accessible.name: qsTr("%1 löschen").arg(model.name)
                        Accessible.description: qsTr("%1 löschen").arg(model.name)
                        Accessible.role: Accessible.MenuItem
                        onClicked: {
                            var params = {
                                color: Material.theme == Material.Light ? Material.color(Material.Red, Material.Shade100) : Material.color(Material.Red, Material.Shade900),
                                pageTitle: qsTr("Kategorie löschen"),
                                text: qsTr("Möchtest du die Kategorie '%1' wirklich löschen?").arg(model.name),
                                categoryId: model.id
                            }
                            switchToPage("qrc:/qml/qml/DialogDeleteCategory.qml", params)
                        }
                    }
                }
                Accessible.name: qsTr("%1: %2: doppelklicken für weitere Optionen").arg(model.name).arg(model.description)
                Accessible.description: qsTr("%1: %2: doppelklicken für weitere Optionen").arg(model.name).arg(model.description)
                Accessible.role: Accessible.Button
                onClicked: {
                    menuOptions.open()
                }
            }
        }
    }
    

    0_1557407913973_Screenshot_2019-05-09-15-11-04.png


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.