Merge pull request #126 from mmu69/master

Update aria roles for bootstrap 5 menu

Author: JimKerslake

src/cloudscribe.Web.Navigation/Views/Shared/Bootstrap5NavigationNodeChildDropdownPartial.cshtml

@@ -6,7 +6,7 @@
 @inject IStringLocalizer<cloudscribe.Web.Navigation.MenuResources> sr
 @if ((Model.TempNode != null) && (await Model.HasVisibleChildren(Model.TempNode)))
 {
-<ul class="dropdown-menu" aria-labelledby="[email protected]">
+<ul role="menu" class="dropdown-menu" aria-labelledby="[email protected]">
     @foreach (var childNode in Model.TempNode.Children) {
         if (!await Model.ShouldAllowView(childNode)) { continue; }
 
@@ -15,12 +15,12 @@
             continue;
         }
         if (!await Model.HasVisibleChildren(childNode)) {
-            <li role="menuitem" class='@Model.GetClass(childNode.Value, "")'><a class="dropdown-item" href="@Url.Content(Model.AdjustUrl(childNode))">@Html.Raw(Model.GetIcon(childNode.Value))@sr[Model.AdjustText(childNode)]</a></li>
+            <li role="none" class='@Model.GetClass(childNode.Value, "")'><a role="menuitem" class="dropdown-item" href="@Url.Content(Model.AdjustUrl(childNode))">@Html.Raw(Model.GetIcon(childNode.Value))@sr[Model.AdjustText(childNode)]</a></li>
         }
         else {
 
-            <li role="menuitem" aria-haspopup="menu" class='@Model.GetClass(childNode.Value, "dropdown ",  "active", true)'>
-                <a class="dropdown-item dropdown-toggle" href="@Url.Content(Model.AdjustUrl(childNode))">@Html.Raw(Model.GetIcon(childNode.Value))@sr[Model.AdjustText(childNode)] </a>
+            <li role="none" class='@Model.GetClass(childNode.Value, "dropdown ",  "active", true)'>
+                    <a role="menuitem" class="dropdown-item dropdown-toggle" aria-haspopup="true" href="@Url.Content(Model.AdjustUrl(childNode))">@Html.Raw(Model.GetIcon(childNode.Value))@sr[Model.AdjustText(childNode)] </a>
                 @Model.UpdateTempNode(childNode) <partial name="Bootstrap5NavigationNodeChildDropdownPartial" model="@Model" />   @* recursion *@
             </li>
         }

src/cloudscribe.Web.Navigation/Views/Shared/Components/Navigation/Bootstrap5TopNavWithDropdowns.cshtml

@@ -9,7 +9,7 @@
 <ul class="navbar-nav me-auto" role="menubar" aria-label="@sr["Top menu"]">
     @if (await Model.ShouldAllowView(Model.RootNode))
     {
-        <li cwn-data-attributes="@Model.RootNode.Value.DataAttributes" class='@Model.GetClass(Model.RootNode.Value, "nav-item")'><a class="nav-link" href="@Url.Content(Model.AdjustUrl(Model.RootNode))">@Html.Raw(Model.GetIcon(Model.RootNode.Value))@sr[Model.AdjustText(Model.RootNode)]</a></li>
+        <li role="none" cwn-data-attributes="@Model.RootNode.Value.DataAttributes" class='@Model.GetClass(Model.RootNode.Value, "nav-item")'><a role="menuitem" class="nav-link" href="@Url.Content(Model.AdjustUrl(Model.RootNode))">@Html.Raw(Model.GetIcon(Model.RootNode.Value))@sr[Model.AdjustText(Model.RootNode)]</a></li>
     }
 
     @if (await Model.HasVisibleChildren(Model.RootNode))
@@ -19,12 +19,12 @@
             if (!await Model.ShouldAllowView(node)) { continue; }
             if (!await Model.HasVisibleChildren(node))
             {
-                <li role="menuitem" class='@Model.GetClass(node.Value, "nav-item")' cwn-data-attributes="@node.Value.DataAttributes"><a class="nav-link" href="@Url.Content(Model.AdjustUrl(node))">@Html.Raw(Model.GetIcon(node.Value))@sr[Model.AdjustText(node)]</a></li>
+                <li role="none" class='@Model.GetClass(node.Value, "nav-item")' cwn-data-attributes="@node.Value.DataAttributes"><a role="menuitem" class="nav-link" href="@Url.Content(Model.AdjustUrl(node))">@Html.Raw(Model.GetIcon(node.Value))@sr[Model.AdjustText(node)]</a></li>
             }
             else
             {
-                <li role="menuitem" aria-haspopup="menu" class='@Model.GetClass(node.Value, "nav-item dropdown",  "active", true)' cwn-data-attributes="@node.Value.DataAttributes">
-                    <a class="nav-link dropdown-toggle" id="[email protected]" aria-haspopup="true" aria-expanded="false" href="@Url.Content(Model.AdjustUrl(node))">@Html.Raw(Model.GetIcon(node.Value))@sr[Model.AdjustText(node)] </a>
+                <li role="none" class='@Model.GetClass(node.Value, "nav-item dropdown",  "active", true)' cwn-data-attributes="@node.Value.DataAttributes">
+                    <a role="menuitem" class="nav-link dropdown-toggle" id="[email protected]" aria-haspopup="true" aria-expanded="false" href="@Url.Content(Model.AdjustUrl(node))">@Html.Raw(Model.GetIcon(node.Value))@sr[Model.AdjustText(node)] </a>
                     @Model.UpdateTempNode(node) <partial name="Bootstrap5NavigationNodeChildDropdownPartial" model="@Model" />
                 </li>
             }