Merge branch 'dev'

microsoft · May 3, 2024 · dbd073b · dbd073b
2 parents 45d0189 + 344544a
commit dbd073b
Show file tree

Hide file tree

Showing 24 changed files with 115 additions and 75 deletions.
diff --git a/WHATSNEW.md b/WHATSNEW.md
@@ -5,6 +5,7 @@
 
 ### Components
 - [AppBar] Allow for omitting Href on AppBarItems and don't show active status when Href is null or not specified ([#1976](https://github.com/microsoft/fluentui-blazor/pull/1976))
+- [Autocomplete] Accessibility: Tab key to go to the Close Button ([#2007](https://github.com/microsoft/fluentui-blazor/pull/2007))
 - [Badge] Do not use a div (block element) in an inline element ([#1921](https://github.com/microsoft/fluentui-blazor/pull/1921))
 - [DataGrid] Add ShowHover parameter and implement row hover effect ([#1939](https://github.com/microsoft/fluentui-blazor/pull/1939))
 - [DataGrid] Apply ItemSize (CSS height) to cells when grid is virtualized.  ([#1936](https://github.com/microsoft/fluentui-blazor/pull/1936))

diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
@@ -3976,6 +3976,9 @@
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentIcon`1.OnClickHandlerAsync(Microsoft.AspNetCore.Components.Web.MouseEventArgs)">
             <summary />
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentIcon`1.OnKeyDownAsync(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs)">
+            <summary />
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentIcon`1.OnParametersSet">
             <summary />
         </member>

diff --git a/examples/Demo/Shared/wwwroot/docs/WhatsNew.md b/examples/Demo/Shared/wwwroot/docs/WhatsNew.md
@@ -5,6 +5,7 @@
 
 ### Components
 - [AppBar] Allow for omitting Href on AppBarItems and don't show active status when Href is null or not specified ([#1976](https://github.com/microsoft/fluentui-blazor/pull/1976))
+- [Autocomplete] Accessibility: Tab key to go to the Close Button ([#2007](https://github.com/microsoft/fluentui-blazor/pull/2007))
 - [Badge] Do not use a div (block element) in an inline element ([#1921](https://github.com/microsoft/fluentui-blazor/pull/1921))
 - [DataGrid] Add ShowHover parameter and implement row hover effect ([#1939](https://github.com/microsoft/fluentui-blazor/pull/1939))
 - [DataGrid] Apply ItemSize (CSS height) to cells when grid is virtualized.  ([#1936](https://github.com/microsoft/fluentui-blazor/pull/1936))

diff --git a/src/Core/Components/Icons/FluentIcon.razor b/src/Core/Components/Icons/FluentIcon.razor
@@ -1,10 +1,11 @@
-@namespace Microsoft.FluentUI.AspNetCore.Components
+@namespace Microsoft.FluentUI.AspNetCore.Components
 @typeparam Icon
 @inherits FluentComponentBase
 
 @if (_icon.Size != IconSize.Custom && _icon.ContainsSVG)
 {
-    <svg id="@Id" slot="@Slot" class="@ClassValue" style="@StyleValue" focusable="false" viewBox="@($"0 0 {((int)_icon.Size)} {((int)_icon.Size)}")" aria-hidden="true" @onclick="@OnClickHandlerAsync" @attributes="@AdditionalAttributes">
+    <svg id="@Id" slot="@Slot" class="@ClassValue" style="@StyleValue" focusable="false" viewBox="@($"0 0 {((int)_icon.Size)} {((int)_icon.Size)}")"
+         aria-hidden="true" @onkeydown="@OnKeyDownAsync" @onclick="@OnClickHandlerAsync" @attributes="@AdditionalAttributes">
         @if (!string.IsNullOrEmpty(Title))
         {
             <title>@Title</title>
@@ -14,5 +15,6 @@
 }
 else
 {
-    <div id="@Id" slot="@Slot" class="@ClassValue" style="@StyleValue" title="@Title" @attributes="@AdditionalAttributes" @onclick="@OnClickHandlerAsync">@((MarkupString)@_icon.Content)</div>
-}
+    <div id="@Id" slot="@Slot" class="@ClassValue" style="@StyleValue" title="@Title"
+         @attributes="@AdditionalAttributes" @onkeydown="@OnKeyDownAsync" @onclick="@OnClickHandlerAsync">@((MarkupString)@_icon.Content)</div>
+}
diff --git a/src/Core/Components/Icons/FluentIcon.razor.cs b/src/Core/Components/Icons/FluentIcon.razor.cs
@@ -86,6 +86,20 @@ protected virtual Task OnClickHandlerAsync(MouseEventArgs e)
         return Task.CompletedTask;
     }
 
+    /// <summary />
+    protected virtual Task OnKeyDownAsync(KeyboardEventArgs e)
+    {
+        if (OnClick.HasDelegate)
+        {
+            if (e.Key == "Enter" || e.Key == "NumpadEnter")
+            {
+                return OnClickHandlerAsync(new MouseEventArgs());
+            }
+        }
+
+        return Task.CompletedTask;
+    }
+
     /// <summary />
     protected override void OnParametersSet()
     {

diff --git a/src/Core/Components/List/FluentAutocomplete.razor b/src/Core/Components/List/FluentAutocomplete.razor
@@ -6,7 +6,7 @@
     <div class="@ClassValue fluent-autocomplete-multiselect"
          style="@StyleValue">
         <FluentInputLabel ForId="@Id" Label="@Label" AriaLabel="@GetAriaLabel()" ChildContent="@LabelTemplate" Required="@Required" />
-        <FluentKeyCode Anchor="@Id" OnKeyDown="@KeyDownHandlerAsync" Only="@CatchOnly" StopPropagation="true" PreventDefaultOnly="@PreventOnly" />
+        <FluentKeyCode Anchor="@Id" OnKeyDown="@KeyDownHandlerAsync" Only="@CatchOnly" PreventDefaultOnly="@PreventOnly" />
 
         <FluentTextField role="combobox"
                          @ref="@Element"
@@ -76,6 +76,8 @@
                                     Style="cursor: pointer;"
                                     Slot="end"
                                     Title="Clear"
+                                    tabindex="0"
+                                    role="button"
                                     OnClick="@OnClearAsync" />
                     }
                 }
@@ -88,6 +90,8 @@
                                     Style="cursor: pointer;"
                                     Slot="end"
                                     Title="Search"
+                                    tabindex="0"
+                                    role="button"
                                     OnClick="@OnDropDownExpandedAsync" />
                     }
                 }

diff --git a/src/Core/Components/List/FluentAutocomplete.razor.cs b/src/Core/Components/List/FluentAutocomplete.razor.cs
@@ -467,6 +467,11 @@ protected async Task OnClearAsync()
         ValueText = string.Empty;
         await ValueTextChanged.InvokeAsync(ValueText);
         await RaiseChangedEventsAsync();
+
+        if (Module != null)
+        {
+            await Module.InvokeVoidAsync("focusOn", Id);
+        }
     }
 
     /// <summary />

diff --git a/src/Core/Components/List/FluentAutocomplete.razor.js b/src/Core/Components/List/FluentAutocomplete.razor.js
@@ -1,4 +1,4 @@
-export function displayLastSelectedItem(id) {
+export function displayLastSelectedItem(id) {
     var item = document.getElementById(id);
     var scroll = document.getElementById(id + "-scroll");
     if (!!item && !!scroll) {
@@ -15,4 +15,14 @@
             console.warn("fluent-horizontal-scroll.scrollToNext fails.");
         }
     }
-}
+}
+
+export function focusOn(id) {
+    var item = document.getElementById(id);
+    if (!!item) {
+        // Delay to let the UI refresh the control
+        setTimeout(function () {
+            item.focus();
+        }, 200);
+    }
+}
diff --git a/tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_AutofocusAttribute.verified.html b/tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_AutofocusAttribute.verified.html
@@ -1,7 +1,7 @@
 
 <div class=" fluent-autocomplete-multiselect" style="width: 100%;" b-hg72r5b4ox="">
   <fluent-text-field style="width: 100%; min-width: 100%;" autofocus="" placeholder="" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="false" aria-controls="" blazor:onclick="2" blazor:oninput="3" blazor:onfocusout="4" blazor:elementreference="xxx">
-    <svg slot="end" style="width: 16px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" blazor:onclick="5">
+    <svg slot="end" style="width: 16px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" blazor:onkeydown="5" blazor:onclick="6" tabindex="0" role="button">
       <title>Search</title>
       <path d="M9.1 10.17a4.5 4.5 0 1 1 1.06-1.06l3.62 3.61a.75.75 0 1 1-1.06 1.06l-3.61-3.61Zm.4-3.67a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z"></path>
     </svg>

diff --git a/tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_Empty.verified.html b/tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_Empty.verified.html
@@ -1,7 +1,7 @@
 
 <div class=" fluent-autocomplete-multiselect" style="width: 100%;" b-hg72r5b4ox="">
   <fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="false" aria-controls="" blazor:onclick="2" blazor:oninput="3" blazor:onfocusout="4" blazor:elementreference="xxx">
-    <svg slot="end" style="width: 16px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" blazor:onclick="5">
+    <svg slot="end" style="width: 16px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" blazor:onkeydown="5" blazor:onclick="6" tabindex="0" role="button">
       <title>Search</title>
       <path d="M9.1 10.17a4.5 4.5 0 1 1 1.06-1.06l3.62 3.61a.75.75 0 1 1-1.06 1.06l-3.61-3.61Zm.4-3.67a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z"></path>
     </svg>

diff --git a/tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_Keyboard-ArrowDown.verified.html b/tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_Keyboard-ArrowDown.verified.html
@@ -5,32 +5,32 @@
       <fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" b-hg72r5b4ox=""></fluent-flipper>
       <fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToNext();" slot="next-flipper" aria-hidden="false" aria-label="Next" title="Next" role="button" tabindex="0" class="next fluent-autocomplete-next" direction="next" b-hg72r5b4ox=""></fluent-flipper>
       <fluent-badge id="xxx" appearance="neutral" blazor:onclick="5" aria-label="Customer { Id = 1, Name = Denis Voituron }" blazor:elementreference="">
-        <span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">Customer { Id = 1, Name = Denis Voituron }<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="8">
+        <span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">Customer { Id = 1, Name = Denis Voituron }<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="9" blazor:onclick="10">
             <path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
           </svg>
         </span>
       </fluent-badge>
       <fluent-badge id="xxx" appearance="neutral" blazor:onclick="6" aria-label="Customer { Id = 2, Name = Vincent Baaij }" blazor:elementreference="">
-        <span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">Customer { Id = 2, Name = Vincent Baaij }<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="9">
+        <span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">Customer { Id = 2, Name = Vincent Baaij }<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="11" blazor:onclick="12">
             <path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
           </svg>
         </span>
       </fluent-badge>
     </fluent-horizontal-scroll>
-    <svg slot="end" style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" blazor:onclick="7">
+    <svg slot="end" style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" blazor:onkeydown="7" blazor:onclick="8" tabindex="0" role="button">
       <title>Clear</title>
       <path d="m2.59 2.72.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.29l4.65-4.64a.5.5 0 0 1 .7.7L8.71 8l4.64 4.65c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.71l-4.65 4.64a.5.5 0 0 1-.7-.7L7.29 8 2.65 3.35a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
     </svg>
   </fluent-text-field>
-  <div class="fluent-overlay" style="cursor: auto; position: fixed; z-index: 9900;" blazor:onclick="10" blazor:oncontextmenu="11" blazor:oncontextmenu:preventdefault="" b-xkrr7evqik="">
+  <div class="fluent-overlay" style="cursor: auto; position: fixed; z-index: 9900;" blazor:onclick="13" blazor:oncontextmenu="14" blazor:oncontextmenu:preventdefault="" b-xkrr7evqik="">
     <div style="display: flex; align-items:center; justify-content: center; width: 100%; height: 100%" b-xkrr7evqik=""></div>
   </div>
   <fluent-anchored-region anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="right" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="unset" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" b-2ov9fhztky="" blazor:elementreference="xxx">
     <div style="z-index: 9999; background-color: var(--neutral-layer-floating); box-shadow: var(--elevation-shadow-flyout); margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating);" b-2ov9fhztky="">
       <div id="xxx" role="listbox" style="width: 100%;" tabindex="0" b-hg72r5b4ox="">
-        <fluent-option id="xxx" value="Customer { Id = 1, Name = Denis Voituron }" selected="" blazor:onclick="12" selectable="" blazor:elementreference="xxx">Customer { Id = 1, Name = Denis Voituron }</fluent-option>
-        <fluent-option id="xxx" value="Customer { Id = 2, Name = Vincent Baaij }" selected="" blazor:onclick="13" blazor:elementreference="xxx">Customer { Id = 2, Name = Vincent Baaij }</fluent-option>
-        <fluent-option id="xxx" value="Customer { Id = 3, Name = Bill Gates }" blazor:onclick="14" blazor:elementreference="xxx">Customer { Id = 3, Name = Bill Gates }</fluent-option>
+        <fluent-option id="xxx" value="Customer { Id = 1, Name = Denis Voituron }" selected="" blazor:onclick="15" selectable="" blazor:elementreference="xxx">Customer { Id = 1, Name = Denis Voituron }</fluent-option>
+        <fluent-option id="xxx" value="Customer { Id = 2, Name = Vincent Baaij }" selected="" blazor:onclick="16" blazor:elementreference="xxx">Customer { Id = 2, Name = Vincent Baaij }</fluent-option>
+        <fluent-option id="xxx" value="Customer { Id = 3, Name = Bill Gates }" blazor:onclick="17" blazor:elementreference="xxx">Customer { Id = 3, Name = Bill Gates }</fluent-option>
       </div>
     </div>
   </fluent-anchored-region>