TabView with VoiceOver

Hello,

When I run the following view on my iPhone with VoiceOver enabled, I encounter the following problem with the VoiceOver cursor.

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()
    }
}

I move the VoiceOver cursor to the tabview dots for paging and swipe up with one finger to go to the next tab. The tabview jumps to the next tab. But when the VoiceOver cursor focuses the tabview, the previous tab is shown 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.

How can I fix this?

Regards Pawel

TabView with VoiceOver
 
 
Q