How to preserve Accessibility focus in List when navigating back from the next View in a NavigationView?

user_1037419 0
Viewed 225

I have a NavigationView were a user can select a chapter in a List to navigate to the contents of that chapter.

The problem is that when navigating back from the text to the chapters view, Accessibility does not preserve focus on the selected chapter, forcing a Voice Over user to navigate the content list from the beginning again, which is not a good user experience.

Here is a minified example:

struct ContentView: View {
    var body: some View {
        NavigationView {
            List(1..<10) { row in
                NavigationLink(destination: Text("Text for chapter \(row)")) {
                  Text("Chapter \(row)")
                }
            }
        }
    }
}

If you select for example "Chapter 3" using Voice Over to see its contents and then navigate back to the Chapters-view, Accessibility focus will move back to the first element in the list. When a user has read a chapter, the natural next step is to read the next chapter. But since Accessibility is not preserving the selected chapter in focus, the user is forced to navigate the chapter list from the beginning every time.

How can I maintain Accessibility focus on "Chapter 3" when navigating back?

voiceover swiftui-navigationview swiftui-list accessibility ios
1 Answers

I think you can Achieve this with 2 different approaches:

1.- Using AccessibilityFocusState Property Wrapper with a Boolean Type 2.- Using AccessibilityFocusState Property Wrapper by creating an Hashable Enum with types for your different list elements.

something like this should be inside your struct that copntains your views:

    enum FocusableViews: Hashable, Equatable {
        case itemYouWantToFocus, none
    }

    @AccessibilityFocusState var currentFocus: FocusableView?

then, This modifier should be added to the NavigationLink where you want to track the FocusState:

NavigationLink( destination: 
  Text("")
    .accessibilityFocused($currentFocus, equals: .itemYouWantToFocus)
}, Label:
{
    Text("Navigate")
})
user_93679700
Related