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).
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:
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)
}
}


