Add KeyboardNavigation & Aria Labels

Author: mckaragoz

CodeBeam.MudBlazor.Extensions/Components/StepperExtended/MudStepExtended.razor.cs

@@ -143,7 +143,6 @@ private bool ShouldBeHidden()
             if (showingResult || showingIntro)
                 return true;
 
-            // Normal step görünürlüğü
             bool isActive = MudStepperExtended.ActiveIndex < MudStepperExtended.Steps.Count &&
                             MudStepperExtended.Steps[MudStepperExtended.ActiveIndex] == this;
 

CodeBeam.MudBlazor.Extensions/Components/StepperExtended/MudStepperExtended.razor

@@ -10,7 +10,7 @@
 <CascadingValue Value="this" IsFixed="true">
     <MudStack Class="@Classname" Style="@Style">
         <MudStack Class="mud-stepper-header-content-wrapper-extended" Row="@Vertical">
-            <div class="mud-stepper-inner-header-extended [email protected] @(Vertical ? "vertical" : "horizontal")">
+            <div class="mud-stepper-inner-header-extended [email protected] @(Vertical ? "vertical" : "horizontal")" role="list">
                 <div class="@(Vertical ? "mud-stepper-sub-inner-header-vertical-extended" : "mud-stepper-sub-inner-header-extended")">
                     @{
                         MudStepExtended? currentStep = null;
@@ -27,7 +27,7 @@
                         }
 
                         <div class="mud-stepper-step [email protected] @(Vertical ? "vertical" : "horizontal") @(Vertical ? "d-flex" : "")">
-                            <div @onclick="@(Linear ? null! : () => GoToStepByReferenceAsync(step))" class="@HeaderClassname">
+                            <div @onclick="@(Linear ? null! : () => GoToStepByReferenceAsync(step))" class="@HeaderClassname" role="button" tabindex="@(Linear ? -1 : 0)" @onkeydown="(args) => HandleHeaderKeyDown(args, step)">
                                 @{
                                     bool active = IsStepActive(step);
                                 }
@@ -77,8 +77,8 @@
                 {
                     <MudText Class="@(Vertical ? "mud-stepper-text-mobile-vertical-extended" : "mud-stepper-text-mobile-extended")" Typo="Typo.body2" Color="@Color">@GetMobileStepPositionText()</MudText>
                 }
-                <MudProgressLinear Class="@ProgressClassname" Vertical="@Vertical" Color="@Color" Value="@ProgressValue" Min="0" Max="100" />
-
+                <MudProgressLinear Class="@ProgressClassname" Vertical="@Vertical" Color="@Color" Value="@ProgressValue" Min="0" Max="100"
+                                   role="progressbar" aria-valuenow="@ProgressValue" aria-valuemin="0" aria-valuemax="100" />
             </div>
             @if (Loading)
             {

CodeBeam.MudBlazor.Extensions/Components/StepperExtended/MudStepperExtended.razor.cs

@@ -2,6 +2,7 @@
 using Microsoft.AspNetCore.Components;
 using MudBlazor;
 using MudBlazor.Utilities;
+using Microsoft.AspNetCore.Components.Web;
 
 namespace MudExtensions
 {
@@ -282,7 +283,7 @@ protected void UpdateProgressValue()
         /// </summary>
         [Parameter]
         public Variant Variant { get; set; }
-        
+
         /// <summary>
         /// Choose header badge view. Default is all.
         /// </summary>
@@ -340,7 +341,7 @@ protected void UpdateProgressValue()
         /// </summary>
         [Parameter]
         public Func<StepChangeDirection, int, Task<bool>>? PreventStepChangeAsync { get; set; }
-        
+
         /// <summary>
         /// Gets or sets a delegate that is invoked asynchronously before the finishing action occurs. The delegate
         /// should return a task that resolves to <see langword="true"/> to allow the action to proceed, or <see
@@ -1017,7 +1018,7 @@ public void ForceRender()
         /// disabled.</param>
         protected void OnBreakpointChanged(Breakpoint breakpoint)
         {
-            if (MobileBreakpoint.HasValue && breakpoint <= MobileBreakpoint )
+            if (MobileBreakpoint.HasValue && breakpoint <= MobileBreakpoint)
             {
                 MobileView = true;
             }
@@ -1028,5 +1029,18 @@ protected void OnBreakpointChanged(Breakpoint breakpoint)
             StateHasChanged();
         }
 
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="args"></param>
+        /// <param name="step"></param>
+        protected async Task HandleHeaderKeyDown(KeyboardEventArgs args, MudStepExtended step)
+        {
+            if (args.Key == "Enter" || args.Key == "NumpadEnter")
+            {
+                await GoToStepByReferenceAsync(step);
+            }
+        }
+
     }
 }