Pagination: fix accessibility with keyboard (#6499)

Author: stsrki

Source/Blazorise.Bulma/Components/PaginationLink.razor

@@ -1,9 +1,9 @@
 @inherits Blazorise.PaginationLink
 @if ( ParentPaginationItemState.Disabled )
 {
-    <a @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" aria-current="@AriaCurrent" disabled @onclick="@ClickHandler" @attributes="@Attributes">@ChildContent</a>
+    <a @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" aria-current="@AriaCurrent" aria-disabled="@AriaDisabled" tabindex="@GetTabIndex()" @onclick="@ClickHandler" @attributes="@Attributes">@ChildContent</a>
 }
 else
 {
-    <a @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" aria-current="@AriaCurrent" @onclick="@ClickHandler" @attributes="@Attributes">@ChildContent</a>
+    <a @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" aria-current="@AriaCurrent" aria-disabled="@AriaDisabled" tabindex="@GetTabIndex()" @onclick="@ClickHandler" @attributes="@Attributes">@ChildContent</a>
 }

Source/Blazorise/Components/Pagination/PaginationLink.razor

@@ -1,3 +1,3 @@
 @namespace Blazorise
 @inherits BaseComponent
-<a @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" aria-current="@AriaCurrent" @onclick="@ClickHandler" @attributes="@Attributes">@ChildContent</a>
+<a @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" aria-current="@AriaCurrent" aria-disabled="@AriaDisabled" tabindex="@GetTabIndex()" @onclick="@ClickHandler" @attributes="@Attributes">@ChildContent</a>

Source/Blazorise/Components/Pagination/PaginationLink.razor.cs

@@ -48,6 +48,13 @@ protected Task ClickHandler( MouseEventArgs eventArgs )
         return Clicked.InvokeAsync( Page );
     }
 
+    /// <summary>
+    /// Gets the tab index for keyboard accessibility.
+    /// </summary>
+    /// <returns>-1 if disabled; otherwise 0.</returns>
+    protected int GetTabIndex()
+        => ParentPaginationItemState.Disabled ? -1 : 0;
+
     #endregion
 
     #region Properties
@@ -62,6 +69,11 @@ protected Task ClickHandler( MouseEventArgs eventArgs )
     /// </summary>
     protected string AriaCurrent => ParentPaginationItemState.Active ? "page" : null;
 
+    /// <summary>
+    /// Gets the aria-disabled attribute value.
+    /// </summary>
+    protected string AriaDisabled => ParentPaginationItemState.Disabled ? "true" : null;
+
     /// <summary>
     /// Occurs when the item link is clicked.
     /// </summary>

Tests/Blazorise.Tests/Components/PaginationComponentTest.cs

@@ -0,0 +1,64 @@
+using Bunit;
+using Microsoft.AspNetCore.Components;
+using Xunit;
+
+namespace Blazorise.Tests.Components;
+
+public class PaginationComponentTest : TestContext
+{
+    public PaginationComponentTest()
+    {
+        Services.AddBlazoriseTests().AddBootstrapProviders().AddEmptyIconProvider().AddTestData();
+    }
+
+    [Fact]
+    public void EnabledPaginationLink_ShouldBeTabbable()
+    {
+        var cut = RenderPaginationLink();
+
+        var link = cut.Find( "a" );
+
+        Assert.Equal( "0", link.GetAttribute( "tabindex" ) );
+        Assert.False( link.HasAttribute( "aria-disabled" ) );
+    }
+
+    [Fact]
+    public void DisabledPaginationLink_ShouldNotBeTabbable()
+    {
+        var cut = RenderPaginationLink( disabled: true );
+
+        var link = cut.Find( "a" );
+
+        Assert.Equal( "-1", link.GetAttribute( "tabindex" ) );
+        Assert.Equal( "true", link.GetAttribute( "aria-disabled" ) );
+    }
+
+    [Fact]
+    public void ActivePaginationLink_ShouldSetAriaCurrent()
+    {
+        var cut = RenderPaginationLink( active: true );
+
+        var link = cut.Find( "a" );
+
+        Assert.Equal( "page", link.GetAttribute( "aria-current" ) );
+    }
+
+    private IRenderedComponent<Pagination> RenderPaginationLink( bool disabled = false, bool active = false )
+    {
+        return RenderComponent<Pagination>( parameters => parameters
+            .AddChildContent( builder =>
+            {
+                builder.OpenComponent<PaginationItem>( 0 );
+                builder.AddAttribute( 1, nameof( PaginationItem.Disabled ), disabled );
+                builder.AddAttribute( 2, nameof( PaginationItem.Active ), active );
+                builder.AddAttribute( 3, nameof( PaginationItem.ChildContent ), (RenderFragment)( childBuilder =>
+                {
+                    childBuilder.OpenComponent<PaginationLink>( 0 );
+                    childBuilder.AddAttribute( 1, nameof( PaginationLink.Page ), "1" );
+                    childBuilder.AddAttribute( 2, nameof( PaginationLink.ChildContent ), (RenderFragment)( contentBuilder => contentBuilder.AddContent( 0, "1" ) ) );
+                    childBuilder.CloseComponent();
+                } ) );
+                builder.CloseComponent();
+            } ) );
+    }
+}