diff --git a/.changeset/sweet-islands-dance.md b/.changeset/sweet-islands-dance.md
new file mode 100644
index 00000000000..52e2ed7da1e
--- /dev/null
+++ b/.changeset/sweet-islands-dance.md
@@ -0,0 +1,5 @@
+---
+"@itwin/components-react": minor
+---
+
+Provide option to define data-testids for PropertyEditor components
diff --git a/.vscode/cSpell.json b/.vscode/cSpell.json
index 110bea8d6cc..a73ee5f42a8 100644
--- a/.vscode/cSpell.json
+++ b/.vscode/cSpell.json
@@ -29,6 +29,7 @@
     "backstageevent",
     "badeditor",
     "badtype",
+    "beforeunload",
     "betools",
     "borderless",
     "boxshadow",
diff --git a/.vscode/launch.json b/.vscode/launch.json
index 892321a6437..4278bde17ab 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -80,7 +80,7 @@
       "type": "node",
       "request": "launch",
       "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "start"],
+      "runtimeArgs": ["run", "dev"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "serverReadyAction": {
diff --git a/common/api/components-react.api.md b/common/api/components-react.api.md
index 737071fa751..8e1b0035609 100644
--- a/common/api/components-react.api.md
+++ b/common/api/components-react.api.md
@@ -584,6 +584,7 @@ export interface EditorProps<TMetadata = ValueMetadata, TValue = Value> {
     commit?: () => void;
     // (undocumented)
     disabled?: boolean;
+    id?: string;
     // (undocumented)
     metadata: TMetadata;
     // (undocumented)
diff --git a/common/api/core-react.api.md b/common/api/core-react.api.md
index c6d1b1c3a09..db5c7d5f857 100644
--- a/common/api/core-react.api.md
+++ b/common/api/core-react.api.md
@@ -649,6 +649,7 @@ export interface ImageCheckBoxProps extends CommonProps {
     border?: boolean;
     checked?: boolean;
     disabled?: boolean;
+    id?: string;
     imageOff: string | React_2.ReactNode;
     imageOn: string | React_2.ReactNode;
     inputClassName?: string;
diff --git a/ui/components-react/src/components-react/editors/BooleanEditor.tsx b/ui/components-react/src/components-react/editors/BooleanEditor.tsx
index 4466c740d03..af70562abb3 100644
--- a/ui/components-react/src/components-react/editors/BooleanEditor.tsx
+++ b/ui/components-react/src/components-react/editors/BooleanEditor.tsx
@@ -140,6 +140,7 @@ export class BooleanEditor
           this.props.propertyRecord?.isReadonly
         }
         data-testid="components-checkbox-editor"
+        id={this.props.propertyRecord?.property.name}
       ></Checkbox>
     );
   }
diff --git a/ui/components-react/src/components-react/editors/DateTimeEditor.tsx b/ui/components-react/src/components-react/editors/DateTimeEditor.tsx
index 23f54f7614a..e4776bccb8d 100644
--- a/ui/components-react/src/components-react/editors/DateTimeEditor.tsx
+++ b/ui/components-react/src/components-react/editors/DateTimeEditor.tsx
@@ -291,7 +291,11 @@ export class DateTimeEditor
     );
 
     return (
-      <div className={className} ref={this._divElement}>
+      <div
+        className={className}
+        ref={this._divElement}
+        id={this.props.propertyRecord?.property.name}
+      >
         <PopupButton
           label={this.state.displayValue}
           onClose={this._handleClose}
diff --git a/ui/components-react/src/components-react/editors/EnumButtonGroupEditor.tsx b/ui/components-react/src/components-react/editors/EnumButtonGroupEditor.tsx
index 1f43de04ea0..e7d99537acb 100644
--- a/ui/components-react/src/components-react/editors/EnumButtonGroupEditor.tsx
+++ b/ui/components-react/src/components-react/editors/EnumButtonGroupEditor.tsx
@@ -221,6 +221,7 @@ export class EnumButtonGroupEditor
         )}
         style={this.props.style}
         ref={this._divElement}
+        id={this.props.propertyRecord?.property.name}
       >
         {this.state.choices &&
           this.state.enumIcons.length &&
diff --git a/ui/components-react/src/components-react/editors/EnumEditor.tsx b/ui/components-react/src/components-react/editors/EnumEditor.tsx
index 9f3dbdb4a33..5db0a404d24 100644
--- a/ui/components-react/src/components-react/editors/EnumEditor.tsx
+++ b/ui/components-react/src/components-react/editors/EnumEditor.tsx
@@ -181,6 +181,7 @@ export class EnumEditor
           value={selectValue}
           onChange={this._updateSelectValue}
           data-testid="components-select-editor"
+          id={this.props.propertyRecord?.property.name}
           options={this.state.options}
           triggerProps={{
             ref: (el) => {
diff --git a/ui/components-react/src/components-react/editors/IconEditor.tsx b/ui/components-react/src/components-react/editors/IconEditor.tsx
index 99493386308..7d9e8db4cb2 100644
--- a/ui/components-react/src/components-react/editors/IconEditor.tsx
+++ b/ui/components-react/src/components-react/editors/IconEditor.tsx
@@ -171,6 +171,7 @@ export class IconEditor
           readonly={this.props.propertyRecord?.isReadonly}
           onIconChange={this._onIconChange}
           data-testid="components-icon-editor"
+          id={this.props.propertyRecord?.property.name}
         />
       </div>
     );
diff --git a/ui/components-react/src/components-react/editors/ImageCheckBoxEditor.tsx b/ui/components-react/src/components-react/editors/ImageCheckBoxEditor.tsx
index 53a357d1942..224e0e52ac8 100644
--- a/ui/components-react/src/components-react/editors/ImageCheckBoxEditor.tsx
+++ b/ui/components-react/src/components-react/editors/ImageCheckBoxEditor.tsx
@@ -162,6 +162,7 @@ export class ImageCheckBoxEditor
         disabled={isDisabled}
         onClick={this._handleClick}
         data-testid="components-imagecheckbox-editor"
+        id={this.props.propertyRecord?.property.name}
       />
     );
   }
diff --git a/ui/components-react/src/components-react/editors/NumericInputEditor.tsx b/ui/components-react/src/components-react/editors/NumericInputEditor.tsx
index 9c5bcd1935e..d182c9af58c 100644
--- a/ui/components-react/src/components-react/editors/NumericInputEditor.tsx
+++ b/ui/components-react/src/components-react/editors/NumericInputEditor.tsx
@@ -197,6 +197,7 @@ export class NumericInputEditor
     return (
       <NumericEditor
         ref={this._inputElement}
+        id={this.props.propertyRecord?.property.name}
         className={className}
         style={style}
         value={this.state.value}
diff --git a/ui/components-react/src/components-react/editors/SliderEditor.tsx b/ui/components-react/src/components-react/editors/SliderEditor.tsx
index 6ee4d451719..ac8b9c95f4d 100644
--- a/ui/components-react/src/components-react/editors/SliderEditor.tsx
+++ b/ui/components-react/src/components-react/editors/SliderEditor.tsx
@@ -317,7 +317,11 @@ export class SliderEditor
     );
 
     return (
-      <div className={className} ref={this._divElement}>
+      <div
+        className={className}
+        ref={this._divElement}
+        id={this.props.propertyRecord?.property.name}
+      >
         <PopupButton
           label={this.state.value}
           onClose={this._handleClose}
diff --git a/ui/components-react/src/components-react/editors/TextareaEditor.tsx b/ui/components-react/src/components-react/editors/TextareaEditor.tsx
index 56ad21ba5b1..1f0d7d0ffca 100644
--- a/ui/components-react/src/components-react/editors/TextareaEditor.tsx
+++ b/ui/components-react/src/components-react/editors/TextareaEditor.tsx
@@ -208,7 +208,11 @@ export class TextareaEditor
     textareaProps["aria-label"] = UiComponents.translate("editor.textarea");
 
     return (
-      <div className={className} ref={this._divElement}>
+      <div
+        className={className}
+        ref={this._divElement}
+        id={this.props.propertyRecord?.property.name}
+      >
         <PopupButton
           label={this.state.inputValue}
           closeOnEnter={false}
diff --git a/ui/components-react/src/components-react/editors/ToggleEditor.tsx b/ui/components-react/src/components-react/editors/ToggleEditor.tsx
index 8b24fab3c43..772eec48e49 100644
--- a/ui/components-react/src/components-react/editors/ToggleEditor.tsx
+++ b/ui/components-react/src/components-react/editors/ToggleEditor.tsx
@@ -144,6 +144,7 @@ export class ToggleEditor
         disabled={this.props.propertyRecord?.isDisabled}
         onChange={this._updateToggleValue}
         data-testid="components-toggle-editor"
+        id={this.props.propertyRecord?.property.name}
         autoFocus={this.props.setFocus} // eslint-disable-line jsx-a11y/no-autofocus
       />
     );
diff --git a/ui/components-react/src/components-react/new-editors/Types.ts b/ui/components-react/src/components-react/new-editors/Types.ts
index 70deef4df00..5d583491cb8 100644
--- a/ui/components-react/src/components-react/new-editors/Types.ts
+++ b/ui/components-react/src/components-react/new-editors/Types.ts
@@ -40,6 +40,12 @@ export interface EditorProps<TMetadata = ValueMetadata, TValue = Value> {
   cancel?: () => void;
   disabled?: boolean;
   size?: "small" | "large";
+  /**
+   * HTML `id` attribute forwarded to the interactive element. Used to associate
+   * the editor with a `<label htmlFor>` so that `getByLabelText` queries work and
+   * the UI meets accessibility requirements.
+   */
+  id?: string;
 }
 
 /**
diff --git a/ui/components-react/src/components-react/new-editors/editors/BooleanEditor.tsx b/ui/components-react/src/components-react/new-editors/editors/BooleanEditor.tsx
index b97ecc29cd8..9b735c93260 100644
--- a/ui/components-react/src/components-react/new-editors/editors/BooleanEditor.tsx
+++ b/ui/components-react/src/components-react/new-editors/editors/BooleanEditor.tsx
@@ -20,6 +20,7 @@ export function BooleanEditor({
   onChange,
   commit,
   disabled,
+  id,
 }: EditorProps<ValueMetadata, BooleanValue>) {
   const currentValue = value?.value ?? false;
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -30,6 +31,7 @@ export function BooleanEditor({
 
   return (
     <Checkbox
+      id={id}
       checked={currentValue}
       onChange={handleChange}
       disabled={disabled}
diff --git a/ui/components-react/src/components-react/new-editors/editors/DateEditor.tsx b/ui/components-react/src/components-react/new-editors/editors/DateEditor.tsx
index 7160aa59ad6..0463b9027a2 100644
--- a/ui/components-react/src/components-react/new-editors/editors/DateEditor.tsx
+++ b/ui/components-react/src/components-react/new-editors/editors/DateEditor.tsx
@@ -21,6 +21,7 @@ export function DateEditor({
   commit,
   size,
   disabled,
+  id,
 }: EditorProps<ValueMetadata, DateValue>) {
   return (
     <DateInput
@@ -31,6 +32,7 @@ export function DateEditor({
       onClose={commit}
       size={size}
       disabled={disabled}
+      id={id}
     />
   );
 }
diff --git a/ui/components-react/src/components-react/new-editors/editors/DateInput.tsx b/ui/components-react/src/components-react/new-editors/editors/DateInput.tsx
index db02219e692..0d75477e743 100644
--- a/ui/components-react/src/components-react/new-editors/editors/DateInput.tsx
+++ b/ui/components-react/src/components-react/new-editors/editors/DateInput.tsx
@@ -15,6 +15,7 @@ interface DateInputProps {
   size?: "small" | "large";
   disabled?: boolean;
   showTimePicker?: boolean;
+  id?: string;
 }
 
 /**
@@ -27,6 +28,7 @@ export function DateInput({
   size,
   showTimePicker,
   disabled,
+  id,
 }: DateInputProps) {
   const currentValue = value ?? new Date();
   const dateStr = showTimePicker
@@ -50,7 +52,7 @@ export function DateInput({
         }
       }}
     >
-      <Button style={{ width: "100%" }} size={size} disabled={disabled}>
+      <Button id={id} style={{ width: "100%" }} size={size} disabled={disabled}>
         {dateStr}
       </Button>
     </Popover>
diff --git a/ui/components-react/src/components-react/new-editors/editors/DateTimeEditor.tsx b/ui/components-react/src/components-react/new-editors/editors/DateTimeEditor.tsx
index 328340c7bd0..8f889dd123d 100644
--- a/ui/components-react/src/components-react/new-editors/editors/DateTimeEditor.tsx
+++ b/ui/components-react/src/components-react/new-editors/editors/DateTimeEditor.tsx
@@ -21,6 +21,7 @@ export function DateTimeEditor({
   commit,
   size,
   disabled,
+  id,
 }: EditorProps<ValueMetadata, DateValue>) {
   return (
     <DateInput
@@ -32,6 +33,7 @@ export function DateTimeEditor({
       size={size}
       disabled={disabled}
       showTimePicker={true}
+      id={id}
     />
   );
 }
diff --git a/ui/components-react/src/components-react/new-editors/editors/EnumEditor.tsx b/ui/components-react/src/components-react/new-editors/editors/EnumEditor.tsx
index 01aa7ea8df8..ea2ea7e1f4e 100644
--- a/ui/components-react/src/components-react/new-editors/editors/EnumEditor.tsx
+++ b/ui/components-react/src/components-react/new-editors/editors/EnumEditor.tsx
@@ -22,6 +22,7 @@ export function EnumEditor({
   commit,
   size,
   disabled,
+  id,
 }: EditorProps<EnumValueMetadata, EnumValue>) {
   const choices = metadata.choices;
   const currentValue = getEnumValue(value, choices);
@@ -35,6 +36,7 @@ export function EnumEditor({
 
   return (
     <Select
+      id={id}
       size={size}
       value={currentValue.choice}
       onChange={handleChange}
diff --git a/ui/components-react/src/components-react/new-editors/editors/FallbackEditor.tsx b/ui/components-react/src/components-react/new-editors/editors/FallbackEditor.tsx
index 4f4a613b67c..440c8b6232e 100644
--- a/ui/components-react/src/components-react/new-editors/editors/FallbackEditor.tsx
+++ b/ui/components-react/src/components-react/new-editors/editors/FallbackEditor.tsx
@@ -22,8 +22,8 @@ import {
  * Fallback editor that renders readonly value if no editor is found.
  * @internal
  */
-export function FallbackEditor({ value, size }: EditorProps) {
-  return <Input readOnly value={getTextValue(value)} size={size} />;
+export function FallbackEditor({ value, size, id }: EditorProps) {
+  return <Input id={id} readOnly value={getTextValue(value)} size={size} />;
 }
 
 function getTextValue(value?: Value) {
diff --git a/ui/components-react/src/components-react/new-editors/editors/NumericEditor.tsx b/ui/components-react/src/components-react/new-editors/editors/NumericEditor.tsx
index 3588f114733..34d6e7e73b7 100644
--- a/ui/components-react/src/components-react/new-editors/editors/NumericEditor.tsx
+++ b/ui/components-react/src/components-react/new-editors/editors/NumericEditor.tsx
@@ -20,10 +20,12 @@ export function NumericEditor({
   onChange,
   size,
   disabled,
+  id,
 }: EditorProps<ValueMetadata, NumericValue>) {
   const currentValue = getNumericValue(value);
   return (
     <Input
+      id={id}
       value={currentValue.displayValue}
       onChange={(e) => {
         const parsedValue = parseFloat(e.target.value);
diff --git a/ui/components-react/src/components-react/new-editors/editors/TextEditor.tsx b/ui/components-react/src/components-react/new-editors/editors/TextEditor.tsx
index 77f2d67a8e7..be691d5e830 100644
--- a/ui/components-react/src/components-react/new-editors/editors/TextEditor.tsx
+++ b/ui/components-react/src/components-react/new-editors/editors/TextEditor.tsx
@@ -20,11 +20,13 @@ export function TextEditor({
   onChange,
   size,
   disabled,
+  id,
 }: EditorProps<ValueMetadata, TextValue>) {
   const currentValue = value ? value : { value: "" };
 
   return (
     <Input
+      id={id}
       value={currentValue.value}
       onChange={(e) => onChange({ value: e.target.value })}
       size={size}
diff --git a/ui/components-react/src/components-react/new-editors/editors/ToggleEditor.tsx b/ui/components-react/src/components-react/new-editors/editors/ToggleEditor.tsx
index 462b45cc2a4..7d2b1ef83b8 100644
--- a/ui/components-react/src/components-react/new-editors/editors/ToggleEditor.tsx
+++ b/ui/components-react/src/components-react/new-editors/editors/ToggleEditor.tsx
@@ -21,6 +21,7 @@ export function ToggleEditor({
   commit,
   disabled,
   size,
+  id,
 }: EditorProps<ValueMetadata, BooleanValue>) {
   const currentValue = value ?? { value: false };
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -31,6 +32,7 @@ export function ToggleEditor({
 
   return (
     <ToggleSwitch
+      id={id}
       checked={currentValue.value}
       onChange={handleChange}
       disabled={disabled}
diff --git a/ui/components-react/src/components-react/new-editors/interop/PropertyRecordEditor.tsx b/ui/components-react/src/components-react/new-editors/interop/PropertyRecordEditor.tsx
index 515274957d6..8256af52f85 100644
--- a/ui/components-react/src/components-react/new-editors/interop/PropertyRecordEditor.tsx
+++ b/ui/components-react/src/components-react/new-editors/interop/PropertyRecordEditor.tsx
@@ -63,6 +63,7 @@ export function PropertyRecordEditor({
         onClick={onClick}
         disabled={propertyRecord.isDisabled || propertyRecord.isReadonly}
         size={size}
+        id={propertyRecord.property.name}
       />
     );
   }
@@ -86,6 +87,7 @@ function CommittingEditor({
   onClick,
   disabled,
   size,
+  id,
 }: {
   metadata: ValueMetadata;
   initialValue?: Value;
@@ -94,6 +96,7 @@ function CommittingEditor({
   onClick?: () => void;
   disabled?: boolean;
   size?: "small" | "large";
+  id?: string;
 }) {
   const { value, onChange, onKeydown, commit, cancel } = useCommittableValue({
     initialValue,
@@ -116,6 +119,7 @@ function CommittingEditor({
         cancel={cancel}
         disabled={disabled}
         size={size}
+        id={id}
       />
     </div>
   );
diff --git a/ui/components-react/src/components-react/new-editors/interop/old-editors/Color.tsx b/ui/components-react/src/components-react/new-editors/interop/old-editors/Color.tsx
index 95f1f405527..3c42238f639 100644
--- a/ui/components-react/src/components-react/new-editors/interop/old-editors/Color.tsx
+++ b/ui/components-react/src/components-react/new-editors/interop/old-editors/Color.tsx
@@ -48,6 +48,7 @@ function ColorEditor({
   onChange,
   commit,
   size,
+  id,
 }: EditorProps<OldEditorMetadata, NumericValue>) {
   const colorParams = useColorEditorParams(metadata);
   const colors = colorParams?.colorValues ?? [];
@@ -81,7 +82,7 @@ function ColorEditor({
         }
       }}
     >
-      <IconButton size={size}>
+      <IconButton id={id} size={size}>
         <ColorSwatch color={activeColor} />
       </IconButton>
     </Popover>
diff --git a/ui/components-react/src/components-react/new-editors/interop/old-editors/CustomNumber.tsx b/ui/components-react/src/components-react/new-editors/interop/old-editors/CustomNumber.tsx
index b49b144b237..4a4bb820480 100644
--- a/ui/components-react/src/components-react/new-editors/interop/old-editors/CustomNumber.tsx
+++ b/ui/components-react/src/components-react/new-editors/interop/old-editors/CustomNumber.tsx
@@ -51,6 +51,7 @@ export function CustomNumberEditor({
   size,
   disabled,
   decoration,
+  id,
 }: CustomNumberEditorProps) {
   const formatParams = useCustomFormattedNumberParams(metadata);
   const sizeParams = useInputEditorSizeParams(metadata);
@@ -101,6 +102,7 @@ export function CustomNumberEditor({
         <InputWithDecorations.Icon>{icon}</InputWithDecorations.Icon>
       ) : null}
       <InputWithDecorations.Input
+        id={id}
         ref={inputRef}
         style={style}
         disabled={disabled}
diff --git a/ui/components-react/src/components-react/new-editors/interop/old-editors/EnumButtonGroup.tsx b/ui/components-react/src/components-react/new-editors/interop/old-editors/EnumButtonGroup.tsx
index 19b3a5d55a4..f8cdcebe147 100644
--- a/ui/components-react/src/components-react/new-editors/interop/old-editors/EnumButtonGroup.tsx
+++ b/ui/components-react/src/components-react/new-editors/interop/old-editors/EnumButtonGroup.tsx
@@ -39,6 +39,7 @@ function EnumButtonGroupEditor({
   size,
   disabled,
   metadata,
+  id,
 }: EditorProps<OldEditorMetadata, EnumValue>) {
   const enumMetadata = useEnumMetadata(metadata);
   const buttonGroupParams = useButtonGroupEditorParams(metadata);
@@ -53,7 +54,7 @@ function EnumButtonGroupEditor({
   const currentValue = value ? value : { choice: firstChoice?.value ?? "" };
 
   return (
-    <ButtonGroup orientation="horizontal">
+    <ButtonGroup id={id} orientation="horizontal">
       {enumMetadata.choices.map((choice) => {
         const icon = findIcon(enumIcons?.get(choice.value));
         return (
diff --git a/ui/components-react/src/components-react/new-editors/interop/old-editors/NumericInput.tsx b/ui/components-react/src/components-react/new-editors/interop/old-editors/NumericInput.tsx
index ed99364776b..d81fd2692b5 100644
--- a/ui/components-react/src/components-react/new-editors/interop/old-editors/NumericInput.tsx
+++ b/ui/components-react/src/components-react/new-editors/interop/old-editors/NumericInput.tsx
@@ -35,6 +35,7 @@ function NumericInputEditor({
   onChange,
   size,
   disabled,
+  id,
 }: EditorProps<OldEditorMetadata, NumericValue>) {
   const sizeParams = useInputEditorSizeParams(metadata);
   const rangeParams = useRangeEditorParams(metadata);
@@ -67,7 +68,13 @@ function NumericInputEditor({
   });
 
   return (
-    <Input style={style} size={size} disabled={disabled} {...inputProps} />
+    <Input
+      id={id}
+      style={style}
+      size={size}
+      disabled={disabled}
+      {...inputProps}
+    />
   );
 }
 
diff --git a/ui/components-react/src/components-react/new-editors/interop/old-editors/Slider.tsx b/ui/components-react/src/components-react/new-editors/interop/old-editors/Slider.tsx
index 16c6ab391bb..1a79498b7f0 100644
--- a/ui/components-react/src/components-react/new-editors/interop/old-editors/Slider.tsx
+++ b/ui/components-react/src/components-react/new-editors/interop/old-editors/Slider.tsx
@@ -41,6 +41,7 @@ function SliderEditor({
   onChange,
   commit,
   size,
+  id,
 }: EditorProps<OldEditorMetadata, NumericValue>) {
   const sliderParams = useSliderEditorParams(metadata);
   if (!sliderParams) {
@@ -98,7 +99,7 @@ function SliderEditor({
       }}
       applyBackground={true}
     >
-      <Button style={{ width: "100%" }} size={size} disabled={disabled}>
+      <Button id={id} style={{ width: "100%" }} size={size} disabled={disabled}>
         {currentValue}
       </Button>
     </Popover>
diff --git a/ui/components-react/src/components-react/new-editors/interop/old-editors/TextArea.tsx b/ui/components-react/src/components-react/new-editors/interop/old-editors/TextArea.tsx
index ab22033d761..9de3b636de7 100644
--- a/ui/components-react/src/components-react/new-editors/interop/old-editors/TextArea.tsx
+++ b/ui/components-react/src/components-react/new-editors/interop/old-editors/TextArea.tsx
@@ -29,6 +29,7 @@ function TextAreaEditor({
   commit,
   size,
   disabled,
+  id,
 }: EditorProps<OldEditorMetadata, TextValue>) {
   const currentValue = value ?? { value: "" };
 
@@ -50,7 +51,7 @@ function TextAreaEditor({
         }
       }}
     >
-      <Button style={{ width: "100%" }} size={size} disabled={disabled}>
+      <Button id={id} style={{ width: "100%" }} size={size} disabled={disabled}>
         {currentValue.value}
       </Button>
     </Popover>
diff --git a/ui/components-react/src/test/new-editors/EditorRenderer.test.tsx b/ui/components-react/src/test/new-editors/EditorRenderer.test.tsx
index f7f4d8c049d..b27c8c23f4a 100644
--- a/ui/components-react/src/test/new-editors/EditorRenderer.test.tsx
+++ b/ui/components-react/src/test/new-editors/EditorRenderer.test.tsx
@@ -41,4 +41,17 @@ describe("EditorRenderer", () => {
     expect(queryByText("Multiline")).not.toBeNull();
     expect(queryByText("Test message")).not.toBeNull();
   });
+
+  it("forwards id prop to the rendered editor element", () => {
+    const { container } = render(
+      <EditorRenderer
+        metadata={{ type: "string" }}
+        value={{ value: "test" }}
+        onChange={() => {}}
+        id="my-editor-id"
+      />
+    );
+
+    expect(container.querySelector('[id="my-editor-id"]')).not.toBeNull();
+  });
 });
diff --git a/ui/components-react/src/test/new-editors/interop/PropertyRecordEditor.test.tsx b/ui/components-react/src/test/new-editors/interop/PropertyRecordEditor.test.tsx
index 0632c997c46..e5e67eb8aeb 100644
--- a/ui/components-react/src/test/new-editors/interop/PropertyRecordEditor.test.tsx
+++ b/ui/components-react/src/test/new-editors/interop/PropertyRecordEditor.test.tsx
@@ -7,7 +7,7 @@ import * as React from "react";
 import { describe, it } from "vitest";
 import { render, waitFor } from "@testing-library/react";
 import { PropertyRecordEditor } from "../../../components-react.js";
-import { PropertyRecord } from "@itwin/appui-abstract";
+import { PropertyRecord, PropertyValueFormat } from "@itwin/appui-abstract";
 
 describe("PropertyRecordEditor", () => {
   const propertyRecord = PropertyRecord.fromString("test");
@@ -42,4 +42,89 @@ describe("PropertyRecordEditor", () => {
       rendered.container.querySelector(".components-editor-container")
     ).toBeNull();
   });
+
+  describe("id / label association (a11y)", () => {
+    it("sets id={property.name} on the input when using new editor system", async () => {
+      const record = PropertyRecord.fromString("hello", "arcLength");
+      const { container } = render(
+        <PropertyRecordEditor
+          propertyRecord={record}
+          onCommit={() => {}}
+          onCancel={() => {}}
+          editorSystem="new"
+        />
+      );
+
+      await waitFor(() =>
+        expect(container.querySelector('[id="arcLength"]')).not.toBeNull()
+      );
+    });
+
+    it("allows getByLabelText queries for text properties when using new editor system", async () => {
+      const record = PropertyRecord.fromString("hello", "arcLength");
+      const { getByLabelText } = render(
+        <>
+          <label htmlFor="arcLength">Arc Length</label>
+          <PropertyRecordEditor
+            propertyRecord={record}
+            onCommit={() => {}}
+            onCancel={() => {}}
+            editorSystem="new"
+          />
+        </>
+      );
+
+      await waitFor(() => expect(getByLabelText("Arc Length")).toBeDefined());
+    });
+
+    it("sets id={property.name} on the select when using new editor system with enum property", async () => {
+      const record = new PropertyRecord(
+        { valueFormat: PropertyValueFormat.Primitive, value: 0 },
+        {
+          name: "arcType",
+          typename: "enum",
+          displayLabel: "Arc Type",
+          enum: {
+            choices: [
+              { label: "Clockwise", value: 0 },
+              { label: "Counterclockwise", value: 1 },
+            ],
+          },
+        }
+      );
+
+      const { container } = render(
+        <PropertyRecordEditor
+          propertyRecord={record}
+          onCommit={() => {}}
+          onCancel={() => {}}
+          editorSystem="new"
+        />
+      );
+
+      await waitFor(() =>
+        expect(container.querySelector('[id="arcType"]')).not.toBeNull()
+      );
+    });
+
+    it("does not set id when using legacy editor system", async () => {
+      const record = PropertyRecord.fromString("hello", "arcLength");
+      const { container } = render(
+        <PropertyRecordEditor
+          propertyRecord={record}
+          onCommit={() => {}}
+          onCancel={() => {}}
+        />
+      );
+
+      await waitFor(() =>
+        expect(container.querySelector("input")).not.toBeNull()
+      );
+      // Legacy EditorContainer uses property.name as id too, but through a different path.
+      // This test just guards that the new-editor id is not present on the container element.
+      expect(
+        container.querySelector(".components-editor-container")
+      ).not.toBeNull();
+    });
+  });
 });
diff --git a/ui/core-react/src/core-react/imagecheckbox/ImageCheckBox.tsx b/ui/core-react/src/core-react/imagecheckbox/ImageCheckBox.tsx
index cc8eb258433..78fa3773ff4 100644
--- a/ui/core-react/src/core-react/imagecheckbox/ImageCheckBox.tsx
+++ b/ui/core-react/src/core-react/imagecheckbox/ImageCheckBox.tsx
@@ -39,6 +39,8 @@ export interface ImageCheckBoxProps extends CommonProps {
   border?: boolean;
   /** Provides ability to return reference to HTMLInputElement */
   inputRef?: React.Ref<HTMLInputElement>;
+  /** HTML id attribute for the checkbox input element */
+  id?: string;
 }
 
 /** ImageCheckBox React component shows a checked or unchecked image
@@ -85,6 +87,7 @@ export class ImageCheckBox extends React.PureComponent<ImageCheckBoxProps> {
       >
         <input
           type="checkbox"
+          id={this.props.id}
           className={this.props.inputClassName}
           style={this.props.inputStyle}
           checked={this.props.checked}