From 57ec38ffdd4ad3031100faf1d2cae2c306d3818a Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Wed, 24 Sep 2025 10:27:26 +0300 Subject: [PATCH 1/8] chore: progress --- packages/main/src/FormItemTemplate.tsx | 4 ++-- packages/main/src/FormTemplate.tsx | 25 ++++++++++++++++--------- packages/main/src/themes/Form.css | 5 +++++ 3 files changed, 23 insertions(+), 11 deletions(-) diff --git a/packages/main/src/FormItemTemplate.tsx b/packages/main/src/FormItemTemplate.tsx index 6afca7e86298..62055aa967a1 100644 --- a/packages/main/src/FormItemTemplate.tsx +++ b/packages/main/src/FormItemTemplate.tsx @@ -5,10 +5,10 @@ export default function FormItemTemplate(this: FormItem) { return (
-
+
-
+
{this.content.map(item =>
diff --git a/packages/main/src/FormTemplate.tsx b/packages/main/src/FormTemplate.tsx index a666bab91a29..4aa54c83b612 100644 --- a/packages/main/src/FormTemplate.tsx +++ b/packages/main/src/FormTemplate.tsx @@ -44,7 +44,11 @@ export default function FormTemplate(this: Form) { }
- +
+
+ +
+
@@ -54,17 +58,20 @@ export default function FormTemplate(this: Form) { : <> - { + + { this.itemsInfo.map(itemInfo => { const item = itemInfo.item; return ( -
- -
+
+
+ +
+
); }) } diff --git a/packages/main/src/themes/Form.css b/packages/main/src/themes/Form.css index 4434bb83eec1..b344bb25210b 100644 --- a/packages/main/src/themes/Form.css +++ b/packages/main/src/themes/Form.css @@ -49,3 +49,8 @@ ::slotted([ui5-form-group]) { display: contents; } + +dl { + padding: 0; + margin: 0; +} \ No newline at end of file From 87c367bf6bcd8fc2388e81c917aad6bfa298404e Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Wed, 24 Sep 2025 18:12:43 +0300 Subject: [PATCH 2/8] chore: update --- packages/main/src/FormTemplate.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/main/src/FormTemplate.tsx b/packages/main/src/FormTemplate.tsx index 4aa54c83b612..0ba5af820d55 100644 --- a/packages/main/src/FormTemplate.tsx +++ b/packages/main/src/FormTemplate.tsx @@ -45,9 +45,7 @@ export default function FormTemplate(this: Form) {
-
-
@@ -63,15 +61,13 @@ export default function FormTemplate(this: Form) { this.itemsInfo.map(itemInfo => { const item = itemInfo.item; return ( -
-
-
-
+ ); }) } From 8c8f138c431f5efebf05b4444db1ecd80daaca55 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Wed, 24 Sep 2025 18:24:37 +0300 Subject: [PATCH 3/8] chore: lint --- packages/main/src/FormTemplate.tsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/main/src/FormTemplate.tsx b/packages/main/src/FormTemplate.tsx index 0ba5af820d55..a43261e73895 100644 --- a/packages/main/src/FormTemplate.tsx +++ b/packages/main/src/FormTemplate.tsx @@ -56,18 +56,17 @@ export default function FormTemplate(this: Form) { : <> - - { + { this.itemsInfo.map(itemInfo => { const item = itemInfo.item; return ( -
- -
+
+ +
); }) } From b7db621001bd9943455365766e1ab605324735f3 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Fri, 26 Sep 2025 11:55:39 +0300 Subject: [PATCH 4/8] chore: add comment --- packages/main/src/FormTemplate.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/main/src/FormTemplate.tsx b/packages/main/src/FormTemplate.tsx index a43261e73895..df1634684e7b 100644 --- a/packages/main/src/FormTemplate.tsx +++ b/packages/main/src/FormTemplate.tsx @@ -60,6 +60,7 @@ export default function FormTemplate(this: Form) { this.itemsInfo.map(itemInfo => { const item = itemInfo.item; return ( + // REVISIT: axe core complains about the structure
Date: Mon, 29 Sep 2025 18:33:48 +0300 Subject: [PATCH 5/8] chore: use dd,dt tags instead of role term, definition --- packages/main/src/FormItemTemplate.tsx | 34 ++++-- packages/main/src/FormTemplate.tsx | 121 +++++++++++-------- packages/main/src/themes/FormItem.css | 3 + packages/main/test/pages/form/FormBasic.html | 116 +++++++++--------- 4 files changed, 153 insertions(+), 121 deletions(-) diff --git a/packages/main/src/FormItemTemplate.tsx b/packages/main/src/FormItemTemplate.tsx index 62055aa967a1..9cf8c5f4e313 100644 --- a/packages/main/src/FormItemTemplate.tsx +++ b/packages/main/src/FormItemTemplate.tsx @@ -1,21 +1,33 @@ import type FormItem from "./FormItem.js"; -import type SlottedChild from "@ui5/webcomponents-base/dist/UI5Element.js"; export default function FormItemTemplate(this: FormItem) { return (
-
- -
-
- {this.content.map(item => -
- -
- )} -
+ { this.itemSpacing === "Large" ? content.call(this) : contentAsDefinitionList.call(this) }
); } + +function content(this: FormItem) { + return <> +
+ +
+
+ { content.call(this) } +
+ ; +} + +function contentAsDefinitionList(this: FormItem) { + return <> +
+ +
+
+ { content.call(this) } +
+ ; +} diff --git a/packages/main/src/FormTemplate.tsx b/packages/main/src/FormTemplate.tsx index df1634684e7b..645b4f893d1c 100644 --- a/packages/main/src/FormTemplate.tsx +++ b/packages/main/src/FormTemplate.tsx @@ -1,5 +1,6 @@ import type Form from "./Form.js"; import Title from "./Title.js"; +import type { IFormItem } from "./Form.js"; export default function FormTemplate(this: Form) { return ( @@ -19,61 +20,77 @@ export default function FormTemplate(this: Form) {
} -
- { - this.hasGroupItems ? - <> - { - this.groupItemsInfo.map(groupItemInfo => { - const groupItem = groupItemInfo.groupItem; - return ( -
-
- {groupItem.headerText && -
- {groupItem.headerText} -
- } + { this.hasGroupItems ? groupLayout.call(this) : layout.call(this) } +
+ ); +} -
-
- -
-
-
-
- ); - } - )} - - : - <> - { - this.itemsInfo.map(itemInfo => { - const item = itemInfo.item; - return ( - // REVISIT: axe core complains about the structure -
- -
- ); - }) - } - +function groupLayout(this: Form) { + return
+ { this.groupItemsInfo.map(groupItemInfo => { + const groupItem = groupItemInfo.groupItem; + return
+ { this.itemSpacing === "Large" ? +
+ { groupContent.call(this, groupItem) } +
+ : +
+ { groupContent.call(this, groupItem) } +
} +
; + })} +
; +} + +function groupContent(this: Form, groupItem: IFormItem) { + return <> + { groupItem.headerText && +
+ {groupItem.headerText}
+ } + +
+
+ ; +} + +function layout(this: Form) { + return ( + this.itemSpacing === "Large" ? +
+ { layoutContent.call(this) } +
+ : +
+ { layoutContent.call(this) } +
); } + +function layoutContent(this: Form) { + return this.itemsInfo.map(itemInfo => { + const item = itemInfo.item; + return ( +
+ +
+ ); + }) +} diff --git a/packages/main/src/themes/FormItem.css b/packages/main/src/themes/FormItem.css index 5ec8ba7a20c6..db419564f3a7 100644 --- a/packages/main/src/themes/FormItem.css +++ b/packages/main/src/themes/FormItem.css @@ -95,5 +95,8 @@ :host { order: var(--ui5-form-item-order-Xl, unset); } +} +dd { + margin-inline-start: 0; } \ No newline at end of file diff --git a/packages/main/test/pages/form/FormBasic.html b/packages/main/test/pages/form/FormBasic.html index 62b76faa9576..c26dc999ea23 100644 --- a/packages/main/test/pages/form/FormBasic.html +++ b/packages/main/test/pages/form/FormBasic.html @@ -525,23 +525,23 @@
- Name: - Red Point Stores + Name: + Red Point Stores - ZIP Code/City: - 411 Maintown + ZIP Code/City: + 411 Maintown - Street: - Main St 1618 + Street: + Main St 1618 - Country: - Germany + Country: + Germany
@@ -596,22 +596,22 @@ Name: - Red Point Stores + Red Point Stores ZIP Code/City: - 411 Maintown + 411 Maintown Street: - Main St 1618 + Main St 1618 Country: - Germany + Germany @@ -621,7 +621,7 @@ Delivery address: - Newtown + Newtown @@ -635,22 +635,22 @@ Name: - Red Point Stores + Red Point Stores ZIP Code/City: - 411 Maintown + 411 Maintown Street: - Main St 1618 + Main St 1618 Country: - Germany + Germany @@ -662,22 +662,22 @@ Twitter: - @sap + @sap Email: - john.smith@sap.com + john.smith@sap.com Tel: - +49 6227 747474 + +49 6227 747474 SMS: - +49 6227 747474 + +49 6227 747474 @@ -708,22 +708,22 @@ Name: - Red Point Stores + Red Point Stores ZIP Code/City: - 411 Maintown + 411 Maintown Street: - Main St 1618 + Main St 1618 Country: - Germany + Germany @@ -735,22 +735,22 @@ Twitter: - @sap + @sap Email: - john.smith@sap.com + john.smith@sap.com Tel: - +49 6227 747474 + +49 6227 747474 SMS: - +49 6227 747474 + +49 6227 747474 @@ -773,22 +773,22 @@ Name: - Red Point Stores + Red Point Stores ZIP Code/City: - 411 Maintown + 411 Maintown Street: - Main St 1618 + Main St 1618 Country: - Germany + Germany @@ -809,22 +809,22 @@ Name: - Red Point Stores + Red Point Stores ZIP Code/City: - 411 Maintown + 411 Maintown Street: - Main St 1618 + Main St 1618 Country: - Germany + Germany @@ -836,22 +836,22 @@ Twitter: - @sap + @sap Email: - john.smith@sap.com + john.smith@sap.com Tel: - +49 6227 747474 + +49 6227 747474 SMS: - +49 6227 747474 + +49 6227 747474 @@ -874,22 +874,22 @@ Name: - Red Point Stores + Red Point Stores ZIP Code/City: - 411 Maintown + 411 Maintown Street: - Main St 1618 + Main St 1618 Country: - Germany + Germany @@ -909,22 +909,22 @@ Name: - Red Point Stores + Red Point Stores ZIP Code/City: - 411 Maintown + 411 Maintown Street: - Main St 1618 + Main St 1618 Country: - Germany + Germany @@ -936,22 +936,22 @@ Twitter: - @sap + @sap Email: - john.smith@sap.com + john.smith@sap.com Tel: - +49 6227 747474 + +49 6227 747474 SMS: - +49 6227 747474 + +49 6227 747474 @@ -974,22 +974,22 @@ Name: - Red Point Stores + Red Point Stores ZIP Code/City: - 411 Maintown + 411 Maintown Street: - Main St 1618 + Main St 1618 Country: - Germany + Germany @@ -1003,7 +1003,7 @@
- + Name: From 61c939222758ebcfa3cad7f038098c4fa798b9e9 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Mon, 29 Sep 2025 18:34:32 +0300 Subject: [PATCH 6/8] chore: lint --- packages/main/src/FormTemplate.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/main/src/FormTemplate.tsx b/packages/main/src/FormTemplate.tsx index 645b4f893d1c..0fca739ef3b9 100644 --- a/packages/main/src/FormTemplate.tsx +++ b/packages/main/src/FormTemplate.tsx @@ -41,11 +41,11 @@ function groupLayout(this: Form) { > { this.itemSpacing === "Large" ?
- { groupContent.call(this, groupItem) } + { groupLayoutContent.call(this, groupItem) }
:
- { groupContent.call(this, groupItem) } + { groupLayoutContent.call(this, groupItem) }
}
; @@ -53,7 +53,7 @@ function groupLayout(this: Form) {
; } -function groupContent(this: Form, groupItem: IFormItem) { +function groupLayoutContent(this: Form, groupItem: IFormItem) { return <> { groupItem.headerText &&
@@ -92,5 +92,5 @@ function layoutContent(this: Form) {
); - }) + }); } From e10b27e3c48dd8d15d3eea7a06883d8ff2695dc9 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Tue, 30 Sep 2025 10:24:13 +0300 Subject: [PATCH 7/8] chore: revert typo --- packages/main/src/FormItemTemplate.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/main/src/FormItemTemplate.tsx b/packages/main/src/FormItemTemplate.tsx index 9cf8c5f4e313..1a5d934a7120 100644 --- a/packages/main/src/FormItemTemplate.tsx +++ b/packages/main/src/FormItemTemplate.tsx @@ -1,3 +1,4 @@ +import type { SlottedChild } from "@ui5/webcomponents-base/dist/UI5Element.js"; import type FormItem from "./FormItem.js"; export default function FormItemTemplate(this: FormItem) { @@ -16,7 +17,11 @@ function content(this: FormItem) {
- { content.call(this) } + {this.content.map(item => +
+ +
+ )}
; } @@ -27,7 +32,11 @@ function contentAsDefinitionList(this: FormItem) {
- { content.call(this) } + {this.content.map(item => +
+ +
+ )}
; } From 0f3706033fbb42664c90f32e3f7f99ed62cf4e5d Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Thu, 2 Oct 2025 14:33:59 +0300 Subject: [PATCH 8/8] feat: add accessibleNameRef to Form --- packages/main/src/Form.ts | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index c40d94db8e2a..b1a8af4d0f94 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -3,6 +3,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js"; +import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; // Template @@ -221,6 +222,15 @@ class Form extends UI5Element { @property() accessibleName?: string; + /** + * Defines id(or many ids) of the element (or elements) that label the component. + * @default undefined + * @public + * @since 2.16.0 + */ + @property() + accessibleNameRef?: string; + /** * Defines the number of columns to distribute the form content by breakpoint. * @@ -543,13 +553,18 @@ class Form extends UI5Element { } get effectiveAccessibleName() { - if (this.accessibleName) { - return this.accessibleName; + if (this.accessibleName || this.accessibleNameRef) { + return getEffectiveAriaLabelText(this); } + return this.hasHeader ? undefined : Form.i18nBundle.getText(FORM_ACCESSIBLE_NAME); } get effectiveАccessibleNameRef(): string | undefined { + if (this.accessibleName || this.accessibleNameRef) { + return; + } + return this.hasHeaderText && !this.hasCustomHeader ? `${this._id}-header-text` : undefined; }