CODEWITHSUNDEEP
swiftswiftuiaccessibilityswiftui-navigationlink
Tony Chen
Tony Chen

Reputation: 217

Eliminate NavigationLink button shape in accessibility mode

I have a small SwiftUI project that supports "Button Shapes" in accessibility mode.
Button Shapes in accessibility mode
But I found that when I enable this mode, there is a small white rectangle in the center of the screen, which I guess is the NavigationLink I put for SecondView.
Here is my code:

struct FirstView: View {
    @State private var activeSecondView = false
    var body: some View {
        NavigationView {
            VStack {
                Text("FirstView")
                Button("Tap to show second view") {
                    self.activeSecondView = true
                }
            }
            .overlay(NavigationLink(destination: Text("SecondView"), isActive: $activeSecondView) {EmptyView()})
        }
    }
}

And it runs like this(The redundant rectangle is circled in red): Extra tappable area in the center

Is there any way to eliminate or hide this small white rectangle while "Button Shapes" is enable?

Upvotes: 3

Views: 1447

Answers (4)

Thamizhan Manikandan
Thamizhan Manikandan

Reputation: 65

NavigationLink(destination: Text("SecondView"), isActive: $activeSecondView) 
   {EmptyView()}
.buttonStyle(PlainButtonStyle()) //this solve the problem

Upvotes: 5

Fercho_27
Fercho_27

Reputation: 31

This is an old question but I recently encountered the same problem, except my View had many NavigationLinks grouped together and they used a ton of space, plus you are able to tap them and that might cause behaviors we don't want.

The solution I found was grouping my NavigationLinks inside a ZStack and setting its opacity to 0 (.opacity(0)). The ZStack reduces the space into just one button (I didn't find a way to remove this space without major refactoring to my current navigation unfortunately), and the opacity set to 0 makes it so you cannot press on them anymore (of course, navigation still works if your using isActive: or tag:).

Extra detail: this issue seems to starts happening on iOS 15. I tested on iOS 14.5 and the NavigationLinks acted as normal

Upvotes: 0

Asperi
Asperi

Reputation: 257711

Try next (not tested just idea)

.background(
   NavigationLink(destination: Text("SecondView"), isActive: $activeSecondView) 
       {EmptyView()}.opacity(0)          // << this !!
)

Upvotes: 2

Tony Chen
Tony Chen

Reputation: 217

Just found a solution by myself, not sure if this is the best practice. Anyway I will share it in case any one encounters similar problem.
Just hide the NavigationLink behind the main content and it will become invisible:

struct FirstView: View {
    @State private var activeSecondView = false
    var body: some View {
        NavigationView {
            ZStack {
                NavigationLink(destination: Text("SecondView"), isActive: $activeSecondView) {EmptyView()}
                Color.white
                VStack {
                    Text("FirstView")
                    Button("Tap to show second view") {
                        self.activeSecondView = true
                    }
                }
            }
            //.background(NavigationLink(destination: Text("SecondView"), isActive: $activeSecondView) {EmptyView()})
        }
    }
}

Upvotes: 1

Related Questions