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 how labelFor (https://developer.android.com/reference/android/R.attr.html#labelFor) works 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!
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Created
Hi! I was trying out the Audio Graph APIs. I'm trying to add gridlines to my chart's data axes descriptor, but doing so doesn't seem to make any difference to me. So I'm surely missing something...
I was watching the WWDC21 session "Bring accessibility to charts in your app", and the presenter says: "When you provide grid lines, they're represented in the audio graph as haptic feedback during playback and interaction." And that is quite interesting!
This is how I'm trying to do it.
var accessibilityChartDescriptor: AXChartDescriptor? {
get {
let xAxis = AXNumericDataAxisDescriptor(title: "Lines of code", range: 0...10, gridlinePositions: [2.5, 5.0, 7.5]) { number in
"\(number) lines"
}
let yAxis = AXNumericDataAxisDescriptor(title: "Lines of code", range: 0...40, gridlinePositions: []) { number in
"\(number) cups"
}
let dataSeriesDescriptor = AXDataSeriesDescriptor(name: "Lines of code per coffees taken", isContinuous: false, dataPoints: [20, 30, 35, 32, 28, 9, 4, 3, 15, 1].enumerated().map({ (point, index) in
AXDataPoint(x: Double(point), y: Double(index), additionalValues: [], label: nil)
}))
return AXChartDescriptor(title: "Cups of coffee vs. lines of code", summary: "This chart shows how coffee consumption impacts coding ability", xAxis: xAxis, yAxis: yAxis, additionalAxes: [], series: [dataSeriesDescriptor])
}
set {}
}
But for me, it already showed grid lines even if I didn't configure them. Once I do, they don't change visually and it is not adding any haptic feedback...
Any pointers on how I can achieve having gridlines that provide haptic feedback would be hugely appreciated! Many thanks!