@autobusal/routes-order 1.31.3 → 1.31.5

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 1.31.5
+
+### Added
+
+- **BusTrip carries the pair's AggregateRating** when `/routes/search/facts` reports one (`FactsData.rating`). The aggregate is computed server-side over the same published-review rules the reviews listing uses, and rides the facts cache - the pair page keeps its one-fetch design. Absent rating, the key is not emitted at all.
+
+## 1.31.4
+
+### Fixed
+
+- **The checkout form's fields have accessible names.** Passenger and billing inputs had no `id`/`for` pairing, no `aria-label` and no wrapping label - programmatically anonymous on the one form that decides whether a sale completes. Ids are `useId`-prefixed, which is what stops `adult1_*`, `adult2_*` and `child1_*` colliding; a hardcoded id would have traded one accessibility bug for another.
+- Coupon code and the add-on phone fields get an `aria-label`, having only ever had a placeholder - and a placeholder disappears the moment someone types.
+
 ## 1.31.3
 
 ### Fixed

package/Facts/types.ts

@@ -17,6 +17,13 @@ export interface FactsData {
   // how many coaches serve the pair in the TIMETABLE, not on a given date
   departures: number
   operators: string[]
+  // Edited: Claude - Date: 2026-08-20
+  // The pair's own review score - the published reviews of every route in
+  // this very timetable, aggregated by obtapi with the same threshold rule
+  // as everything else (null until there is enough to say something honest).
+  // For structured data; note ScheduleRow.rating below is the OPERATOR's
+  // company-wide number, a different thing.
+  rating: { average: number, count: number } | null
   // Two numbers that must never be conflated.
   //
   // `road` is real driving distance from a routing service and is null unless

package/Sections/Schema.tsx

@@ -27,6 +27,19 @@ interface Props {
  * claiming travellers rated this journey when they rated the company. When
  * an operator has no published rating - below the display threshold - it is
  * simply absent, exactly as it is on the page.
+ *
+ * Edited: Claude - Date: 2026-08-20
+ *
+ * The trip now ALSO carries its own AggregateRating - and that is not the
+ * claim the paragraph above forbids, because `facts.rating` is a different
+ * number: obtapi aggregates the published reviews of exactly the routes in
+ * this timetable (Facts::rating, the same set Reviews\BrowseController's
+ * `pair` mode reads), not a company-wide score stretched over one leg.
+ * Travellers who booked these very coaches wrote those reviews, and every
+ * card on the page links to the operator profile where they are read in
+ * full. Below the display threshold obtapi sends null and nothing is
+ * emitted here - an AggregateRating of nothing is a guideline violation,
+ * worse than none.
  */
 const Schema = ({ facts, t }: Props): (JSX.Element | null) => {
   const schedule = facts.schedule ?? [];
@@ -62,6 +75,19 @@ const Schema = ({ facts, t }: Props): (JSX.Element | null) => {
     departureBusStop: { '@type': 'BusStop', name: facts.from },
     arrivalBusStop: { '@type': 'BusStop', name: facts.to },
 
+    // Edited: Claude - Date: 2026-08-20
+    // The pair's own score - see the header comment. Null below the
+    // display threshold, and then the property simply does not exist.
+    ...(facts.rating ? {
+      aggregateRating: {
+        '@type': 'AggregateRating',
+        ratingValue: facts.rating.average,
+        reviewCount: facts.rating.count,
+        bestRating: 5,
+        worstRating: 1
+      }
+    } : {}),
+
     ...(providers.length > 0 ? {
       provider: providers.map(item => organisation(item.name, item.rating))
     } : {}),

package/Step4/Passenger/Passenger.tsx

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { TFunction } from 'i18next';
 import { FieldErrors, FieldValues, UseFormRegister } from 'react-hook-form';
 import { Calendar, Gender, ChooseSeat, Required } from '@autobusal/common';
@@ -47,6 +48,20 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
   const has = (field: string): boolean => fields.includes(field);
 
+  /**
+   * Edited: Claude - Date: 2026-08-19
+   * Every field here was rendered as a bare <input> beside its label text,
+   * with no id and no association - so a screen reader announced the whole
+   * passenger block as a run of unnamed "edit text". The field NAMES are
+   * already unique per passenger (adult1_fn, adult2_fn), but they belong to
+   * the form payload; ids are page-global, so they get a useId prefix -
+   * this component renders once per passenger, and two forms on one page
+   * would otherwise emit duplicate ids, which is its own defect.
+   */
+  const uid = useId();
+
+  const id = (field: string): string => `${ uid }${ field }`;
+
   return (
     <Container className="box">
       <Title>
@@ -55,10 +70,11 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
       <div className="column">
         <div className="row">
-          <Required>{ t('routes_order.step4.first_name') }</Required>
+          <Required htmlFor={ id(names.firstName) }>{ t('routes_order.step4.first_name') }</Required>
 
           <input
             type="text"
+            id={ id(names.firstName) }
             defaultValue={ values !== undefined ? values[names.firstName] : '' }
             { ...refs(names.firstName, Validate('required|min_length:2|max_length:100', t)) }
           />
@@ -67,10 +83,11 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
         </div>
 
         <div className="row">
-          <Required>{ t('routes_order.step4.last_name') }</Required>
+          <Required htmlFor={ id(names.lastName) }>{ t('routes_order.step4.last_name') }</Required>
 
           <input
             type="text"
+            id={ id(names.lastName) }
             defaultValue={ values !== undefined ? values[names.lastName] : '' }
             { ...refs(names.lastName, Validate('required|min_length:2|max_length:100', t)) }
           />
@@ -81,11 +98,12 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
       <div className="column">
         <div className="row">
-          <Required>{ t('routes_order.step4.dob') }</Required>
+          <Required htmlFor={ id(names.dob) }>{ t('routes_order.step4.dob') }</Required>
 
           <Calendar
             type="dob"
             name={ names.dob }
+            id={ id(names.dob) }
             defaultValue={ values !== undefined ? String(values[names.dob]) : undefined }
             t={ t }
             validation="required"
@@ -116,10 +134,11 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
         <div className="column">
           { has('passport') && (
             <div className="row">
-              <Required>{ t('routes_order.step4.passport') }</Required>
+              <Required htmlFor={ id(names.passport) }>{ t('routes_order.step4.passport') }</Required>
 
               <input
                 type="text"
+                id={ id(names.passport) }
                 defaultValue={ values !== undefined ? values[names.passport] : '' }
                 { ...refs(names.passport, Validate('required|min_length:2|max_length:50', t)) }
               />
@@ -130,10 +149,11 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
           { has('phone') && (
             <div className="row">
-              <Required>{ t('routes_order.step4.phone') }</Required>
+              <Required htmlFor={ id(names.phone) }>{ t('routes_order.step4.phone') }</Required>
 
               <input
                 type="text"
+                id={ id(names.phone) }
                 defaultValue={ values !== undefined ? values[names.phone] : '' }
                 { ...refs(names.phone, Validate('required|min_length:5|max_length:50', t)) }
               />
@@ -156,10 +176,11 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
         <div className="column">
           { has('whatsapp') && (
             <div className="row">
-              <Required>{ t('routes_order.step4.whatsapp') }</Required>
+              <Required htmlFor={ id(names.whatsapp) }>{ t('routes_order.step4.whatsapp') }</Required>
 
               <input
                 type="text"
+                id={ id(names.whatsapp) }
                 defaultValue={ values !== undefined ? values[names.whatsapp] : '' }
                 { ...refs(names.whatsapp, Validate('required|min_length:5|max_length:50', t)) }
               />
@@ -170,10 +191,11 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
           { has('telegram') && (
             <div className="row">
-              <Required>{ t('routes_order.step4.telegram') }</Required>
+              <Required htmlFor={ id(names.telegram) }>{ t('routes_order.step4.telegram') }</Required>
 
               <input
                 type="text"
+                id={ id(names.telegram) }
                 defaultValue={ values !== undefined ? values[names.telegram] : '' }
                 { ...refs(names.telegram, Validate('required|min_length:2|max_length:100', t)) }
               />

package/Step5/Addons/Addons.tsx

@@ -85,9 +85,15 @@ const Addons = ({ data, flexOffer, currency, whatsapp, whatsappNumber, telegram,
 
           <Notice>{ t('routes_order.step5.addons.whatsapp.description') }</Notice>
 
+          { /* Edited: Claude - Date: 2026-08-19
+               The number fields below have no visible label of their own -
+               they appear under the checkbox they belong to - so the
+               placeholder wording is repeated as an accessible name rather
+               than leaving them unnamed. */ }
           { whatsapp && (
             <input
               type="text"
+              aria-label={ t('routes_order.step5.addons.whatsapp.phone_placeholder') }
               placeholder={ t('routes_order.step5.addons.whatsapp.phone_placeholder') }
               value={ whatsappNumber }
               onChange={ (event) => onChangeWhatsappNumber(event.target.value) }
@@ -143,6 +149,7 @@ const Addons = ({ data, flexOffer, currency, whatsapp, whatsappNumber, telegram,
           { sms && (
             <input
               type="text"
+              aria-label={ t('routes_order.step5.addons.sms.phone_placeholder') }
               placeholder={ t('routes_order.step5.addons.sms.phone_placeholder') }
               value={ smsNumber }
               onChange={ (event) => onChangeSmsNumber(event.target.value) }

package/Step5/Billing/Billing.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useId } from 'react';
 import { TFunction } from 'i18next';
 import { Required } from '@autobusal/common';
 import { UseFormRegister, FieldErrors } from 'react-hook-form';
@@ -20,6 +20,18 @@ interface Props {
 const Billing = ({ errors, t, refs }: Props): JSX.Element => {
   const [ company, setCompany ] = useState<boolean>(false);
 
+  /**
+   * Edited: Claude - Date: 2026-08-19
+   * Same fix as the passenger block: the labels here were text sitting
+   * beside the field rather than attached to it, so the billing form - the
+   * last thing between a buyer and paying - announced as unnamed edit
+   * boxes. Prefixed with useId rather than using the field name directly,
+   * because ids are page-global and these names are not guaranteed to be.
+   */
+  const uid = useId();
+
+  const id = (field: string): string => `${ uid }${ field }`;
+
   const countries = useCountries('all');
 
   if (countries.isLoading) {
@@ -43,17 +55,17 @@ const Billing = ({ errors, t, refs }: Props): JSX.Element => {
 
       <div className="column">
         <div className="row">
-          <Required>{ t('routes_order.step5.billing.first_name') }</Required>
+          <Required htmlFor={ id('bill_fn') }>{ t('routes_order.step5.billing.first_name') }</Required>
 
-          <input type="text" { ...refs('bill_fn', Validate('required|min_length:2|max_length:100', t)) } />
+          <input type="text" id={ id('bill_fn') } { ...refs('bill_fn', Validate('required|min_length:2|max_length:100', t)) } />
 
           { Display(errors.bill_fn) }
         </div>
 
         <div className="row">
-          <Required>{ t('routes_order.step5.billing.last_name') }</Required>
+          <Required htmlFor={ id('bill_ln') }>{ t('routes_order.step5.billing.last_name') }</Required>
 
-          <input type="text" { ...refs('bill_ln', Validate('required|min_length:2|max_length:100', t)) } />
+          <input type="text" id={ id('bill_ln') } { ...refs('bill_ln', Validate('required|min_length:2|max_length:100', t)) } />
 
           { Display(errors.bill_ln) }
         </div>
@@ -61,9 +73,9 @@ const Billing = ({ errors, t, refs }: Props): JSX.Element => {
 
       <div className="column">
         <div className="row">
-          <Required>{ t('routes_order.step5.billing.email') }</Required>
-          
-          <input type="email" { ...refs('email', Validate('required|email|max_length:255', t)) } />
+          <Required htmlFor={ id('email') }>{ t('routes_order.step5.billing.email') }</Required>
+
+          <input type="email" id={ id('email') } { ...refs('email', Validate('required|email|max_length:255', t)) } />
 
           { Display(errors.email) }
 
@@ -73,35 +85,35 @@ const Billing = ({ errors, t, refs }: Props): JSX.Element => {
         </div>
 
         <div className="row">
-          <Required>{ t('routes_order.step5.billing.phone') }</Required>
+          <Required htmlFor={ id('bill_phone') }>{ t('routes_order.step5.billing.phone') }</Required>
 
-          <input type="text" { ...refs('bill_phone', Validate('required|min_length:10|max_length:20', t)) } />
+          <input type="text" id={ id('bill_phone') } { ...refs('bill_phone', Validate('required|min_length:10|max_length:20', t)) } />
 
           { Display(errors.bill_phone) }
         </div>
       </div>
 
       <div className="row">
-        <Required>{ t('routes_order.step5.billing.address') }</Required>
+        <Required htmlFor={ id('bill_address') }>{ t('routes_order.step5.billing.address') }</Required>
 
-        <textarea { ...refs('bill_address', Validate('required|min_length:2', t)) }></textarea>
+        <textarea id={ id('bill_address') } { ...refs('bill_address', Validate('required|min_length:2', t)) }></textarea>
 
         { Display(errors.bill_address) }
       </div>
 
       <div className="column">
         <div className="row">
-          <Required>{ t('routes_order.step5.billing.city') }</Required>
+          <Required htmlFor={ id('bill_city') }>{ t('routes_order.step5.billing.city') }</Required>
 
-          <input type="text" { ...refs('bill_city', Validate('required|min_length:2|max_length:100', t)) } />
+          <input type="text" id={ id('bill_city') } { ...refs('bill_city', Validate('required|min_length:2|max_length:100', t)) } />
 
           { Display(errors.bill_city) }
         </div>
 
         <div className="row">
-          <Required>{ t('routes_order.step5.billing.country') }</Required>
+          <Required htmlFor={ id('bill_country') }>{ t('routes_order.step5.billing.country') }</Required>
 
-          <select { ...refs('bill_country', Validate('required|min:1', t)) }>
+          <select id={ id('bill_country') } { ...refs('bill_country', Validate('required|min:1', t)) }>
             <option value={ 0 }>{ t('routes_order.step5.billing.country_choose') }</option>
             { items }
           </select>
@@ -119,17 +131,19 @@ const Billing = ({ errors, t, refs }: Props): JSX.Element => {
       { company && (
         <div className="column">
           <div className="row">
-            { t('routes_order.step5.billing.company') }
+            { /* not Required - these are optional, so a plain <label>
+                 rather than the asterisked one, but still associated */ }
+            <label htmlFor={ id('bill_company') }>{ t('routes_order.step5.billing.company') }</label>
 
-            <input type="text" { ...refs('bill_company') } />
+            <input type="text" id={ id('bill_company') } { ...refs('bill_company') } />
 
             { Display(errors.bill_company) }
           </div>
 
           <div className="row">
-            { t('routes_order.step5.billing.nipt') }
+            <label htmlFor={ id('bill_nipt') }>{ t('routes_order.step5.billing.nipt') }</label>
 
-            <input type="text" { ...refs('bill_nipt') } />
+            <input type="text" id={ id('bill_nipt') } { ...refs('bill_nipt') } />
 
             { Display(errors.bill_nipt) }
           </div>
@@ -137,9 +151,9 @@ const Billing = ({ errors, t, refs }: Props): JSX.Element => {
       ) }
 
       <div className="row">
-        { t('routes_order.step5.billing.comments') }
+        <label htmlFor={ id('comments') }>{ t('routes_order.step5.billing.comments') }</label>
 
-        <textarea { ...refs('comments') }></textarea>
+        <textarea id={ id('comments') } { ...refs('comments') }></textarea>
       </div>
 
       <div className="row row-nomargin">

package/Step5/Coupons/Coupons.tsx

@@ -60,7 +60,11 @@ const Coupons = ({ current, step2, t, total, onApplied }: Props): (JSX.Element |
       <form onSubmit={ handleSubmit(onSubmit) }>
         <ContainerForm>
           <ContainerInput>
-            <input type="text" placeholder={ t('routes_order.step5.coupon.code') } { ...register('code', Validate('required|min_length:4', t)) } />
+            { /* Edited: Claude - Date: 2026-08-19
+                 aria-label rather than a <label for>, because this field has
+                 no visible label to attach - the placeholder is the only
+                 wording, and a placeholder disappears the moment you type. */ }
+            <input type="text" aria-label={ t('routes_order.step5.coupon.code') } placeholder={ t('routes_order.step5.coupon.code') } { ...register('code', Validate('required|min_length:4', t)) } />
 
             <Apply
               type="submit"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/routes-order",
-  "version": "1.31.3",
+  "version": "1.31.5",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"