@autobusal/common 1.33.7 → 1.33.9

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 1.33.9
+
+### Fixed
+
+- **Every field built through `Viewer` was unnamed.** The label was a `<span>` beside an input with no id, so each one announced as a bare "edit text" and clicking a label did nothing - across every admin and account form in the app, not one screen. `Item` now mints a `useId`-prefixed id for single-control rows and the label is a real `<label htmlFor>`. Additive: no caller changes, and the styled rule set was empty either way.
+
+### Added
+
+- `Table` and `Viewer` take an optional `confirm`, so a destructive action can ask a question specific to what it destroys rather than the generic one. Existing callers keep the generic question.
+
+## 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/Actions/Actions.tsx

@@ -10,11 +10,22 @@ interface Props {
   urlWith?: string
   available?: string[]
   t: TFunction<'common'>
+  /*
+   * Edited: Claude - Date: 2026-08-20
+   * What to ASK before a row is deleted, replacing the generic "are you sure
+   * you want to delete this?". Optional, so every existing table keeps the
+   * question it has always asked - and worth having for the tables where the
+   * generic wording understates what is about to happen: deleting a saved
+   * passenger destroys a stored passport number outright, with no
+   * soft-delete behind it to undo from.
+   */
+  confirm?: string
+
   handlers?: any
   navigate: NavigateFunction
 }
 
-const Actions = ({ id, url, urlWith, available, t, handlers, navigate }: Props): JSX.Element => {
+const Actions = ({ id, url, urlWith, available, t, confirm, handlers, navigate }: Props): JSX.Element => {
   const actions = available?.map((action, index) => (
     <Get
       key={ index }
@@ -23,6 +34,7 @@ const Actions = ({ id, url, urlWith, available, t, handlers, navigate }: Props):
       urlWith={ urlWith }
       type={ action }
       t={ t }
+      confirm={ confirm }
       handlers={ handlers }
       navigate={ navigate }
     />

package/Table/Actions/Get.tsx

@@ -9,11 +9,22 @@ interface Props {
   urlWith?: string
   type: string
   t: TFunction<'common'>
+  /*
+   * Edited: Claude - Date: 2026-08-20
+   * What to ASK before a row is deleted, replacing the generic "are you sure
+   * you want to delete this?". Optional, so every existing table keeps the
+   * question it has always asked - and worth having for the tables where the
+   * generic wording understates what is about to happen: deleting a saved
+   * passenger destroys a stored passport number outright, with no
+   * soft-delete behind it to undo from.
+   */
+  confirm?: string
+
   handlers?: any
   navigate: NavigateFunction
 }
 
-const Get = ({ id, url, urlWith, type, t, handlers, navigate }: Props): (JSX.Element | null) => {
+const Get = ({ id, url, urlWith, type, t, confirm, handlers, navigate }: Props): (JSX.Element | null) => {
   // Edited: Ferjolt Ozuni - Date: 2026-08-02
   // 'extra' belongs with 'create' and 'search': all three are TOP-of-table
   // slots, not per-row actions. Without it here, any table that opts into
@@ -27,7 +38,7 @@ const Get = ({ id, url, urlWith, type, t, handlers, navigate }: Props): (JSX.Ele
 
   const onAskDeletion = (): void => {
     // ask for the deletion of the object
-    if (window.confirm(t('table.confirm', { ns: 'common' }))) {
+    if (window.confirm(confirm ?? t('table.confirm', { ns: 'common' }))) {
       handlers.delete(id);
     }
   };

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/Rows/Rows.tsx

@@ -17,12 +17,13 @@ interface Props {
   empty?: string
   t: TFunction<'common'>
   actions?: string[]
+  confirm?: string
   handlers?: any
   navigate: NavigateFunction
   onReorder?: (draggedId: number, targetId: number) => void
 }
 
-const Rows = ({ url, urlWith, data, loading, fetching, colLength, empty, t, actions, handlers, navigate, onReorder }: Props): JSX.Element => {
+const Rows = ({ url, urlWith, data, loading, fetching, colLength, empty, t, actions, confirm, handlers, navigate, onReorder }: Props): JSX.Element => {
   const [ draggedId, setDraggedId ] = useState<number | null>(null);
   if (loading) {
     return <Loading length={ colLength } t={ t } />;
@@ -77,6 +78,7 @@ const Rows = ({ url, urlWith, data, loading, fetching, colLength, empty, t, acti
           urlWith={ urlWith }
           available={ available }
           t={ t }
+          confirm={ confirm }
           handlers={ handlers }
           navigate={ navigate }
         />

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
   /*
@@ -32,6 +41,16 @@ interface Props {
    * Optional: a table that does not pass one keeps the generic message.
    */
   empty?: string
+  /*
+   * Edited: Claude - Date: 2026-08-20
+   * What to ASK before a row is deleted, replacing the generic "are you sure
+   * you want to delete this?". Optional, so every existing table keeps the
+   * question it has always asked - and worth having for the tables where the
+   * generic wording understates what is about to happen: deleting a saved
+   * passenger destroys a stored passport number outright, with no
+   * soft-delete behind it to undo from.
+   */
+  confirm?: string
   handlers?: any
   /*
    * Edited: Ferjolt Ozuni - Date: 2026-08-10
@@ -44,7 +63,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, confirm, handlers, onReorder }: Props): JSX.Element => {
   const navigate = useNavigate();
 
   const colLength = columns.length + 1;
@@ -63,7 +82,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 }
@@ -82,6 +101,7 @@ const Table = ({ url, urlWith, columns, rows, pages, sorting, search, loading, f
               empty={ empty }
               t={ t }
               actions={ actions }
+              confirm={ confirm }
               handlers={ handlers }
               navigate={ navigate }
               onReorder={ onReorder }

package/Viewer/Actions.tsx

@@ -10,15 +10,17 @@ interface Props {
   id: number
   available: string[]
   pending?: boolean
+  /* Edited: Claude - Date: 2026-08-20: see Viewer's own prop */
+  confirm?: string
   t: TFunction<'common'>
   onDelete?: () => void
 }
 
-const Actions = ({ id, available, pending, t, onDelete }: Props): JSX.Element => {
+const Actions = ({ id, available, pending, confirm, t, onDelete }: Props): JSX.Element => {
   const options: ActionData[] = [];
 
   const onAskDelete = (): void => {
-    if (window.confirm(t('table.confirm', { ns: 'common' }))) {
+    if (window.confirm(confirm ?? t('table.confirm', { ns: 'common' }))) {
       if (onDelete) {
         onDelete();
       }

package/Viewer/Data.tsx

@@ -14,13 +14,20 @@ import { ViewData } from './types';
 
 interface Props {
   id: number
+  /**
+   * Edited: Claude - Date: 2026-08-20
+   * The DOM id of this row's control, so the visible label above it can
+   * point at it (see Item.tsx). Undefined for the row types that are not a
+   * single control - those inputs are unchanged.
+   */
+  field?: string
   item: ViewData
   refs: UseFormRegister<any>
   t: TFunction<'common'>
   onUpdate: UseFormSetValue<any>
 }
 
-const Data = ({ id, item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
+const Data = ({ id, field, item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
   // Edited: Ferjolt Ozuni - Date: 2026-08-08
   // A 'component' row is not a registered form field - it never had a
   // name to give, and the name-required guard below (meant to stop every
@@ -66,6 +73,7 @@ const Data = ({ id, item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
       return (
         <input
           type="checkbox"
+          id={ field }
           value={ 1 }
           defaultChecked={ Number(item.value) === 1 }
           { ...refs(item.name, {
@@ -98,6 +106,7 @@ const Data = ({ id, item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
         <Calendar
           type={ item.type }
           name={ item.name }
+          id={ field }
           defaultValue={ value.string }
           t={ t }
           validation={ item.rules }
@@ -116,7 +125,7 @@ const Data = ({ id, item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
       return <DatePicker item={ item } t={ t } refs={ refs } onUpdate={ onUpdate } />;
 
     case 'email':
-      return <input type="email" defaultValue={ value.string } { ...refs(item.name, Validate(String(item.rules), t)) } />;
+      return <input type="email" id={ field } defaultValue={ value.string } { ...refs(item.name, Validate(String(item.rules), t)) } />;
 
     case 'file':
     case 'files':
@@ -132,7 +141,7 @@ const Data = ({ id, item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
       );
 
     case 'float':
-      return <input type="number" defaultValue={ value.number } { ...refs(item.name, Validate(String(item.rules), t)) } step="0.01" />;
+      return <input type="number" id={ field } defaultValue={ value.number } { ...refs(item.name, Validate(String(item.rules), t)) } step="0.01" />;
 
     case 'link':
       // The function-value variant only ever arrives on a 'component' row -
@@ -140,19 +149,19 @@ const Data = ({ id, item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
       return <Linked id={ id } value={ item.value as (string | number | JSX.Element | undefined) } url={ item.url } />;
 
     case 'number':
-      return <input type="number" defaultValue={ value.number } { ...refs(item.name, Validate(String(item.rules), t)) } />
+      return <input type="number" id={ field } defaultValue={ value.number } { ...refs(item.name, Validate(String(item.rules), t)) } />
 
     case 'password':
-      return <Password name={ item.name } validation={ item.rules } defaultValue={ value.string } t={ t } refs={ refs } />;
+      return <Password name={ item.name } id={ field } validation={ item.rules } defaultValue={ value.string } t={ t } refs={ refs } />;
 
     case 'select':
-      return <Dropdown item={ item } refs={ refs } t={ t } />;
+      return <Dropdown item={ item } field={ field } refs={ refs } t={ t } />;
 
     case 'text':
-      return <input type="text" defaultValue={ value.string } { ...refs(item.name, Validate(String(item.rules), t)) } />;
+      return <input type="text" id={ field } defaultValue={ value.string } { ...refs(item.name, Validate(String(item.rules), t)) } />;
 
     case 'textarea':
-      return <textarea defaultValue={ value.string } { ...refs(item.name, Validate(String(item.rules), t)) }></textarea>;
+      return <textarea id={ field } defaultValue={ value.string } { ...refs(item.name, Validate(String(item.rules), t)) }></textarea>;
 
     case 'textarea-html':
       return (

package/Viewer/Item.tsx

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { FieldErrors, UseFormRegister, UseFormSetValue } from 'react-hook-form';
 import { Display } from '@autobusal/utilities';
 import Data from './Data';
@@ -14,8 +15,46 @@ interface Props {
   onUpdate: UseFormSetValue<any>
 }
 
-const Item = ({ id, data, refs, t, errors, onUpdate }: Props): JSX.Element => (
-  <div className={ `row row-${ data.type } ${ data.label === undefined && 'spacer' }` }>
+/**
+ * The row types that ARE exactly one control, and can therefore be pointed
+ * at by a label.
+ *
+ * Edited: Claude - Date: 2026-08-20
+ *
+ * Everything else in this switch is either not a control at all ('display',
+ * 'link', 'component') or is several of them ('checkbox-list', 'files') -
+ * and `htmlFor` naming one arbitrary member of a group is worse than no
+ * association, because it reads as a promise that the group has a name.
+ * Those rows keep the label they had; this list is the set that gains one.
+ */
+const SINGLE = [ 'text', 'email', 'password', 'number', 'float', 'textarea', 'select', 'date', 'dob', 'picker', 'checkbox' ];
+
+/**
+ * Edited: Claude - Date: 2026-08-20
+ *
+ * EVERY FIELD IN THIS FORM WAS UNNAMED. The label was a <span> beside an
+ * <input> with no id, so the two were adjacent and nothing more: a screen
+ * reader announced the whole of any admin or account form as a run of
+ * anonymous "edit text", and clicking a label did nothing. Fixed here, once,
+ * rather than in each of the dozens of screens that build their fields
+ * through this component.
+ *
+ * The id comes from useId and is therefore page-unique. The field NAME would
+ * have been the obvious thing to use and is the wrong thing: names belong to
+ * the form payload and repeat across forms ('email' is a field on three
+ * screens), while ids are page-global - two forms on one page would emit
+ * duplicate ids, which is its own defect. This is the same rule
+ * @autobusal/routes-order's passenger block and @autobusal/auth follow.
+ */
+const Item = ({ id, data, refs, t, errors, onUpdate }: Props): JSX.Element => {
+  const uid = useId();
+
+  const field = data.type !== undefined && SINGLE.includes(data.type) && data.name !== undefined
+    ? `${ uid }${ data.name }`
+    : undefined;
+
+  return (
+    <div className={ `row row-${ data.type } ${ data.label === undefined && 'spacer' }` }>
     {/*
       * Edited: Ferjolt Ozuni - Date: 2026-08-07
       *
@@ -31,26 +70,28 @@ const Item = ({ id, data, refs, t, errors, onUpdate }: Props): JSX.Element => (
       * spacer, and an empty element there would take a flex slot and open a
       * gap where the divider should be.
       */}
-    { data.label !== undefined && (
-      <Label>
-        { data.label }
-
-        { data.rules?.includes('required') && <Required aria-hidden="true">*</Required> }
-      </Label>
-    ) }
-
-    <Data
-      id={ id }
-      item={ data }
-      refs={ refs }
-      t={ t }
-      onUpdate={ onUpdate }
-    />
-
-    { data.name && Display(errors[data.name]) }
-
-    { data.notice && <Notice>* { data.notice }</Notice> }
-  </div>
-);
+      { data.label !== undefined && (
+        <Label htmlFor={ field }>
+          { data.label }
+
+          { data.rules?.includes('required') && <Required aria-hidden="true">*</Required> }
+        </Label>
+      ) }
+
+      <Data
+        id={ id }
+        field={ field }
+        item={ data }
+        refs={ refs }
+        t={ t }
+        onUpdate={ onUpdate }
+      />
+
+      { data.name && Display(errors[data.name]) }
+
+      { data.notice && <Notice>* { data.notice }</Notice> }
+    </div>
+  );
+};
 
 export default Item;

package/Viewer/Items/Dropdown.tsx

@@ -5,11 +5,13 @@ import { ViewData } from '../types';
 
 interface Props {
   item: ViewData
+  /* Edited: Claude - Date: 2026-08-20: the id the row's label points at */
+  field?: string
   refs: UseFormRegister<any>
   t: TFunction<'common'>
 }
 
-const Dropdown = ({ item, refs, t }: Props): (JSX.Element | null) => {
+const Dropdown = ({ item, field, refs, t }: Props): (JSX.Element | null) => {
   if (item.name === undefined) {
     return null;
   }
@@ -46,7 +48,7 @@ const Dropdown = ({ item, refs, t }: Props): (JSX.Element | null) => {
    * want.
    */
   return (
-    <select defaultValue={ item?.value ?? '' } { ...refs(item.name, rules) }>
+    <select id={ field } defaultValue={ item?.value ?? '' } { ...refs(item.name, rules) }>
       { item.placeholder !== undefined && (
         <option value="">{ item.placeholder }</option>
       ) }

package/Viewer/Viewer.tsx

@@ -13,6 +13,13 @@ interface Props {
   fetching?: boolean
   pending?: boolean
   actions?: string[]
+  /*
+   * Edited: Claude - Date: 2026-08-20
+   * What to ASK before the delete button acts, replacing the generic
+   * question. Same prop, same reason, as Table's - a form that destroys an
+   * identity document should say so.
+   */
+  confirm?: string
   t: TFunction<'common'>
   onSave?: (data: any) => void
   onDelete?: (data?: any) => void
@@ -23,7 +30,7 @@ interface Props {
   onTest?: (data: any) => void
 }
 
-const Viewer = ({ id, type, data, fetching, pending, actions, t, onSave, onDelete, onTest }: Props): JSX.Element => {
+const Viewer = ({ id, type, data, fetching, pending, actions, confirm, t, onSave, onDelete, onTest }: Props): JSX.Element => {
   const { register, handleSubmit, formState: { errors }, setValue } = useForm<any>();
 
   if (fetching) {
@@ -81,6 +88,7 @@ const Viewer = ({ id, type, data, fetching, pending, actions, t, onSave, onDelet
             id={ id }
             available={ actions }
             pending={ pending }
+            confirm={ confirm }
             t={ t }
             onDelete={ onDelete }
           />

package/Viewer/styles.ts

@@ -108,7 +108,14 @@ export const Notice = styled.div`
  * used - the requirement is already carried to assistive tech by the
  * field's own validation, and a lone "*" read aloud says nothing.
  */
-export const Label = styled.span``;
+/**
+ * Edited: Claude - Date: 2026-08-20
+ * A real <label>, not a span. It carries `htmlFor` now (see Item.tsx), and
+ * only a label element makes that an association rather than an attribute
+ * the browser ignores. Visually identical - both are inline elements, and
+ * this rule set was and remains empty.
+ */
+export const Label = styled.label``;
 
 export const Required = styled.span`
   margin-left: 3px;

package/package.json

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