fix(core,platform): make headingLevel a shared type, use for table to…

…olbar (#12500) * fix(core,platform): make headingLevel a shared type, use for table toolbar * fix: use integers for heading level, not h1/h2/etc * fix: allow for old values (h1/h2), strings, ints, to avoid breaking changes * fix: pr comments
SAP · Oct 7, 2024 · 08f5984 · 08f5984
1 parent 104e1f5
commit 08f5984
Show file tree

Hide file tree

Showing 17 changed files with 78 additions and 13 deletions.
diff --git a/libs/core/dynamic-page/dynamic-page-header/header/dynamic-page-header.component.html b/libs/core/dynamic-page/dynamic-page-header/header/dynamic-page-header.component.html
@@ -26,7 +26,7 @@
                     <span
                         role="heading"
                         class="fd-dynamic-page__title"
-                        [attr.aria-level]="headingLevel()"
+                        [attr.aria-level]="_headingLevel()"
                         [id]="titleId()"
                         [class.fd-dynamic-page__title--wrap]="titleWrap"
                         fdkIgnoreClickOnSelection

diff --git a/libs/core/dynamic-page/dynamic-page-header/header/dynamic-page-header.component.ts b/libs/core/dynamic-page/dynamic-page-header/header/dynamic-page-header.component.ts
@@ -21,6 +21,7 @@ import { DYNAMIC_PAGE_HEADER_TOKEN, DynamicPageHeader } from '@fundamental-ngx/c
 
 import { NgTemplateOutlet } from '@angular/common';
 import { IgnoreClickOnSelectionDirective, Nullable } from '@fundamental-ngx/cdk/utils';
+import { HeadingLevel } from '@fundamental-ngx/core/shared';
 import { DYNAMIC_PAGE_CLASS_NAME, DynamicPageResponsiveSize } from '../../constants';
 import { DynamicPageHeaderSubtitleDirective } from '../../directives/dynamic-page-header-subtitle.directive';
 import { DynamicPageHeaderTitleDirective } from '../../directives/dynamic-page-header-title.directive';
@@ -34,8 +35,6 @@ import { DynamicPageBreadcrumbComponent } from '../breadcrumb/dynamic-page-bread
 
 export const ActionSquashBreakpointPx = 1280;
 
-export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-
 let dynamicPageTitleId = 0;
 
 @Component({
@@ -111,11 +110,14 @@ export class DynamicPageHeaderComponent implements OnInit, AfterViewInit, OnDest
     _size: DynamicPageResponsiveSize;
 
     /**
-     * The level of the Dynamic Page title
-     * Possible options: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-     * Default: 'h2'
+     * Heading level of the dynamic page header title.
      */
-    headingLevel = input<HeadingLevel>('h2');
+    headingLevel = input<HeadingLevel>(2);
+
+    /** @hidden */
+    _headingLevel = computed(() =>
+        this.headingLevel() ? Number.parseInt(`${this.headingLevel()}`.replace(/\D/g, ''), 10) : undefined
+    );
 
     /** Dynamic page title id, it has some default value if not set,  */
     titleId = input('fd-dynamic-page-title-id-' + dynamicPageTitleId++);

diff --git a/libs/core/facets/facet/facet.component.html b/libs/core/facets/facet/facet.component.html
@@ -3,8 +3,8 @@
 } @else {
     @if (facetTitle) {
         <div
-            [attr.role]="!!headingLevel ? 'heading' : null"
-            [attr.aria-level]="headingLevel"
+            [attr.role]="!!_headingLevel ? 'heading' : null"
+            [attr.aria-level]="_headingLevel"
             fd-title
             [headerSize]="5"
             class="fd-margin-bottom--sm"

diff --git a/libs/core/facets/facet/facet.component.ts b/libs/core/facets/facet/facet.component.ts
@@ -11,6 +11,7 @@ import {
 } from '@angular/core';
 import { Nullable } from '@fundamental-ngx/cdk/utils';
 import { FormLabelComponent } from '@fundamental-ngx/core/form';
+import { HeadingLevel } from '@fundamental-ngx/core/shared';
 import { TitleComponent } from '@fundamental-ngx/core/title';
 import { FACET_CLASS_NAME, FacetType } from '../constants';
 import { addClassNameToFacetElement } from '../utils';
@@ -47,10 +48,16 @@ export class FacetComponent implements AfterViewInit {
     subtitle: string;
 
     /**
-     * Heading level (i.e. <h1>, <h2>, etc.) of the facet title.
+     * Heading level of the facet title.
      */
     @Input()
-    headingLevel: Nullable<1 | 2 | 3 | 4 | 5 | 6>;
+    set headingLevel(level: Nullable<HeadingLevel>) {
+        if (typeof level === 'number') {
+            this._headingLevel = level;
+        } else if (typeof level === 'string') {
+            this._headingLevel = Number.parseInt(level.replace(/\D/g, ''), 10);
+        }
+    }
 
     /**
      * id for the facet
@@ -81,6 +88,9 @@ export class FacetComponent implements AfterViewInit {
         return this.type !== 'image' ? this.titleId : '';
     }
 
+    /** @hidden */
+    _headingLevel: number;
+
     /** @hidden
      * the internal id for the title to be associated with the aria-labelledby
      */

diff --git a/libs/core/shared/index.ts b/libs/core/shared/index.ts
@@ -9,3 +9,4 @@ export * from './interfaces/tablist.interface';
 export * from './services/value-state-message.service';
 export * from './tokens/dynamic-page-header.token';
 export * from './tokens/tabs.token';
+export * from './types/heading-level';
diff --git a/libs/core/shared/types/heading-level.ts b/libs/core/shared/types/heading-level.ts
@@ -0,0 +1,19 @@
+export type HeadingLevel =
+    | 1
+    | 2
+    | 3
+    | 4
+    | 5
+    | 6
+    | '1'
+    | '2'
+    | '3'
+    | '4'
+    | '5'
+    | '6'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6';
diff --git a/libs/core/toolbar/toolbar.component.html b/libs/core/toolbar/toolbar.component.html
@@ -1,5 +1,7 @@
 @if (title) {
-    <h4 fd-title class="fd-toolbar__title" [id]="titleId" #titleElement>{{ title }}</h4>
+    <span [attr.aria-level]="_headingLevel" fd-title class="fd-toolbar__title" [id]="titleId" #titleElement>{{
+        title
+    }}</span>
 }
 <ng-content></ng-content>
 @if (overflownItems.length > 0) {

diff --git a/libs/core/toolbar/toolbar.component.ts b/libs/core/toolbar/toolbar.component.ts
@@ -27,6 +27,7 @@ import {
     applyCssClass,
     CssClassBuilder,
     DynamicPortalComponent,
+    Nullable,
     OVERFLOW_PRIORITY_SCORE,
     OverflowPriority,
     ResizeObserverService
@@ -38,6 +39,7 @@ import {
     contentDensityObserverProviders
 } from '@fundamental-ngx/core/content-density';
 import { PopoverModule } from '@fundamental-ngx/core/popover';
+import { HeadingLevel } from '@fundamental-ngx/core/shared';
 import { TitleComponent, TitleToken } from '@fundamental-ngx/core/title';
 import { BehaviorSubject, combineLatest, map, Observable, startWith } from 'rxjs';
 import { ToolbarItem } from './abstract-toolbar-item.class';
@@ -140,6 +142,18 @@ export class ToolbarComponent implements AfterViewInit, AfterViewChecked, CssCla
     @Input()
     tabindex = -1;
 
+    /**
+     * Heading level of the toolbar title.
+     */
+    @Input()
+    set headingLevel(level: Nullable<HeadingLevel>) {
+        if (typeof level === 'number') {
+            this._headingLevel = level;
+        } else if (typeof level === 'string') {
+            this._headingLevel = Number.parseInt(level.replace(/\D/g, ''), 10);
+        }
+    }
+
     /** Toolbar Aria-label attribute. */
     @Input()
     @HostBinding('attr.aria-label')
@@ -178,6 +192,9 @@ export class ToolbarComponent implements AfterViewInit, AfterViewChecked, CssCla
     /** @hidden */
     overflownItems: ToolbarItem[] = [];
 
+    /** @hidden */
+    _headingLevel = 2;
+
     /** HTML Element Reference. */
     readonly elementRef = inject(ElementRef);
 

diff --git a/...ples/dynamic-page-column-layout-example/dynamic-page-column-layout-example.component.html b/...ples/dynamic-page-column-layout-example/dynamic-page-column-layout-example.component.html
@@ -11,6 +11,7 @@
             <ng-template #startColumn>
                 <fd-dynamic-page [autoResponsive]="true" ariaLabel="Example Dynamic Page" [positionRelative]="true">
                     <fd-dynamic-page-header
+                        headingLevel="2"
                         title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
                         subtitle="sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
                     >

diff --git a/...mic-container-height-example/dynamic-page-dynamic-container-height-example.component.html b/...mic-container-height-example/dynamic-page-dynamic-container-height-example.component.html
@@ -6,6 +6,7 @@
         }
         <fd-dynamic-page size="large" ariaLabel="Example Dynamic Page" [autoResponsive]="false">
             <fd-dynamic-page-header
+                headingLevel="2"
                 title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
                 subtitle="sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
             >

diff --git a/libs/docs/core/dynamic-page/examples/dynamic-page-example.component.html b/libs/docs/core/dynamic-page/examples/dynamic-page-example.component.html
@@ -3,6 +3,7 @@
     <div class="overlay">
         <fd-dynamic-page size="large" ariaLabel="Example Dynamic Page" [autoResponsive]="false">
             <fd-dynamic-page-header
+                headingLevel="2"
                 title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
                 subtitle="sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
             >

diff --git a/...amic-page/examples/dynamic-page-facets-example/dynamic-page-facets-example.component.html b/...amic-page/examples/dynamic-page-facets-example/dynamic-page-facets-example.component.html
@@ -2,7 +2,7 @@
 @if (visible) {
     <div class="overlay">
         <fd-dynamic-page size="large" ariaLabel="Example Dynamic Page">
-            <fd-dynamic-page-header title="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
+            <fd-dynamic-page-header headingLevel="2" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                 <span *fdDynamicPageHeaderTitle="let collapsed">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit ({{
                         collapsed ? 'collapsed' : 'not collapsed'

diff --git a/...e/examples/dynamic-page-responsive-example/dynamic-page-responsive-example.component.html b/...e/examples/dynamic-page-responsive-example/dynamic-page-responsive-example.component.html
@@ -3,6 +3,7 @@
     <div class="overlay">
         <fd-dynamic-page ariaLabel="Example Dynamic Page">
             <fd-dynamic-page-header
+                headingLevel="2"
                 title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
                 subtitle="sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
             >

diff --git a/...re/dynamic-page/examples/dynamic-page-routing/dynamic-page-routing-example.component.html b/...re/dynamic-page/examples/dynamic-page-routing/dynamic-page-routing-example.component.html
@@ -3,6 +3,7 @@
     <div class="overlay">
         <fd-dynamic-page size="large" ariaLabel="Example Dynamic Page" [autoResponsive]="false">
             <fd-dynamic-page-header
+                headingLevel="2"
                 title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
                 subtitle="sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
             >

diff --git a/.../dynamic-page/examples/dynamic-page-tabs-example/dynamic-page-tabs-example.component.html b/.../dynamic-page/examples/dynamic-page-tabs-example/dynamic-page-tabs-example.component.html
@@ -6,6 +6,7 @@
     <div class="overlay">
         <fd-dynamic-page size="large" ariaLabel="Example Dynamic Page" [autoResponsive]="false">
             <fd-dynamic-page-header
+                headingLevel="2"
                 title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
                 subtitle="sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
             >

diff --git a/libs/platform/table/components/table-toolbar/table-toolbar.component.html b/libs/platform/table/components/table-toolbar/table-toolbar.component.html
@@ -12,6 +12,7 @@
         [titleId]="tableToolbarTitleId"
         [title]="title && !hideItemCount ? title + ' (' + counter() + ')' : title"
         [shouldOverflow]="shouldOverflow"
+        [headingLevel]="headingLevel"
     >
         @if (_tableToolbarLeftActionsComponent) {
             <span fd-toolbar-item fdOverflowPriority="never">

diff --git a/libs/platform/table/components/table-toolbar/table-toolbar.component.ts b/libs/platform/table/components/table-toolbar/table-toolbar.component.ts
@@ -17,6 +17,7 @@ import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Nullable } from '@fundamental-ngx/cdk/utils';
 import { ButtonComponent } from '@fundamental-ngx/core/button';
+import { HeadingLevel } from '@fundamental-ngx/core/shared';
 import {
     ToolbarComponent,
     ToolbarItemDirective,
@@ -133,6 +134,12 @@ export class TableToolbarComponent implements TableToolbarInterface {
     @Input()
     disableSearch = false;
 
+    /**
+     * Heading level of the table toolbar title.
+     */
+    @Input()
+    headingLevel: HeadingLevel = 2;
+
     /** @hidden */
     @ContentChild(TableToolbarActionsComponent)
     tableToolbarActionsComponent: TableToolbarActionsComponent;