Hi there!
I'm working on using the .accessibilityRepresentation
view modifier for a custom slider, and I'm having some unexpected behavior. When I run my app with VoiceOver and swipe over the custom slider view, it will only announce the adjustable trait on a fresh run of VoiceOver, otherwise the VoiceOver needs to be turned off and back on again to hear the adjustable
trait announcement and use the adjustable a11y action.
The only way that I found to get the correct announcement is to leave out the label specified in the .accessibilityRepresentation closure. See below for reference...
.accessibilityRepresentation {
Slider(value: $value, in: 0...12, step: 1.0) {
// Text("Window Distance")
}
}
I should note that this workaround causes these issues:
- the slider thumb control doesn't update its position when the a11y action is performed - I figure this is probably because we don't have anything specified in the label param of the a11y representation.
- VoiceOver does not announce the new value when the a11y action is performed - I have to double tap it again to hear the announcement
If I uncomment the Text modifier, then the following happens:
- the adjustable trait and action will either be completely unavailable OR I can adjust one time, then have to turn it off and back on again.
- the
.staticTrait
is added - there is no
.adjustable
trait
Additional Information that may be relevant:
- this is how I'm making the slider and where the a11y representation is being used:
GeometryReader { geometry in
ZStack(alignment: Alignment(horizontal: .leading, vertical: .center)) {
RoundedRectangle(cornerRadius: 20)
.frame(minHeight: 44)
.foregroundStyle(self.trackGradient)
.overlay(
RoundedRectangle(cornerRadius: 30)
.foregroundColor(.clear)
.shadow(color: .black, radius: 5)
.clipShape(RoundedRectangle(cornerRadius: 30))
)
HStack {
RoundedRectangle(cornerRadius: 50)
.frame(width: self.thumbSize.width, height: self.thumbSize.height)
.foregroundColor(.white)
.offset(x: lastOffset)
.shadow(radius: 8)
.gesture(
DragGesture(minimumDistance: 0.1)
.onChanged { value in
if value.location.x >= 0 && value.location.x <= geometry.size.width - self.thumbSize.width {
self.lastOffset = value.location.x
let sliderPosition = max(0 + self.leadingOffset, min(self.lastOffset + value.translation.width, geometry.size.width - self.trailingOffset))
let sliderValue = sliderPosition.map(from: self.leadingOffset...(geometry.size.width - self.trailingOffset), to: self.range)
self.value = sliderValue
}
}
)
}
}
.accessibilityRepresentation {
Slider(value: $value, in: 0...12, step: 1.0) {
// Text("Window Distance")
}
}
}
}
And finally, here's the view where the CustomSlider lives...
var body: some View {
VStack {
HStack(alignment: .center) {
Text("Window Distance")
.font(.body)
Spacer()
Text($value.wrappedValue == 0 ? "In window" : "\(Int($value.wrappedValue)) ft.")
}
// .accessibilityElement(children: .ignore)
// I've experimented with this .ignore trait so that once the a11yRepresentation is working correctly, we won't have redundant info
CustomSlider(value: $value)
// .accessibilityElement(children: .contain)
// I've tried also adding the .contain behavior here because I thought that maybe we'd want to ignore the texts and contain the custom slider view since it should have all the a11y info we need in the a11y representation
Spacer()
}
.padding(.vertical)
.padding(.bottom)
.padding(.bottom)
.accessibilityElement(children: .combine)
}
Has anyone had a similar issue before?
Thanks, everyone!