Skip to content

fix(ngx-table): make the sorting table header cell a button to improve accessibility #250

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 9, 2024
Merged

fix(ngx-table): make the sorting table header cell a button to improve accessibility #250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions apps/table-test/src/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,9 @@
<ng-template #headerTmpl> Amount </ng-template>
</ngx-currency-table-cell>

<ngx-date-table-cell column="date">
</ngx-date-table-cell>
<ngx-date-table-cell column="date"> </ngx-date-table-cell>

<ngx-table-cell column="button">
<ngx-table-cell column="button" [sortable]="true" (sort)="sort($event)">
<ng-template #cellTmpl>
<button>Button 1</button>
<button>Button 2</button>
Expand Down
103 changes: 53 additions & 50 deletions libs/table/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,33 +176,35 @@ We can also set the sorting from outside of the table by passing the current sor

As always, this default icon can be overwritten on table level by using the `sortTmpl` template. The implicitly provided prop is the direction of the sorting.

Regardless of the implementation of a sortable column, the custom or default header template will **always be wrapped in a button for accessability purposes**. This button has been stripped of its styling to provide a more coherent look. Unsortable columns will not be wrapped in a button.

```html
<ngx-table
[data]="[{name: 'World', firstName: 'Hello', active: true}, {name: 'Tools', firstName: 'NGX', active:false}]"
[columns]="['active', 'user']">
<ngx-table-cell column="user">
<ng-template #headerTmpl>
User
</ng-template>

<ng-template #cellTmpl let-row="row">
{{row.firstName}} {{row.name}}
</ng-template>
</ngx-table-cell>

<ngx-table-cell column="active" [sortable]="true" (sort)="sortByActiveState($event)">
<ng-template #headerTmpl>
</ng-template>

<ng-template #cellTmpl let-active>
{{active ? 'Active' | 'Not active'}}
</ng-template>
</ngx-table-cell>

<ng-template #sortTmpl let-direction>
<my-custom-sorting-icon [sortDirection]="direction">
<ngx-table
[data]="[{name: 'World', firstName: 'Hello', active: true}, {name: 'Tools', firstName: 'NGX', active:false}]"
[columns]="['active', 'user']">
<ngx-table-cell column="user">
<ng-template #headerTmpl>
User
</ng-template>

<ng-template #cellTmpl let-row="row">
{{row.firstName}} {{row.name}}
</ng-template>
</ngx-table-cell>

<ngx-table-cell column="active" [sortable]="true" (sort)="sortByActiveState($event)">
<ng-template #headerTmpl>
</ng-template>

<ng-template #cellTmpl let-active>
{{active ? 'Active' | 'Not active'}}
</ng-template>
</ngx-table>
</ngx-table-cell>

<ng-template #sortTmpl let-direction>
<my-custom-sorting-icon [sortDirection]="direction">
</ng-template>
</ngx-table>
```

Another built-in common use case provided by the package is selecting rows. The `ngx-table` component functions as a control value accessor, which means any form control can be attached to the table. By setting the `selectable` property to true, the table will automatically display a checkbox at the start of every row, including a checkbox at the top of the headers to provide a select-all behavior.
Expand Down Expand Up @@ -355,31 +357,32 @@ providers: [

By default the `ngx-table` comes with very minimal styling. Several classes have been provided to help with styling specific parts of the table. As the package was built upon the `cdk-table`, all styling rules that apply to that table also apply here. Check out the documentation of the `cdk-table` for more information.

| Class | |
| ------------------------- | --------------------------------------------------------------------------------------------------------------- |
| ngx-table | A class set to the `table` element |
| ngx-table-loading | A class set to the `table` element when the table is displaying a loading template |
| ngx-table-clickable-rows | A class set to the `table` element if a detail row template was provided or the `rowClicked` output was defined |
| ngx-table-hide-rows | A class set to the `table` element if the data array is empty or when the `loading` property is set to true |
| ngx-table-cell | A class added to all cells in the table |
| ngx-table-header-cell | A class added to all header cells in the table |
| ngx-table-row-cel | A class added to all row cells in the table |
| ngx-table-footer-cell | A class added to all footer cells in the table |
| ngx-table-selectable-cell | A class added to all selectable cells in the table |
| ngx-table-sortable-cell | A class added to all sortable header cells in the table |
| ngx-table-sorting-icon | A class added to default sorting icon in the table |
| ngx-table-detail-cell | A class added to the detail row cell in the table |
| ngx-table-row | A class added to rows in the table |
| ngx-table-row-odd | A class added to all odd rows in the table |
| ngx-table-row-even | A class added to all even rows in the table |
| ngx-table-row-selected | A class added to all open rows in the table |
| ngx-table-row-highlight | A class added to all rows in the table that match the provided `highlightKey` property |
| ngx-table-detail-row | A class added to all detail rows in the table |
| ngx-table-detail-row-open | A class added to all open detail rows in the table |
| ngx-table-footer-row | A class added to all footer rows in the table |
| ngx-table-open-state-icon | A class added to default open-row state icon in the table |
| ngx-table-radio | A class used by the default radio button when the rows are selectable and the selectableType is radio |
| ngx-table-checkbox | A class used by the default checkbox when the rows are selectable and the selectableType is checkbox |
| Class | |
| ----------------------------- | --------------------------------------------------------------------------------------------------------------- |
| ngx-table | A class set to the `table` element |
| ngx-table-loading | A class set to the `table` element when the table is displaying a loading template |
| ngx-table-clickable-rows | A class set to the `table` element if a detail row template was provided or the `rowClicked` output was defined |
| ngx-table-hide-rows | A class set to the `table` element if the data array is empty or when the `loading` property is set to true |
| ngx-table-cell | A class added to all cells in the table |
| ngx-table-header-cell | A class added to all header cells in the table |
| ngx-table-row-cel | A class added to all row cells in the table |
| ngx-table-footer-cell | A class added to all footer cells in the table |
| ngx-table-selectable-cell | A class added to all selectable cells in the table |
| ngx-table-sorting-cell-button | A class added to the button that is generated around the content of each sortable cell |
Copy link
Contributor Author

@WHeirstrate WHeirstrate Oct 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I only added this line, the others are formatting for my OCD

| ngx-table-sortable-cell | A class added to all sortable header cells in the table |
| ngx-table-sorting-icon | A class added to default sorting icon in the table |
| ngx-table-detail-cell | A class added to the detail row cell in the table |
| ngx-table-row | A class added to rows in the table |
| ngx-table-row-odd | A class added to all odd rows in the table |
| ngx-table-row-even | A class added to all even rows in the table |
| ngx-table-row-selected | A class added to all open rows in the table |
| ngx-table-row-highlight | A class added to all rows in the table that match the provided `highlightKey` property |
| ngx-table-detail-row | A class added to all detail rows in the table |
| ngx-table-detail-row-open | A class added to all open detail rows in the table |
| ngx-table-footer-row | A class added to all footer rows in the table |
| ngx-table-open-state-icon | A class added to default open-row state icon in the table |
| ngx-table-radio | A class used by the default radio button when the rows are selectable and the selectableType is radio |
| ngx-table-checkbox | A class used by the default checkbox when the rows are selectable and the selectableType is checkbox |

If you wish to provide a custom class to the row of your tables, you can provide the class name to the `rowClass` Input.

Expand Down
2 changes: 1 addition & 1 deletion libs/table/src/lib/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,4 @@ export * from './pipes';
export * from './token';

/** All the necessary ngx-table components */
export const NgxTable = [NgxTableComponent, ...Cells];
export const NgxTable = [NgxTableComponent, ...Cells] as const;
48 changes: 32 additions & 16 deletions libs/table/src/lib/table/ngx-table.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,26 +100,41 @@
| ngxAriaSort
"
[attr.aria-readonly]="!sortableTableCellRecord()[column]"
(click)="handleSort(column)"
>
@if ( tableCellTemplateRecord()[column]?.headerTemplate) {
<!-- Wouter: Check if header is sortable -->
@if( sortableTableCellRecord()[column]; as sortCell) {
<!-- Wouter: If so: wrap button element around content -->
<button (click)="handleSort(column)" class="ngx-table-sorting-cell-button">
@if ( tableCellTemplateRecord()[column]?.headerTemplate) {
<!-- Wouter: Check if a custom template has been provided -->
<ng-template [ngTemplateOutlet]="tableCellTemplateRecord()[column].headerTemplate">
</ng-template>
} @else {
<!-- Wouter: If not: display passed column name -->
{{ column }}
} @if (sortTemplate) {
<!-- Wouter: Check if a custom sorting template has been provided -->
<ng-template
[ngTemplateOutlet]="sortTemplate"
[ngTemplateOutletContext]="{
$implicit: sortCell.sortDirection ? sortCell.sortDirection.toString() : null
}"
>
</ng-template>
} @else {
<i
class="ngx-table-sorting-icon"
[innerHtml]="sortCell.sortDirection | ngxTableSortIcon"
></i>
}
</button>
} @else { @if ( tableCellTemplateRecord()[column]?.headerTemplate) {
<!-- Wouter: Check if a custom template has been provided -->
<ng-template [ngTemplateOutlet]="tableCellTemplateRecord()[column].headerTemplate">
</ng-template>
} @else {
<!-- Wouter: If not: display passed column name -->
{{ column }}
} @if (sortableTableCellRecord()[column]; as sortCell) { @if (sortTemplate) {
<ng-template
[ngTemplateOutlet]="sortTemplate"
[ngTemplateOutletContext]="{
$implicit: sortCell.sortDirection ? sortCell.sortDirection.toString() : null
}"
>
</ng-template>
} @else {
<i
class="ngx-table-sorting-icon"
[innerHtml]="sortCell.sortDirection | ngxTableSortIcon"
></i>
} }
</th>
<td
Expand Down Expand Up @@ -207,7 +222,8 @@
[ngxTreeGridRowSelectable]="selectable"
[ngxTreeGridRowExpanded]="openRows.has(rowIndex)"
[attr.aria-selected]="
rowsFormGroup.get(selectableKey ? '' + data[rowIndex][selectableKey] : '' + rowIndex)?.value
rowsFormGroup.get(selectableKey ? '' + data[rowIndex][selectableKey] : '' + rowIndex)
?.value
"
(ngxTreeGridRowSelectRow)="selectRow(rowIndex)"
(ngxTreeGridRowExpandRow)="handleRowState(rowIndex, $event ? 'open' : 'close')"
Expand Down
12 changes: 12 additions & 0 deletions libs/table/src/lib/table/ngx-table.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,18 @@
.ngx-table-sortable-cell {
cursor: pointer;

.ngx-table-sorting-cell-button {
width: 100%;
height: 100%;
padding: 0;

font-weight: inherit;

background-color: transparent;

border: none;
}

.ngx-table-sorting-icon {
font-style: normal;
}
Expand Down