CODEWITHSUNDEEP
swiftswiftuiaccessibilityvoiceover
Jacob Jidell
Jacob Jidell

Reputation: 2792

How to combine a Text and TextField for voice over-support but keep the textField trait

I'm having a custom TextField struct, where i'm using the .accessibilityElement(children: .combine) to make Siri read out both the Text + the TextField values, but "she" drops the textField accessibility trait for the textField, which reads how "Double tap to edit". And I can't really find a way how to readd except setting my own hint, which seems kind of bad. Is there any better solution for this problem?

struct CustomTextField<F: ParseableFormatStyle>: View where F.FormatOutput == String {
    let title: String
    var value: Binding<F.FormatInput?>
    let format: F

    var body: some View {
        VStack(spacing: 6) {
            Text(title)
                .frame(maxWidth: .infinity, alignment: .leading)
            TextField("", value: value, format: format)
                .autocorrectionDisabled()
        }
        .accessibilityElement(children: .combine)
        //        .accessibilityHint("Double tap to edit") // Is this the only way?
    }
}

Upvotes: 4

Views: 856

Answers (2)

shariebg
shariebg

Reputation: 109

I have solved the problem as follows to keep the TextField trait:

VStack(spacing: 6) {
    Text(title)
        .frame(maxWidth: .infinity, alignment: .leading)
        .accessibilityHidden(true) // <--

    TextField("", value: value, format: format)
        .autocorrectionDisabled()
        .accessibilityLabel(title) // <--
}

Upvotes: 0

laka
laka

Reputation: 796

Have a look into

.accessibilityRepresentation {
  // Custom accessibility representation of your view that VoiceOver (and other technologies) will use.
}

https://developer.apple.com/documentation/swiftui/view/accessibilityrepresentation(representation:)

or

.accessibilityChildren {
  // Custom accessibility representation of your view that VoiceOver (and other technologies) will use.
}

https://developer.apple.com/documentation/swiftui/view/accessibilitychildren(children:)

You should be able to solve your issue with one of these modifiers.

For your exact use case with a textfield I used .accessibilityChildren. However, it depends on your actual setup.

Here is an article where the differences are shortly mentioned: https://swiftwithmajid.com/2022/05/25/the-power-of-accessibilityChildren-view-modifier-in-swiftui/

Upvotes: 0

Related Questions