);
diff --git a/ui/imodel-components-react/src/imodel-components-react/editors/ColorEditor.tsx b/ui/imodel-components-react/src/imodel-components-react/editors/ColorEditor.tsx
index 19d1d505efc..9f16e7bbc7c 100644
--- a/ui/imodel-components-react/src/imodel-components-react/editors/ColorEditor.tsx
+++ b/ui/imodel-components-react/src/imodel-components-react/editors/ColorEditor.tsx
@@ -165,7 +165,7 @@ export class ColorEditor
disabled={this.state.isDisabled ? true : false}
readonly={this.state.readonly}
onColorPick={this._onColorPick}
- data-testid="components-color-editor"
+ data-testid={this.props.itemId ?? "components-color-editor"}
/>
);
diff --git a/ui/imodel-components-react/src/imodel-components-react/editors/WeightEditor.tsx b/ui/imodel-components-react/src/imodel-components-react/editors/WeightEditor.tsx
index 72d50ac17be..e8cb0bacbd7 100644
--- a/ui/imodel-components-react/src/imodel-components-react/editors/WeightEditor.tsx
+++ b/ui/imodel-components-react/src/imodel-components-react/editors/WeightEditor.tsx
@@ -160,7 +160,7 @@ export class WeightEditor
disabled={this.state.isDisabled ? true : false}
readonly={this.state.readonly}
onLineWeightPick={this._onLineWeightPick}
- data-testid="components-weight-editor"
+ data-testid={this.props.itemId ?? "components-weight-editor"}
/>
);
From 3403a38c774226110ae3a6053b21c5c574b470fa Mon Sep 17 00:00:00 2001
From: "Omar H." <3652875+arome@users.noreply.github.com>
Date: Fri, 13 Feb 2026 12:24:19 -0500
Subject: [PATCH 02/23] run prettier fix
---
.../src/components-react/editors/DateTimeEditor.tsx | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/ui/components-react/src/components-react/editors/DateTimeEditor.tsx b/ui/components-react/src/components-react/editors/DateTimeEditor.tsx
index 4e54987139c..af3f84e208b 100644
--- a/ui/components-react/src/components-react/editors/DateTimeEditor.tsx
+++ b/ui/components-react/src/components-react/editors/DateTimeEditor.tsx
@@ -304,7 +304,10 @@ export class DateTimeEditor
<>
Date: Fri, 13 Feb 2026 14:19:04 -0500
Subject: [PATCH 03/23] Update data-testid attribute in EditorContainer for
consistency
---
.../src/components-react/editors/EditorContainer.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/ui/components-react/src/components-react/editors/EditorContainer.tsx b/ui/components-react/src/components-react/editors/EditorContainer.tsx
index 535041c14f3..26f300ea2cd 100644
--- a/ui/components-react/src/components-react/editors/EditorContainer.tsx
+++ b/ui/components-react/src/components-react/editors/EditorContainer.tsx
@@ -295,7 +295,7 @@ export function EditorContainer(props: EditorContainerProps) {
onClick={handleClick}
onContextMenu={handleContextMenu}
title={title}
- data-testid={props.itemId ?? "components-editor-container"}
+ data-testid={props.itemId ?? "editor-container"}
role="presentation"
>
{clonedNode}
From 57617e1c97f447156b78d86cffc766f0be45fe47 Mon Sep 17 00:00:00 2001
From: "Omar H." <3652875+arome@users.noreply.github.com>
Date: Fri, 13 Feb 2026 14:23:07 -0500
Subject: [PATCH 04/23] Add support for customizable data-testids in
PropertyEditor components
---
.changeset/sweet-islands-dance.md | 5 +++++
1 file changed, 5 insertions(+)
create mode 100644 .changeset/sweet-islands-dance.md
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
From 107ab08b2e48e00665a543a0c8a73a3d0dbaa7e2 Mon Sep 17 00:00:00 2001
From: "Omar H." <3652875+arome@users.noreply.github.com>
Date: Fri, 24 Apr 2026 16:50:20 -0400
Subject: [PATCH 05/23] fix(a11y): forward id to interactive elements in new
property editors
Associate each new editor's interactive element (Input, Select, Checkbox,
ToggleSwitch) with the property name via the HTML id attribute. This
ensures that the existing
);
From 52453ee8492ccf76745f0630824c869477bbbadd Mon Sep 17 00:00:00 2001
From: "Omar H." <3652875+arome@users.noreply.github.com>
Date: Fri, 24 Apr 2026 16:56:19 -0400
Subject: [PATCH 06/23] test: add coverage for id/label a11y fix in new
property editors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Adds 5 new tests across two files:
PropertyRecordEditor.test.tsx — integration:
- sets id={property.name} on the input (new editor system)
- allows getByLabelText for text properties (new editor system)
- sets id={property.name} on the select for enum properties
- guard: legacy editor system path still renders EditorContainer
EditorRenderer.test.tsx — unit:
- forwards id prop to the rendered editor element
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
.../test/new-editors/EditorRenderer.test.tsx | 13 +++
.../interop/PropertyRecordEditor.test.tsx | 85 ++++++++++++++++++-
2 files changed, 97 insertions(+), 1 deletion(-)
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(
+ {}}
+ 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..aeb20447e5a 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,87 @@ 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(
+ {}}
+ 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(
+ <>
+
+ {}}
+ 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(
+ {}}
+ 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(
+ {}}
+ 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();
+ });
+ });
});
From 8f6a99ffc901113590ae8a848480539faeff9ec0 Mon Sep 17 00:00:00 2001
From: "Omar H." <3652875+arome@users.noreply.github.com>
Date: Fri, 24 Apr 2026 17:05:12 -0400
Subject: [PATCH 07/23] docs: add Storybook stories for new property editor
label/a11y fix
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Three stories under 'Components/New Property Editors':
- All editor types (new system): shows Text, Numeric, Enum, Boolean,
and Toggle editors each paired with a