ScrollView AccessibilityIdentifier

Image Source: Google Search

How to set AccessibilityIdentifier of ScrollView items in SwiftUI?

I have a large app written in SwiftUI and have multiple ScrollView, HStack & VStack etc.

Now I want to create a global way to add AccessibilityIdentifier for nested items inside ScrollView and Stacks.

Step 1:

To add reusable accessibility identifiers for items throughout app, we can create a custom SwiftUI modifier or a reusable component

import SwiftUI

struct AccessibilityIdentifierModifier: ViewModifier {
    var prefix: String
    var index: Int
    
    func body(content: Content) -> some View {
        content
            .accessibilityIdentifier("\(prefix)_Item_\(index)")
    }
}

Step 2: Create a View extesion

import SwiftUI

extension View {
    func withAccessibilityIdentifier(prefix: String, index: Int) -> some View {
        self.modifier(AccessibilityIdentifierModifier(prefix: prefix, index: index))
    }
}

and thats it.

How to use: inside a ScrollView

import SwiftUI

struct ScrollViewExample: View {
    var items = Array(1...20).map { "Item \($0)" }
    
    var body: some View {
        ScrollView {
            VStack(spacing: 10) {
                ForEach(items.indices, id: \.self) { index in
                    Text(items[index])
                        .padding()
                        .background(Color.blue.opacity(0.2))
                        .cornerRadius(8)
                        .withAccessibilityIdentifier(prefix: "MainScrollView", index: index) // here we can pass custom string or struct name.
                }
            }
            .padding()
        }
    }
}

How to use: inside a StackView (HStack / VStack)

import SwiftUI

struct StackExample: View {
    var items = Array(1...5).map { "Item \($0)" }
    
    var body: some View {
        HStack(spacing: 10) {
            ForEach(items.indices, id: \.self) { index in
                Text(items[index])
                    .padding()
                    .background(Color.orange.opacity(0.2))
                    .cornerRadius(8)
                    .withAccessibilityIdentifier(prefix: "HStackExample", index: index)
            }
        }
        .padding()
    }
}

And thats it. Done.

Cheers 🎉🎉🎉