fix(Table): Add keyboard support to table sorting

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.40.0",
+  "version": "4.41.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"

releases.yml

@@ -1,3 +1,9 @@
+- version: 4.41.0
+  features:
+    - component: Table
+      url: /docs/base/tables#sortable-updated
+      status: Updated
+      notes: We've added the table sort button, which enables keyboard-accessible table sorting.
 - version: 4.40.0
   features:
     - component: Logo section

scss/_patterns_table-sortable.scss

@@ -22,9 +22,38 @@
   // stylelint-disable selector-max-type -- table elements can use selector types
   table th {
     &[aria-sort] {
-      align-items: center;
       cursor: pointer;
+      outline-color: $colors--theme--focus;
       white-space: nowrap;
+
+      &:hover,
+      &:focus-visible {
+        color: $colors--theme--link-default;
+      }
+
+      .p-table__sort-button {
+        // "inherit" styles are used to ensure this uses th styles instead of button defaults
+        background: inherit;
+        border: none;
+        color: inherit;
+        display: inline-block;
+        font: inherit;
+        // Cancel the focus outline space to avoid affecting layout
+        margin: -2px -#{$sph--x-small};
+        max-width: 100%;
+        outline-color: inherit;
+        overflow: inherit;
+        // Small spacer for the focus outline
+        padding: 2px $sph--x-small;
+        text-align: inherit;
+        text-decoration: inherit;
+        text-indent: inherit;
+        text-overflow: inherit;
+        text-transform: inherit;
+        text-wrap: inherit;
+        vertical-align: inherit;
+        white-space: inherit;
+      }
     }
 
     &[aria-sort='ascending']::after {
@@ -39,7 +68,6 @@
     }
 
     &[aria-sort]:hover {
-      color: $colors--theme--link-default;
       text-decoration: underline;
     }
   }

templates/docs/base/tables.md

@@ -45,14 +45,27 @@ If any of the cells in a column has an icon, all cells in the same column (inclu
 View example of the base table
 </a></div>
 
-## Sortable
+## Sortable {{ status("updated") }}
 
 Assigning `aria-sort` to `<th>` elements will make given table columns sortable. With javascript toggling between `ascending` and `descending` for the `aria-sort` attribute it will change the chevron icon in that direction.
 
+Sortable header text should be wrapped in a `<button class="p-table__sort-button">`
+to enable sorting by keyboard.
+
 <div class="embedded-example"><a href="/docs/examples/patterns/tables/table-sortable/" class="js-example">
 View example of the table sortable pattern
 </a></div>
 
+<div class="p-notification--information">
+  <div class="p-notification__content">
+    <h5 class="p-notification__title">Sorting via keyboard</h5>
+    <p class="p-notification__message">
+      In Vanilla 4.41.0 we added support for sorting tables with the Enter and Space keys.<br>
+      To enable sorting by keyboard, please wrap your header text in <code>&lt;button class=&quot;p-table__sort-button&quot;&gt;</code>.
+    </p>
+  </div>
+</div>
+
 ## Expanding
 
 Using `.p-table--expanding` in conjunction with the `<table>` element will allow expanding and hidden table cells which take up the full width of the table row element.

templates/docs/examples/patterns/tables/_table-sortable.html

@@ -1,10 +1,10 @@
 <table aria-label="Example of a sortable table">
   <thead>
     <tr>
-      <th aria-sort="none">Status</th>
-      <th aria-sort="none" class="u-align--right">Cores</th>
-      <th aria-sort="none" class="u-align--right">RAM</th>
-      <th aria-sort="none" class="u-align--right">Disks</th>
+      <th aria-sort="none"><button class="p-table__sort-button">Status</button></th>
+      <th aria-sort="none" class="u-align--right"><button class="p-table__sort-button">Cores</button></th>
+      <th aria-sort="none" class="u-align--right"><button class="p-table__sort-button">RAM</button></th>
+      <th aria-sort="none" class="u-align--right"><button class="p-table__sort-button">Disks</button></th>
     </tr>
   </thead>
   <tbody>

templates/docs/examples/patterns/tables/combined.html

@@ -12,5 +12,6 @@
 <section>{% include 'docs/examples/patterns/tables/table-mobile-card.html' %}</section>
 <section>{% include 'docs/examples/patterns/tables/table-overflow.html' %}</section>
 <section>{% include 'docs/examples/patterns/tables/table-sortable.html' %}</section>
+<section>{% include 'docs/examples/patterns/tables/table-sortable-legacy.html' %}</section>
 {% endwith %}
 {% endblock %}

templates/docs/examples/patterns/tables/table-sortable-legacy.html

@@ -0,0 +1,43 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Table / Sortable (legacy){% endblock %}
+
+{% block standalone_css %}patterns_table{% endblock %}
+
+{% block content %}
+
+<table aria-label="Example of a sortable table without keyboard support">
+  <thead>
+    <tr>
+      <th aria-sort="none">Status</th>
+      <th aria-sort="none" class="u-align--right">Cores</th>
+      <th aria-sort="none" class="u-align--right">RAM</th>
+      <th aria-sort="none" class="u-align--right">Disks</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td role="rowheader">Ready</td>
+      <td class="u-align--right">1</td>
+      <td class="u-align--right">1 GiB</td>
+      <td class="u-align--right">2</td>
+    </tr>
+    <tr>
+      <td role="rowheader">Ready</td>
+      <td class="u-align--right">1</td>
+      <td class="u-align--right">1 GiB</td>
+      <td class="u-align--right">2</td>
+    </tr>
+    <tr>
+      <td role="rowheader">Ready</td>
+      <td class="u-align--right">8</td>
+      <td class="u-align--right">3.9 GiB</td>
+      <td class="u-align--right">3</td>
+    </tr>
+  </tbody>
+</table>
+
+
+<script>
+  {% include 'docs/examples/patterns/tables/_script-sorting.js' %}
+</script>
+{% endblock %}