accessibilityRepresentation view modifier unexpected behavior when Text provided for label

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!

accessibilityRepresentation view modifier unexpected behavior when Text provided for label
 
 
Q