Skip to content

Commit

Permalink
Add role, tabindex and simulate the Enter/Space like a Click (#2688)
Browse files Browse the repository at this point in the history
  • Loading branch information
dvoituron authored Sep 19, 2024
1 parent 7fa0471 commit 2b62ec4
Show file tree
Hide file tree
Showing 16 changed files with 400 additions and 310 deletions.
15 changes: 15 additions & 0 deletions examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
19 changes: 15 additions & 4 deletions src/Core/Components/DateTime/FluentCalendar.razor
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
@inherits FluentCalendarBase

<div id="@Id" class="@ClassValue" style="@StyleValue" readonly="@(ReadOnly ? true : null)">

@if (_pickerView == CalendarViews.Days)
{
<div>
Expand All @@ -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">
Expand All @@ -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>
}
Expand All @@ -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>
}
Expand Down Expand Up @@ -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"
Expand All @@ -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)
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
1 change: 1 addition & 0 deletions src/Core/Components/DateTime/FluentDatePicker.razor
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
@bind-Value="@CurrentValueAsString"
@onclick="@OnCalendarOpenHandlerAsync"
@ondblclick="@OnDoubleClickHandlerAsync"
@onkeydown="(e => KeyDown.SimulateClickAsync(e, OnCalendarOpenHandlerAsync))"
ReadOnly="@ReadOnly"
Disabled="@Disabled"
Required="@Required"
Expand Down
61 changes: 61 additions & 0 deletions src/Core/Components/DateTime/KeyDown.cs
Original file line number Diff line number Diff line change
@@ -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;
}
}
Loading

0 comments on commit 2b62ec4

Please sign in to comment.