Issue #521: lux-stepper-large: die weiter/zurück-Buttons des Steppers…

… sollen auf "aria-disabled" umgestellt werden.
IHK-GfI · Dec 12, 2024 · 070d608 · 070d608
1 parent 0996dc8
commit 070d608
Show file tree

Hide file tree

Showing 13 changed files with 148 additions and 16 deletions.
diff --git a/src/app/demo/components-overview/stepper-large-example/stepper-large-example-data.service.ts b/src/app/demo/components-overview/stepper-large-example/stepper-large-example-data.service.ts
@@ -5,6 +5,7 @@ import {
   LUX_STEPPER_LARGE_DEFAULT_NEXT_BTN_CONF,
   LUX_STEPPER_LARGE_DEFAULT_PREV_BTN_CONF
 } from '../../../modules/lux-layout/lux-stepper-large/lux-stepper-large-model/lux-stepper-large-button-info';
+import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 
 @Injectable({
   providedIn: 'root'
@@ -14,6 +15,7 @@ export class StepperLargeExampleDataService {
   nextButtonConfig: LuxStepperLargeButtonInfo = JSON.parse(JSON.stringify(LUX_STEPPER_LARGE_DEFAULT_NEXT_BTN_CONF));
   finButtonConfig: LuxStepperLargeButtonInfo = JSON.parse(JSON.stringify(LUX_STEPPER_LARGE_DEFAULT_FIN_BTN_CONF));
   luxStepValidationActive = true;
+  showErrorMessage = new BehaviorSubject<boolean>(false);
 
   constructor() {}
 }
diff --git a/src/app/demo/components-overview/stepper-large-example/stepper-large-example.component.html b/src/app/demo/components-overview/stepper-large-example/stepper-large-example.component.html
@@ -2,12 +2,14 @@ <h1 class="lux-sr-only">Beispiel für lux-stepper-large</h1>
 <div class="example-lux-stepper-large" [ngStyle]="{ maxWidth: maxWidth }" [ngClass]="{ 'authentic-example': theme === 'authentic' }">
   <lux-stepper-large
     [luxStepValidationActive]="stepValidationActive"
+    [luxA11YMode]="luxA11YMode"
     [(luxCurrentStepNumber)]="currentStepIndex"
     [luxPrevButtonConfig]="dataService.prevButtonConfig"
     [luxNextButtonConfig]="dataService.nextButtonConfig"
     [luxFinButtonConfig]="dataService.finButtonConfig"
     (luxStepChanged)="onStepChanged($event)"
     (luxStepperFinished)="onFinish()"
+    (luxStepNotComplete)="onStepNotComplete($event)"
     [ngClass]="{ 'authentic-example': theme === 'authentic' }"
   >
     <lux-stepper-large-step luxTitle="Allgemein" [luxCompleted]="allowed">
@@ -18,6 +20,12 @@ <h3>Validierung</h3>
         Weiter-Button immer aktiv und nur die Veto-Funktionen können das Navigieren zum nächsten Schritt verhindern.
       </p>
       <lux-toggle-ac luxLabel="Validierung der Schritte aktivieren" [(luxChecked)]="stepValidationActive"></lux-toggle-ac>
+      <lux-toggle-ac luxLabel="luxA11YMode aktivieren" [(luxChecked)]="luxA11YMode"></lux-toggle-ac>
+      <p>
+        Um die Barrierefreiheit zu verbessern kann anstatt den Weiter Button zu deaktivieren, das Attribut
+        <code>aria-disabled</code> verwendet werden. Der Button bleibt immer aktiv, es wird jedoch bei einem Fehler im Schritt nicht weiter
+        navigiert und ein Output-Event wird geworfen.
+      </p>
 
       <h3>Füllschritte 1 bis 5</h3>
       <p style="margin-bottom: 0">
@@ -44,7 +52,22 @@ <h3>Einwilligung</h3>
         class="lux-max-width-96"
       ></lux-select-ac>
 
-      <lux-toggle-ac luxLabel="Ich habe verstanden und möchte fortfahren" [(luxChecked)]="allowed" [luxRequired]="true"></lux-toggle-ac>
+      <lux-toggle-ac
+        luxLabel="Ich habe verstanden und möchte fortfahren"
+        [(luxChecked)]="allowed"
+        [luxRequired]="true"
+        #requiredCheck
+      ></lux-toggle-ac>
+
+      <lux-textbox
+        class="lux-mt-5"
+        [luxTitle]="'Step ' + (currentStepIndex + 1) + ' kann nicht abgeschlossen werden.'"
+        luxIcon="lux-interface-alert-warning-diamond"
+        luxColor="red"
+        *ngIf="showError && !allowed && stepValidationActive"
+      >
+        <p>Bitte korrigieren oder vervollständigen Sie Ihre Angaben in den gekennzeichneten Feldern, um diesen Step abzuschließen.</p>
+      </lux-textbox>
     </lux-stepper-large-step>
 
     <app-stepper-large-example-step-prev-button></app-stepper-large-example-step-prev-button>

diff --git a/src/app/demo/components-overview/stepper-large-example/stepper-large-example.component.ts b/src/app/demo/components-overview/stepper-large-example/stepper-large-example.component.ts
@@ -5,6 +5,7 @@ import { LuxStepperLargeSelectionEvent } from '../../../modules/lux-layout/lux-s
 import { LuxStepperLargeComponent } from '../../../modules/lux-layout/lux-stepper-large/lux-stepper-large.component';
 import { LuxSnackbarService } from '../../../modules/lux-popups/lux-snackbar/lux-snackbar.service';
 import { StepperLargeExampleDataService } from './stepper-large-example-data.service';
+import { LuxToggleAcComponent } from '../../../modules/lux-form/lux-toggle-ac/lux-toggle-ac.component';
 
 @Component({
   selector: 'lux-stepper-large-example',
@@ -13,6 +14,7 @@ import { StepperLargeExampleDataService } from './stepper-large-example-data.ser
 })
 export class StepperLargeExampleComponent {
   @ViewChild(LuxStepperLargeComponent) stepper!: LuxStepperLargeComponent;
+  @ViewChild('requiredCheck') toggle!: LuxToggleAcComponent;
 
   allowed = false;
   stepValidationActive = true;
@@ -21,6 +23,8 @@ export class StepperLargeExampleComponent {
   maxWidth = this.options[0];
   completed = true;
   theme = '';
+  luxA11YMode = false;
+  showError = false;
 
   constructor(public dataService: StepperLargeExampleDataService, private router: Router, private snackbar: LuxSnackbarService, private themeService: LuxThemeService) {
     this.theme = themeService.getTheme().name;
@@ -34,6 +38,8 @@ export class StepperLargeExampleComponent {
     if (this.currentStepIndex == 1) {
       this.dataService.luxStepValidationActive = this.stepValidationActive;
     }
+
+    this.dataService.showErrorMessage.next(false);
   }
 
   onFinish() {
@@ -53,4 +59,13 @@ export class StepperLargeExampleComponent {
       this.router.navigate([currentUrl]);
     }, snackbarDuration);
   }
+
+  onStepNotComplete(currentStepNumber: number) {
+    this.toggle.formControl.markAsTouched();
+    this.showError = true;
+
+    this.dataService.showErrorMessage.next(true);
+
+  }
+
 }
diff --git a/...overview/stepper-large-example/steps/stepper-large-example-step-fin-button.component.html b/...overview/stepper-large-example/steps/stepper-large-example-step-fin-button.component.html
@@ -31,4 +31,13 @@ <h2 class="example-lux-stepper-large-h2">{{ luxTitle }}</h2>
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
     volutpat.
   </p>
+  <lux-textbox
+    class="lux-mt-5"
+    [luxTitle]="'Step ' + (currentStepIndex + 1) + ' kann nicht abgeschlossen werden.'"
+    luxIcon="lux-interface-alert-warning-diamond"
+    luxColor="red"
+    *ngIf="showErrorMessage && !luxCompleted"
+  >
+    <p>Bitte korrigieren oder vervollständigen Sie Ihre Angaben in den gekennzeichneten Feldern, um diesen Step abzuschließen.</p>
+  </lux-textbox>
 </ng-template>
diff --git a/...s-overview/stepper-large-example/steps/stepper-large-example-step-fin-button.component.ts b/...s-overview/stepper-large-example/steps/stepper-large-example-step-fin-button.component.ts
@@ -23,6 +23,8 @@ interface StepperLargeFinButtonDummyForm {
 })
 export class StepperLargeExampleStepFinButtonComponent extends LuxStepperLargeStepComponent implements OnInit, OnDestroy {
   form: FormGroup<StepperLargeFinButtonDummyForm>;
+  showErrorMessage = false;
+  currentStepIndex = 3;
 
   subscriptions: Subscription[] = [];
 
@@ -51,6 +53,12 @@ export class StepperLargeExampleStepFinButtonComponent extends LuxStepperLargeSt
         this.luxCompleted = this.form.valid;
       })
     );
+
+    this.subscriptions.push(
+      this.dataService.showErrorMessage.subscribe((value) => {
+        this.showErrorMessage = value;
+      })
+    );
   }
 
   createVetoPromise(event: LuxStepperLargeClickEvent): Promise<LuxVetoState> {

diff --git a/...verview/stepper-large-example/steps/stepper-large-example-step-next-button.component.html b/...verview/stepper-large-example/steps/stepper-large-example-step-next-button.component.html
@@ -30,4 +30,13 @@ <h2 class="example-lux-stepper-large-h2">{{ luxTitle }}</h2>
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
     volutpat.
   </p>
+  <lux-textbox
+        class="lux-mt-5"
+        [luxTitle]="'Step ' + (currentStepIndex + 1) + ' kann nicht abgeschlossen werden.'"
+        luxIcon="lux-interface-alert-warning-diamond"
+        luxColor="red"
+        *ngIf="showErrorMessage && !luxCompleted"
+      >
+        <p>Bitte korrigieren oder vervollständigen Sie Ihre Angaben in den gekennzeichneten Feldern, um diesen Step abzuschließen.</p>
+      </lux-textbox>
 </ng-template>
diff --git a/...-overview/stepper-large-example/steps/stepper-large-example-step-next-button.component.ts b/...-overview/stepper-large-example/steps/stepper-large-example-step-next-button.component.ts
@@ -23,6 +23,8 @@ interface StepperLargeNextButtonDummyForm {
 })
 export class StepperLargeExampleStepNextButtonComponent extends LuxStepperLargeStepComponent implements OnInit, OnDestroy {
   form: FormGroup<StepperLargeNextButtonDummyForm>;
+  showErrorMessage = false;
+  currentStepIndex = 2;
 
   subscriptions: Subscription[] = [];
 
@@ -51,6 +53,12 @@ export class StepperLargeExampleStepNextButtonComponent extends LuxStepperLargeS
         this.luxCompleted = this.form.valid;
       })
     );
+
+    this.subscriptions.push(
+      this.dataService.showErrorMessage.subscribe((value) => {
+        this.showErrorMessage = value;
+      })
+    );
   }
 
   createVetoPromise(event: LuxStepperLargeClickEvent): Promise<LuxVetoState> {

diff --git a/...verview/stepper-large-example/steps/stepper-large-example-step-prev-button.component.html b/...verview/stepper-large-example/steps/stepper-large-example-step-prev-button.component.html
@@ -30,4 +30,13 @@ <h2 class="example-lux-stepper-large-h2">{{ luxTitle }}</h2>
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
     volutpat.
   </p>
+  <lux-textbox
+        class="lux-mt-5"
+        [luxTitle]="'Step ' + (currentStepIndex + 1) + ' kann nicht abgeschlossen werden.'"
+        luxIcon="lux-interface-alert-warning-diamond"
+        luxColor="red"
+        *ngIf="showErrorMessage && !luxCompleted"
+      >
+        <p>Bitte korrigieren oder vervollständigen Sie Ihre Angaben in den gekennzeichneten Feldern, um diesen Step abzuschließen.</p>
+      </lux-textbox>
 </ng-template>
diff --git a/...-overview/stepper-large-example/steps/stepper-large-example-step-prev-button.component.ts b/...-overview/stepper-large-example/steps/stepper-large-example-step-prev-button.component.ts
@@ -23,6 +23,8 @@ interface StepperLargePrevButtonDummyForm {
 })
 export class StepperLargeExampleStepPrevButtonComponent extends LuxStepperLargeStepComponent implements OnInit, OnDestroy {
   form: FormGroup<StepperLargePrevButtonDummyForm>;
+  showErrorMessage = false;
+  currentStepIndex = 1;
 
   subscriptions: Subscription[] = [];
 
@@ -51,6 +53,12 @@ export class StepperLargeExampleStepPrevButtonComponent extends LuxStepperLargeS
         this.luxCompleted = this.form.valid;
       })
     );
+
+    this.subscriptions.push(
+      this.dataService.showErrorMessage.subscribe((value) => {
+        this.showErrorMessage = value;
+      })
+    );
   }
 
   createVetoPromise(event: LuxStepperLargeClickEvent): Promise<LuxVetoState> {

diff --git a/...nts-overview/stepper-large-example/steps/stepper-large-extern-step-example.component.html b/...nts-overview/stepper-large-example/steps/stepper-large-extern-step-example.component.html
@@ -15,4 +15,13 @@ <h2 class="example-lux-stepper-large-h2">{{ luxTitle }}</h2>
     sea takimata sanctus est Lorem ipsum dolor sit amet.
   </p>
   <lux-toggle-ac luxLabel="Zustimmung erforderlich" [(luxChecked)]="luxCompleted" [luxRequired]="true"></lux-toggle-ac>
+  <lux-textbox
+        class="lux-mt-5"
+        [luxTitle]="'Step ' + luxTitle + ' kann nicht abgeschlossen werden.'"
+        luxIcon="lux-interface-alert-warning-diamond"
+        luxColor="red"
+        *ngIf="showErrorMessage && !luxCompleted"
+      >
+        <p>Bitte korrigieren oder vervollständigen Sie Ihre Angaben in den gekennzeichneten Feldern, um diesen Step abzuschließen.</p>
+      </lux-textbox>
 </ng-template>
diff --git a/...nents-overview/stepper-large-example/steps/stepper-large-extern-step-example.component.ts b/...nents-overview/stepper-large-example/steps/stepper-large-extern-step-example.component.ts
@@ -1,21 +1,31 @@
 import { AfterViewInit, ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { LuxStepperLargeStepComponent } from '../../../../modules/lux-layout/lux-stepper-large/lux-stepper-large-subcomponents/lux-stepper-large-step/lux-stepper-large-step.component';
+import { StepperLargeExampleDataService } from '../stepper-large-example-data.service';
+import { Subscription } from 'rxjs/internal/Subscription';
 
 @Component({
   selector: 'lux-stepper-large-extern-step-example',
   templateUrl: './stepper-large-extern-step-example.component.html',
   providers: [{ provide: LuxStepperLargeStepComponent, useExisting: StepperLargeExternStepExampleComponent }]
 })
 export class StepperLargeExternStepExampleComponent extends LuxStepperLargeStepComponent implements OnInit, AfterViewInit {
+  showErrorMessage = false;
+  subscriptions: Subscription[] = [];
 
-  constructor(private cdr: ChangeDetectorRef) {
+  constructor(private cdr: ChangeDetectorRef,public dataService: StepperLargeExampleDataService) {
     super();
   }
 
   ngOnInit(): void {
     if (!this.luxTitle) {
       this.luxTitle = 'Lorem ipsum 4711';
     }
+
+    this.subscriptions.push(
+      this.dataService.showErrorMessage.subscribe((value) => {
+        this.showErrorMessage = value;
+      })
+    );
   }
 
   ngAfterViewInit() {

diff --git a/src/app/modules/lux-layout/lux-stepper-large/lux-stepper-large.component.html b/src/app/modules/lux-layout/lux-stepper-large/lux-stepper-large.component.html
@@ -87,7 +87,8 @@
     [luxIconShowRight]="luxNextButtonConfig.iconShowRight"
     [luxColor]="luxNextButtonConfig.color"
     [luxRaised]="true"
-    [luxDisabled]="luxStepValidationActive && (!steps.get(luxCurrentStepNumber) || !steps.get(luxCurrentStepNumber)!.luxCompleted)"
+    [luxDisabled]="luxA11YMode ? false : (luxStepValidationActive && (!steps.get(luxCurrentStepNumber) || !steps.get(luxCurrentStepNumber)!.luxCompleted))"
+    [attr.aria-disabled] = "!luxA11YMode ? false : (luxStepValidationActive && (!steps.get(luxCurrentStepNumber) || !steps.get(luxCurrentStepNumber)!.luxCompleted))"
     (luxClicked)="onNextStep()"
     *ngIf="!isLastStep"
   ></lux-button>
@@ -99,8 +100,9 @@
     [luxColor]="luxFinButtonConfig.color"
     [luxRaised]="true"
     [luxDisabled]="
-      luxStepValidationActive && (!steps.get(luxCurrentStepNumber) || !steps.get(luxCurrentStepNumber)!.luxCompleted || isFinished)
+      luxA11YMode ? false : (luxStepValidationActive && (!steps.get(luxCurrentStepNumber) || !steps.get(luxCurrentStepNumber)!.luxCompleted || isFinished))
     "
+    [attr.aria-disabled] = "!luxA11YMode ? false : (luxStepValidationActive && (!steps.get(luxCurrentStepNumber) || !steps.get(luxCurrentStepNumber)!.luxCompleted || isFinished))"
     (luxClicked)="onFinStep()"
     *ngIf="isLastStep"
   ></lux-button>

diff --git a/src/app/modules/lux-layout/lux-stepper-large/lux-stepper-large.component.ts b/src/app/modules/lux-layout/lux-stepper-large/lux-stepper-large.component.ts
@@ -23,13 +23,15 @@ export class LuxStepperLargeComponent implements OnInit, AfterContentInit, OnDes
   @ContentChildren(LuxStepperLargeStepComponent) steps!: QueryList<ILuxStepperLargeStep>;
 
   @Input() luxStepValidationActive = true;
+  @Input() luxA11YMode = true;
   @Input() luxPrevButtonConfig = LUX_STEPPER_LARGE_DEFAULT_PREV_BTN_CONF;
   @Input() luxNextButtonConfig = LUX_STEPPER_LARGE_DEFAULT_NEXT_BTN_CONF;
   @Input() luxFinButtonConfig = LUX_STEPPER_LARGE_DEFAULT_FIN_BTN_CONF;
 
   @Output() luxStepperFinished = new EventEmitter<void>();
   @Output() luxStepChanged = new EventEmitter<LuxStepperLargeSelectionEvent>();
   @Output() luxCurrentStepNumberChange = new EventEmitter<number>();
+  @Output() luxStepNotComplete = new EventEmitter<number>();
 
   _luxCurrentStepNumber = 0;
 
@@ -105,6 +107,10 @@ export class LuxStepperLargeComponent implements OnInit, AfterContentInit, OnDes
   }
 
   onPrevStep() {
+    if (this.luxStepValidationActive && this.luxA11YMode && !this.steps.get(this.luxCurrentStepNumber)!.luxCompleted) {
+      this.luxStepNotComplete.emit(this._luxCurrentStepNumber);
+    }
+
     const newIndex = this.getPrevIndex(this.luxCurrentStepNumber);
 
     const event: LuxStepperLargeClickEvent = {
@@ -125,6 +131,11 @@ export class LuxStepperLargeComponent implements OnInit, AfterContentInit, OnDes
   }
 
   onNextStep() {
+    if (this.luxStepValidationActive && this.luxA11YMode && !this.steps.get(this.luxCurrentStepNumber)!.luxCompleted) {
+      this.luxStepNotComplete.emit(this._luxCurrentStepNumber);
+      return;
+    }
+
     const newIndex = this.getNextIndex(this.luxCurrentStepNumber);
 
     const event: LuxStepperLargeClickEvent = {
@@ -145,6 +156,11 @@ export class LuxStepperLargeComponent implements OnInit, AfterContentInit, OnDes
   }
 
   onFinStep() {
+    if (this.luxStepValidationActive && this.luxA11YMode && !this.steps.get(this.luxCurrentStepNumber)!.luxCompleted) {
+      this.luxStepNotComplete.emit(this._luxCurrentStepNumber);
+      return;
+    }
+
     const event: LuxStepperLargeClickEvent = {
       stepper: this,
       newIndex: this.luxCurrentStepNumber,
@@ -203,19 +219,23 @@ export class LuxStepperLargeComponent implements OnInit, AfterContentInit, OnDes
   }
 
   onNavLink(stepIndex: number) {
-    if ((!this.luxStepValidationActive) || (this.steps.get(this.luxCurrentStepNumber)!.luxCompleted === true )) {
-      const event: LuxStepperLargeClickEvent = { stepper: this, newIndex: stepIndex, newStep: this.steps.get(stepIndex)!, source: 'nav' };
-      const vetoPromise = this.steps.get(this.luxCurrentStepNumber)!.luxVetoFn(event);
-
-      vetoPromise
-        .then((veto) => {
-          if (veto === LuxVetoState.navigationAccepted) {
-            this.luxCurrentStepNumber = stepIndex;
-            this.cursorPos = -1;
-          }
-        })
-        .catch((err) => console.error(err));
+    if (this.luxStepValidationActive && this.luxA11YMode && !this.steps.get(this.luxCurrentStepNumber)!.luxCompleted) {
+      this.luxStepNotComplete.emit(this._luxCurrentStepNumber);
+      if (stepIndex > this.luxCurrentStepNumber) {
+        return;
+      }
     }
+    const event: LuxStepperLargeClickEvent = { stepper: this, newIndex: stepIndex, newStep: this.steps.get(stepIndex)!, source: 'nav' };
+    const vetoPromise = this.steps.get(this.luxCurrentStepNumber)!.luxVetoFn(event);
+
+    vetoPromise
+      .then((veto) => {
+        if (veto === LuxVetoState.navigationAccepted) {
+          this.luxCurrentStepNumber = stepIndex;
+          this.cursorPos = -1;
+        }
+      })
+      .catch((err) => console.error(err));
   }
 
   onOpenMobileOverlay() {