Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

How to scroll a Xamarin.Forms ScrollView on iOS when using VoiceOver?

JohnHardmanJohnHardman GBUniversity admin
edited October 7 in Xamarin.Forms

When using VoiceOver on iOS, I am finding that using a three fingered swipe up or down is not scrolling the Xamarin.Forms ScrollViews in my app.
Is there anything specific that needs to be done with ScrollViews to get them to support VoiceOver, or have I simply got the wrong gesture (a three fingered swipe works on ListView)?

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    Three finger swipe works properly on my side.
    Could the scrollview be scrolled under the normal mode?
    Did you write a customer renderer for some elements to disable the accessibility?
    You could try this code in a simple blank project:

    <ScrollView>
        <StackLayout>
            <Label Text="Hi" HeightRequest="1000"  />
        </StackLayout>
    </ScrollView>
    
  • JohnHardmanJohnHardman GBUniversity admin

    @LandLu

    If the ScrollView is the top level View on the ContentPage, the three finger swipe works. However, if the ScrollView is nested inside another Layout then it doesn't. I find that the ScrollView in the following does not scroll using the three finger swipe.

        <StackLayout BackgroundColor="Red" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <ScrollView BackgroundColor="Aqua" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                <StackLayout>
                    <Label Text="Hi" HeightRequest="1000"  />
                </StackLayout>
            </ScrollView>
            <StackLayout Padding="10, 0">
                <Entry x:Name="entry1"
                    Text=""
                    Placeholder="enter search term"
                    VerticalOptions="End" />
            </StackLayout>
        </StackLayout>
    
  • LandLuLandLu Member, Xamarin Team Xamurai

    Still worked on my side using the code you posted.
    I tested this on my iPhone 7 with iOS 14.

  • JohnHardmanJohnHardman GBUniversity admin

    @LandLu said:
    Still worked on my side using the code you posted.
    I tested this on my iPhone 7 with iOS 14.

    My mistake. That simple piece of XAML does scroll using VoiceOver. I'll put together a more realistic sample to see what element makes things stop working. Will try not to be too long.

  • LandLuLandLu Member, Xamarin Team Xamurai

    Waiting for your update.

  • JohnHardmanJohnHardman GBUniversity admin

    @LandLu said:
    Waiting for your update.

    Can you try the following please? It's weird, as I have similar pages that work, and I have others (such as this one) that don't.

        <StackLayout BackgroundColor="Red" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <ScrollView BackgroundColor="Aqua" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                <StackLayout>
                    <Label Text="Hi" HeightRequest="1000" VerticalOptions="FillAndExpand" />
                    <Label Text="Again" HeightRequest="1000" VerticalOptions="Center" />
                    <Button Text="Press Me" TabIndex="24" VerticalOptions="End" />
                </StackLayout>
            </ScrollView>
        </StackLayout>
    

    I am wondering if it's related to https://github.com/xamarin/Xamarin.Forms/issues/11793 , although I'm trying to manually scroll using a three-finger swipe, rather than relying on the reading of a page to make the screen scroll.

  • LandLuLandLu Member, Xamarin Team Xamurai

    It is caused by the TabIndex. If I removed it like:

    <StackLayout BackgroundColor="Red" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        <ScrollView BackgroundColor="Aqua" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <StackLayout>
                <Label Text="Hi" HeightRequest="1000" VerticalOptions="FillAndExpand" />
                <Label Text="Again" HeightRequest="1000" VerticalOptions="Center" />
                <Button Text="Press Me" VerticalOptions="End" />
            </StackLayout>
        </ScrollView>
    </StackLayout>
    

    The scroll view could be dragged. May I ask why you need this TabIndex? It seems it stops scrolling and uses Tab instead.

  • JohnHardmanJohnHardman GBUniversity admin
    edited October 12

    @LandLu said:
    It is caused by the TabIndex.
    ...
    The scroll view could be dragged. May I ask why you need this TabIndex? It seems it stops scrolling and uses Tab instead.

    TabIndex is required as my code is intended to operate on Windows (UWP) as well as Android and iOS. On Windows desktops, power users (including me) use the keyboard rather than mouse to navigate around the controls on pages, using either tabbing (for which TabIndex is required to specify the order correctly) or AccessKey (within the realistic limits of how many useful AccessKeys can be on one page). The default tab order (when TabIndex is not specified) is rarely optimal, so specifying it explicitly is required.

    I've just logged an issue at https://github.com/xamarin/Xamarin.Forms/issues/12456 , which includes a workaround (at this point, using extension methods in C# defined UIs seems to be the way to go for TabIndex, AccessKey and AutomationId, in order to workaround various issues and limitations. I'm not sure what approach would be used for UIs defined in XAML).

  • LandLuLandLu Member, Xamarin Team Xamurai

    We could wait for the response of PG since you have raised issues on the GitHub.
    And take this temporary approach as a workaround.

  • JohnHardmanJohnHardman GBUniversity admin

    @LandLu said:
    We could wait for the response of PG since you have raised issues on the GitHub.
    And take this temporary approach as a workaround.

    PG ?

  • LandLuLandLu Member, Xamarin Team Xamurai

    Our product members will handle the cases there.
    PG means product group.

Sign In or Register to comment.