Sorting

Indicating sortability and order

Make the header cell th keyboard focusable and register as actionable by adding role="button" tabindex="0" aria-label="Sort by [tablehead]" to it.
On the same element, indicate the current sorting order with aria-sort and the following corresponding values which should also be the toggling order:

none

Sortable column, but not sorted. Both arrows in grey.

ascending

Sorted by this column, values from lowest to highest: 0–9, a–z, yesterday–today. Arrow points up.

descending

Sorted by this column, values from highest to lowest: 9–0, z–a, today–yesterday. Arrow points down.
After the header text, place the sorting-arrows icon. Don’t apply classes, the icon system and CSS will handle the arrow changes and styling according to the sorting order.

Shipment	Recipient	Sent	ID column with a long header
123456789	Burgers and Beauty as	14.06.2016 14.12	afhjek-le897yfd-27792j
456789123	Rent-A-Cat Co.	02.05.2016 11.38	le897dku-27792j-afhjek
987654321	Acme Industries	26.07.2016 12.56	27792j-afhjek-le897zqo

<table class="mb-table">
  <thead>
    <tr>
      <th scope="col" role="button" tabindex="0" aria-sort="ascending" aria-label="Sort by shipment">
        Shipment<span data-mybicon="mybicon-sorting-arrows"></span>
      </th>
      <th scope="col" role="button" tabindex="0" aria-sort="none" aria-label="Sort by recipient">
        Recipient<span data-mybicon="mybicon-sorting-arrows"></span>
      </th>
      <th scope="col" role="button" tabindex="0" aria-sort="none" aria-label="Sort by sent date">
        Sent<span data-mybicon="mybicon-sorting-arrows"></span>
      </th>
      <th scope="col" role="button" tabindex="0" aria-sort="none" aria-label="Sort by ID">
        ID column with a long header<span data-mybicon="mybicon-sorting-arrows"></span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="#">123456789</a></td>
      <td>Burgers and Beauty as</td>
      <td>14.06.2016 14.12</td>
      <td>afhjek-le897yfd-27792j</td>
    </tr>
    <tr>
      <td><a href="#">456789123</a></td>
      <td>Rent-A-Cat Co.</td>
      <td>02.05.2016 11.38</td>
      <td>le897dku-27792j-afhjek</td>
    </tr>
    <tr>
      <td><a href="#">987654321</a></td>
      <td>Acme Industries</td>
      <td>26.07.2016 12.56</td>
      <td>27792j-afhjek-le897zqo</td>
    </tr>
  </tbody>
</table>