maui accessibility FlyOutItem not speaking by screenreader

[vsfeedback]

This issue has been moved from a ticket on Developer Community.

---

[severity:It's more difficult to complete my work] When I add fly out item in maui app so it's run and show but it not speak by screen reader called NVDA. I try to set semantic property description but know use even when i set <FlyOutItem Title="moonPage" SemanticProperty.Description ... so it build but wont run i try to set Semantic properties with <ShellContent .... that time it run but no Success. every time when I enter in navigation bar so NVDA reads FlyOutItem like: -

Microsoft.Maui.Controls.Platform.ShellFlyoutItemView 1 of 3 level 1 Microsoft.Maui.Controls.Platform.ShellFlyoutItemView not selected 2 of 3 level 1 Microsoft.Maui.Controls.Platform.ShellFlyoutItemView not selected 3 of 3 level 1 I am sending all code here.

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Astronomy.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Astronomy.Pages" FlyoutIcon="moon.png">

<FlyoutItem Title="MoonPhase">
    <ShellContent
        ContentTemplate="{DataTemplate local:MoonPhasePage}"/>
    </FlyoutItem>
    <FlyoutItem Title="SunrisePage">
        <ShellContent ContentTemplate="{DataTemplate local:SunrisePage}"/>

</FlyoutItem>
    <FlyoutItem Title="About" >
        <ShellContent ContentTemplate="{DataTemplate local:AboutPage}"/>
    </FlyoutItem>

</Shell>

---

Original Comments

Feedback Bot on 10/29/2023, 06:50 PM:

(private comment, text removed)

---

Original Solutions

(no solutions)

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[ngegner]

This is definitely a bug. Setting the SemanticProperties of ShellContent in XAML does nothing (still builds/deploys, but doesn't change the semantics of the element), so I tried to set them in the code behind as a workaround, and get a bug saying that ShellContent doesn't have the property SemanticProperties. This also applies to MenuItem. How am I supposed to make my shell accessible?

[TiberiusDRAIG]

@rachelkang This completely breaks accessibility for the Shell Flyout, with no apparent workaround - this puts our application in breach of standards like Section 508, which is a hard requirement for many of our customers. This was reported as fixed back in .NET 7 but is now occurring in .NET 8, so seems like a regression somewhere. I'm also seeing the same with CollectionView, which is now reading "Microsoft.Maui.Controls.Platform.ItemTemplateContext" when an item gets focus. Something seems rather broken here.

Repros with:

• VS 17.11.3
• Microsoft.Maui.Controls 8.0.92

[TiberiusDRAIG]

I have found a workaround! If you implement a custom template for the FlyoutItem and add SemanticProperties to the topmost container in your template then the screenreader starts working as expected. For example, if your template was:

<DataTemplate x:Key="FlyoutItemTemplate">
  <Grid>
    <!-- the rest of your layout -->
  </Grid>
</DataTemplate>

Then you would add the SematicProperties to the Grid. As far as I can see, there isn't another way to make this work without customising the template.

---

EDIT: This approach also works for the CollectionView issue here: https://github.com/dotnet/maui/issues/25204. Is this working as designed, albeit with unhelpful default behaviour? I guess if the default OOTB template binds the relevant SemanticProperties prop to the FlyoutItem.Title prop, and a note to the docs was added, then you'd probably be good. I imagine CollectionView would be harder to do for much more than strings as default, but a doc note might be all that's needed in the end there too, assuming this is all working as designed.

[Foda]

Hm.... I haven't tested with NVDA yet, but using the MS Accessibility Insights tool gives me this with the following XAML on .NET 9:

  <FlyoutItem Title="MoonPhase" SemanticProperties.Description="Wow">
    <ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
  </FlyoutItem>
  <FlyoutItem Title="SunrisePage">
    <ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
  </FlyoutItem>
  <FlyoutItem Title="About">
    <ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
  </FlyoutItem>

[dotnet-policy-service[bot]]

Hi @vsfeedback. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.