SwiftUI bug? Elements invisible in Voice Over mode

32 views Asked by At

I'm facing issues with the visibility of the elements inside ZStack in VoiceOver mode. I'm building a View where I got navigation tabs inside ScrollView (green tabs on picture), and on top of that I want to have a sticky, non-scrollable tab (orange tab on picture).

enter image description here

Tabs are scrolling beneath the sticky fixed tab. The problem is, that in VoiceOver mode, Sticky Tab area is not recognisable, instead the element behind (in this case tab from the scroll view) gets snapped. Sticky tab is just invisible.

Evidence:

enter image description here

enter image description here

Is this is some kind SwiftUI bug? I've tried everything. Any help appreciated!

Here's the code:

struct ContentView: View {

@State var items = [
    Tab(icon: Image(systemName: "circle"), label: "tab1"),
    Tab(icon: Image(systemName: "circle"), label: "tab2"),
    Tab(icon: Image(systemName: "circle"), label: "tab3"),
    Tab(icon: Image(systemName: "circle"), label: "tab4"),
    Tab(icon: Image(systemName: "circle"), label: "tab5"),
    Tab(icon: Image(systemName: "circle"), label: "tab6"),
]
    
var body: some View {
        ZStack(alignment: .leading) {
            
            stickyTab("StickyTab")
            
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 24) {
                    ForEach(items) { item in
                        Button {
                            print("Tapped!")
                        } label: {
                            HStack(spacing: 4) {
                                item.icon
                                    .resizable()
                                    .frame(width: 24, height: 24)
                                Text(item.label)
                                    .foregroundColor(.black)
                            }
                            .padding(.horizontal, 4)
                            .frame(height: 80)
                            .foregroundColor(Color.black)
                            .background(Color.green)
                        }
                    }
                }
                .padding(.leading, 150)
            }
            .zIndex(0)
        }
        .background(Color.green.opacity(0.2))
}

@ViewBuilder
private func stickyTab(_ title: String) -> some View {
    Button {
        print("Tap!")
    } label: {
        HStack(spacing: 4) {
            Image(systemName: "circle")
            Text(title).foregroundColor(.black).font(.headline)
        }
        .padding(.horizontal, 16)
        .contentShape(Rectangle())

    }
    .frame(height: 80)
    .scaledToFit()
    .background(Color.orange)
    .accessibilityElement(children: .combine)
    .contentShape(Rectangle())
    .zIndex(1)
}

}

0

There are 0 answers