fix(text-group, label): improved SR accessibility, extended tedi-label usage #49

tedi/components/content/text-group/text-group.component.html

@@ -1,8 +1,8 @@
-<dl [class]="classes()" [style.--_label-width]="labelWidth()" role="group">
-  <dt>
-    <label>
+<dl [class]="classes()" [style.--_label-width]="labelWidth()">
+  <dt [attr.aria-label]="labelText()">
+    <span tedi-label aria-hidden="true">
       <ng-content select="tedi-text-group-label"></ng-content>
-    </label>
+    </span>
   </dt>
   <dd>
     <ng-content select="tedi-text-group-value"></ng-content>

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");
     });
   });
 

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<TextGroupInputs> {
+export class TextGroupComponent implements BreakpointInputs<TextGroupInputs>, AfterContentChecked {
   type = input<TextGroupType>("horizontal");
   labelWidth = input<string>();
   breakpointService = inject(BreakpointService);
 
+  readonly textGroupLabel = contentChild(TextGroupLabelComponent, { read: ElementRef });
+  readonly labelText = signal<string | null>(null);
+
   xs = input<TextGroupInputs>();
   sm = input<TextGroupInputs>();
   md = input<TextGroupInputs>();
@@ -62,4 +74,14 @@ export class TextGroupComponent implements BreakpointInputs<TextGroupInputs> {
     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);
+      }
+    }
+  }
 }

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";
 
 /**
  * <a href="https://www.figma.com/file/jWiRIXhHRxwVdMSimKX2FF/TEDI-Design-System-(draft)?type=design&node-id=45-30752&mode=dev" target="_BLANK">Figma ↗</a><br/>
@@ -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") {
-                <b>{{ group.value }}</b>
-              } @else {
-                {{ group.value }}
-              }
+              <div class="flex flex-column align-items-start">
+                @if (group.valueModifiers === "bold") {
+                  <b>{{ group.value }}</b>
+                } @else {
+                  {{ group.value }}
+                }
+                @if (group.statusBadge) {
+                  <span tedi-status-badge color="brand" status="none">{{ group.statusBadge }}</span>
+                }
+              </div>
             </tedi-text-group-value>
           </tedi-text-group>
         </div>

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,