diff --git a/tedi/components/content/text-group/text-group.component.html b/tedi/components/content/text-group/text-group.component.html
index 585a0aa0f..9356ee187 100644
--- a/tedi/components/content/text-group/text-group.component.html
+++ b/tedi/components/content/text-group/text-group.component.html
@@ -1,8 +1,8 @@
-
- -
-
+
-
diff --git a/tedi/components/content/text-group/text-group.component.spec.ts b/tedi/components/content/text-group/text-group.component.spec.ts
index 80137b2ed..a9b056d51 100644
--- a/tedi/components/content/text-group/text-group.component.spec.ts
+++ b/tedi/components/content/text-group/text-group.component.spec.ts
@@ -119,9 +119,23 @@ describe("TextGroupComponent", () => {
).toBe("50%");
});
- it("should have appropriate role attribute", () => {
- const dl = fixture.debugElement.query(By.css("dl")).nativeElement;
- expect(dl.getAttribute("role")).toBe("group");
+ it("should set aria-label on dt from label content", () => {
+ const dt = fixture.debugElement.query(By.css("dt")).nativeElement;
+ expect(dt.getAttribute("aria-label")).toBe("Test Label");
+ });
+
+ it("should hide label content from screen readers", () => {
+ const labelSpan = fixture.debugElement.query(
+ By.css("dt > span[aria-hidden]"),
+ ).nativeElement;
+ expect(labelSpan.getAttribute("aria-hidden")).toBe("true");
+ });
+
+ it("should update aria-label when label content changes", () => {
+ fixture.componentInstance.label = "Updated Label";
+ fixture.detectChanges();
+ const dt = fixture.debugElement.query(By.css("dt")).nativeElement;
+ expect(dt.getAttribute("aria-label")).toBe("Updated Label");
});
});
diff --git a/tedi/components/content/text-group/text-group.component.ts b/tedi/components/content/text-group/text-group.component.ts
index aa14c8512..a866ef9b8 100644
--- a/tedi/components/content/text-group/text-group.component.ts
+++ b/tedi/components/content/text-group/text-group.component.ts
@@ -1,15 +1,21 @@
import {
+ AfterContentChecked,
ChangeDetectionStrategy,
Component,
computed,
+ contentChild,
+ ElementRef,
inject,
input,
+ signal,
ViewEncapsulation,
} from "@angular/core";
import {
BreakpointInputs,
BreakpointService,
} from "../../../services/breakpoint/breakpoint.service";
+import { LabelComponent } from "../../../components/form";
+import { TextGroupLabelComponent } from "./text-group-label.component";
export type TextGroupType = "vertical" | "horizontal";
@@ -29,14 +35,20 @@ export type TextGroupInputs = {
selector: "tedi-text-group",
templateUrl: "./text-group.component.html",
styleUrl: "./text-group.component.scss",
+ imports: [
+ LabelComponent
+ ],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
})
-export class TextGroupComponent implements BreakpointInputs {
+export class TextGroupComponent implements BreakpointInputs, AfterContentChecked {
type = input("horizontal");
labelWidth = input();
breakpointService = inject(BreakpointService);
+ readonly textGroupLabel = contentChild(TextGroupLabelComponent, { read: ElementRef });
+ readonly labelText = signal(null);
+
xs = input();
sm = input();
md = input();
@@ -62,4 +74,14 @@ export class TextGroupComponent implements BreakpointInputs {
const classList = [`tedi-text-group--${this.breakpointInputs().type}`];
return classList.join(" ");
});
+
+ ngAfterContentChecked(): void {
+ const labelEl = this.textGroupLabel()?.nativeElement as HTMLElement;
+ if (labelEl) {
+ const text = labelEl.textContent?.trim() || null;
+ if (text !== this.labelText()) {
+ this.labelText.set(text);
+ }
+ }
+ }
}
diff --git a/tedi/components/content/text-group/text-group.stories.ts b/tedi/components/content/text-group/text-group.stories.ts
index c826ecb44..68ffeb404 100644
--- a/tedi/components/content/text-group/text-group.stories.ts
+++ b/tedi/components/content/text-group/text-group.stories.ts
@@ -14,6 +14,7 @@ import {
VerticalSpacingDirective,
} from "@tedi-design-system/angular/tedi";
import { createBreakpointArgTypes } from "../../../../src/dev-tools/createBreakpointArgTypes";
+import { StatusBadgeComponent } from "@tedi-design-system/angular/community";
/**
* Figma ↗
@@ -40,6 +41,7 @@ export default {
TextGroupValueComponent,
IconComponent,
RowComponent,
+ StatusBadgeComponent
],
}),
],
@@ -88,6 +90,12 @@ export const Types: Story = {
label: "Accessibility",
value: "Visible to doctor and representative",
},
+ {
+ type: "vertical",
+ label: "Accessibility",
+ value: "Visible to doctor and representative",
+ statusBadge: 'Submitted'
+ },
{
type: "vertical",
label: "Accessibility",
@@ -139,11 +147,16 @@ export const Types: Story = {
[name]="group.icon.name"
[color]="group.icon.color"
/>
- @if (group.valueModifiers === "bold") {
- {{ group.value }}
- } @else {
- {{ group.value }}
- }
+
+ @if (group.valueModifiers === "bold") {
+ {{ group.value }}
+ } @else {
+ {{ group.value }}
+ }
+ @if (group.statusBadge) {
+ {{ group.statusBadge }}
+ }
+
diff --git a/tedi/components/form/label/label.component.ts b/tedi/components/form/label/label.component.ts
index 3d9ae2744..ddc1603f9 100644
--- a/tedi/components/form/label/label.component.ts
+++ b/tedi/components/form/label/label.component.ts
@@ -11,7 +11,7 @@ export type LabelSize = "small" | "default";
export type LabelColor = "primary" | "secondary";
@Component({
- selector: "label[tedi-label]",
+ selector: "[tedi-label]",
templateUrl: "./label.component.html",
styleUrl: "./label.component.scss",
standalone: true,