@autobusal/common 1.33.4 → 1.33.6

package/Autocomplete/Autocomplete.tsx

@@ -9,6 +9,9 @@ import { AutocompleteData } from './types';
 
 interface Props {
   name: 'from' | 'to'
+  /* Edited: Claude - 2026-08-15: accessible name for the visible input -
+     see the note in RoutesSearch. Optional so existing callers are unchanged. */
+  label?: string
   defaultValue: string
   data: AutocompleteData[]
   validation: string
@@ -17,7 +20,7 @@ interface Props {
   onUpdate: UseFormSetValue<any>
 }
 
-const Autocomplete = ({ name, defaultValue, data, validation, t, refs, onUpdate }: Props): JSX.Element => {
+const Autocomplete = ({ name, label, defaultValue, data, validation, t, refs, onUpdate }: Props): JSX.Element => {
   const found = data.filter(item => {
     return item.value === defaultValue;
   });
@@ -104,6 +107,7 @@ const Autocomplete = ({ name, defaultValue, data, validation, t, refs, onUpdate
       <input
         type="text"
         name={ `${ name }_slug` }
+        aria-label={ label }
         autoComplete="off"
         value={ q } 
         onChange={ (event) => onChange(event) }

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.33.6
+
+### Added
+
+- **New `Map/Tiles` component - the one place the basemap comes from.** The same `TileLayer` line was copy-pasted into `Drive.tsx`, `@autobusal/map`'s `Display.tsx` and magus's own `RouteMap.tsx`, with a fourth copy in the mobile app, all hardcoding `tile.openstreetmap.org`. OSM's Tile Usage Policy does not cover commercial or heavy application use, and those servers throttle or block by referer and volume without notice - so the exposure was never the bill, it was that reacting to a block meant editing three repos, publishing to npm, redeploying both frontends and shipping a mobile store release.
+
+  The URL now comes from `/settings/get` (`map.tile_url`) rather than the build, so all four clients switch from one server env var. `null` - the state until a provider is chosen - means the built-in OpenStreetMap default, so this changes nothing for anyone on upgrade. Attribution is rendered by the component rather than travelling with the URL, since ODbL requires it whoever serves the tiles.
+
+### Changed
+
+- `Drive.tsx` renders `<Tiles />` instead of its own `TileLayer`.
+
 ## 1.33.4
 
 ### Added

package/Calendar/Calendar.tsx

@@ -9,6 +9,12 @@ import { Container } from './styles';
 interface Props {
   type: 'picker' | 'dob' | 'date'
   name: string
+  /* Edited: Claude - 2026-08-15: accessible name for the visible input.
+     These controls render a bare <input> with no <label>, no id and no
+     aria-*, so every one of them reached a screen reader unnamed - 5 of 5
+     on the search form, which is the site's primary conversion path.
+     Optional, so existing callers are unaffected. */
+  label?: string
   defaultValue?: string
   t: TFunction<'general'>
   validation?: string
@@ -30,7 +36,7 @@ interface Props {
   onChange?: (value: string) => void
 }
 
-const Calendar = ({ type, name, defaultValue, t, validation, minDate, refs, onUpdate, onChange }: Props): JSX.Element => {
+const Calendar = ({ type, name, label, defaultValue, t, validation, minDate, refs, onUpdate, onChange }: Props): JSX.Element => {
   const [ show, setShow ] = useState<boolean>(false);
 
   /**
@@ -69,7 +75,7 @@ const Calendar = ({ type, name, defaultValue, t, validation, minDate, refs, onUp
 
   return (
     <Container ref={ ref }>
-      <input type="text" autoComplete="off" readOnly={ true } value={ prepared } onClick={ () => setShow(true) } />
+      <input type="text" aria-label={ label } autoComplete="off" readOnly={ true } value={ prepared } onClick={ () => setShow(true) } />
 
       { show && (
         <Picker

package/Drive/Drive.tsx

@@ -1,7 +1,8 @@
 import { TFunction } from 'i18next';
-import { MapContainer, TileLayer, Marker, Popup, Polyline } from 'react-leaflet';
+import { MapContainer, Marker, Popup, Polyline } from 'react-leaflet';
 import { latLngBounds } from 'leaflet';
 import { getCoordinates, getPosition, hasPosition, autobusMarker } from './utilities';
+import Tiles from '../Map/Tiles';
 import { Container, Loading, Disclaimer } from './styles';
 import { LocationData } from '@autobusal/providers/types/locations';
 import { useGetDriveData } from './services';
@@ -79,7 +80,7 @@ const Drive = ({ locations, t }: Props): JSX.Element => {
         maxZoom={ 15 }
         scrollWheelZoom={ true }
       >
-        <TileLayer attribution="&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors" url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+        <Tiles />
 
         { markers }
 

package/Map/Tiles.tsx

@@ -0,0 +1,56 @@
+import { TileLayer } from 'react-leaflet';
+import { useGetSettings } from '@autobusal/providers/services';
+
+/**
+ * The one place the basemap comes from.
+ *
+ * Added: Claude (audit) - Date: 2026-08-17
+ *
+ * The same TileLayer line was copy-pasted into common's Drive.tsx and map's
+ * Display.tsx, with a third copy in the mobile app's Leaflet HTML. All three
+ * hardcoded `tile.openstreetmap.org`, whose Tile Usage Policy does not cover
+ * commercial or heavy application use - those servers are donation funded for
+ * OSM's own purposes and they throttle or block by referer and volume, without
+ * notice.
+ *
+ * The exposure was never the bill, it was how long a switch would take. With
+ * the URL inlined in a published package, reacting to a block meant editing
+ * three repos, publishing to npm, redeploying both frontends AND shipping a
+ * mobile store release - days of broken maps, the last stretch of it waiting
+ * on app review.
+ *
+ * SO THE URL COMES FROM /settings/get, NOT FROM THE BUILD. That is the mobile
+ * app's constraint (a compiled-in URL there needs a store release to change),
+ * and following it here means all three clients switch from ONE place - a
+ * server env var and a cache flush - rather than each on its own release
+ * cadence. `useGetSettings` is already resolved at bootstrap with
+ * `staleTime: Infinity`, so this reads the warm cache and costs no request.
+ *
+ * `tile_url` is null until a provider is actually chosen, which means the
+ * OpenStreetMap default below - so this lands with nothing changing anywhere
+ * and waits on no decision.
+ *
+ * ATTRIBUTION IS NOT PART OF THE SWITCH. ODbL requires crediting OpenStreetMap
+ * for the underlying data whoever serves the tiles, so it is rendered here
+ * rather than travelling with the URL - a provider swap must not be able to
+ * drop it. A provider needing its own credit too should have it appended, not
+ * substituted.
+ */
+const OPENSTREETMAP = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+
+const ATTRIBUTION = "&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors";
+
+interface Props {
+  /** Overrides the configured basemap. Rarely needed - prefer the server setting. */
+  url?: string
+}
+
+const Tiles = ({ url }: Props): JSX.Element => {
+  const { data: settings } = useGetSettings();
+
+  return (
+    <TileLayer attribution={ ATTRIBUTION } url={ url ?? settings.map?.tile_url ?? OPENSTREETMAP } />
+  );
+};
+
+export default Tiles;

package/Passengers/Passengers.tsx

@@ -7,6 +7,12 @@ import { getText } from './utilities';
 import { Container } from './styles';
 
 interface Props {
+  /* Edited: Claude - 2026-08-15: accessible name for the visible input.
+     These controls render a bare <input> with no <label>, no id and no
+     aria-*, so every one of them reached a screen reader unnamed - 5 of 5
+     on the search form, which is the site's primary conversion path.
+     Optional, so existing callers are unaffected. */
+  label?: string
   defaultAdults: number
   defaultChildren: number
   defaultBabies: number
@@ -15,7 +21,7 @@ interface Props {
   onUpdate: UseFormSetValue<any>
 }
 
-const Passengers = ({ defaultAdults, defaultChildren, defaultBabies, t, refs, onUpdate }: Props): JSX.Element => {
+const Passengers = ({ label, defaultAdults, defaultChildren, defaultBabies, t, refs, onUpdate }: Props): JSX.Element => {
   const [ show, setShow ] = useState<boolean>(false);
   const [ adults, setAdults ] = useState<number>(defaultAdults);
   const [ children, setChildren ] = useState<number>(defaultChildren);
@@ -54,7 +60,7 @@ const Passengers = ({ defaultAdults, defaultChildren, defaultBabies, t, refs, on
 
   return (
     <Container ref={ ref }>
-      <input type="text" value={ display } readOnly={ true } onClick={ () => setShow(!show) } />
+      <input type="text" aria-label={ label } value={ display } readOnly={ true } onClick={ () => setShow(!show) } />
 
       { show &&
         <Persons

package/package.json

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