CODEWITHSUNDEEP
iosswiftswiftuiaccessibilityvoiceover
dadederk
dadederk

Reputation: 335

Pairing two elements for accessibility purposes with .accessibilityLabeledPair(role:id:in:) in SwiftUI

In the Accessibility in SwiftUI session from WWDC19, the presenter said (20min): "In an upcoming seed of SwiftUI you'll be able to (...) set up a connection between the label on the left and the popup button on the right."

Checking at the available APIs, I assume this is done with the .accessibilityLabeledPair(role:id:in:) modifier. I haven't been able to make it work. In my mind, this would work similarly to labelFor in Android? Has anyone used this modifier successfully?

Using some code like the one below, where I first give a text view the label role and a button the content one. And then both the same Id and namespace. I would expect VoiceOver to focus on both elements as one and for the accessibility label to be the text in the text view. Instead, for me, this behaves exactly the same as if I don't apply the modifier. VoiceOver focuses on the text first and, after a swipe to the right, it focuses on the button. Am I misunderstanding how this should work?

import SwiftUI

struct ContentView: View {
    @Namespace var namespace
    @State private var isOn = false

    var body: some View {
        HStack {
            Text("I agree on the terms and conditions")
                .accessibilityLabeledPair(role: .label, id: "aPair", in: namespace)
            Button {
                isOn = !isOn
            } label: {
                isOn ? Image(systemName: "checkmark.circle.fill") : Image(systemName: "circle")
            }
            .accessibilityLabeledPair(role: .content, id: "aPair", in: namespace)
        }
    }
}

Thanks everyone!

Upvotes: 2

Views: 1651

Answers (1)

matthew lock
matthew lock

Reputation: 1

Believe you need to use the .accessibilityRepresentation modifier on the HStack, right now your second accessibilityLabeledPair should be on the button rather than on the Hstack.

Upvotes: 0

Related Questions