[AppBar] Apply role requirements (#1871)

* Apply role requirements for AppBar (a11y). Fix #1864 and Aspire #3397 * Fix tests --------- Co-authored-by: Denis Voituron <[email protected]>
microsoft · Apr 17, 2024 · b3ac3cd · b3ac3cd
1 parent 566c696
commit b3ac3cd
Show file tree

Hide file tree

Showing 12 changed files with 108 additions and 114 deletions.
diff --git a/src/Core/Components/AppBar/FluentAppBar.razor b/src/Core/Components/AppBar/FluentAppBar.razor
@@ -2,13 +2,13 @@
 @inherits FluentComponentBase
 
 <CascadingValue Value="this" IsFixed="true">
-    <nav id="@Id" @attributes="AdditionalAttributes" class="@ClassValue" style="@StyleValue" role="list">
+    <nav id="@Id" @attributes="AdditionalAttributes" class="@ClassValue" style="@StyleValue" role="navigation">
         <FluentStack Orientation="Orientation.Vertical" HorizontalAlignment="HorizontalAlignment.Center" VerticalGap="0">
             @ChildContent
             @if (AppsOverflow.Any())
             {
                 <FluentKeyCode Anchor="@($"appbar-more-{Id}")" OnKeyDown="@HandlePopoverKeyDownAsync" />
-                <div id="@($"appbar-more-{Id}")" role="listitem" class="fluent-appbar-item" tabindex="0" fixed title="View more apps" @onclick="@TogglePopoverAsync">
+                <div id="@($"appbar-more-{Id}")" class="fluent-appbar-item" tabindex="0" fixed title="View more apps" @onclick="@TogglePopoverAsync">
                     <FluentStack Orientation="Orientation.Vertical"
                                  HorizontalAlignment="HorizontalAlignment.Center"
                                  VerticalAlignment="VerticalAlignment.Center"

diff --git a/src/Core/Components/AppBar/FluentAppBar.razor.css b/src/Core/Components/AppBar/FluentAppBar.razor.css
@@ -8,7 +8,7 @@
         background-color: var(--neutral-fill-secondary-rest);
     }
 
-::deep a[role="listitem"] {
+::deep a {
     color: inherit;
     text-decoration: none;
     font-size: var(--type-ramp-minus-2-font-size);
@@ -19,7 +19,7 @@
     width: 100%;
 }
 
-::deep a[role="listitem"] .stack-vertical {
+::deep a .stack-vertical {
     padding: calc(var(--design-unit) * 1px) calc(var(--appbar-active-indicator-width) + (var(--design-unit) * 1.5px));
     height: 100%;
 }
@@ -32,7 +32,7 @@
     text-align: center;
 }
 
-::deep .fluent-appbar-item:not(.popover) a[role="listitem"].active::before {
+::deep .fluent-appbar-item:not(.popover) a.active::before {
     content: "";
     position: absolute;
     width: var(--appbar-active-indicator-width);
@@ -44,7 +44,7 @@
     right: unset;
 }
 
-[dir='rtl'] * ::deep .fluent-appbar-item:not(.popover) a[role="listitem"].active::before {
+[dir='rtl'] * ::deep .fluent-appbar-item:not(.popover) a.active::before {
     right: calc(var(--design-unit) * 0.5px);
     left: unset;
 }
@@ -53,9 +53,9 @@
     margin-top: 0 !important;
 }
 
-::deep .fluent-appbar-item[role="listitem"]:hover svg[part="icon-rest"],
-::deep .fluent-appbar-item[role="listitem"]:not(:hover):not(.active) svg[part="icon-active"],
-::deep .fluent-appbar-item[role="listitem"]:not(:hover).active svg[part="icon-rest"],
+::deep .fluent-appbar-item:hover svg[part="icon-rest"],
+::deep .fluent-appbar-item:not(:hover):not(.active) svg[part="icon-active"],
+::deep .fluent-appbar-item:not(:hover).active svg[part="icon-rest"],
 ::deep .fluent-appbar-item[overflow] {
     display: none;
 }
diff --git a/src/Core/Components/AppBar/FluentAppBarItem.razor b/src/Core/Components/AppBar/FluentAppBarItem.razor
@@ -10,7 +10,7 @@
                         Color="Color.Fill"
                         HorizontalPosition="55"
                         VerticalPosition="70">
-        <NavLink role="listitem" href="@Href" Match="Match" @onclick="OnClickHandlerAsync">
+        <NavLink href="@Href" Match="Match" @onclick="OnClickHandlerAsync">
             <FluentStack Orientation="Orientation.Vertical"
                          HorizontalAlignment="HorizontalAlignment.Center"
                          VerticalAlignment="VerticalAlignment.Center"

diff --git a/src/Core/Components/AppBar/FluentAppBarItem.razor.css b/src/Core/Components/AppBar/FluentAppBarItem.razor.css
diff --git a/tests/Core/AppBar/FluentAppBarItemTests.FluentAppBarItem_ChildContent.verified.razor.html b/tests/Core/AppBar/FluentAppBarItemTests.FluentAppBarItem_ChildContent.verified.razor.html
@@ -1,10 +1,10 @@
 
 <div id="xxx" class="fluent-appbar-item" title="My item" b-eakb9mygz6="">
   <div class="fluentui-counterbadge-container" b-v8ui8wcemu="">
-    <a role="listitem" href="/" blazor:onclick="1" class="active" aria-current="page">
+    <a href="/" blazor:onclick="1" class="active" aria-current="page">
       <div class="stack-vertical" style="align-items: center; justify-content: center; column-gap: 10px; row-gap: 0px; width: 100%; height: 100%;" b-0nr62qx0mz="">
         <div>Child content</div>
       </div>
     </a>
   </div>
-</div>
+</div>
diff --git a/tests/Core/AppBar/FluentAppBarItemTests.FluentAppBarItem_Default.verified.razor.html b/tests/Core/AppBar/FluentAppBarItemTests.FluentAppBarItem_Default.verified.razor.html
@@ -1,7 +1,7 @@
 
 <div id="xxx" class="fluent-appbar-item" title="My item" b-eakb9mygz6="">
   <div class="fluentui-counterbadge-container" b-v8ui8wcemu="">
-    <a role="listitem" href="/" blazor:onclick="1" class="active" aria-current="page">
+    <a href="/" blazor:onclick="1" class="active" aria-current="page">
       <div class="stack-vertical" style="align-items: center; justify-content: center; column-gap: 10px; row-gap: 0px; width: 100%; height: 100%;" b-0nr62qx0mz="">
         <svg style="width: 24px; fill: var(--neutral-foreground-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="2" part="icon-rest">
           <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
@@ -13,4 +13,4 @@
       </div>
     </a>
   </div>
-</div>
+</div>
diff --git a/tests/Core/AppBar/FluentAppBarItemTests.FluentAppBarItem_IconActive.verified.razor.html b/tests/Core/AppBar/FluentAppBarItemTests.FluentAppBarItem_IconActive.verified.razor.html
@@ -1,7 +1,7 @@
 
 <div id="xxx" class="fluent-appbar-item" title="My item" b-eakb9mygz6="">
   <div class="fluentui-counterbadge-container" b-v8ui8wcemu="">
-    <a role="listitem" href="/" blazor:onclick="1" class="active" aria-current="page">
+    <a href="/" blazor:onclick="1" class="active" aria-current="page">
       <div class="stack-vertical" style="align-items: center; justify-content: center; column-gap: 10px; row-gap: 0px; width: 100%; height: 100%;" b-0nr62qx0mz="">
         <svg style="width: 24px; fill: var(--neutral-foreground-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="2" part="icon-rest">
           <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
@@ -13,4 +13,4 @@
       </div>
     </a>
   </div>
-</div>
+</div>
diff --git a/tests/Core/AppBar/FluentAppBarItemTests.FluentAppBarItem_NoText.verified.razor.html b/tests/Core/AppBar/FluentAppBarItemTests.FluentAppBarItem_NoText.verified.razor.html
@@ -1,7 +1,7 @@
 
 <div id="xxx" class="fluent-appbar-item" title="" b-eakb9mygz6="">
   <div class="fluentui-counterbadge-container" b-v8ui8wcemu="">
-    <a role="listitem" href="/" blazor:onclick="1" class="active" aria-current="page">
+    <a href="/" blazor:onclick="1" class="active" aria-current="page">
       <div class="stack-vertical" style="align-items: center; justify-content: center; column-gap: 10px; row-gap: 0px; width: 100%; height: 100%;" b-0nr62qx0mz="">
         <svg style="width: 24px; fill: var(--neutral-foreground-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="2" part="icon-rest">
           <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
@@ -13,4 +13,4 @@
       </div>
     </a>
   </div>
-</div>
+</div>
diff --git a/tests/Core/AppBar/FluentAppBarItemTests.FluentAppBarItem_Tooltip.verified.razor.html b/tests/Core/AppBar/FluentAppBarItemTests.FluentAppBarItem_Tooltip.verified.razor.html
@@ -1,7 +1,7 @@
 
 <div id="xxx" class="fluent-appbar-item" title="My item tooltip" b-eakb9mygz6="">
   <div class="fluentui-counterbadge-container" b-v8ui8wcemu="">
-    <a role="listitem" href="/" blazor:onclick="1" class="active" aria-current="page">
+    <a href="/" blazor:onclick="1" class="active" aria-current="page">
       <div class="stack-vertical" style="align-items: center; justify-content: center; column-gap: 10px; row-gap: 0px; width: 100%; height: 100%;" b-0nr62qx0mz="">
         <svg style="width: 24px; fill: var(--neutral-foreground-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="2" part="icon-rest">
           <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
@@ -13,4 +13,4 @@
       </div>
     </a>
   </div>
-</div>
+</div>
diff --git a/tests/Core/AppBar/FluentAppBarTests.FluentAppBar_ChildContent.verified.razor.html b/tests/Core/AppBar/FluentAppBarTests.FluentAppBar_ChildContent.verified.razor.html
@@ -1,6 +1,6 @@
 
-<nav id="xxx" class="nav-menu-container" style="display: flex;" role="list" b-dkkdhxy2t7="">
+<nav id="xxx" class="nav-menu-container" style="display: flex;" role="navigation" b-dkkdhxy2t7="">
   <div class="stack-vertical" style="align-items: center; justify-content: start; column-gap: 10px; row-gap: 0px; width: 100%;" b-0nr62qx0mz="">
     <div>Child content</div>
   </div>
-</nav>
+</nav>
diff --git a/tests/Core/AppBar/FluentAppBarTests.FluentAppBar_NoPopoverSearch.verified.razor.html b/tests/Core/AppBar/FluentAppBarTests.FluentAppBar_NoPopoverSearch.verified.razor.html
@@ -1,45 +1,45 @@
 
-<nav id="xxx" class="nav-menu-container" style="display: flex;" role="list" b-dkkdhxy2t7="">
-  <div class="stack-vertical" style="align-items: center; justify-content: start; column-gap: 10px; row-gap: 0px; width: 100%;" b-0nr62qx0mz="">
-    <div id="xxx" class="fluent-appbar-item" title="My item tooltip" b-eakb9mygz6="">
-      <div class="fluentui-counterbadge-container" b-v8ui8wcemu="">
-        <a role="listitem" href="/" blazor:onclick="1" class="active" aria-current="page">
-          <div class="stack-vertical" style="align-items: center; justify-content: center; column-gap: 10px; row-gap: 0px; width: 100%; height: 100%;" b-0nr62qx0mz="">
-            <svg style="width: 24px; fill: var(--neutral-foreground-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="3" part="icon-rest">
-              <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
-            </svg>
-            <svg style="width: 24px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="4" part="icon-active">
-              <path d="M10.03 3.66a2.25 2.25 0 0 1 3.94 0l7.74 14A2.25 2.25 0 0 1 19.74 21H4.25a2.25 2.25 0 0 1-1.97-3.34l7.75-14ZM13 17a1 1 0 1 0-2 0 1 1 0 0 0 2 0Zm-.26-7.85a.75.75 0 0 0-1.5.1v4.5l.02.1a.75.75 0 0 0 1.49-.1v-4.5l-.01-.1Z"></path>
-            </svg>
-            <div part="label" b-eakb9mygz6="">My item</div>
-          </div>
-        </a>
-      </div>
+<nav id="xxx" class="nav-menu-container" style="display: flex;" role="navigation" b-dkkdhxy2t7="">
+    <div class="stack-vertical" style="align-items: center; justify-content: start; column-gap: 10px; row-gap: 0px; width: 100%;" b-0nr62qx0mz="">
+        <div id="xxx" class="fluent-appbar-item" title="My item tooltip" b-eakb9mygz6="">
+            <div class="fluentui-counterbadge-container" b-v8ui8wcemu="">
+                <a href="/" blazor:onclick="1" class="active" aria-current="page">
+                    <div class="stack-vertical" style="align-items: center; justify-content: center; column-gap: 10px; row-gap: 0px; width: 100%; height: 100%;" b-0nr62qx0mz="">
+                        <svg style="width: 24px; fill: var(--neutral-foreground-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="3" part="icon-rest">
+                            <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+                        </svg>
+                        <svg style="width: 24px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="4" part="icon-active">
+                            <path d="M10.03 3.66a2.25 2.25 0 0 1 3.94 0l7.74 14A2.25 2.25 0 0 1 19.74 21H4.25a2.25 2.25 0 0 1-1.97-3.34l7.75-14ZM13 17a1 1 0 1 0-2 0 1 1 0 0 0 2 0Zm-.26-7.85a.75.75 0 0 0-1.5.1v4.5l.02.1a.75.75 0 0 0 1.49-.1v-4.5l-.01-.1Z"></path>
+                        </svg>
+                        <div part="label" b-eakb9mygz6="">My item</div>
+                    </div>
+                </a>
+            </div>
+        </div>
+        <div id="xxx" class="fluent-appbar-item" title="My item 2 tooltip" b-eakb9mygz6="">
+            <div class="fluentui-counterbadge-container" b-v8ui8wcemu="">
+                <a href="/" blazor:onclick="2" class="active" aria-current="page">
+                    <div class="stack-vertical" style="align-items: center; justify-content: center; column-gap: 10px; row-gap: 0px; width: 100%; height: 100%;" b-0nr62qx0mz="">
+                        <svg style="width: 24px; fill: var(--neutral-foreground-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="5" part="icon-rest">
+                            <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+                        </svg>
+                        <svg style="width: 24px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="6" part="icon-active">
+                            <path d="M10.03 3.66a2.25 2.25 0 0 1 3.94 0l7.74 14A2.25 2.25 0 0 1 19.74 21H4.25a2.25 2.25 0 0 1-1.97-3.34l7.75-14ZM13 17a1 1 0 1 0-2 0 1 1 0 0 0 2 0Zm-.26-7.85a.75.75 0 0 0-1.5.1v4.5l.02.1a.75.75 0 0 0 1.49-.1v-4.5l-.01-.1Z"></path>
+                        </svg>
+                        <div part="label" b-eakb9mygz6="">My item 2</div>
+                    </div>
+                </a>
+            </div>
+        </div>
+        <div id="xxx" class="fluent-appbar-item" tabindex="0" fixed="" title="View more apps" blazor:onclick="7" b-dkkdhxy2t7="">
+            <div class="stack-vertical" style="align-items: center; justify-content: center; column-gap: 10px; row-gap: 0px; width: 100%; width: 100%; --appbar-active-indicator-width: calc(var(--design-unit)* 0.5px); height: 56px;" b-0nr62qx0mz="">
+                <svg style="width: 24px; fill: var(--neutral-foreground-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="8" part="icon-rest">
+                    <path d="M7.75 12a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0Zm6 0a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0ZM18 13.75a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Z"></path>
+                </svg>
+                <svg style="width: 24px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="9" part="icon-active">
+                    <path d="M7.75 12a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0Zm6 0a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0ZM18 13.75a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Z"></path>
+                </svg>
+            </div>
+        </div>
     </div>
-    <div id="xxx" class="fluent-appbar-item" title="My item 2 tooltip" b-eakb9mygz6="">
-      <div class="fluentui-counterbadge-container" b-v8ui8wcemu="">
-        <a role="listitem" href="/" blazor:onclick="2" class="active" aria-current="page">
-          <div class="stack-vertical" style="align-items: center; justify-content: center; column-gap: 10px; row-gap: 0px; width: 100%; height: 100%;" b-0nr62qx0mz="">
-            <svg style="width: 24px; fill: var(--neutral-foreground-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="5" part="icon-rest">
-              <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
-            </svg>
-            <svg style="width: 24px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="6" part="icon-active">
-              <path d="M10.03 3.66a2.25 2.25 0 0 1 3.94 0l7.74 14A2.25 2.25 0 0 1 19.74 21H4.25a2.25 2.25 0 0 1-1.97-3.34l7.75-14ZM13 17a1 1 0 1 0-2 0 1 1 0 0 0 2 0Zm-.26-7.85a.75.75 0 0 0-1.5.1v4.5l.02.1a.75.75 0 0 0 1.49-.1v-4.5l-.01-.1Z"></path>
-            </svg>
-            <div part="label" b-eakb9mygz6="">My item 2</div>
-          </div>
-        </a>
-      </div>
-    </div>
-    <div id="xxx" role="listitem" class="fluent-appbar-item" tabindex="0" fixed="" title="View more apps" blazor:onclick="7" b-dkkdhxy2t7="">
-      <div class="stack-vertical" style="align-items: center; justify-content: center; column-gap: 10px; row-gap: 0px; width: 100%; width: 100%; --appbar-active-indicator-width: calc(var(--design-unit)* 0.5px); height: 56px;" b-0nr62qx0mz="">
-        <svg style="width: 24px; fill: var(--neutral-foreground-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="8" part="icon-rest">
-          <path d="M7.75 12a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0Zm6 0a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0ZM18 13.75a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Z"></path>
-        </svg>
-        <svg style="width: 24px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="9" part="icon-active">
-          <path d="M7.75 12a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0Zm6 0a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0ZM18 13.75a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Z"></path>
-        </svg>
-      </div>
-    </div>
-  </div>
-</nav>
+</nav>