@autobusal/common 1.33.6 → 1.33.7

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,13 @@
 # Changelog
 
+## 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/package.json

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