@autobusal/routes-search 1.4.1 → 1.5.0

package/RoutesSearch.tsx

@@ -3,7 +3,7 @@ import { TFunction } from 'i18next';
 import { useForm } from 'react-hook-form';
 import { FaArrowUp, FaHistory } from 'react-icons/fa';
 import { AiOutlineSearch } from 'react-icons/ai';
-import { Button, Autocomplete, Calendar, Passengers, setDepartureZone } from '@autobusal/common';
+import { Button, Autocomplete, Calendar, Passengers, setDepartureZone, FormNotice } from '@autobusal/common';
 import { Display, createDate } from '@autobusal/utilities';
 import { getCities } from './utilities';
 import Picker from './Picker';
@@ -37,6 +37,9 @@ interface Props {
 const RoutesSearch = ({ type, from, to, departure, _return, adultsNo, childrenNo, babiesNo, suggest = false, t, onSearch }: Props): JSX.Element => {
   const [ selected, setSelected ] = useState<'departure' | 'return'>(type);
 
+  // Claude - 2026-11-05: why a search did not go ahead, shown under the form
+  const [ notice, setNotice ] = useState<string | null>(null);
+
   // Edited: Ferjolt Ozuni - Date: 2026-08-01
   // Tracked in state rather than read from the form, because the return
   // picker's floor has to move the moment the departure date changes -
@@ -151,15 +154,18 @@ const RoutesSearch = ({ type, from, to, departure, _return, adultsNo, childrenNo
     data.to = to[0];
     data.stop_to = to[1];
 
+    // Claude - 2026-11-05: said under the form in the site's own look, not
+    // in a browser alert()
     if (data.adults == 0) {
-      alert(t('routes_search.errors.adults'));
+      setNotice(t('routes_search.errors.adults'));
     } else if (data.adults + data.children > 5) {
-      alert(t('routes_search.errors.max_tickets', { max: 5 }));
+      setNotice(t('routes_search.errors.max_tickets', { max: 5 }));
     } else if (data.babies > data.adults) {
-      alert(t('routes_search.errors.babies'));
+      setNotice(t('routes_search.errors.babies'));
     } else if (selected === 'return' && departureDate > _returnDate) {
-      alert(t('routes_search.errors.dates'));
+      setNotice(t('routes_search.errors.dates'));
     } else {
+      setNotice(null);
       onSearch(data);
     }
   };
@@ -316,6 +322,8 @@ const RoutesSearch = ({ type, from, to, departure, _return, adultsNo, childrenNo
           </Action>
         </Column>
       </Columns>
+
+      <FormNotice message={ notice } />
     </form>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/routes-search",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts",

package/styles.ts

@@ -52,7 +52,23 @@ export const Item = styled.div`
   flex: 1;
 `;
 
-export const Title = styled.h4`
+/*
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * NOT A HEADING. These are the captions over the search fields - "From",
+ * "To", "Departure Date", "Passengers" - and they were <h4>s, which told a
+ * screen reader the form contained four headings and told PageSpeed the
+ * document skips from <h1> to <h4> ("Heading elements are not in a
+ * sequentially-descending order", reported on production today). A caption
+ * that labels the control under it is not a section title; the fields'
+ * accessible names come from the controls themselves.
+ *
+ * A div rather than a <label>, deliberately: the controls beneath are
+ * composite widgets (Autocomplete, Calendar, the passenger picker) that own
+ * their own labelling, and a <label> pointing at a wrapper would announce
+ * the caption twice. Styling is unchanged.
+ */
+export const Title = styled.div`
   margin-bottom: 8px;
   font-size: ${ props => props.theme.size.s };
 `;