[DateTime] Accessibility - Add role, tabindex and catch Enter/Space

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -2833,6 +2833,21 @@
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentTimePicker.TryParseValueFromString(System.String,System.Nullable{System.DateTime}@,System.String@)">
             <summary />
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.KeyDown.SimulateClickAsync(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs,System.Func{Microsoft.AspNetCore.Components.Web.MouseEventArgs,System.Threading.Tasks.Task})">
+            <summary />
+        </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.KeyDown.SimulateClickAsync(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs,System.Func{System.DateTime,System.Boolean,System.Threading.Tasks.Task},System.DateTime,System.Boolean)">
+            <summary />
+        </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.KeyDown.SimulateClickAsync(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs,System.Func{Microsoft.FluentUI.AspNetCore.Components.CalendarTitles,System.Threading.Tasks.Task},Microsoft.FluentUI.AspNetCore.Components.CalendarTitles)">
+            <summary />
+        </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.KeyDown.SimulateClickAsync(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs,System.Func{System.Int32,System.Int32,System.Boolean,System.Threading.Tasks.Task},System.Int32,System.Int32,System.Boolean)">
+            <summary />
+        </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.KeyDown.SimulateClickAsync(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs,System.Func{System.Int32,System.Boolean,System.Threading.Tasks.Task},System.Int32,System.Boolean)">
+            <summary />
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.Components.DateTime.RangeOfDates.#ctor">
             <inheritdoc cref="T:Microsoft.FluentUI.AspNetCore.Components.Utilities.RangeOf`1"/>
         </member>

src/Core/Components/DateTime/FluentCalendar.razor

@@ -2,7 +2,6 @@
 @inherits FluentCalendarBase
 
 <div id="@Id" class="@ClassValue" style="@StyleValue" readonly="@(ReadOnly ? true : null)">
-
     @if (_pickerView == CalendarViews.Days)
     {
         <div>
@@ -13,7 +12,9 @@
             @* Title bar (label, previous and next buttons) *@
             <div class="title" part="title" aria-label="@titles.Label">
                 <div part="label" class="@GetAnimationClass("label")" readonly="@ReadOnly"
-                     @onclick="@(e => TitleClickHandlerAsync(titles))">
+                     role="button" tabindex="0"
+                     @onclick="@(e => TitleClickHandlerAsync(titles))"
+                     @onkeydown="(e => KeyDown.SimulateClickAsync(e, TitleClickHandlerAsync, titles))">
                     @titles.Label
                 </div>
                 <div part="move" class="change-period">
@@ -23,7 +24,8 @@
                     }
                     else
                     {
-                        <div class="previous" title="@titles.PreviousTitle" @onclick="@OnPreviousButtonHandlerAsync">
+                        <div class="previous" title="@titles.PreviousTitle" @onclick="@OnPreviousButtonHandlerAsync"
+                             role="button" tabindex="0" @onkeydown="(e => KeyDown.SimulateClickAsync(e, OnPreviousButtonHandlerAsync))">
                             @((MarkupString)ArrowUp)
                         </div>
                     }
@@ -33,7 +35,8 @@
                     }
                     else
                     {
-                        <div class="next" title="@titles.NextTitle" @onclick="@OnNextButtonHandlerAsync">
+                        <div class="next" title="@titles.NextTitle" @onclick="@OnNextButtonHandlerAsync"
+                             role="button" tabindex="0" @onkeydown="(e => KeyDown.SimulateClickAsync(e, OnNextButtonHandlerAsync))">
                             @((MarkupString)ArrowDown)
                         </div>
                     }
@@ -69,6 +72,8 @@
 
                                     <div part="day"
                                          class="@GetAnimationClass("day")"
+                                         role="@(dayProperties.IsDisabled || dayProperties.IsInactive ? null : "button")"
+                                         tabindex="@(dayProperties.IsDisabled || dayProperties.IsInactive ? null : 0)"
                                          disabled="@dayProperties.IsDisabled"
                                          inactive="@dayProperties.IsInactive"
                                          today="@dayProperties.IsToday"
@@ -79,6 +84,7 @@
                                          multi-end="@(multipleSelection.IsMultiple && SelectMode == CalendarSelectMode.Range && multipleSelection.Max == day)"
                                          aria-label="@dayProperties.Title"
                                          value="@dayProperties.DayIdentifier"
+                                         @onkeydown="(e => KeyDown.SimulateClickAsync(e, OnSelectDayHandlerAsync, day, dayProperties.IsDisabled || dayProperties.IsInactive))"
                                          @onclick="@(e => OnSelectDayHandlerAsync(day, dayProperties.IsDisabled || dayProperties.IsInactive))"
                                          @onmouseover="@(e => OnSelectDayMouseOverAsync(day, dayProperties.IsDisabled || dayProperties.IsInactive))">
                                         @if (DaysTemplate == null)
@@ -111,6 +117,9 @@
                                  aria-label="@monthProperties.Title"
                                  title="@monthProperties.Title"
                                  value="@monthProperties.MonthIdentifier"
+                                 role="button"
+                                 tabindex="@(monthProperties.IsDisabled || monthProperties.IsReadOnly ? null : 0)"
+                                 @onkeydown="(e => KeyDown.SimulateClickAsync(e, OnSelectMonthHandlerAsync, year, month.Index, monthProperties.IsReadOnly))"
                                  @onclick="@(e => OnSelectMonthHandlerAsync(year, month.Index, monthProperties.IsReadOnly))">
                                 @month.Abbreviated
                             </div>
@@ -132,6 +141,8 @@
                                  aria-label="@year.Year"
                                  title="@year.Year"
                                  value="@yearProperties.YearIdentifier"
+                                 tabindex="@(yearProperties.IsDisabled || yearProperties.IsReadOnly ? null : 0)"
+                                 @onkeydown="(e => KeyDown.SimulateClickAsync(e, OnSelectYearHandlerAsync, year.Year, yearProperties.IsReadOnly))"
                                  @onclick="@(e => OnSelectYearHandlerAsync(year.Year, yearProperties.IsReadOnly))">
                                 @year.Year
                             </div>

src/Core/Components/DateTime/FluentDatePicker.razor

@@ -12,6 +12,7 @@
                  @bind-Value="@CurrentValueAsString"
                  @onclick="@OnCalendarOpenHandlerAsync"
                  @ondblclick="@OnDoubleClickHandlerAsync"
+                 @onkeydown="(e => KeyDown.SimulateClickAsync(e, OnCalendarOpenHandlerAsync))"
                  ReadOnly="@ReadOnly"
                  Disabled="@Disabled"
                  Required="@Required"

src/Core/Components/DateTime/KeyDown.cs

@@ -0,0 +1,61 @@
+using Microsoft.AspNetCore.Components.Web;
+
+namespace Microsoft.FluentUI.AspNetCore.Components;
+
+internal static class KeyDown
+{
+    /// <summary />
+    public static Task SimulateClickAsync(KeyboardEventArgs e, Func<MouseEventArgs, Task> onClickAsync)
+    {
+        if (e.Key == "Enter" || e.Key == " ")
+        {
+            return onClickAsync.Invoke(new MouseEventArgs());
+        }
+
+        return Task.CompletedTask;
+    }
+
+    /// <summary />
+    public static Task SimulateClickAsync(KeyboardEventArgs e, Func<DateTime, bool, Task> onClickAsync, DateTime value, bool dayDisabled)
+    {
+        if (e.Key == "Enter" || e.Key == " ")
+        {
+            return onClickAsync.Invoke(value, dayDisabled);
+        }
+
+        return Task.CompletedTask;
+    }
+
+    /// <summary />
+    public static Task SimulateClickAsync(KeyboardEventArgs e, Func<CalendarTitles, Task> onClickAsync, CalendarTitles title)
+    {
+        if (e.Key == "Enter" || e.Key == " ")
+        {
+            return onClickAsync.Invoke(title);
+        }
+
+        return Task.CompletedTask;
+    }
+
+    /// <summary />
+    public static Task SimulateClickAsync(KeyboardEventArgs e, Func<int, int, bool, Task> onClickAsync, int year, int month, bool isReadOnly)
+    {
+        if (e.Key == "Enter" || e.Key == " ")
+        {
+            return onClickAsync.Invoke(year, month, isReadOnly);
+        }
+
+        return Task.CompletedTask;
+    }
+
+    /// <summary />
+    public static Task SimulateClickAsync(KeyboardEventArgs e, Func<int, bool, Task> onClickAsync, int year, bool isReadOnly)
+    {
+        if (e.Key == "Enter" || e.Key == " ")
+        {
+            return onClickAsync.Invoke(year, isReadOnly);
+        }
+
+        return Task.CompletedTask;
+    }
+}