Xamarin.forms: iOS VoiceOver/Android TalkBack reads elements on Master menu page when scrolling over elements on Detail page

[jgold6]

Description

With a MasterDetail page whose master page is a menu in a ListView, and whose Detail page uses a StackLayout with default options (as in the MasterDetailPage template project) , when scrolling over items in the Detail page's StackLayout, the iOS VoiceOver reader will read out menu items from the Master menu page even if it is not showing. This occurs on iPhone X but not on iPad Air 2.

Steps to Reproduce

1. Open Visual Studio for Mac and create a MasterDetailPage template solution
2. Open ItemsPage.xaml and add a Label above the ListView, e.g.:

      <StackLayout>
          <Label Text="Header 1" TextColor="Red" />
          <ListView  ...>
          </ListView>
      </StackLayout>

1. Launch app to iPhone device (easier to use VoiceOver accessibility function on device)
2. Open Settings app and go to General > Accessibility > VoiceOver and turn on the VoiceOver feature. You will now have to tap an item once to select it and then double tap the item to execute it.
3. Go back to the Forms MasterDetail app and swipe over the elements on the ItemsPage

Expected Behavior

I should hear the names of the elements I scroll over and I should not hear the names of any non-visible elements.

Actual Behavior

As I scroll between "Header 1" Label and the top of the ListView, I hear "About" and see a box around and empty element between "Header 1" Label and the ListView.

Notes

I confirmed that what is being read is the "About" menu item in the Master page because removing the "About" menu item resolves the issue.

It seemed to me that there must be a space between the label and the ListView such that iOS voiceover is seeing the hidden "About" menu item, and indeed I see the default spacing for a Stack Layout is 6. Setting the StackLayout.Spacing to 0 works around the issue.

<StackLayout Spacing="0">

Workaround

Set the Spacing for the StackLayout to 0

Basic Information

• Version with issue: 3.1.0.697729 and 3.3.0.912540
• Last known good version: unknown
• IDE: Visual Studio for Mac

• Platform Target Frameworks: iOS

  • iOS: 12
  • Android: N/A
  • UWP: N/A

• Affected Devices: iPhone (not iPad)

[samhouts]

@rmarinho This one is pretty similar to #3622

[marcocanino]

Same issue.
Spacing="0" has not solved the problem.

[rnic99]

I am also facing the same problem and tried the Spacing="0", sadly it did not solve my issue. Are there any updates?

[pamela032709]

@samhouts @StephaneDelcroix so you guys closed #6929 and #7676 all of them looks different to me and I don't understand how an spacing = "0 "will fix this issue. can you please provide if this going to be fixed and when and it would be helpful to know why is happening , so developers can start doing some workaround while you guy get the fix.This is very serious - Accessibility is no joke, plus the whole Xamarin Forms Teams - VPS and speakers brag about how great accessibility is - and it is not. this is totally unacceptable.

[samhouts]

@pamela032709 These reports may look different, but they all have the same root cause. This issue will be fixed. Given our current set of priorities, we expect to begin work on this within 90 days. Thank you for your patience.

[ismith78]

As mentioned by previous reports, adding a spacing=0 has no effect - the hidden fields are still seen by VoiceOver and Talkback. What fixes the issue for me is to revert Xamarin.Forms back to 3.1.0sr2.

[kpespisa]

I experienced the same problem in my app this summer, but when testing with version 4.2.0.815419 I no longer saw the problem.

[kholoudaliit]

@pamela032709 These reports may look different, but they all have the same root cause. This issue will be fixed. Given our current set of priorities, we expect to begin work on this within 90 days. Thank you for your patience.

Is there any news about this problem ? We Are Waiting @samhouts

[ismith78]

I've managed to work around this issue on iOS by updating to 4.1.0r5 and then creating a custom MasterDetailView renderer and override ViewWillLayoutSubviews as shown at http://robocafaz.com/blog/2016/05/09/xamarin-ios-that-nasty-little-masterdetailpage-artifact/

Android is a different matter for me as tapping on the menu with TalkBack enable just highlights the whole frame and never displays the menu - so that is a different bug to what is being discussed here.

[kholoudaliit]

I've managed to work around this issue on iOS by updating to 4.1.0r5 and then creating a custom MasterDetailView renderer and override ViewWillLayoutSubviews as shown at http://robocafaz.com/blog/2016/05/09/xamarin-ios-that-nasty-little-masterdetailpage-artifact/

Android is a different matter for me as tapping on the menu with TalkBack enable just highlights the whole frame and never displays the menu - so that is a different bug to what is being discussed here.

Is the CustomRender required any addition code?
I tried this solution but not working in our project I don't know why !
this is the code
Could you please help our disabled users

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(CustomeMasterDetail) , typeof(MasterDetailRenderer) )]


namespace Myproject.iOS.Controls
{
    public class MasterDetailRenderer : PhoneMasterDetailRenderer
    {
        public override void ViewWillLayoutSubviews()
        {
            base.ViewWillLayoutSubviews();

            var item = Element as MasterDetailPage;
            if (item != null)
            {
                var master = NativeView.Subviews[0];
                if (item.IsPresented)
                {
                    master.AccessibilityElementsHidden = false;
                }
                else
                {
                    master.AccessibilityElementsHidden = true;
                }
                NativeView.SetNeedsFocusUpdate();
            }
        }
    }
}

[ismith78]

@kholoudaliit This code change worked fine on our iPhone5, running iOS 10.3, and iPhone6, running iOS 12.4.

When we finally got hardware that could run iOS 13 we then discovered that this code change actually breaks functionality on iOS 13. So we now have a check around this code and only execute it if the version is iOS 12 or below.

You don't mention which version of Xamarin.Forms you are using but we needed to upgrade from 4.1.0sr1 to 4.1.0sr5 before everything worked on iOS on all versions.

You also don't mention which version of iOS you are testing against. Apple did break accessibility in iOS 13.0 (see https://www.applevis.com/blog/accessibility-bugs-introduced-and-resolved-ios-13-blind-and-low-vision-users) so if you are using iOS 13 it needs to be 13.3.

The other thing to check is what the accessibility tags are set to. The best way we found to do that was to run the code on the Mac to a simulator, then start Xcode and use the accessibility inspector (Menu -> Xcode -> Open Developer Tool -> Accessibility Inspector) to see if
a) there is an accessibility region marked
b) what the accessibility text says

[kholoudaliit]

@kholoudaliit This code change worked fine on our iPhone5, running iOS 10.3, and iPhone6, running iOS 12.4.

When we finally got hardware that could run iOS 13 we then discovered that this code change actually breaks functionality on iOS 13. So we now have a check around this code and only execute it if the version is iOS 12 or below.

You don't mention which version of Xamarin.Forms you are using but we needed to upgrade from 4.1.0sr1 to 4.1.0sr5 before everything worked on iOS on all versions.

You also don't mention which version of iOS you are testing against. Apple did break accessibility in iOS 13.0 (see https://www.applevis.com/blog/accessibility-bugs-introduced-and-resolved-ios-13-blind-and-low-vision-users) so if you are using iOS 13 it needs to be 13.3.

The other thing to check is what the accessibility tags are set to. The best way we found to do that was to run the code on the Mac to a simulator, then start Xcode and use the accessibility inspector (Menu -> Xcode -> Open Developer Tool -> Accessibility Inspector) to see if
a) there is an accessibility region marked
b) what the accessibility text says

Thanks to your quick reply..
Solved for me, it was a mistake in this line
[assembly: ExportRenderer(typeof(CustomeMasterDetail) , typeof(MasterDetailRenderer) )]

I use last stable Xamarin.form 4.4.0.991640
and I test it on iPhone6 13.3

thanks again for ur contribution