SAP · Zeyber · Apr 27, 2021 · May 11, 2021 · May 12, 2021 · May 13, 2021
@@ -1,6 +1,6 @@
 <div
   [attr.role]="mode === TAB_MODE.ACCORDIAN ? 'region' : 'tabpanel'"
-  [tabindex]="0"
+  [tabindex]="tab.disableBorderFocus ? null : 0"
   [attr.aria-labelledby]="tab.id ?? null"
   [attr.id]="tab.id ? 'section-' + tab.id : null"
   class="active"

@@ -5,16 +5,20 @@
  */
 
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
+  inject,
   Input,
+  OnDestroy,
   OnInit,
   QueryList,
   ViewChildren,
 } from '@angular/core';
 import { BreakpointService } from '../../../layout/breakpoint';
-import { BehaviorSubject, Observable, of } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { BehaviorSubject, Observable, of, Subscription } from 'rxjs';
+import { map, take } from 'rxjs/operators';
 import { Tab, TabConfig, TAB_MODE } from './tab.model';
 import { wrapIntoBounds } from './tab.utils';
 import { TranslationService } from '@spartacus/core';
@@ -24,27 +28,53 @@ import { TranslationService } from '@spartacus/core';
   templateUrl: './tab.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TabComponent implements OnInit {
+export class TabComponent implements OnInit, AfterViewInit, OnDestroy {
+  /**
+   * If you have nested templates that are subject to complex changes,
+   * it can be better to use this property instead with an Observable
+   * to set Tabs.
+   *
+   * Note: You should NOT set the `tabs` property if using this.
+   */
+  @Input() tabs$: Observable<Tab[] | any>;
   @Input() tabs: Tab[] | any;
   @Input() config: TabConfig | any;
 
   readonly TAB_MODE = TAB_MODE;
 
-  openTabs$: BehaviorSubject<number[]>;
-  mode$: Observable<TAB_MODE>;
+  protected breakpointService = inject(BreakpointService);
+  protected translationService = inject(TranslationService);
+  protected cd = inject(ChangeDetectorRef);
 
   @ViewChildren('tabHeader') tabHeaders: QueryList<any>;
 
-  constructor(
-    protected breakpointService: BreakpointService,
-    protected translationService: TranslationService
-  ) {}
+  openTabs$: BehaviorSubject<number[]>;
+  mode$: Observable<TAB_MODE>;
+  protected subscriptions = new Subscription();
 
   ngOnInit(): void {
     this.openTabs$ = new BehaviorSubject<number[]>(this.config?.openTabs ?? []);
     this.mode$ = this.getMode();
   }
 
+  ngAfterViewInit(): void {
+    /**
+     * We subscribe to the tabs observable if added and use this to set
+     * the `tabs` property. The input `tabs` property should not be
+     * initialized. It will be overwritten by this otherwise.
+     */
+    this.subscriptions.add(
+      this.tabs$?.subscribe((tabs) => {
+        this.tabs = tabs;
+        this.cd.detectChanges();
+      })
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
+  }
+
   /**
    * Tab selection works differently depending on the given mode.
    *
@@ -163,15 +193,19 @@ export class TabComponent implements OnInit {
       return null;
     }
 
+    let header = tab.header;
+    if (tab.headerKey) {
+      this.translationService
+        .translate(tab.headerKey)
+        .pipe(take(1))
+        .subscribe((val) => {
+          header = val;
+        });
+    }
+
     return (
       // Show expanded or collapsed.
-      (this.isOpen(index) ? 'Collapse' : 'Expand') +
-      ' ' +
-      // Show the translation key for header if available.
-      // Otherwise fallback to header string value.
-      (tab.headerKey
-        ? this.translationService.translate(tab.headerKey)
-        : tab.header)
+      (this.isOpen(index) ? 'Collapse' : 'Expand') + ' ' + header
     );
   }
 

@@ -25,6 +25,11 @@ export interface Tab {
    * Identifies the index of the tab to set attributes by.
    */
   id?: number;
+  /**
+   * Disables the tabindex on the border element so that the border
+   * of the tab can no longer be focused.
+   */
+  disableBorderFocus?: boolean;
 }
 
 export interface TabConfig {

@@ -8,9 +8,7 @@
   (click)="block($event)"
 >
   <div class="list-header">
-    <h4>
-      {{ 'productList.filterBy.label' | cxTranslate }}
-    </h4>
+    <h4>{{ 'productList.filterBy.label' | cxTranslate }}</h4>
     <button
       type="button"
       class="close"
@@ -26,22 +24,43 @@ <h4>
       Here we'd like to introduce configurable facet components,
       either by using specific configuration or generic sproutlets
   -->
-  <cx-facet
-    *ngFor="let facet of facets"
-    #facetRef
-    [facet]="facet"
-    [class.expanded]="isExpanded(facet) | async"
-    [class.collapsed]="isCollapsed(facet) | async"
-    role="group"
-    attr.aria-label="{{
-      'productFacetNavigation.ariaLabelItemsAvailable'
-        | cxTranslate
-          : {
-              name: facet.name,
-              count: facet?.values?.length,
-            }
-    }}"
-  ></cx-facet>
+  <ng-container *cxFeature="'a11yTabComponent'">
+    <cx-tab [tabs$]="tabs$" [config]="tabConfig" *ngIf="tabs$ | async"></cx-tab>
+
+    <ng-template #facetsRef *ngFor="let facet of facets">
+      <cx-facet
+        [facet]="facet"
+        role="group"
+        attr.aria-label="{{
+          'productFacetNavigation.ariaLabelItemsAvailable'
+            | cxTranslate
+              : {
+                  name: facet.name,
+                  count: facet?.values?.length
+                }
+        }}"
+      ></cx-facet>
+    </ng-template>
+  </ng-container>
+
+  <ng-container *cxFeature="'!a11yTabComponent'">
+    <cx-facet
+      *ngFor="let facet of facets"
+      #facetRef
+      [facet]="facet"
+      [class.expanded]="isExpanded(facet) | async"
+      [class.collapsed]="isCollapsed(facet) | async"
+      role="group"
+      attr.aria-label="{{
+        'productFacetNavigation.ariaLabelItemsAvailable'
+          | cxTranslate
+            : {
+                name: facet.name,
+                count: facet?.values?.length
+              }
+      }}"
+    ></cx-facet>
+  </ng-container>
 
   <ng-container *cxFeature="'a11yFacetsDialogFocusHandling'">
     <div *ngIf="isDialog" class="cx-facet-list-footer">

@@ -18,10 +18,15 @@ import {
   Renderer2,
   ViewChild,
   inject,
+  AfterViewInit,
+  ViewChildren,
+  QueryList,
+  TemplateRef,
 } from '@angular/core';
-import { Facet, FeatureConfigService } from '@spartacus/core';
-import { Observable, Subscription } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { Facet, FeatureConfigService, useFeatureStyles } from '@spartacus/core';
+import { Tab, TabConfig, TAB_MODE } from '../../../../content/tab/tab.model';
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import { filter, map, take } from 'rxjs/operators';
 import {
   FocusConfig,
   KeyboardFocusService,
@@ -36,7 +41,7 @@ import { FacetService } from '../services/facet.service';
   templateUrl: './facet-list.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FacetListComponent implements OnInit, OnDestroy {
+export class FacetListComponent implements OnInit, OnDestroy, AfterViewInit {
   protected subscriptions = new Subscription();
   private _isDialog: boolean;
 
@@ -73,6 +78,16 @@ export class FacetListComponent implements OnInit, OnDestroy {
     autofocus: 'cx-facet > button',
   };
 
+  tabConfig: TabConfig = {
+    label: 'Product Facets',
+    mode: TAB_MODE.ACCORDIAN,
+    openTabs: [0],
+  };
+
+  tabs$: BehaviorSubject<Tab[]> = new BehaviorSubject<Tab[]>([]);
+
+  @ViewChildren('facetsRef') facetsRef: QueryList<TemplateRef<any>>;
+
   @HostListener('click') handleClick() {
     this.close();
   }
@@ -85,13 +100,45 @@ export class FacetListComponent implements OnInit, OnDestroy {
     protected facetService: FacetService,
     protected elementRef: ElementRef,
     protected renderer: Renderer2
-  ) {}
+  ) {
+    useFeatureStyles('a11yTabComponent');
+  }
 
   ngOnInit(): void {
     // TODO: (CXSPA-7321) - Remove feature flag next major release
     if (this.featureConfigService?.isEnabled('a11yFacetsDialogFocusHandling')) {
       this.enableFocusHandlingOnFacetListChanges();
     }
+
+    // Required to load facets when initial load in side panel.
+    this.updateTabs();
+  }
+
+  ngAfterViewInit(): void {
+    // Required to render facets when opening filters dialog.
+    this.updateTabs();
+
+    // Required to render facet changes (ie. select facet, etc)
+    this.subscriptions.add(
+      this.facetsRef.changes
+        .pipe(filter((changes) => !!changes))
+        .subscribe(() => {
+          this.updateTabs();
+        })
+    );
+  }
+
+  updateTabs(): void {
+    this.facetList$.pipe(take(1)).subscribe((list) => {
+      const facets = list.facets;
+      const tabs = facets.map((facet, i) => ({
+        header: facet.name,
+        content: this.facetsRef?.get(i),
+        disableBorderFocus: true,
+      }));
+
+      this.tabs$.next(tabs);
+    });
   }
 
   /**

@@ -7,6 +7,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FeaturesConfigModule, I18nModule } from '@spartacus/core';
+import { TabModule } from '../../../../content/tab/tab.module';
 import { KeyboardFocusModule } from '../../../../../layout/a11y/keyboard-focus/keyboard-focus.module';
 import { IconModule } from '../../../../misc/icon/icon.module';
 import { FacetModule } from '../facet/facet.module';
@@ -20,6 +21,7 @@ import { FacetListComponent } from './facet-list.component';
     FacetModule,
     KeyboardFocusModule,
     FeaturesConfigModule,
+    TabModule,
   ],
   declarations: [FacetListComponent],
   exports: [FacetListComponent],

@@ -9,6 +9,7 @@
       'productFacetNavigation.filterBy.name' | cxTranslate: { name: facet.name }
     "
     [cxFocus]="{ key: facet.name }"
+    *cxFeature="'!a11yTabComponent'"
   >
     {{ facet.name }}
     <cx-icon
@@ -31,7 +32,6 @@
       routerLink="./"
       [queryParams]="getLinkParams(value)"
       class="value"
-      [tabindex]="isFacetKeyboardNavigationEnabled ? -1 : 0"
       [class.selected]="value.selected"
       [cxFocus]="{ key: value.name }"
       (keydown)="onKeydown($event)"
@@ -57,7 +57,6 @@
         "
         #facetValue
         routerLink="./"
-        [tabindex]="isFacetKeyboardNavigationEnabled ? -1 : 0"
         [queryParams]="getLinkParams(value)"
         class="value"
         [class.selected]="value.selected"

@@ -140,9 +140,6 @@ export class FacetComponent implements AfterViewInit {
       case 'ArrowLeft':
         this.onArrowLeft(event);
         break;
-      case 'ArrowRight':
-        this.onArrowRight(event);
-        break;
       case 'ArrowDown':
         this.onArrowDown(event, targetIndex);
         break;
@@ -152,34 +149,21 @@ export class FacetComponent implements AfterViewInit {
     }
   }
 
-  onArrowRight(event: Event): void {
-    if (!this.isExpanded) {
-      this.toggleGroup(event as UIEvent);
-    }
-  }
-
   onArrowLeft(event: Event): void {
-    if (this.isExpanded) {
-      this.toggleGroup(event as UIEvent);
-      this.facetHeader.nativeElement.focus();
-    }
+    event.preventDefault();
+    const parent: any =
+      this.values.get(0)?.nativeElement.parentElement?.parentElement
+        ?.parentElement?.parentElement?.previousElementSibling;
+    parent?.click();
   }
 
   onArrowDown(event: Event, targetIndex: number): void {
-    if (this.isExpanded) {
-      event.preventDefault();
-      if (event.target === this.facetHeader.nativeElement) {
-        this.values?.first?.nativeElement.focus();
-        return;
-      }
-      this.values.get(targetIndex + 1)?.nativeElement.focus();
-    }
+    event.preventDefault();
+    this.values.get(targetIndex + 1)?.nativeElement.focus();
   }
 
   onArrowUp(event: Event, targetIndex: number): void {
-    if (this.isExpanded) {
-      event.preventDefault();
-      this.values.get(targetIndex - 1)?.nativeElement.focus();
-    }
+    event.preventDefault();
+    this.values.get(targetIndex - 1)?.nativeElement.focus();
   }
 }