Voiceover cursor in TabView jumps to previous tab

Hello,

When I run the following view on my iPhone with VoiceOver enabled, I encounter an issue with the voiceover cursor when I perform the following steps:

  1. Move the VoiceOver cursor to the tabview dots for paging.
  2. Swipe up with one finger to go to the next tab.

--> Tabview moves to the next tab. --> The VoiceOver cursor jumps up to the tab. But instead of the actual tab the previous tab is shown in the tabview again. You can also see that the border of the VoiceOver cursor extends into the previous tab.

I suspect it has to do with the fact that despite the clipped modifier, the size of the image remains the same and extends into the previous tab.

struct ContentView: View {
    var body: some View {
        VStack {
            TabView {
                ForEach(1..<6) { index in
                    Button(
                        action: { },
                        label: {
                            ZStack {
                                GeometryReader { geo in
                                    Image(systemName: "\(index).circle")
                                        .resizable()
                                        .scaledToFill()
                                        .frame(width: geo.size.width)
                                        .clipped()
                                }
                            }
                        }
                    )
                    .buttonStyle(PlainButtonStyle())
                    .padding([.bottom], 50)
                }
            }
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
            .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
        }
        .padding()
    }
}

How can I fix this?

Best regards Pawel

Voiceover cursor in TabView jumps to previous tab
 
 
Q