27Tables
This is an example of a table that can be used on the SYx. It can contain many different components. Typically, values displayed in rows are aligned to the left. However, when values in different rows can be compared with each other, they are aligned to the right. This alignment is positioned to the right of the column header label (not including the sorting icon).
| Slot Type | Location | Service Period | Application Window | Applied | |||
|---|---|---|---|---|---|---|---|
| Add organizations to your network to display data. | |||||||
| 1 | Test | Test | Test |
| 2 | Test | Test | Test |
| 3 | Test | Test | Test |
<div class="table-container table-scroll-x">
<div class="js-batch-actions table-actions">
<span class="button button--secondary button--batch disabled">
<span class="choice-toggle">
<input class="js-batch-select__toggle" id="js-batch-select__toggle" type="checkbox">
<label class="choice-toggle__label" for="js-batch-select__toggle">
<span class="show-for-sr">Select All</span>
</label>
</span>
</span>
<button class="button button--secondary js-batch-select__action" type="submit" title="Remove" name="delete" disabled="">
Remove
</button>
</div>
<table class="table">
<thead class="table__head">
<tr class="table__row">
<th class="table__header"></th>
<th class="table__header" aria-selected="false">
<button class="sortable-headers " href="#">
<span class="sortable-headers__titles">
Listing
</span>
<span class="sortable-arrows-container">
<span class="sortable-arrows sortable-arrows--ascending"></span>
<span class="sortable-arrows sortable-arrows--descending"></span>
</span>
</button>
</th>
<th class="table__header header-float-right" aria-selected="false">
<button class="sortable-headers" href="#">
<span class="sortable-headers__titles">
Organization
</span>
<span class="sortable-arrows-container">
<span class="sortable-arrows sortable-arrows--ascending"></span>
<span class="sortable-arrows sortable-arrows--descending"></span>
</span>
</button>
</th>
<th class="table__header header-float-right">Slot Type</th>
<th class="table__header header-float-right">Location</th>
<th class="table__header header-float-right">Service Period</th>
<th class="table__header header-float-right">Application Window</th>
<th class="table__header header-float-right" aria-selected="true">
<a class="sortable-headers sortable-headers--active" href="#">
<span class="sortable-headers__titles">
Applied
</span>
<span class="sortable-arrows-container">
<span class="sortable-arrows sortable-arrows--ascending"></span>
<span class="sortable-arrows sortable-arrows--descending sortable-arrows--active"></span>
</span>
</a>
</th>
</tr>
</thead>
<tbody class="table__body">
<tr class="table__row bg-color-white">
<td class="table__column table__column--empty pl0 pr0" colspan="8">
<a class="link--underline" href="/">Add organizations</a> to your network to display data.
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-container table-scroll-y">
<table class="table">
<thead class="table__head">
<tr class="table__row">
<th class="table__header"></th>
<th class="table__header" aria-selected="false">
<button class="sortable-headers " href="#">
<span class="sortable-headers__titles">
Listing
</span>
<span class="sortable-arrows-container">
<span class="sortable-arrows sortable-arrows--ascending"></span>
<span class="sortable-arrows sortable-arrows--descending"></span>
</span>
</button>
</th>
<th class="table__header header-float-right" aria-selected="false">
<button class="sortable-headers" href="#">
<span class="sortable-headers__titles">
Organization
</span>
<span class="sortable-arrows-container">
<span class="sortable-arrows sortable-arrows--ascending"></span>
<span class="sortable-arrows sortable-arrows--descending"></span>
</span>
</button>
</th>
<th class="table__header header-float-right" aria-selected="false">
<button class="sortable-headers sortable-headers--active" href="#">
<span class="sortable-headers__titles">
Applied
</span>
<span class="sortable-arrows-container">
<span class="sortable-arrows sortable-arrows--ascending"></span>
<span class="sortable-arrows sortable-arrows--descending sortable-arrows--active"></span>
</span>
</button>
</th>
</tr>
</thead>
<tbody class="table__body">
<tr class="table__row">
<td class="table__column">
1
</td>
<td class="table__column">
Test
</td>
<td class="table__column text-align-right">
Test
</td>
<td class="table__column text-align-right">
Test
</td>
</tr>
<tr class="table__row">
<td class="table__column">
2
</td>
<td class="table__column">
Test
</td>
<td class="table__column text-align-right">
Test
</td>
<td class="table__column text-align-right">
Test
</td>
</tr>
<tr class="table__row">
<td class="table__column">
3
</td>
<td class="table__column">
Test
</td>
<td class="table__column text-align-right">
Test
</td>
<td class="table__column text-align-right">
Test
</td>
</tr>
</tbody>
</table>
</div>
27.1Accessibility
For Screen Reader:
- The header text of sortable columns is wrapped in a “button” element.
- To help screen reader users understand the purpose of the buttons in the column header, an off-screen description
of the sort functionality of the buttons is added to the caption text: “Column headers with buttons are sortable.”
(“sr-only”) The Screen Reader user is informed about the currently sorted column and the sorting order.
- The aria-sort=”ascending” attribute is set on the column header of the currently sorted column.
- The aria-sort=”descending” attribute is added to the currently sorted column in descending order.
- The “aria-sort” attribute is removed from the column and set on the newly sorted column when the sorted column is changed.
- The aria-hidden=”true” is added to the sorting icons to remove the character entities used for sort icons from the accessibility tree.
Keyboard:
- The sorted icon changes from the "two arrows pointing up and down" to the "actively sorting icon" (which is represented by "one arrow pointing up").
- Focus indicator is visible on clickable sorting column labels and icons per the design and encompasses both the column label and sort direction icon to make it easier to perceive the focus indicator.
- The cursor is changed to a pointer when hovering over the button or the column label to help people identify it as an interactive element.
- When focusing on the clickable sorting column header, pressing “spacebar” or “enter” activates the sorting or changes the sorting order (when the sorting is selected).
- When the layout width equals 320 CSS pixels, the two-dimensional scrolling of the table is provided, except for an individual table cell which should fit within the size requirement.
- On mobile, the empty state text is wrapped to stay within the window’s boundaries (viewport).