@autobusal/common 1.33.6 → 1.33.8

package/AiAssist/AiReviewModal.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { TFunction } from 'i18next';
+import { sanitizeHtml } from '@autobusal/utilities';
 import Modal from '../Modal/Modal';
 import { useAiAvailable, useAiGenerate, useAiTranslate, useAiImprove } from './services';
 import { Row, Field, Compare, Pane, Draft, Actions } from './styles';
@@ -146,11 +147,21 @@ const AiReviewModal = ({ mode, text, targetLocale, sourceLocale, onInsert, onClo
         </Row>
       ) }
 
+      { /* Edited: Claude - Date: 2026-08-19
+           Both panes are sanitized, for two different reasons. The draft is
+           whatever a model wrote: a prompt-injected source document can talk
+           it into emitting markup, and this preview renders that straight
+           into an admin's browser BEFORE anyone has decided to keep it. The
+           source is the same admin-authored CMS HTML every other sink in this
+           codebase runs through sanitizeHtml (page/Page.tsx, blog, policies).
+           Only the preview is sanitized - Insert still hands the caller the
+           raw draft, so nothing the admin actually meant to save is silently
+           rewritten on its way into the field. */ }
       { draft === null && mode === 'translate' && (
         <Pane>
           <h4>{ tc('ai_assist.source') }</h4>
 
-          <div dangerouslySetInnerHTML={ { __html: text ?? '' } } />
+          <div dangerouslySetInnerHTML={ { __html: sanitizeHtml(text) } } />
         </Pane>
       ) }
 
@@ -159,13 +170,13 @@ const AiReviewModal = ({ mode, text, targetLocale, sourceLocale, onInsert, onClo
           <Pane>
             <h4>{ tc('ai_assist.source') }</h4>
 
-            <div dangerouslySetInnerHTML={ { __html: text ?? '' } } />
+            <div dangerouslySetInnerHTML={ { __html: sanitizeHtml(text) } } />
           </Pane>
 
           <Pane>
             <h4>{ tc('ai_assist.draft') }</h4>
 
-            <div dangerouslySetInnerHTML={ { __html: draft } } />
+            <div dangerouslySetInnerHTML={ { __html: sanitizeHtml(draft) } } />
           </Pane>
         </Compare>
       ) }

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # 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
+
+- **`Required` renders a real `<label>`, and takes an optional `htmlFor`.** It was a `styled.span` sitting beside the field it named, which is a label to a sighted reader and nothing at all to a screen reader - every field it introduced announced as a bare "edit text". Nothing in the stylesheets selects `label` and a flex item computes identically either way, so this is semantics only.
+- **`Password` and `Calendar` take an optional `id`.** A caller cannot associate a visible label with a field it has no way to name, so the shared inputs had to be able to accept one before the forms using them could be fixed.
+- `AiAssist/AiReviewModal` runs its three HTML panes through `sanitizeHtml`. Everything the model returns is HTML rendered into an admin's browser, and every other sink in the codebase sanitises; this one did not.
+
 ## 1.33.6
 
 ### Added

package/Calendar/Calendar.tsx

@@ -15,6 +15,12 @@ interface Props {
      on the search form, which is the site's primary conversion path.
      Optional, so existing callers are unaffected. */
   label?: string
+  /* Edited: Claude - Date: 2026-08-19: id for the visible input, so a
+     caller that HAS a visible label can associate it properly instead of
+     duplicating the text into aria-label. Preferred over `label` where
+     both are possible - the association also makes the label a click
+     target, which opens the picker. */
+  id?: string
   defaultValue?: string
   t: TFunction<'general'>
   validation?: string
@@ -36,7 +42,7 @@ interface Props {
   onChange?: (value: string) => void
 }
 
-const Calendar = ({ type, name, label, defaultValue, t, validation, minDate, refs, onUpdate, onChange }: Props): JSX.Element => {
+const Calendar = ({ type, name, label, id, defaultValue, t, validation, minDate, refs, onUpdate, onChange }: Props): JSX.Element => {
   const [ show, setShow ] = useState<boolean>(false);
 
   /**
@@ -75,7 +81,7 @@ const Calendar = ({ type, name, label, defaultValue, t, validation, minDate, ref
 
   return (
     <Container ref={ ref }>
-      <input type="text" aria-label={ label } autoComplete="off" readOnly={ true } value={ prepared } onClick={ () => setShow(true) } />
+      <input type="text" id={ id } aria-label={ label } autoComplete="off" readOnly={ true } value={ prepared } onClick={ () => setShow(true) } />
 
       { show && (
         <Picker

package/Password/Password.tsx

@@ -7,6 +7,15 @@ import { Container } from './styles';
 
 interface Props {
   name: string
+  /**
+   * Edited: Claude - Date: 2026-08-19
+   * The id to put on the inner input, so a caller's <label htmlFor> can
+   * reach it. Optional, because the field's own `name` is what the form
+   * payload uses and every existing caller relies on that unchanged - but
+   * without an id there is no way to attach a label from outside, and this
+   * component owns the only input on the login and reset forms.
+   */
+  id?: string
   tabIndex?: number
   validation?: string
   // Pre-fill value (masked). Lets an admin form show a saved secret as dots
@@ -19,7 +28,7 @@ interface Props {
   getValues?: UseFormGetValues<any>
 }
 
-const Password = ({ name, tabIndex, validation, defaultValue, t, refs, getValues }: Props): JSX.Element => {
+const Password = ({ name, id, tabIndex, validation, defaultValue, t, refs, getValues }: Props): JSX.Element => {
   const [ show, setShow ] = useState<boolean>(false);
 
   const toggle = (): void => {
@@ -28,7 +37,7 @@ const Password = ({ name, tabIndex, validation, defaultValue, t, refs, getValues
 
   return (
     <Container>
-      <input type={ show ? 'text' : 'password' } tabIndex={ tabIndex } defaultValue={ defaultValue } { ...refs(name, Validate(validation ?? '', t, getValues)) } />
+      <input type={ show ? 'text' : 'password' } id={ id } tabIndex={ tabIndex } defaultValue={ defaultValue } { ...refs(name, Validate(validation ?? '', t, getValues)) } />
 
       { show
         ? <AiFillEye onClick={ toggle } />

package/Required/Required.tsx

@@ -1,6 +1,14 @@
 import { Label, Marker } from './styles';
 
 interface Props {
+  /**
+   * Edited: Claude - Date: 2026-08-19
+   * The id of the field this labels. Optional so existing callers keep
+   * working, but pass it wherever there is a field to point at: without it
+   * the visible text is only visually a label, and the input announces as
+   * a bare "edit text".
+   */
+  htmlFor?: string
   children: React.ReactNode
 }
 
@@ -25,8 +33,8 @@ interface Props {
  * asterisk two separate flex items - and the marker dropped onto its own
  * line under the label.
  */
-const Required = ({ children }: Props): JSX.Element => (
-  <Label>
+const Required = ({ htmlFor, children }: Props): JSX.Element => (
+  <Label htmlFor={ htmlFor }>
     { children }
     <Marker aria-hidden="true">*</Marker>
   </Label>

package/Required/styles.ts

@@ -2,7 +2,14 @@ import styled from 'styled-components';
 
 // keeps the label and its asterisk as ONE flex item - the form rows are
 // column flex containers, so two items would stack vertically
-export const Label = styled.span`
+//
+// Edited: Claude - Date: 2026-08-19
+// A real <label>, not a <span>. It was already named Label and already
+// sitting next to the field it names, but a span cannot be associated with
+// an input - so the field reached a screen reader unnamed. Nothing in the
+// stylesheets selects `label`, and a flex item computes the same either
+// way, so this changes semantics only.
+export const Label = styled.label`
   display: inline-flex;
   align-items: baseline;
 `;

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.6",
+  "version": "1.33.8",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"