Skip to content
This repository has been archived by the owner on Jul 10, 2024. It is now read-only.

Commit

Permalink
Improve component accessibility with aria attributes (#106) #skip
Browse files Browse the repository at this point in the history
  • Loading branch information
@LeonarddeR
LeonarddeR authored Apr 18, 2020
1 parent 4a518f1 commit 60c070c
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 14 deletions.
18 changes: 13 additions & 5 deletions src/BlazorTable/Components/Pager.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,23 @@
}
@if ((ShowPageNumber || ShowTotalCount))
{
<li class="page-item disabled">
<li aria-hidden="true" class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">&nbsp;</a>
</li>
}

<li class="page-item @(Table.PageNumber == 0 ? "disabled": "")" @onclick="@(() => Table.FirstPage())" title="First"><a class="page-link" href="javascript:;">First</a></li>
<li class="page-item @(Table.PageNumber == 0 ? "disabled": "")" @onclick="@(() => Table.PreviousPage())" title="Previous"><a class="page-link" href="javascript:;">Previous</a></li>
<li class="page-item @(Table.PageNumber + 1 < Table.TotalPages ? "" : "disabled")" @onclick="@(() => Table.NextPage())" title="Next"><a class="page-link" href="javascript:;">Next</a></li>
<li class="page-item @(Table.PageNumber + 1 != Table.TotalPages ? "" : "disabled")" @onclick="@(() => Table.LastPage())" title="Last"><a class="page-link" href="javascript:;">Last</a></li>
<li class="page-item @(Table.PageNumber == 0 ? "disabled": "")" @onclick="@(() => Table.FirstPage())" title="First">
<a class="page-link" href="javascript:;" aria-disabled="@(Table.PageNumber == 0 ? "true": null)">First</a>
</li>
<li class="page-item @(Table.PageNumber == 0 ? "disabled": "")" @onclick="@(() => Table.PreviousPage())" title="Previous">
<a class="page-link" href="javascript:;" aria-disabled="@(Table.PageNumber == 0 ? "true": null)">Previous</a>
</li>
<li class="page-item @(Table.PageNumber + 1 < Table.TotalPages ? "" : "disabled")" @onclick="@(() => Table.NextPage())" title="Next">
<a class="page-link" href="javascript:;" aria-disabled="@(Table.PageNumber + 1 < Table.TotalPages ? null: "true")">Next</a>
</li>
<li class="page-item @(Table.PageNumber + 1 != Table.TotalPages ? "" : "disabled")" @onclick="@(() => Table.LastPage())" title="Last">
<a class="page-link" href="javascript:;" aria-disabled="@(Table.PageNumber + 1 != Table.TotalPages ? null : "true")">Last</a>
</li>
</ul>
</div>
}
23 changes: 14 additions & 9 deletions src/BlazorTable/Components/Table.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@
var columnCount = Columns.Count + (_detailTemplate != null ? 1 : 0);

<div class="table-responsive">
<table class="@TableClass" @attributes="UnknownParameters">
<table aria-readonly="@(IsEditMode ? "false" : "true")" role="grid" class="@TableClass" @attributes="UnknownParameters">
@if (ShowSearchBar)
{
<thead>
<thead role="search">
<tr>
<th colspan="@columnCount"><input type="text" class="form-control form-control-sm float-right" style="width:33%" value="@GlobalSearch" @onchange="@(x => { GlobalSearch = x.Value.ToString(); Update(); })" placeholder="Global Search..." /></th>
</tr>
Expand All @@ -26,12 +26,13 @@
}
@foreach (IColumn<TableItem> column in Columns)
{
<th style="@(!string.IsNullOrEmpty(column.Width) ? $"width:{column.Width};" : "") user-select: none"
<th scope="col" style="@(!string.IsNullOrEmpty(column.Width) ? $"width:{column.Width};" : "") user-select: none"
@ondrop="@(() => HandleDrop(column))"
@ondragstart="@(() => HandleDragStart(column))"
ondragover="event.preventDefault();"
draggable="@(ColumnReorder.ToString())"
@key="column"
aria-sort="@column.AriaSort"
class="@(column.Class)">

<div @onclick="@(() => column.SortBy())">
Expand All @@ -40,15 +41,17 @@
@if (column.SortColumn)
{
if (column.SortDescending)
{<span>&#11014;</span> }
{<span aria-hidden="true">&#11014;</span> }
else
{ <span>&#11015;</span>}
{ <span aria-hidden="true">&#11015;</span>}
}

@if (column.Filterable)
{
<div class="float-right" @onclick="@((x) => column.ToggleFilter())" @onclick:stopPropagation>
<a href="javascript:;" @ref="column.FilterRef" style="text-decoration: none"><span style="@(column.Filter == null ? "opacity: 0.2;" : string.Empty)">&#128269;</span></a>
<a href="javascript:;" @ref="column.FilterRef" aria-expanded="@(column.FilterOpen ? "true" : "false")" style="text-decoration: none" aria-label="@(column.Filter == null ? "unfiltered" : "filtered")">
<span aria-hidden="true" style="@(column.Filter == null ? "opacity: 0.2;" : string.Empty)">&#128269;</span>
</a>
</div>
<CascadingValue Value="column" Name="Column">
<Popover Reference="@column.FilterRef" IsOpen="@column.FilterOpen" Placement="Placement.Bottom" DismissOnNextClick="false">
Expand Down Expand Up @@ -83,13 +86,15 @@

foreach (TableItem item in FilteredItems)
{
<tr @key="item" class="@RowClass(item) @(SelectedItems.Contains(item) ? "table-active" : "")" @onclick="(() => OnRowClickHandler(item))">
<tr @key="item" aria-selected="@(SelectedItems.Contains(item) ? "true" : null)" class="@RowClass(item) @(SelectedItems.Contains(item) ? "table-active" : "")" @onclick="(() => OnRowClickHandler(item))">

@{int locali = i;}
@if (_detailTemplate != null)
{
<td>
<a href="javascript:;" style="text-decoration: none" @onclick="@(() => { detailsViewOpen[locali] = !detailsViewOpen[locali]; StateHasChanged(); })" title="Details View"><span style="">@(detailsViewOpen[locali] ? "➖" : "➕")</span></a>
<a href="javascript:;" style="text-decoration: none" @onclick="@(() => { detailsViewOpen[locali] = !detailsViewOpen[locali]; StateHasChanged(); })" title="Details View" aria-expanded="@(detailsViewOpen[locali] ? "true" : "false")">
<span style="">@(detailsViewOpen[locali] ? "➖" : "➕")</span>
</a>
</td>
}

Expand All @@ -102,7 +107,7 @@
@if (IsEditMode && column.EditTemplate != null)
@column.EditTemplate(item)
else
if (column.Template == null)
if (column.Template == null)
@column.Render(item)
else
@column.Template(item)
Expand Down
5 changes: 5 additions & 0 deletions src/BlazorTable/Interfaces/IColumn.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,11 @@ public interface IColumn<TableItem>
/// </summary>
bool SortDescending { get; set; }

/// <summary>
/// ARIA sort value, if any
/// </summary>
string AriaSort => SortColumn ? (SortDescending ? "descending" : "ascending") : null;

/// <summary>
/// Horizontal alignment
/// </summary>
Expand Down

0 comments on commit 60c070c

Please sign in to comment.