fix(platform): add headingLevel input to platform dynamic page

libs/platform/dynamic-page/dynamic-page.component.html

@@ -13,6 +13,7 @@
             [titleWrap]="titleComponent.titleWrap"
             [subtitle]="titleComponent.subtitle"
             [subtitleWrap]="titleComponent.subtitleWrap"
+            [headingLevel]="headingLevel"
         >
             @if (titleComponent.breadcrumbComponent) {
                 <fd-dynamic-page-breadcrumb>
@@ -85,6 +86,7 @@
             [stackContent]="stackContent"
             maxContentHeight="auto"
             (iconTabSelected)="_onSelectedTabChange($event)"
+            [tabHeadingLevel]="_headingLevel() + 1"
         >
             @for (tab of _tabs; track tab) {
                 <fdp-icon-tab-bar-tab [label]="tab.tabLabel" [id]="tab.id">

libs/platform/dynamic-page/dynamic-page.component.ts

@@ -3,6 +3,7 @@ import {
     AfterViewInit,
     ChangeDetectionStrategy,
     Component,
+    computed,
     ContentChild,
     ContentChildren,
     DestroyRef,
@@ -44,7 +45,7 @@ import {
     patchHeaderI18nTexts
 } from '@fundamental-ngx/core/dynamic-page';
 import { FacetComponent } from '@fundamental-ngx/core/facets';
-import { FD_TABLIST, TabList } from '@fundamental-ngx/core/shared';
+import { FD_TABLIST, HeadingLevel, TabList } from '@fundamental-ngx/core/shared';
 import { FD_LANGUAGE } from '@fundamental-ngx/i18n';
 import { IconTabBarComponent, IconTabBarItem, IconTabBarTabComponent } from '@fundamental-ngx/platform/icon-tab-bar';
 import { BaseComponent } from '@fundamental-ngx/platform/shared';
@@ -161,6 +162,12 @@ export class DynamicPageComponent
     @Input()
     expandContent = true;
 
+    /**
+     * Heading level of the dynamic page header title.
+     */
+    @Input()
+    headingLevel: HeadingLevel = 2;
+
     /**
      * Tab Change event
      */
@@ -218,6 +225,9 @@ export class DynamicPageComponent
      */
     _tabs: DynamicPageContentComponent[] = [];
 
+    /** @hidden */
+    _headingLevel = computed(() => Number.parseInt(`${this.headingLevel}`.replace(/\D/g, ''), 10));
+
     /** @hidden */
     readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
 

libs/platform/icon-tab-bar/components/icon-tab-bar-base.class.ts

@@ -78,6 +78,10 @@ export abstract class IconTabBarBase implements OnInit, OnChanges, AfterViewInit
     @Input()
     selectedUid: string | undefined;
 
+    /** @hidden Heading level of the tab. */
+    @Input()
+    tabHeadingLevel: number | null;
+
     /**
      * @description Emits when some tab is selected.
      */

libs/platform/icon-tab-bar/components/icon-tab-bar-filter-type/icon-tab-bar-filter-type.component.html

@@ -18,6 +18,7 @@
                 tabindex="0"
                 #tabItem
                 role="tab"
+                [attr.aria-level]="tabHeadingLevel"
             >
                 <div class="fd-icon-tab-bar__container fd-icon-tab-bar__container--filter">
                     @if (_totalTab?.counter) {
@@ -44,6 +45,7 @@
                 [attr.tabindex]="showTotalTab ? -1 : idx > 0 ? -1 : 0"
                 (keydown)="_keyDownHandler($event, item, idx + (showTotalTab ? 1 : 0))"
                 role="tab"
+                [attr.aria-level]="tabHeadingLevel"
             >
                 @if (item?.titleTemplate) {
                     <ng-container [ngTemplateOutlet]="item.titleTemplate || null"></ng-container>

libs/platform/icon-tab-bar/components/icon-tab-bar-icon-type/icon-tab-bar-icon-type.component.html

@@ -25,6 +25,7 @@
                 [attr.aria-selected]="item.uId === selectedUid"
                 (click)="_selectItem(item)"
                 (keydown)="_keyDownHandler($event, item, idx)"
+                [attr.aria-level]="tabHeadingLevel"
             >
                 @if (item?.titleTemplate) {
                     <ng-template [ngTemplateOutlet]="item.titleTemplate || null"></ng-template>

libs/platform/icon-tab-bar/components/icon-tab-bar-process-type/icon-tab-bar-process-type.component.html

@@ -39,6 +39,7 @@
                 #tabItem
                 [attr.tabindex]="idx === 0 ? 0 : -1"
                 role="tab"
+                [attr.aria-level]="tabHeadingLevel"
             >
                 @if (item?.titleTemplate) {
                     <ng-container [ngTemplateOutlet]="item.titleTemplate || null"></ng-container>

libs/platform/icon-tab-bar/components/icon-tab-bar-text-type/icon-tab-bar-text-type.component.html

@@ -35,6 +35,7 @@
                         [attr.aria-selected]="item.uId === selectedUid"
                         (click)="_selectItem(item, $event)"
                         (keydown)="_keyDownHandler($event, item, idx)"
+                        [attr.aria-level]="tabHeadingLevel"
                     >
                     </a>
                 }
@@ -52,6 +53,7 @@
                         (keydown)="_keyDownHandler($event, item, idx, itemPopover)"
                         (closeTab)="_closeTab($event)"
                         (selectedItem)="_selectItem(item)"
+                        [attr.aria-level]="tabHeadingLevel"
                     >
                     </fdp-text-type-popover>
                 }

libs/platform/icon-tab-bar/icon-tab-bar.component.html

@@ -49,6 +49,7 @@
         [densityMode]="densityMode()"
         [colorAssociations]="colorAssociations()"
         (selected)="_selectItem($event)"
+        [tabHeadingLevel]="tabHeadingLevel()"
     ></fdp-icon-tab-bar-process-type>
 </ng-template>
 <ng-template #filterType>
@@ -61,6 +62,7 @@
         [densityMode]="densityMode()"
         [colorAssociations]="colorAssociations()"
         (selected)="_selectItem($event)"
+        [tabHeadingLevel]="tabHeadingLevel()"
     ></fdp-icon-tab-bar-filter-type>
 </ng-template>
 <ng-template #iconType>
@@ -74,6 +76,7 @@
         [colorAssociations]="colorAssociations()"
         (selected)="_selectItem($event)"
         (closeTab)="_closeTab($event)"
+        [tabHeadingLevel]="tabHeadingLevel()"
     ></fdp-icon-tab-bar-icon-type>
 </ng-template>
 <ng-template #textType>
@@ -90,5 +93,6 @@
         (reordered)="_onReorder($event)"
         (selected)="_selectItem($event)"
         (closeTab)="_closeTab($event)"
+        [tabHeadingLevel]="tabHeadingLevel()"
     ></fdp-icon-tab-bar-text-type>
 </ng-template>

libs/platform/icon-tab-bar/icon-tab-bar.component.ts

@@ -76,6 +76,9 @@ export class IconTabBarComponent implements OnInit, TabList {
     @Input({ transform: booleanAttribute })
     stackContent = false;
 
+    /** Heading level of the tab. */
+    tabHeadingLevel = input<number | null>(null);
+
     /** @description Type of tab bar view. */
     iconTabType = input<TabType>('text');