@oneuptime/common 11.0.2 → 11.0.4

package/UI/Components/Forms/Fields/FormField.tsx

@@ -35,7 +35,7 @@ import GenericObject from "../../../../Types/GenericObject";
 import { JSONValue } from "../../../../Types/JSON";
 import ObjectID from "../../../../Types/ObjectID";
 import Typeof from "../../../../Types/Typeof";
-import React, { ReactElement, useEffect } from "react";
+import React, { ReactElement, useEffect, useId } from "react";
 import Radio, { RadioValue } from "../../Radio/Radio";
 import { BasicRadioButtonOption } from "../../RadioButtons/BasicRadioButtons";
 import HorizontalRule from "../../HorizontalRule/HorizontalRule";
@@ -67,6 +67,21 @@ const FormField: <T extends GenericObject>(
     props.field.placeholder,
   );
 
+  /*
+   * Unique, stable id used to programmatically associate the field's <label>
+   * (htmlFor) with its input control (id) for screen readers (WCAG 1.3.1).
+   * useId guarantees uniqueness even when the same field renders twice on a
+   * page (e.g. two subscribe forms inside tabs).
+   */
+  const fieldId: string = useId();
+
+  /*
+   * Id of the field's <label> element. Composite widgets (dropdowns, pickers,
+   * toggles, radio/checkbox groups) that cannot use htmlFor instead point at
+   * this via aria-labelledby so the control still has an accessible name.
+   */
+  const fieldLabelId: string = `${fieldId}-label`;
+
   type onChangeFunction = (value: JSONValue) => void;
 
   const onChange: onChangeFunction = (value: JSONValue): void => {
@@ -196,6 +211,30 @@ const FormField: <T extends GenericObject>(
 
     const index: number = props.index + 1;
 
+    /*
+     * Only native text-like controls (rendered via <Input> / <TextArea>) receive
+     * the generated id, so the label's htmlFor must only point at those to avoid
+     * a dangling association on composite widgets (dropdowns, pickers, etc.).
+     */
+    const fieldRendersLabelableInput: boolean = [
+      FormFieldSchemaType.Name,
+      FormFieldSchemaType.Email,
+      FormFieldSchemaType.Hostname,
+      FormFieldSchemaType.URL,
+      FormFieldSchemaType.Route,
+      FormFieldSchemaType.Text,
+      FormFieldSchemaType.Number,
+      FormFieldSchemaType.Password,
+      FormFieldSchemaType.EncryptedText,
+      FormFieldSchemaType.Date,
+      FormFieldSchemaType.DateTime,
+      FormFieldSchemaType.Port,
+      FormFieldSchemaType.Phone,
+      FormFieldSchemaType.Domain,
+      FormFieldSchemaType.PositiveNumber,
+      FormFieldSchemaType.LongText,
+    ].includes(props.field.fieldType as FormFieldSchemaType);
+
     const fieldType: string = props.field.fieldType
       ? getFieldType(props.field.fieldType)
       : "text";
@@ -313,6 +352,8 @@ const FormField: <T extends GenericObject>(
         {props.field.fieldType !== FormFieldSchemaType.Checkbox && (
           <FieldLabelElement
             title={props.field.title || ""}
+            id={fieldLabelId}
+            htmlFor={fieldRendersLabelableInput ? fieldId : undefined}
             description={getFieldDescription()}
             sideLink={props.field.sideLink}
             required={required}
@@ -325,8 +366,9 @@ const FormField: <T extends GenericObject>(
           {/* Time Picker */}
           {props.field.fieldType === FormFieldSchemaType.Time && (
             <TimePicker
+              ariaLabelledby={fieldLabelId}
               autoFocus={!props.disableAutofocus && index === 1}
-              tabIndex={index}
+              tabIndex={0}
               disabled={props.isDisabled || props.field.disabled}
               error={props.touched && props.error ? props.error : undefined}
               dataTestId={props.field.dataTestId}
@@ -349,6 +391,7 @@ const FormField: <T extends GenericObject>(
 
           {props.field.fieldType === FormFieldSchemaType.Color && (
             <ColorPicker
+              ariaLabelledby={fieldLabelId}
               error={props.touched && props.error ? props.error : undefined}
               dataTestId={props.field.dataTestId}
               onChange={async (value: Color | null) => {
@@ -356,7 +399,7 @@ const FormField: <T extends GenericObject>(
                 props.setFieldValue(props.fieldName, value);
                 props.setFieldTouched(props.fieldName, true);
               }}
-              tabIndex={index}
+              tabIndex={0}
               placeholder={translatedPlaceholder || ""}
               initialValue={
                 props.currentValues &&
@@ -369,6 +412,7 @@ const FormField: <T extends GenericObject>(
 
           {props.field.fieldType === FormFieldSchemaType.Icon && (
             <IconPicker
+              ariaLabelledby={fieldLabelId}
               error={props.touched && props.error ? props.error : undefined}
               dataTestId={props.field.dataTestId}
               onChange={async (value: IconProp | null) => {
@@ -376,7 +420,7 @@ const FormField: <T extends GenericObject>(
                 props.setFieldValue(props.fieldName, value);
                 props.setFieldTouched(props.fieldName, true);
               }}
-              tabIndex={index}
+              tabIndex={0}
               placeholder={translatedPlaceholder || ""}
               initialValue={
                 props.currentValues &&
@@ -399,9 +443,10 @@ const FormField: <T extends GenericObject>(
              */
             (props.field.dropdownModal && props.field.dropdownModal.type ? (
               <EntityDropdown
+                ariaLabelledby={fieldLabelId}
                 error={props.touched && props.error ? props.error : undefined}
                 id={props.field.id}
-                tabIndex={index}
+                tabIndex={0}
                 dataTestId={props.field.dataTestId}
                 onChange={(
                   value: DropdownValue | Array<DropdownValue> | null,
@@ -430,9 +475,10 @@ const FormField: <T extends GenericObject>(
               />
             ) : (
               <Dropdown
+                ariaLabelledby={fieldLabelId}
                 error={props.touched && props.error ? props.error : undefined}
                 id={props.field.id}
-                tabIndex={index}
+                tabIndex={0}
                 dataTestId={props.field.dataTestId}
                 onChange={async (
                   value: DropdownValue | Array<DropdownValue> | null,
@@ -460,8 +506,9 @@ const FormField: <T extends GenericObject>(
 
           {props.field.fieldType === FormFieldSchemaType.CardSelect && (
             <CardSelect
+              ariaLabelledby={fieldLabelId}
               error={props.touched && props.error ? props.error : undefined}
-              tabIndex={index}
+              tabIndex={0}
               dataTestId={props.field.dataTestId}
               singleColumn={props.field.cardSelectSingleColumn}
               onChange={(value: string) => {
@@ -480,7 +527,7 @@ const FormField: <T extends GenericObject>(
 
           {props.field.fieldType === FormFieldSchemaType.ObjectID && (
             <IDGenerator
-              tabIndex={index}
+              tabIndex={0}
               dataTestId={props.field.dataTestId}
               disabled={props.isDisabled || props.field.disabled}
               error={props.touched && props.error ? props.error : undefined}
@@ -528,6 +575,7 @@ const FormField: <T extends GenericObject>(
           {props.field.fieldType ===
             FormFieldSchemaType.OptionChooserButton && (
             <RadioButtons
+              ariaLabelledby={fieldLabelId}
               error={props.touched && props.error ? props.error : undefined}
               dataTestId={props.field.dataTestId}
               onChange={async (value: string) => {
@@ -546,6 +594,7 @@ const FormField: <T extends GenericObject>(
 
           {props.field.fieldType === FormFieldSchemaType.RadioButton && (
             <Radio
+              ariaLabelledby={fieldLabelId}
               error={props.touched && props.error ? props.error : undefined}
               dataTestId={props.field.dataTestId}
               onChange={async (value: RadioValue | null) => {
@@ -574,8 +623,9 @@ const FormField: <T extends GenericObject>(
           {props.field.fieldType === FormFieldSchemaType.LongText && (
             <TextArea
               autoFocus={!props.disableAutofocus && index === 1}
+              id={fieldId}
               error={props.touched && props.error ? props.error : undefined}
-              tabIndex={index}
+              tabIndex={0}
               dataTestId={props.field.dataTestId}
               disableSpellCheck={props.field.disableSpellCheck}
               onChange={async (value: string) => {
@@ -597,9 +647,10 @@ const FormField: <T extends GenericObject>(
 
           {props.field.fieldType === FormFieldSchemaType.JSON && (
             <CodeEditor
+              ariaLabelledby={fieldLabelId}
               error={props.touched && props.error ? props.error : undefined}
               type={CodeType.JSON}
-              tabIndex={index}
+              tabIndex={0}
               dataTestId={props.field.dataTestId}
               onChange={async (value: string) => {
                 onChange(value);
@@ -626,9 +677,10 @@ const FormField: <T extends GenericObject>(
 
           {props.field.fieldType === FormFieldSchemaType.Markdown && (
             <MarkdownEditor
+              ariaLabelledby={fieldLabelId}
               error={props.touched && props.error ? props.error : undefined}
               dataTestId={props.field.dataTestId}
-              tabIndex={index}
+              tabIndex={0}
               disableSpellCheck={props.field.disableSpellCheck}
               onChange={async (value: string) => {
                 onChange(value);
@@ -651,7 +703,7 @@ const FormField: <T extends GenericObject>(
             props.field.getCustomElement &&
             props.field.getCustomElement(props.currentValues, {
               error: props.touched && props.error ? props.error : undefined,
-              tabIndex: index,
+              tabIndex: 0,
               onChange: async (value: string) => {
                 onChange(value);
                 props.setFieldValue(props.fieldName, value);
@@ -673,8 +725,9 @@ const FormField: <T extends GenericObject>(
             props.field.fieldType === FormFieldSchemaType.CSS ||
             props.field.fieldType === FormFieldSchemaType.JavaScript) && (
             <CodeEditor
+              ariaLabelledby={fieldLabelId}
               error={props.touched && props.error ? props.error : undefined}
-              tabIndex={index}
+              tabIndex={0}
               onChange={async (value: string) => {
                 onChange(value);
                 props.setFieldValue(props.fieldName, value);
@@ -696,8 +749,9 @@ const FormField: <T extends GenericObject>(
 
           {isFileField && (
             <FilePicker
+              ariaLabelledby={fieldLabelId}
               error={props.touched && props.error ? props.error : undefined}
-              tabIndex={index}
+              tabIndex={0}
               onChange={async (files: Array<FileModel>) => {
                 const strippedFiles: Array<FileModel> = files.map(
                   (i: FileModel) => {
@@ -753,6 +807,7 @@ const FormField: <T extends GenericObject>(
 
           {props.field.fieldType === FormFieldSchemaType.Toggle && (
             <Toggle
+              ariaLabelledby={fieldLabelId}
               error={props.touched && props.error ? props.error : undefined}
               onChange={async (value: boolean) => {
                 onChange(value);
@@ -794,6 +849,7 @@ const FormField: <T extends GenericObject>(
 
           {props.field.fieldType === FormFieldSchemaType.CategoryCheckbox && (
             <CategoryCheckbox
+              ariaLabelledby={fieldLabelId}
               categories={props.field.categoryCheckboxProps?.categories || []}
               options={props.field.categoryCheckboxProps?.options || []}
               error={props.touched && props.error ? props.error : undefined}
@@ -829,7 +885,8 @@ const FormField: <T extends GenericObject>(
             props.field.fieldType === FormFieldSchemaType.PositiveNumber) && (
             <Input
               autoFocus={!props.disableAutofocus && index === 1}
-              tabIndex={index}
+              id={fieldId}
+              tabIndex={0}
               disabled={props.isDisabled || props.field.disabled}
               error={props.touched && props.error ? props.error : undefined}
               dataTestId={props.field.dataTestId}

package/UI/Components/Forms/Fields/IconPicker.tsx

@@ -22,6 +22,7 @@ export interface ComponentProps {
   dataTestId?: string | undefined;
   onEnterPress?: (() => void) | undefined;
   error?: string | undefined;
+  ariaLabelledby?: string | undefined;
 }
 
 const IconPicker: FunctionComponent<ComponentProps> = (
@@ -93,6 +94,7 @@ const IconPicker: FunctionComponent<ComponentProps> = (
           readOnly={true}
           type={InputType.TEXT}
           tabIndex={props.tabIndex}
+          ariaLabelledby={props.ariaLabelledby}
           onChange={() => {}}
           onFocus={props.onFocus || undefined}
         />

package/UI/Components/Forms/Validation.ts

@@ -17,6 +17,52 @@ import Phone from "../../../Types/Phone";
 import { Logger } from "../../Utils/Logger";
 import Port from "../../../Types/Port";
 import Typeof from "../../../Types/Typeof";
+import i18next from "i18next";
+
+type InterpolationValues = Record<string, string | number>;
+
+const interpolateTemplate: (
+  template: string,
+  values: InterpolationValues,
+) => string = (template: string, values: InterpolationValues): string => {
+  return template.replace(
+    /\{\{(\w+)\}\}/g,
+    (match: string, key: string): string => {
+      return key in values ? String(values[key]) : match;
+    },
+  );
+};
+
+/*
+ * Localize a validation message (WCAG 3.1.2 Language of Parts). The English
+ * template — including any {{placeholders}} — doubles as the i18next flat key,
+ * so a locale file maps it to a translated template that keeps correct word
+ * order. When an i18next instance is initialized (e.g. the status page) the
+ * lookup + interpolation run through it; otherwise (apps that don't set up i18n)
+ * we fall back to JS-interpolating the English template, so placeholders are
+ * never shown literally and behavior is unchanged where i18n isn't set up.
+ */
+const translateValidationMessage: (
+  template: string,
+  values?: InterpolationValues,
+) => string = (template: string, values: InterpolationValues = {}): string => {
+  const englishFallback: string = interpolateTemplate(template, values);
+  try {
+    if (!i18next.isInitialized) {
+      return englishFallback;
+    }
+    const translated: unknown = i18next.t(template, {
+      defaultValue: template,
+      keySeparator: false,
+      nsSeparator: false,
+      interpolation: { escapeValue: false },
+      ...values,
+    });
+    return typeof translated === "string" ? translated : englishFallback;
+  } catch {
+    return englishFallback;
+  }
+};
 
 export default class Validation {
   public static validateLength<T extends GenericObject>(
@@ -26,35 +72,52 @@ export default class Validation {
     if (content && field.validation) {
       if (field.validation.minLength) {
         if (content.trim().length < field.validation?.minLength) {
-          return `${field.title || name} cannot be less than ${
-            field.validation.minLength
-          } characters.`;
+          return translateValidationMessage(
+            "{{field}} cannot be less than {{minLength}} characters.",
+            {
+              field: field.title || field.name || "",
+              minLength: field.validation.minLength,
+            },
+          );
         }
       }
 
       if (field.validation.maxLength) {
         if (content.trim().length > field.validation?.maxLength) {
-          return `${field.title || name} cannot be more than ${
-            field.validation.maxLength
-          } characters.`;
+          return translateValidationMessage(
+            "{{field}} cannot be more than {{maxLength}} characters.",
+            {
+              field: field.title || field.name || "",
+              maxLength: field.validation.maxLength,
+            },
+          );
         }
       }
 
       if (field.validation.noSpaces) {
         if (content.trim().includes(" ")) {
-          return `${field.title || name} should not have spaces.`;
+          return translateValidationMessage(
+            "{{field}} should not have spaces.",
+            { field: field.title || field.name || "" },
+          );
         }
       }
 
       if (field.validation.noSpecialCharacters) {
         if (!content.match(/^[A-Za-z0-9_-]*$/)) {
-          return `${field.title || name} can only contain letters, numbers, hyphens (-), and underscores (_).`;
+          return translateValidationMessage(
+            "{{field}} can only contain letters, numbers, hyphens (-), and underscores (_).",
+            { field: field.title || field.name || "" },
+          );
         }
       }
 
       if (field.validation.noNumbers) {
         if (!content.match(/^[A-Za-z]*$/)) {
-          return `${field.title || name} should not have numbers.`;
+          return translateValidationMessage(
+            "{{field}} should not have numbers.",
+            { field: field.title || field.name || "" },
+          );
         }
       }
     }
@@ -68,7 +131,10 @@ export default class Validation {
     if (content && field.validation) {
       if (field.validation.dateShouldBeInTheFuture) {
         if (OneUptimeDate.isInThePast(content.trim())) {
-          return `${field.title || name} should be a future date.`;
+          return translateValidationMessage(
+            "{{field}} should be a future date.",
+            { field: field.title || field.name || "" },
+          );
         }
       }
     }
@@ -85,23 +151,33 @@ export default class Validation {
           content = parseInt(content);
         } catch (e) {
           Logger.error(e as string);
-          return `${field.title || name} should be a number.`;
+          return translateValidationMessage("{{field}} should be a number.", {
+            field: field.title || field.name || "",
+          });
         }
       }
 
       if (field.validation.maxValue) {
         if (content > field.validation?.maxValue) {
-          return `${field.title || name} should not be more than ${
-            field.validation?.maxValue
-          }.`;
+          return translateValidationMessage(
+            "{{field}} should not be more than {{maxValue}}.",
+            {
+              field: field.title || field.name || "",
+              maxValue: field.validation.maxValue,
+            },
+          );
         }
       }
 
       if (field.validation.minValue) {
         if (content < field.validation?.minValue) {
-          return `${field.title || name} should not be less than ${
-            field.validation?.minValue
-          }.`;
+          return translateValidationMessage(
+            "{{field}} should not be less than {{minValue}}.",
+            {
+              field: field.title || field.name || "",
+              minValue: field.validation.minValue,
+            },
+          );
         }
       }
     }
@@ -126,7 +202,9 @@ export default class Validation {
     }
 
     if (required && (!content || content.length === 0)) {
-      return `${field.title} is required.`;
+      return translateValidationMessage("{{field}} is required.", {
+        field: field.title || field.name || "",
+      });
     }
     return null;
   }
@@ -143,9 +221,13 @@ export default class Validation {
       (entity[field.validation?.toMatchField] as string).toString().trim() !==
         content.trim()
     ) {
-      return `${field.title} should match ${
-        field.validation?.toMatchField as string
-      }`;
+      return translateValidationMessage(
+        "{{field}} should match {{matchField}}",
+        {
+          field: field.title || field.name || "",
+          matchField: field.validation?.toMatchField as string,
+        },
+      );
     }
     return null;
   }
@@ -156,7 +238,7 @@ export default class Validation {
   ): string | null {
     if (content && field.fieldType === FormFieldSchemaType.Email) {
       if (!Email.isValid(content!)) {
-        return "Email is not valid.";
+        return translateValidationMessage("Email is not valid.");
       }
     }
 
@@ -329,7 +411,9 @@ export default class Validation {
           }
         }
       } else if (field.required) {
-        errors[name] = `${field.title || name} is required.`;
+        errors[name] = translateValidationMessage("{{field}} is required.", {
+          field: field.title || field.name || "",
+        });
       }
     }
 

package/UI/Components/Icon/Icon.tsx

@@ -2894,6 +2894,63 @@ const Icon: FunctionComponent<ComponentProps> = ({
         />
       </>,
     );
+  } else if (icon === IconProp.Podman) {
+    /*
+     * Podman glyph — a pod (rounded enclosure) grouping containers, with a
+     * small seal-head nod to Podman's mascot. Intentionally a hand-drawn
+     * generic mark (not the official Podman seal logo / trademark), matching
+     * the generic-glyph convention used for Kubernetes/Docker above and
+     * deliberately distinct from the Docker whale.
+     */
+    return getSvgWrapper(
+      <>
+        {/* Pod enclosure */}
+        <rect
+          x="3"
+          y="8"
+          width="18"
+          height="11"
+          rx="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        {/* Grouped containers inside the pod */}
+        <rect
+          x="6"
+          y="12"
+          width="3.5"
+          height="4"
+          rx="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <rect
+          x="10.25"
+          y="12"
+          width="3.5"
+          height="4"
+          rx="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <rect
+          x="14.5"
+          y="12"
+          width="3.5"
+          height="4"
+          rx="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        {/* Seal head peeking over the pod */}
+        <circle cx="17" cy="5.5" r="2" />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M19 6.2c1 0.1 1.8-0.2 2.4-0.9"
+        />
+      </>,
+    );
   } else if (icon === IconProp.Proxmox) {
     /*
      * Generic hypervisor glyph — VM tiles running on a server base.

package/UI/Components/Input/Input.tsx

@@ -23,6 +23,8 @@ export enum InputType {
 
 export interface ComponentProps {
   initialValue?: undefined | string | Date;
+  id?: string | undefined;
+  ariaLabelledby?: string | undefined;
   onClick?: undefined | (() => void);
   placeholder?: undefined | string;
   className?: undefined | string;
@@ -155,11 +157,13 @@ const Input: FunctionComponent<ComponentProps> = (
         <input
           autoFocus={props.autoFocus}
           ref={ref}
+          id={props.id}
           onFocus={props.onFocus}
           onClick={props.onClick}
           data-testid={props.dataTestId}
           spellCheck={!props.disableSpellCheck}
           autoComplete={props.autoComplete}
+          aria-labelledby={props.ariaLabelledby}
           aria-invalid={props.error ? "true" : undefined}
           aria-describedby={props.error ? "input-error-message" : undefined}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {

package/UI/Components/Link/Link.tsx

@@ -41,6 +41,14 @@ const Link: FunctionComponent<ComponentProps> = (
    */
   if (props.to) {
     linkProps["href"] = props.to.toString();
+  } else if (props.onClick) {
+    /*
+     * An anchor with an onClick but no href is not reachable or operable via the
+     * keyboard. Expose it as a button so it is focusable and activatable with
+     * Enter/Space (WCAG 2.1.1). Purely visual — no appearance change.
+     */
+    linkProps["role"] = "button";
+    linkProps["tabIndex"] = 0;
   }
 
   if (props.openInNewTab) {
@@ -61,6 +69,21 @@ const Link: FunctionComponent<ComponentProps> = (
       style={props.style}
       title={props.title}
       aria-label={props.title}
+      onKeyDown={(event: React.KeyboardEvent<HTMLAnchorElement>) => {
+        /*
+         * For onClick-only links (no href) we render role="button"; activate them
+         * with Enter/Space like a native button. Links with an href are activated
+         * natively by the browser, so we leave those alone.
+         */
+        if (
+          !props.to &&
+          props.onClick &&
+          (event.key === "Enter" || event.key === " ")
+        ) {
+          event.preventDefault();
+          props.onClick();
+        }
+      }}
       onAuxClick={(event: React.MouseEvent<HTMLAnchorElement>) => {
         // middle click
         if (event.button === 1) {