NavMenu text when collapsed, use aria-label for screen-reader instead

examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor

@@ -4,7 +4,7 @@
 
 <FluentStack Orientation="Orientation.Horizontal" Width="100%">
     <div>
-        <FluentNavMenu @bind-Expanded="@Expanded" Width="150" Collapsible="true">
+        <FluentNavMenu @bind-Expanded="@Expanded" Width="150" Collapsible="true" Title="Collapsible demo">
             <FluentNavMenuLink Icon="@(new Icons.Regular.Size24.Home())" Text="Item 1" Href="/NavMenu" />
             <FluentNavMenuLink Icon="@(new Icons.Regular.Size24.Cloud())" Text="Item 2" Href="/NavMenu" />
             <FluentNavMenuGroup Text="Item 3" Icon="@(new Icons.Regular.Size24.EarthLeaf())" Href="/NavMenu">

examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCustomActions.razor

@@ -5,7 +5,7 @@
 
 <FluentStack Orientation="Orientation.Horizontal" Width="100%">
     <div>
-        <FluentNavMenu OnAction="@InterceptAtMenuLevel">
+        <FluentNavMenu OnAction="@InterceptAtMenuLevel" Title="Custom actions demo">
             @*
             This item is handled by the MenuLevelHandler, which intercepts all items
             but will only handle ones with Id ending with _HandleAtMenuLevel

examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuDataBound.razor

@@ -6,7 +6,7 @@
 
 <FluentStack Orientation="Orientation.Horizontal">
     <!-- Menu with sub-items and icons -->
-    <FluentNavMenu @bind-Expanded=MenuExpanded>
+    <FluentNavMenu @bind-Expanded=MenuExpanded Title="Databound demo">
         <FluentNavMenuGroup Id="Group1" Text="Item 1" @bind-Expanded=Item1Expanded Icon="@(new Icons.Regular.Size24.LeafOne())" Href="/NavMenu">
             <FluentNavMenuLink Text="Item 1.1" Icon="@(new Icons.Regular.Size24.LeafOne())" @bind-Selected=Item1Point1Selected Href="/NavMenu" />
             <FluentNavMenuLink Text="Item 1.2" Icon="@(new Icons.Regular.Size24.LeafTwo())" @bind-Selected=Item1Point2Selected Href="/NavMenu" />

examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuDefault.razor

@@ -6,7 +6,7 @@
 
 <FluentStack Orientation="Orientation.Horizontal" >
     <!-- Menu with sub-items and icons -->
-    <FluentNavMenu Collapsible="false">
+    <FluentNavMenu Collapsible="false" Title="Default demo">
         <FluentNavMenuLink Text="Item 1" Icon="@(new Icons.Regular.Size24.Home())" Href="/NavMenu" />
         <FluentNavMenuLink Text="Item 2" Href="/NavMenu" />
         <FluentNavMenuGroup Text="Item 3" Href="/NavMenu">

examples/Demo/Shared/Shared/DemoNavMenuTree.razor

@@ -1,5 +1,5 @@
 <div>
-    <FluentNavMenu Collapsible="false">
+    <FluentNavMenu Collapsible="false" Title="Main menu">
         <FluentNavMenuLink Icon="@(new Icons.Regular.Size20.Home())" Href="/">
             <h2>Home</h2>
         </FluentNavMenuLink>

src/Core/Components/NavMenu/FluentNavMenu.razor

@@ -12,7 +12,12 @@
                                     CurrentSelectedChanged="@HandleCurrentSelectedChangedAsync">
                         @if (Collapsible)
                         {
-                            <FluentTreeItem Id="@_expandCollapseTreeItemId" Class="nav-menu-expander" @onclick="@ToggleCollapsedAsync" @onkeydown="@HandleExpandCollapseKeyDownAsync">
+                            <FluentTreeItem aria-label="@Title"
+                                            aria-expanded="@Expanded.ToAttributeValue()"
+                                            Id="@_expandCollapseTreeItemId"
+                                            Class="navmenu-expander"
+                                            @onclick="@ToggleCollapsedAsync"
+                                            @onkeydown="@HandleExpandCollapseKeyDownAsync">
                                 @if (ExpanderContent is not null)
                                 {
                                     <div>

src/Core/Components/NavMenu/FluentNavMenu.razor.css

@@ -9,21 +9,21 @@
 /*
     NavMenu expander
 */
-::deep .nav-menu-expander::part(positioning-region) {
+::deep .navmenu-expander::part(positioning-region) {
     background-color: var(--neutral-fill-stealth-rest);
 }
 
-::deep .nav-menu-expander::part(content-region) {
+::deep .navmenu-expander::part(content-region) {
     margin-inline-start: calc(var(--design-unit) * 2px);
     -webkit-user-select: none;
     user-select: none;
 }
 
-::deep .nav-menu-expander::part(positioning-region):hover {
+::deep .navmenu-expander::part(positioning-region):hover {
     background-color: var(--neutral-fill-secondary-rest);
 }
 
-::deep .nav-menu-expander.selected::after {
+::deep .navmenu-expander.selected::after {
     display: none;
 }
 
@@ -39,6 +39,14 @@
     margin-inline-end: calc(var(--design-unit) * 2px);
 }
 
+::deep .navmenu .treeitem-text, ::deep .navmenu fluent-tree-item.navmenu-child-element::part(start) {
+    pointer-events: none;
+}
+
+::deep .navmenu.collapsed .treeitem-text, ::deep .navmenu.collapsed fluent-tree-item.navmenu-child-element::part(expand-collapse-button) {
+    display: none;
+}
+
 
 
 /* 

src/Core/Components/TreeView/FluentTreeItem.razor

@@ -2,6 +2,8 @@
 @inherits FluentComponentBase
 <fluent-tree-item @ref=Element
                   class="@Class"
+                  aria-label="@Text"
+                  aria-expanded="@Expanded.ToAttributeValue()"
                   style="@Style"
                   id="@Id"
                   expanded="@Expanded"
@@ -10,6 +12,6 @@
                   @onselectedchange="@HandleSelectedChangeAsync"
                   @onexpandedchange="@HandleExpandedChangeAsync"
                   @attributes="AdditionalAttributes">
-    @Text
+    <span class="treeitem-text">@Text</span>
     @ChildContent
 </fluent-tree-item>

src/Core/Extensions/BooleanExtensions.cs

@@ -0,0 +1,6 @@
+namespace Microsoft.Fast.Components.FluentUI;
+
+internal static class BooleanExtensions
+{
+    public static string ToAttributeValue(this bool value) => value ? "true" : "false";
+}