Refactor tab ids

Author: jantoun-scottlogic

src/app/tab/tab-item/tab-item.component.html

@@ -2,7 +2,7 @@
   role="tabpanel"
   aria-live="off"
   [hidden]="!active()"
-  [id]="title().replaceAll(' ', '-') + '-tabpanel'"
-  [attr.aria-labelledby]="title().replaceAll(' ', '-') + '-tab'">
+  [id]="tabIdPrefix + 'Tabpanel'"
+  [attr.aria-labelledby]="tabIdPrefix + 'Tab'">
   <ng-content></ng-content>
 </div>

src/app/tab/tab-item/tab-item.component.ts

@@ -1,15 +1,17 @@
 import { CommonModule } from '@angular/common';
-import { Component, effect, EventEmitter, input, model, Output } from '@angular/core';
+import { Component, effect, EventEmitter, input, model, OnInit, Output } from '@angular/core';
+import { camelCase } from 'lodash-es';
 
 @Component({
   selector: 'tab-item',
   standalone: true,
   imports: [CommonModule],
   templateUrl: './tab-item.component.html',
 })
-export class TabItemComponent {
+export class TabItemComponent implements OnInit {
   public active = model(false);
   public title = input.required<string>();
+  public tabIdPrefix!: string;
   @Output() public tabSelected = new EventEmitter<void>();
 
   constructor() {
@@ -19,4 +21,7 @@ export class TabItemComponent {
       }
     });
   }
+  ngOnInit(): void {
+    this.tabIdPrefix = camelCase(this.title());
+  }
 }

src/app/tab/tabs/tabs.component.html

@@ -3,8 +3,8 @@
     <button
       #tabButton
       role="tab"
-      [id]="tab.title().replaceAll(' ', '-') + '-tab'"
-      [attr.aria-controls]="tab.title().replaceAll(' ', '-') + '-tabpanel'"
+      [id]="tab.tabIdPrefix + 'Tab'"
+      [attr.aria-controls]="tab.tabIdPrefix + 'Tabpanel'"
       [class.tce-active-tab]="tab.active()"
       [tabindex]="tab.active() ? 0 : -1"
       [attr.aria-selected]="tab.active() ? true : false"