From 4d81f6da06a8dff3f00b064429ce21525fb4c92e Mon Sep 17 00:00:00 2001
From: "mikerodonnell89@gmail.com" <mikerodonnell89@gmail.com>
Date: Wed, 22 Jan 2025 11:39:50 -0500
Subject: [PATCH] feat(platform): add option for configuring VHD dialog title
 heading level

---
 .../value-help-dialog.component.html          | 22 ++++++++++++++-----
 .../value-help-dialog.component.ts            | 14 +++++++++++-
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/libs/platform/value-help-dialog/value-help-dialog/value-help-dialog.component.html b/libs/platform/value-help-dialog/value-help-dialog/value-help-dialog.component.html
index a9a4cee23c1..2959b660112 100644
--- a/libs/platform/value-help-dialog/value-help-dialog/value-help-dialog.component.html
+++ b/libs/platform/value-help-dialog/value-help-dialog/value-help-dialog.component.html
@@ -28,14 +28,20 @@
                         class="fdp-value-help-dialog__row fdp-value-help-dialog__selection-row"
                         [attr.aria-label]="'platformVHD.selectedAndConditionLabel' | fdTranslate"
                     >
-                        <h5 fd-title class="selected-and-condition-title" [id]="id + '-selected-item'">
+                        <span
+                            role="heading"
+                            [attr.aria-level]="_headingLevel()"
+                            fd-title
+                            class="selected-and-condition-title"
+                            [id]="id + '-selected-item'"
+                        >
                             @if (hasSelectedAndConditions) {
                                 {{ 'platformVHD.selectedAndConditionLabel' | fdTranslate }}
                                 ({{ selectedItems.length + validConditions.length }})
                             } @else {
                                 {{ 'platformVHD.selectedEmptyLabel' | fdTranslate }}
                             }
-                        </h5>
+                        </span>
                         <div class="fdp-value-help-dialog__tokens-wrapper">
                             <div class="fdp-value-help-dialog__tokens">
                                 <!-- Selected items -->
@@ -284,7 +290,7 @@ <h5 fd-title class="selected-and-condition-title" [id]="id + '-selected-item'">
     </div>
 </ng-template>
 <ng-template #dialogTitleText>
-    <h5 [attr.id]="headerId" fd-title>{{ dialogTitle }}</h5>
+    <span role="heading" [attr.aria-level]="_headingLevel()" [attr.id]="headerId" fd-title>{{ dialogTitle }}</span>
 </ng-template>
 <ng-template #tabLink let-title="title" let-type="type">
     @if (selectedTab === type && showSelectionTab && showDefineTab) {
@@ -295,7 +301,7 @@ <h5 [attr.id]="headerId" fd-title>{{ dialogTitle }}</h5>
             (click)="switchTab()"
             [title]="'platformVHD.selectMobileTabBackBtnTitle' | fdTranslate"
         ></button>
-        <h5 fd-title>{{ title }}</h5>
+        <span role="heading" [attr.aria-level]="_headingLevel()" fd-title>{{ title }}</span>
     }
     @if (selectedTab !== type) {
         <a
@@ -310,7 +316,9 @@ <h5 fd-title>{{ title }}</h5>
 </ng-template>
 <ng-template #advancedHeader>
     <button fd-button glyph="navigation-left-arrow" fdType="transparent" (click)="toggleAdvancedSearch()"></button>
-    <h5 fd-title>{{ 'platformVHD.searchAdvancedSearchLabel' | fdTranslate }}</h5>
+    <span role="heading" [attr.aria-level]="_headingLevel()" fd-title>{{
+        'platformVHD.searchAdvancedSearchLabel' | fdTranslate
+    }}</span>
 </ng-template>
 <ng-template #desktopDialogTitle>
     <ng-template [ngTemplateOutlet]="dialogTitleText"></ng-template>
@@ -321,7 +329,9 @@ <h5 fd-title>{{ 'platformVHD.searchAdvancedSearchLabel' | fdTranslate }}</h5>
         @if (hasSelectedTab) {
             <ng-template [ngTemplateOutlet]="selectedTabHeader"></ng-template>
         } @else {
-            <h5 [attr.id]="headerId" fd-title>{{ dialogTitle }}</h5>
+            <span role="heading" [attr.aria-level]="_headingLevel()" [attr.id]="headerId" fd-title>{{
+                dialogTitle
+            }}</span>
         }
     </div>
     <ng-template [ngTemplateOutlet]="mobileTabs"></ng-template>
diff --git a/libs/platform/value-help-dialog/value-help-dialog/value-help-dialog.component.ts b/libs/platform/value-help-dialog/value-help-dialog/value-help-dialog.component.ts
index 4f9d64ee118..82186a0ae8f 100644
--- a/libs/platform/value-help-dialog/value-help-dialog/value-help-dialog.component.ts
+++ b/libs/platform/value-help-dialog/value-help-dialog/value-help-dialog.component.ts
@@ -17,7 +17,8 @@ import {
     ViewChild,
     ViewEncapsulation,
     computed,
-    inject
+    inject,
+    input
 } from '@angular/core';
 import { Observable, Subject, Subscription, filter, isObservable, of, take, tap } from 'rxjs';
 
@@ -49,6 +50,7 @@ import { FormControlComponent, FormLabelComponent } from '@fundamental-ngx/core/
 import { LayoutGridColDirective, LayoutGridComponent, LayoutGridRowDirective } from '@fundamental-ngx/core/layout-grid';
 import { ListIconDirective, ListLinkDirective, ListTitleDirective } from '@fundamental-ngx/core/list';
 import { ScrollbarDirective } from '@fundamental-ngx/core/scrollbar';
+import { HeadingLevel } from '@fundamental-ngx/core/shared';
 import { SkeletonComponent } from '@fundamental-ngx/core/skeleton';
 import { TabItemDirective, TabLinkDirective, TabNavComponent, TabTagDirective } from '@fundamental-ngx/core/tabs';
 import { TitleComponent } from '@fundamental-ngx/core/title';
@@ -293,6 +295,16 @@ export class PlatformValueHelpDialogComponent<T = any> extends VhdComponent impl
     @ViewChild('container', { read: TemplateRef })
     dialogContainer: TemplateRef<any>;
 
+    /**
+     * Heading level of the dialog title.
+     */
+    headingLevel = input<HeadingLevel>(5);
+
+    /** @hidden */
+    _headingLevel = computed(() =>
+        this.headingLevel() ? Number.parseInt(`${this.headingLevel()}`.replace(/\D/g, ''), 10) : undefined
+    );
+
     /** @hidden */
     activeDialog?: DialogRef;