@autobusal/routes-order 1.31.2 → 1.31.4

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 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
+
+- **The results page's facts/schedule block now renders on the very first screen**, not only once a date has been picked. `/bus-lines/:from/:to` - the dateless URL the sitemap lists and the prerender crawl snapshots - was always on step 1, so `<Sections>` (price/duration/departures + the per-route schedule table + the pair's JSON-LD) never mounted for a single search engine or non-JS crawler. It now also renders on step 1; the bare `/bus-lines` search form (no pair in the URL) is unaffected since it has nothing to fetch.
+
 ## 1.31.2
 
 ### Changed

package/RoutesOrder.tsx

@@ -317,16 +317,26 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
         />
       ) }
 
-      { /* Edited: Ferjolt Ozuni - Date: 2026-08-03
-           Roadmap Tier 3.2. Only on the route-choosing screens, and only
-           once the URL names a real pair: this is the page a search engine
-           lands on, and it is the one place the block adds anything. Past
-           step 2 the reader has picked a coach and is filling in passenger
-           details - facts about the pair are noise at that point.
-
-           It renders nothing at all for a pair with no facts, so a page that
-           would only have gained an empty box does not gain a box. */ }
-      { (showStep2 || showStep3) && (
+      { /* Edited: Ferjolt Ozuni - Date: 2026-08-03, widened 2026-08-11
+           Roadmap Tier 3.2. NOT gated on step2/step3 (as it was originally)
+           - it now also renders on showStep1, which is what actually matters:
+           /bus-lines/:from/:to is the URL the sitemap lists and the
+           prerender crawl snapshots, and that URL is ALWAYS on step 1 - a
+           date has not been picked yet, so step2/step3 never mount and the
+           block never rendered for a single crawler. A logged human visitor
+           benefits the same way a search engine does: price/duration/
+           schedule for the pair, visible before they commit to a date.
+
+           Bare /bus-lines (no :from/:to) leaves both props undefined,
+           useGetFacts short-circuits on that, and Sections' own guard
+           returns null with nothing fetched - so the generic search form
+           gains no empty box underneath it.
+
+           Past step 2 the reader has picked a coach and is filling in
+           passenger details - facts about the pair are noise at that point,
+           which is why it still stops at step 3 and does not follow onto
+           checkout. */ }
+      { (showStep1 || showStep2 || showStep3) && (
         <Sections
           from={ fromCity?.slug ?? params.from }
           to={ toCity?.slug ?? params.to }

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