@autobusal/common 1.33.3 → 1.33.5

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,11 @@
 # Changelog
 
+## 1.33.4
+
+### Added
+
+- **New `LocalizedFields` component** - a generic per-language field editor generalising SeoOverride (fixed to title/description) and Faqs/Translations (fixed to question/answer) into one taking an arbitrary field list. A section with just one translatable field (a category name, a menu label) no longer needs its own bespoke ~120-line copy of the same editor to support more than English+Albanian.
+
 ## 1.33.3
 
 ### 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/LocalizedFields/LocalizedFields.tsx

@@ -0,0 +1,103 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { useGetSettings } from '@autobusal/providers/services';
+import { Container, ContainerLocales, LocaleButton, Textarea } from './styles';
+
+export type LocalizedValue = Record<string, Record<string, string>>;
+
+export interface LocalizedFieldSpec {
+  name: string
+  label: string
+  type?: 'text' | 'textarea'
+  maxLength?: number
+  rows?: number
+}
+
+interface Props {
+  fields: LocalizedFieldSpec[]
+  /** Keyed by locale, then by field name - `{ en: { name: 'Foo' } }` */
+  value: LocalizedValue
+  t: TFunction<'normal'>
+  onChange: (next: LocalizedValue) => void
+}
+
+/**
+ * A generic per-language field editor.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-11
+ *
+ * The same shape as SeoOverride and Faqs/Translations - one language shown
+ * at a time, languages that already carry copy are marked, the parent owns
+ * the state and the submit. This is the generalised version of both:
+ * SeoOverride is fixed to title/description, Faqs/Translations to question/
+ * answer - this one takes an arbitrary field list, so a section with just
+ * ONE translatable field (a category name, a menu label) doesn't need its
+ * own bespoke copy of the same ~120 lines to get the same editor.
+ *
+ * English is the tab an empty editor starts on - it's the required floor
+ * every one of these fields falls back to publicly.
+ */
+const LocalizedFields = ({ fields, value, t, onChange }: Props): JSX.Element => {
+  const { data } = useGetSettings();
+
+  const available = data.preferences.languages.available;
+
+  const [ locale, setLocale ] = useState<string>(data.preferences.languages.default);
+
+  const current = value[locale] ?? {};
+
+  const update = (field: string, next: string): void => {
+    onChange({
+      ...value,
+      [locale]: { ...current, [field]: next }
+    });
+  };
+
+  const written = (language: string): boolean => {
+    const entry = value[language] ?? {};
+
+    return fields.some(field => entry[field.name]?.trim());
+  };
+
+  return (
+    <Container className="box">
+      <ContainerLocales>
+        { available.map(language => (
+          <LocaleButton
+            key={ language }
+            type="button"
+            $selected={ language === locale }
+            $written={ written(language) }
+            onClick={ () => setLocale(language) }
+          >
+            { t(`languages.${ language }`, { ns: 'common' }) }
+          </LocaleButton>
+        )) }
+      </ContainerLocales>
+
+      { fields.map((field, index) => (
+        <div key={ field.name } className={ index === fields.length - 1 ? 'row row-nomargin' : 'row' }>
+          { field.label }
+
+          { field.type === 'textarea' ? (
+            <Textarea
+              maxLength={ field.maxLength }
+              $rows={ field.rows }
+              value={ current[field.name] ?? '' }
+              onChange={ (event) => update(field.name, event.target.value) }
+            />
+          ) : (
+            <input
+              type="text"
+              maxLength={ field.maxLength }
+              value={ current[field.name] ?? '' }
+              onChange={ (event) => update(field.name, event.target.value) }
+            />
+          ) }
+        </div>
+      )) }
+    </Container>
+  );
+};
+
+export default LocalizedFields;

package/LocalizedFields/styles.ts

@@ -0,0 +1,52 @@
+import styled, { css } from 'styled-components';
+
+/**
+ * Same card treatment as SeoOverride's own Container - this editor sits
+ * directly above a Viewer form, so it needs to read as part of the form
+ * rather than loose furniture above it.
+ */
+export const Container = styled.div`
+  margin-bottom: 20px;
+`;
+
+export const ContainerLocales = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+`;
+
+/**
+ * One button per language, `$written` marking which ones actually have
+ * copy - the same treatment as SeoOverride/Faqs' Translations, so every
+ * per-language editor in the admin reads as the same control.
+ */
+export const LocaleButton = styled.button<{ $selected: boolean, $written: boolean }>`
+  padding: 4px 12px;
+  border: none;
+  border-radius: ${ props => props.theme.borderRadius };
+  background: ${ props => (props.$selected ? props.theme.background.neutral : 'transparent') };
+  color: ${ props => (props.$written ? props.theme.font.normal : props.theme.font.faded) };
+  font-size: ${ props => props.theme.size.s };
+  font-weight: ${ props => (props.$selected ? 700 : 400) };
+  white-space: nowrap;
+  cursor: pointer;
+
+  &:hover {
+    background: ${ props => props.theme.background.neutral };
+  }
+
+  ${ props => props.$written && css`
+    &::after {
+      content: '•';
+      margin-left: 6px;
+      color: ${ props => props.theme.primary.normal };
+    }
+  ` }
+`;
+
+export const Textarea = styled.textarea<{ $rows?: number }>`
+  height: ${ props => (props.$rows ? props.$rows * 30 : 90) }px;
+  padding: 8px 10px;
+  resize: vertical;
+`;

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/index.ts

@@ -19,6 +19,7 @@ import Gender from './Gender';
 import { General, Inline, Box, BoxMiddle, GeneralFull } from './Loading/Loading';
 import IpLogs from './IpLogs/IpLogs';
 import JsonLd from './JsonLd';
+import LocalizedFields from './LocalizedFields/LocalizedFields';
 import Meta from './Meta';
 import Modal from './Modal/Modal';
 import NotificationIcon from './Notifications/Icon';
@@ -71,6 +72,7 @@ export {
   Inline,
   IpLogs,
   JsonLd,
+  LocalizedFields,
   Meta,
   Modal,
   NotificationIcon,

package/package.json

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