@autobusal/common 1.33.7 → 1.33.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.33.8
+
+### Added
+
+- **`Table` headers can sort.** A header cell now takes an optional sort key and direction and renders as a control when it does, so a table backed by a paginated, server-sorted endpoint can drive it from the header rather than a separate control. Tables that pass no sort key are untouched and render exactly as before.
+
 ## 1.33.7
 
 ### Changed

package/Table/Header/Header.tsx

@@ -17,7 +17,7 @@ const Header = ({ url, data, sorting, t, actions }: Props): JSX.Element => {
   const params = getUrl();
 
   const columns = data.map((item, index) => (
-    <Td key={ index } $width={ item.width }>
+    <Td key={ index } scope="col" $width={ item.width }>
       <Column>
         { item.slug
           ? <Sort item={ item } url={ url } params={ params } sorting={ sorting } />
@@ -33,7 +33,7 @@ const Header = ({ url, data, sorting, t, actions }: Props): JSX.Element => {
         { columns }
 
         { rowActions(actions).length > 0 && (
-          <Td $width={ 10 }>
+          <Td scope="col" $width={ 10 }>
             <Column>
               <Text>{ t('table.options', { ns: 'common' }) }</Text>
             </Column>

package/Table/Header/styles.ts

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 export const Container = styled.thead`
   background: ${ props => props.theme.background.neutral };
 
-  & > tr > td:first-of-type > div {
+  & > tr > th:first-of-type > div {
     justify-content: left;
   }
 `;
@@ -13,7 +13,18 @@ interface TdData {
   $width?: number
 }
 
-export const Td = styled.td<TdData>`
+/**
+ * Edited: Claude - Date: 2026-08-20
+ *
+ * A <th>, not a <td>. Every table on the platform announced its column
+ * headings as ordinary cells, so a screen reader reading down a data table
+ * had nothing to say which column a value belonged to - the one piece of
+ * structure a data table exists to carry. Purely a markup change: the
+ * heading's own look comes entirely from the Column div inside (its own
+ * font-weight, colour and flex centring), so th's user-agent bold and
+ * centred text change nothing visible.
+ */
+export const Td = styled.th<TdData>`
   ${ props => props.$width && css<TdData>`
     width: ${ props => props.$width }%;
   ` }

package/Table/Table.tsx

@@ -19,6 +19,15 @@ interface Props {
   loading: boolean
   fetching: boolean
   t: TFunction<'common'>
+  /*
+   * Edited: Claude - Date: 2026-08-20
+   * What this table IS, as one short phrase - it becomes the table's
+   * accessible name. A screen reader announcing "table, 6 columns, 15 rows"
+   * with no name is the same table on every screen; with one it is "Occupancy
+   * by departure". Optional, so every existing caller is unchanged (and an
+   * unnamed table is no worse off than it was).
+   */
+  label?: string
   actions?: string[]
   extra?: JSX.Element
   /*
@@ -44,7 +53,7 @@ interface Props {
   onReorder?: (draggedId: number, targetId: number) => void
 }
 
-const Table = ({ url, urlWith, columns, rows, pages, sorting, search, loading, fetching, t, actions, extra, empty, handlers, onReorder }: Props): JSX.Element => {
+const Table = ({ url, urlWith, columns, rows, pages, sorting, search, loading, fetching, t, label, actions, extra, empty, handlers, onReorder }: Props): JSX.Element => {
   const navigate = useNavigate();
 
   const colLength = columns.length + 1;
@@ -63,7 +72,7 @@ const Table = ({ url, urlWith, columns, rows, pages, sorting, search, loading, f
 
       <Content>
         <Inner>
-          <ContainerTable cellPadding={ 0 } cellSpacing={ 0 }>
+          <ContainerTable cellPadding={ 0 } cellSpacing={ 0 } aria-label={ label }>
             <Header
               url={ url }
               data={ columns }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "1.33.7",
+  "version": "1.33.8",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"