@oneuptime/common 11.0.3 → 11.0.5

package/Tests/Server/Utils/CookieSSOToken.test.ts

@@ -0,0 +1,130 @@
+import CookieUtil from "../../../Server/Utils/Cookie";
+import JSONWebToken from "../../../Server/Utils/JsonWebToken";
+import { JSONObject } from "../../../Types/JSON";
+import JSONWebTokenData from "../../../Types/JsonWebTokenData";
+import Email from "../../../Types/Email";
+import Name from "../../../Types/Name";
+import ObjectID from "../../../Types/ObjectID";
+import SsoProviderType from "../../../Types/SSO/SsoProviderType";
+import User from "../../../Models/DatabaseModels/User";
+import { describe, expect, test } from "@jest/globals";
+
+/*
+ * Tests for the SSO-provider discriminator that CookieUtil.getSSOToken stamps
+ * onto a per-project SSO token. These run real JWT signing (no mocks): the JWT
+ * secret falls back to EncryptionSecret = "secret" when ENCRYPTION_SECRET is
+ * unset (see Common/Server/EnvironmentConfig.ts), so no env setup is required.
+ */
+describe("CookieUtil.getSSOToken - SSO provider discriminator", () => {
+  const buildUser: () => User = (): User => {
+    const user: User = new User();
+    user.id = ObjectID.generate();
+    user.name = new Name("Test User");
+    user.email = new Email("test@oneuptime.com");
+    return user;
+  };
+
+  test("token carries userId and projectId (round-trips through JSONWebToken.decode)", () => {
+    const user: User = buildUser();
+    const projectId: ObjectID = ObjectID.generate();
+
+    const token: string = CookieUtil.getSSOToken({
+      user,
+      projectId,
+    });
+
+    expect(typeof token).toBe("string");
+    expect(token.length).toBeGreaterThan(0);
+
+    const decoded: JSONWebTokenData = JSONWebToken.decode(token);
+
+    expect(decoded.userId?.toString()).toBe(user.id!.toString());
+    expect(decoded.projectId?.toString()).toBe(projectId.toString());
+  });
+
+  test("token carries the ssoProviderId + ssoProviderType discriminator when provided", () => {
+    const user: User = buildUser();
+    const projectId: ObjectID = ObjectID.generate();
+    const ssoProviderId: ObjectID = ObjectID.generate();
+
+    const token: string = CookieUtil.getSSOToken({
+      user,
+      projectId,
+      ssoProviderId,
+      ssoProviderType: SsoProviderType.GlobalSSO,
+    });
+
+    /*
+     * The discriminator lives on the raw JWT payload. JSONWebToken.decode()
+     * intentionally re-shapes the payload into JSONWebTokenData and does not
+     * surface ssoProviderId / ssoProviderType, so we assert the round-trip on
+     * the raw payload (decodeJsonPayload), which is the actual transport layer.
+     */
+    const payload: JSONObject = JSONWebToken.decodeJsonPayload(token);
+
+    expect(payload["userId"]).toBe(user.id!.toString());
+    expect(payload["projectId"]).toBe(projectId.toString());
+    expect(payload["ssoProviderId"]).toBe(ssoProviderId.toString());
+    expect(payload["ssoProviderType"]).toBe(SsoProviderType.GlobalSSO);
+  });
+
+  test("each SsoProviderType enum value round-trips on the token", () => {
+    const user: User = buildUser();
+    const projectId: ObjectID = ObjectID.generate();
+    const ssoProviderId: ObjectID = ObjectID.generate();
+
+    const providerTypes: Array<SsoProviderType> = [
+      SsoProviderType.ProjectSSO,
+      SsoProviderType.ProjectOIDC,
+      SsoProviderType.GlobalSSO,
+      SsoProviderType.GlobalOIDC,
+    ];
+
+    for (const providerType of providerTypes) {
+      const token: string = CookieUtil.getSSOToken({
+        user,
+        projectId,
+        ssoProviderId,
+        ssoProviderType: providerType,
+      });
+
+      const payload: JSONObject = JSONWebToken.decodeJsonPayload(token);
+
+      expect(payload["ssoProviderId"]).toBe(ssoProviderId.toString());
+      expect(payload["ssoProviderType"]).toBe(providerType);
+    }
+  });
+
+  test("ssoProviderId / ssoProviderType are absent (undefined) when not provided (legacy token shape)", () => {
+    const user: User = buildUser();
+    const projectId: ObjectID = ObjectID.generate();
+
+    const token: string = CookieUtil.getSSOToken({
+      user,
+      projectId,
+    });
+
+    const payload: JSONObject = JSONWebToken.decodeJsonPayload(token);
+
+    // No discriminator was provided, so neither field should carry a value.
+    expect(payload["ssoProviderId"]).toBeUndefined();
+    expect(payload["ssoProviderType"]).toBeUndefined();
+  });
+
+  test("ssoProviderId without ssoProviderType still records the provider id", () => {
+    const user: User = buildUser();
+    const projectId: ObjectID = ObjectID.generate();
+    const ssoProviderId: ObjectID = ObjectID.generate();
+
+    const token: string = CookieUtil.getSSOToken({
+      user,
+      projectId,
+      ssoProviderId,
+    });
+
+    const payload: JSONObject = JSONWebToken.decodeJsonPayload(token);
+
+    expect(payload["ssoProviderId"]).toBe(ssoProviderId.toString());
+    expect(payload["ssoProviderType"]).toBeUndefined();
+  });
+});

package/Types/JsonWebTokenData.ts

@@ -2,6 +2,7 @@ import Email from "./Email";
 import { JSONObject } from "./JSON";
 import Name from "./Name";
 import ObjectID from "./ObjectID";
+import SsoProviderType from "./SSO/SsoProviderType";
 
 export default interface JSONWebTokenData extends JSONObject {
   userId: ObjectID;
@@ -12,4 +13,6 @@ export default interface JSONWebTokenData extends JSONObject {
   projectId?: ObjectID | undefined; // for SSO logins.
   isGlobalLogin: boolean; // If this is OneUptime username and password login. This is true, if this is SSO login. Then, this is false.
   sessionId?: ObjectID | undefined;
+  ssoProviderId?: ObjectID | undefined; // which SSO provider (Project or Global SSO/OIDC) issued this per-project SSO token.
+  ssoProviderType?: SsoProviderType | undefined;
 }

package/Types/SSO/SsoProviderType.ts

@@ -0,0 +1,8 @@
+enum SsoProviderType {
+  ProjectSSO = "ProjectSSO",
+  ProjectOIDC = "ProjectOIDC",
+  GlobalSSO = "GlobalSSO",
+  GlobalOIDC = "GlobalOIDC",
+}
+
+export default SsoProviderType;

package/UI/Components/Accordion/Accordion.tsx

@@ -60,7 +60,9 @@ const Accordion: FunctionComponent<ComponentProps> = (
     className = "-ml-5 -mr-5 p-5 mt-1";
   }
 
-  const accordionId: string = `accordion-content-${React.useId()}`;
+  const generatedId: string = React.useId();
+  const accordionId: string = `accordion-content-${generatedId}`;
+  const accordionTitleId: string = `accordion-title-${generatedId}`;
 
   const handleKeyDown: (event: React.KeyboardEvent) => void = (
     event: React.KeyboardEvent,
@@ -84,6 +86,7 @@ const Accordion: FunctionComponent<ComponentProps> = (
           tabIndex={0}
           aria-expanded={isOpen}
           aria-controls={accordionId}
+          aria-labelledby={props.title ? accordionTitleId : undefined}
           onClick={() => {
             setIsOpen(!isOpen);
           }}
@@ -121,6 +124,7 @@ const Accordion: FunctionComponent<ComponentProps> = (
                 }`}
               >
                 <div
+                  id={accordionTitleId}
                   className={`text-gray-900 leading-snug ${props.titleClassName || ""}`}
                 >
                   {props.title}

package/UI/Components/CardSelect/CardSelect.tsx

@@ -30,6 +30,7 @@ export interface ComponentProps {
   error?: string | undefined;
   tabIndex?: number | undefined;
   dataTestId?: string | undefined;
+  ariaLabelledby?: string | undefined;
   // Force single-column (1 item per row). Default: responsive 1/2/3 grid.
   singleColumn?: boolean | undefined;
 }
@@ -67,7 +68,11 @@ const CardSelect: FunctionComponent<ComponentProps> = (
 
   return (
     <div data-testid={props.dataTestId}>
-      <div role="radiogroup" aria-label="Select an option">
+      <div
+        role="radiogroup"
+        aria-label="Select an option"
+        aria-labelledby={props.ariaLabelledby}
+      >
         {groups.map((group: RenderGroup, groupIndex: number) => {
           return (
             <div key={groupIndex} className={groupIndex > 0 ? "mt-8" : ""}>

package/UI/Components/CategoryCheckbox/Index.tsx

@@ -19,6 +19,7 @@ export interface CategoryCheckboxProps
   initialValue?: undefined | Array<CategoryCheckboxValue | BaseModel>;
   error?: string | undefined;
   dataTestId?: string | undefined;
+  ariaLabelledby?: string | undefined;
 }
 
 const CategoryCheckbox: FunctionComponent<CategoryCheckboxProps> = (
@@ -152,7 +153,7 @@ const CategoryCheckbox: FunctionComponent<CategoryCheckboxProps> = (
   };
 
   return (
-    <div>
+    <div role="group" aria-labelledby={props.ariaLabelledby}>
       {getCategory(undefined, categories.length === 0)}
       {categories.map((category: CheckboxCategory, i: number) => {
         return (

package/UI/Components/Charts/Area/AreaChart.tsx

@@ -108,11 +108,6 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
     });
   }, [props.exemplarPoints, props.xAxis]);
 
-  const className: string = props.heightInPx ? `` : "h-80";
-  const style: React.CSSProperties = props.heightInPx
-    ? { height: `${props.heightInPx}px` }
-    : {};
-
   const hasNoData: boolean =
     !props.data ||
     props.data.length === 0 ||
@@ -134,10 +129,11 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
     typeof yAxisMaxOption === "number" ? { maxValue: yAxisMaxOption } : {};
 
   return (
-    <div className="relative">
+    <div
+      className="relative flex flex-1"
+      style={props.heightInPx ? { height: `${props.heightInPx}px` } : undefined}
+    >
       <AreaChart
-        className={className}
-        style={style}
         data={records}
         tickGap={30}
         index={"Time"}

package/UI/Components/Charts/Bar/BarChart.tsx

@@ -54,11 +54,6 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
     setRecords(records);
   }, [props.data]);
 
-  const className: string = props.heightInPx ? `` : "h-80";
-  const style: React.CSSProperties = props.heightInPx
-    ? { height: `${props.heightInPx}px` }
-    : {};
-
   const hasNoData: boolean =
     !props.data ||
     props.data.length === 0 ||
@@ -67,10 +62,11 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
     });
 
   return (
-    <div className="relative">
+    <div
+      className="relative flex flex-1"
+      style={props.heightInPx ? { height: `${props.heightInPx}px` } : undefined}
+    >
       <BarChart
-        className={className}
-        style={style}
         data={records}
         tickGap={30}
         index={"Time"}

package/UI/Components/Charts/ChartGroup/ChartGroup.tsx

@@ -49,7 +49,6 @@ export interface Chart {
 export interface ComponentProps {
   charts: Array<Chart>;
   hideCard?: boolean | undefined;
-  heightInPx?: number | undefined;
   chartCssClass?: string | undefined;
 }
 
@@ -80,7 +79,6 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
             key={index}
             {...(chart.props as LineChartProps)}
             syncid={syncId}
-            heightInPx={props.heightInPx}
             exemplarPoints={chart.exemplarPoints}
             onExemplarClick={chart.onExemplarClick}
             showLegend={showLegend}
@@ -92,7 +90,6 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
             key={index}
             {...(chart.props as BarChartProps)}
             syncid={syncId}
-            heightInPx={props.heightInPx}
             showLegend={showLegend}
           />
         );
@@ -102,7 +99,6 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
             key={index}
             {...(chart.props as AreaChartProps)}
             syncid={syncId}
-            heightInPx={props.heightInPx}
             exemplarPoints={chart.exemplarPoints}
             onExemplarClick={chart.onExemplarClick}
             showLegend={showLegend}
@@ -244,14 +240,14 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
     return (
       <>
         {renderMetricInfoModal()}
-        <div className="space-y-3">
+        <div className="space-y-3 flex-col flex flex-1 w-full">
           {props.charts.map((chart: Chart, index: number) => {
             return (
               <div
                 key={index}
-                className={`bg-white ${props.chartCssClass || ""}`}
+                className={`bg-white ${props.chartCssClass || ""} flex-1 flex-col flex w-full`}
               >
-                <div className="px-5 pt-4 pb-4">
+                <div className="px-5 pt-4 pb-4 flex flex-col flex-1">
                   <div className="mb-3 pb-3 border-b border-gray-100">
                     <div className="flex items-center">
                       <h3 className="text-sm font-semibold text-gray-800 tracking-tight">
@@ -265,10 +261,10 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
                       </p>
                     )}
                   </div>
+                  {getChartContent(chart, index)}
                   {chart.seriesControls ? (
                     <div className="mb-3">{chart.seriesControls}</div>
                   ) : null}
-                  {getChartContent(chart, index)}
                 </div>
               </div>
             );

package/UI/Components/Charts/ChartLibrary/AreaChart/AreaChart.tsx

@@ -689,7 +689,7 @@ const AreaChart: React.ForwardRefExoticComponent<
     }
 
     return (
-      <div ref={ref} className={cx("h-80 w-full", className)} {...other}>
+      <div ref={ref} className={cx("flex-1 w-full", className)} {...other}>
         <ResponsiveContainer>
           <RechartsAreaChart
             data={data}

package/UI/Components/Charts/ChartLibrary/BarChart/BarChart.tsx

@@ -780,7 +780,7 @@ const BarChart: React.ForwardRefExoticComponent<
     return (
       <div
         ref={forwardedRef}
-        className={cx("h-80 w-full", className)}
+        className={cx("flex-1 w-full", className)}
         data-tremor-id="tremor-raw"
         {...other}
       >

package/UI/Components/Charts/ChartLibrary/LineChart/LineChart.tsx

@@ -695,7 +695,7 @@ const LineChart: React.ForwardRefExoticComponent<
     }
 
     return (
-      <div ref={ref} className={cx("h-80 w-full", className)} {...other}>
+      <div ref={ref} className={cx("flex-1 w-full", className)} {...other}>
         <ResponsiveContainer>
           <RechartsLineChart
             data={data}

package/UI/Components/Charts/Line/LineChart.tsx

@@ -86,11 +86,6 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
     });
   }, [props.exemplarPoints, props.xAxis]);
 
-  const className: string = props.heightInPx ? `` : "h-80";
-  const style: React.CSSProperties = props.heightInPx
-    ? { height: `${props.heightInPx}px` }
-    : {};
-
   const hasNoData: boolean =
     !props.data ||
     props.data.length === 0 ||
@@ -114,10 +109,11 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
     typeof yAxisMaxOption === "number" ? { maxValue: yAxisMaxOption } : {};
 
   return (
-    <div className="relative">
+    <div
+      className="relative flex flex-1"
+      style={props.heightInPx ? { height: `${props.heightInPx}px` } : undefined}
+    >
       <LineChart
-        className={className}
-        style={style}
         data={records}
         tickGap={30}
         index={"Time"}

package/UI/Components/CodeEditor/CodeEditor.tsx

@@ -25,6 +25,7 @@ export interface ComponentProps {
   value?: string | undefined;
   showLineNumbers?: boolean | undefined;
   disableSpellCheck?: boolean | undefined;
+  ariaLabelledby?: string | undefined;
 }
 
 const CodeEditor: FunctionComponent<ComponentProps> = (
@@ -119,6 +120,7 @@ const CodeEditor: FunctionComponent<ComponentProps> = (
   return (
     <div
       data-testid={props.dataTestId}
+      aria-labelledby={props.ariaLabelledby}
       onClick={() => {
         if (props.onClick) {
           props.onClick();

package/UI/Components/CollapsibleSection/CollapsibleSection.tsx

@@ -46,6 +46,9 @@ const CollapsibleSection: FunctionComponent<ComponentProps> = (
 
   const variant: CollapsibleSectionVariant = props.variant || "default";
 
+  // Associate the role="button" header with its visible title text (WCAG 4.1.2).
+  const collapsibleTitleId: string = `collapsible-title-${React.useId()}`;
+
   const getContainerClassName: () => string = (): string => {
     const baseClassName: string = props.className || "";
 
@@ -97,6 +100,7 @@ const CollapsibleSection: FunctionComponent<ComponentProps> = (
           }
         }}
         aria-expanded={!isCollapsed}
+        aria-labelledby={collapsibleTitleId}
       >
         <div className="flex items-center flex-1 min-w-0">
           <Icon
@@ -105,7 +109,10 @@ const CollapsibleSection: FunctionComponent<ComponentProps> = (
           />
           <div className="flex-1 min-w-0">
             <div className="flex items-center">
-              <span className="text-sm font-medium text-gray-900 truncate">
+              <span
+                id={collapsibleTitleId}
+                className="text-sm font-medium text-gray-900 truncate"
+              >
                 {props.title}
               </span>
               {isCollapsed && props.badge && (

package/UI/Components/Dropdown/Dropdown.tsx

@@ -59,6 +59,7 @@ export interface ComponentProps {
   id?: string | undefined;
   dataTestId?: string | undefined;
   ariaLabel?: string | undefined;
+  ariaLabelledby?: string | undefined;
 }
 
 const Dropdown: FunctionComponent<ComponentProps> = (
@@ -537,6 +538,7 @@ const Dropdown: FunctionComponent<ComponentProps> = (
           props.onFocus?.();
         }}
         aria-label={props.ariaLabel}
+        aria-labelledby={props.ariaLabelledby}
         aria-invalid={props.error ? true : undefined}
         aria-describedby={props.error ? errorId : undefined}
         classNames={{

package/UI/Components/EditionLabel/EditionLabel.tsx

@@ -45,6 +45,7 @@ const EditionLabel: FunctionComponent<ComponentProps> = (
   const [validationError, setValidationError] = useState<string>("");
   const [successMessage, setSuccessMessage] = useState<string>("");
   const [isValidating, setIsValidating] = useState<boolean>(false);
+  const [isChangingLicense, setIsChangingLicense] = useState<boolean>(false);
   const licenseInputEditedRef: React.MutableRefObject<boolean> =
     useRef<boolean>(false);
 
@@ -318,6 +319,22 @@ const EditionLabel: FunctionComponent<ComponentProps> = (
     setIsDialogOpen(false);
     setValidationError("");
     setSuccessMessage("");
+    setIsChangingLicense(false);
+  };
+
+  const handleStartChangingLicense: () => void = () => {
+    setIsChangingLicense(true);
+    setValidationError("");
+    setSuccessMessage("");
+    setLicenseKeyInput("");
+    licenseInputEditedRef.current = true;
+  };
+
+  const handleCancelChangingLicense: () => void = () => {
+    setIsChangingLicense(false);
+    setValidationError("");
+    licenseInputEditedRef.current = false;
+    setLicenseKeyInput(globalConfig?.enterpriseLicenseKey || "");
   };
 
   const handlePrimaryAction: () => void = () => {
@@ -371,6 +388,7 @@ const EditionLabel: FunctionComponent<ComponentProps> = (
         licenseInputEditedRef.current = false;
         setLicenseKeyInput((payload["licenseKey"] as string) || trimmedKey);
         setSuccessMessage("License validated successfully.");
+        setIsChangingLicense(false);
 
         await fetchGlobalConfig();
       } catch (err) {
@@ -396,8 +414,10 @@ const EditionLabel: FunctionComponent<ComponentProps> = (
     }
   };
 
-  const shouldShowEnterpriseValidationButton: boolean =
-    IS_ENTERPRISE_EDITION && !licenseValid;
+  const showLicenseKeyInput: boolean =
+    IS_ENTERPRISE_EDITION && (!licenseValid || isChangingLicense);
+
+  const shouldShowEnterpriseValidationButton: boolean = showLicenseKeyInput;
 
   const modalSubmitButtonText: string | undefined = IS_ENTERPRISE_EDITION
     ? shouldShowEnterpriseValidationButton
@@ -611,6 +631,20 @@ const EditionLabel: FunctionComponent<ComponentProps> = (
                   </div>
                 )}
 
+                {!configError &&
+                  !isConfigLoading &&
+                  licenseValid &&
+                  !isChangingLicense && (
+                    <div className="-ml-3">
+                      <Button
+                        title="Change license key"
+                        icon={IconProp.Edit}
+                        buttonStyle={ButtonStyleType.NORMAL}
+                        onClick={handleStartChangingLicense}
+                      />
+                    </div>
+                  )}
+
                 {!configError &&
                   !isConfigLoading &&
                   !licenseValid &&
@@ -632,11 +666,13 @@ const EditionLabel: FunctionComponent<ComponentProps> = (
                       <Alert type={AlertType.SUCCESS} title={successMessage} />
                     )}
 
-                    {!licenseValid && (
+                    {showLicenseKeyInput && (
                       <>
                         <div>
                           <label className="text-sm font-medium text-gray-700">
-                            License Key
+                            {isChangingLicense
+                              ? "New License Key"
+                              : "License Key"}
                           </label>
                           <Input
                             value={licenseKeyInput}
@@ -656,18 +692,34 @@ const EditionLabel: FunctionComponent<ComponentProps> = (
                           />
                         )}
 
-                        <p className="text-xs text-gray-500">
-                          You have installed Enterprise Edition of OneUptime.
-                          You need to validate your license key. Need a license
-                          key? Contact our sales team at{" "}
-                          <a
-                            href="mailto:sales@oneuptime.com"
-                            className="font-medium text-indigo-600 hover:text-indigo-700"
-                          >
-                            sales@oneuptime.com
-                          </a>
-                          .
-                        </p>
+                        {isChangingLicense ? (
+                          <div className="flex items-center justify-between gap-3">
+                            <p className="text-xs text-gray-500">
+                              Enter the new enterprise license key and validate
+                              it to replace the current one. Your existing
+                              license stays active until the new key is
+                              validated.
+                            </p>
+                            <Button
+                              title="Cancel"
+                              buttonStyle={ButtonStyleType.NORMAL}
+                              onClick={handleCancelChangingLicense}
+                            />
+                          </div>
+                        ) : (
+                          <p className="text-xs text-gray-500">
+                            You have installed Enterprise Edition of OneUptime.
+                            You need to validate your license key. Need a
+                            license key? Contact our sales team at{" "}
+                            <a
+                              href="mailto:sales@oneuptime.com"
+                              className="font-medium text-indigo-600 hover:text-indigo-700"
+                            >
+                              sales@oneuptime.com
+                            </a>
+                            .
+                          </p>
+                        )}
                       </>
                     )}
                   </>

package/UI/Components/EntityDropdown/EntityDropdown.tsx

@@ -86,6 +86,7 @@ export interface EntityDropdownProps {
   id?: string | undefined;
   dataTestId?: string | undefined;
   ariaLabel?: string | undefined;
+  ariaLabelledby?: string | undefined;
   disabled?: boolean | undefined;
 
   /*
@@ -1115,6 +1116,7 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
           <button
             type="button"
             disabled={props.disabled}
+            aria-labelledby={props.ariaLabelledby}
             onClick={(): void => {
               if (props.disabled) {
                 return;
@@ -1204,6 +1206,7 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
               aria-autocomplete="list"
               aria-expanded={isOpen}
               aria-label={props.ariaLabel}
+              aria-labelledby={props.ariaLabelledby}
               aria-invalid={props.error ? true : undefined}
               data-testid={props.dataTestId}
               role="combobox"

package/UI/Components/FilePicker/FilePicker.tsx

@@ -32,6 +32,7 @@ export interface ComponentProps {
   isMultiFilePicker?: boolean | undefined;
   tabIndex?: number | undefined;
   error?: string | undefined;
+  ariaLabelledby?: string | undefined;
 }
 
 type UploadStatus = {
@@ -449,6 +450,7 @@ const FilePicker: FunctionComponent<ComponentProps> = (
                       id="file-upload"
                       name="file-upload"
                       type="file"
+                      aria-labelledby={props.ariaLabelledby}
                       className="sr-only"
                     />
                   </label>

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

@@ -24,6 +24,7 @@ export interface ComponentProps {
   dataTestId?: string | undefined;
   onEnterPress?: (() => void) | undefined;
   error?: string | undefined;
+  ariaLabelledby?: string | undefined;
 }
 
 const ColorPicker: FunctionComponent<ComponentProps> = (
@@ -83,6 +84,7 @@ const ColorPicker: FunctionComponent<ComponentProps> = (
           readOnly={true}
           type={InputType.TEXT}
           tabIndex={props.tabIndex}
+          ariaLabelledby={props.ariaLabelledby}
           onChange={(value: string) => {
             if (!value) {
               return handleChange("");

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

@@ -5,6 +5,8 @@ import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
   title: string;
+  id?: string | undefined;
+  htmlFor?: string | undefined;
   required?: boolean | undefined;
   sideLink?: FormFieldSideLink | undefined;
   description?: string | ReactElement | undefined;
@@ -26,6 +28,8 @@ const FieldLabelElement: FunctionComponent<ComponentProps> = (
   return (
     <>
       <label
+        id={props.id}
+        htmlFor={props.htmlFor}
         className={
           props.className ||
           `block ${