ios – Issue with accessibility and Animations in SwiftUI Button inside a ScrollView

I am engaged on enhancing the accessibility of a SwiftUI view in my iOS app. I’ve encountered two distinct points whereas implementing accessibility options, and I am searching for steering on methods to deal with them successfully.

1. Accessibility situation when tapping parts:

In my SwiftUI CardsTableView, I’ve an inventory of playing cards. Earlier than including accessibility, there was no Button. And it labored tremendous, after I tapped the cell, it did the required motion.
However after I needed to implement accessibility, and after I tapped twice, it did nothing. Then, I had so as to add the Button, after which, sure, it tapped accurately, and adopted the corresponding circulate. This inconsistency was noticeable after I had a desk with a number of parts.

2. Undesirable animation with buttons:

After including buttons, I seen an undesirable animation when tapping them (with accessibility options turned off). I tried to disable this animation utilizing .animation(nil) on the buttons, however it had no impact. One other method I attempted was utilizing .buttonStyle(PlainButtonStyle()), which eliminated the animation however brought on issues with accessibility – the double-tap navigation now not functioned accurately.

I am questioning, is it vital so as to add a Button for accessibility to work accurately? I am additionally on the lookout for insights into why this occurred and the way I could make it accessible with out the undesirable animations.

Here is the related code snippet for reference:

struct CardsTableView: View {
    
    ...
    
    var physique: some View {
        GeometryReader {
            let dimension = $0.dimension
            ScrollView(.vertical, showsIndicators: false) {
                VStack(spacing: 20) {
                    ForEach(playing cards) {
                        CardCell($0)
                    }
                }
                .padding(20)
            }
        }
        .background(backgroundClear())
    }
    
    @ViewBuilder
    func CardCell(_ card: CreditCard) -> some View {
        let (backgroundColorImage, backgroundColorPill, colorImage) = viewModel.getColors(card)
        
        let nameCardAccessibility = viewModel.nameCardAccessibility
            .replacingOccurrences(of: "{CARDTYPE}", with: card.sort.title)
            .replacingOccurrences(of: "{NAME}", with: card.holderName)
        
        let last4Accessibility = "CREDIT_CARD_LIST_SHOW_DATA_TABLE_LAST4_ACCESIBILITY".localized
            .replacingOccurrences(of: "{LAST4}", with: card.last4.map { String($0) }.joined(separator: " "))
        
        Button(motion: {
            Haptic.choice()
            onCardSelected(card)
        }, label: {
            
            HStack(spacing: 10) {
                ZStack {
                    Circle()
                        .fill(backgroundColorImage)
                        .body(width: 45, peak: 45)
                    
                    Picture(systemName: "creditcard.fill")
                        .resizable()
                        .scaledToFit()
                        .body(width: 25, peak: 25)
                        .rotationEffect(.levels(90))
                        .foregroundColor(Coloration(colorImage))
                }
                
                VStack(alignment: .main, spacing: 2) {
                    Textual content(card.holderName)
                        .font(.customized(SwiftUIFonts.ProximaBold.title, dimension: 16))
                        .lineLimit(1)
                        .minimumScaleFactor(0.7)
                        .truncationMode(.tail)
                    
                    HStack(spacing: 10) {
                        Picture(uiImage: Asset.asteriscLast4.picture)
                            .renderingMode(.template)
                            .resizable()
                            .scaledToFit()
                            .body(width: 40, peak: 15, alignment: .middle)
                    }
                }
                .body(maxWidth: .infinity, alignment: .main)
            }
        })
        .accessibilityElement()
        .accessibility(label: Textual content(nameCardAccessibility))
        .accessibility(worth: Textual content(last4Accessibility))
        .accessibility(addTraits: .isButton)
    }
}

I wish to emphasize that I am utilizing iOS functionalities equal to or decrease than iOS 13.