feat(experimental): Button improve loading accessibility (#5573)

taiga-family · Oct 9, 2023 · e0fd6af · e0fd6af
1 parent efd15bd
commit e0fd6af
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 10 deletions.
diff --git a/projects/core/components/loader/loader.template.html b/projects/core/components/loader/loader.template.html
@@ -1,5 +1,6 @@
 <fieldset
     class="t-content"
+    [attr.inert]="loading || null"
     [class.t-content_has-overlay]="hasOverlay"
     [class.t-content_loading]="loading"
     [disabled]="loading && !isApple"

diff --git a/projects/demo/src/modules/experimental/button/button.template.html b/projects/demo/src/modules/experimental/button/button.template.html
@@ -41,6 +41,11 @@
             heading="Loading"
             [content]="example4"
         >
+            <tui-notification class="tui-space_bottom-4">
+                Pass a string as
+                <code>loading</code>
+                for a18n indication
+            </tui-notification>
             <tui-button-example-4></tui-button-example-4>
         </tui-doc-example>
 

diff --git a/projects/demo/src/modules/experimental/button/examples/4/index.html b/projects/demo/src/modules/experimental/button/examples/4/index.html
@@ -1,7 +1,7 @@
 <button
     iconLeft="tuiIconClockLarge"
     tuiButton
-    [loading]="!!(loading$ | async)"
+    [loading]="loading$ | async"
     (click)="trigger$.next()"
 >
     Click to start

diff --git a/projects/demo/src/modules/experimental/button/examples/4/index.ts b/projects/demo/src/modules/experimental/button/examples/4/index.ts
@@ -14,6 +14,8 @@ import {map, startWith, switchMap} from 'rxjs/operators';
 export class TuiButtonExample4 {
     readonly trigger$ = new Subject();
     readonly loading$ = this.trigger$.pipe(
-        switchMap(() => timer(2000).pipe(map(ALWAYS_FALSE_HANDLER), startWith(true))),
+        switchMap(() =>
+            timer(2000).pipe(map(ALWAYS_FALSE_HANDLER), startWith('Loading')),
+        ),
     );
 }
diff --git a/projects/experimental/components/button/button.component.ts b/projects/experimental/components/button/button.component.ts
@@ -1,4 +1,11 @@
-import {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    HostListener,
+    Inject,
+    Input,
+} from '@angular/core';
+import {tuiIsString} from '@taiga-ui/cdk';
 import {tuiSizeBigger, TuiSizeS} from '@taiga-ui/core';
 
 import {TUI_BUTTON_OPTIONS, TuiButtonOptions} from './button.options';
@@ -9,7 +16,7 @@ import {TUI_BUTTON_OPTIONS, TuiButtonOptions} from './button.options';
     templateUrl: './button.template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: {
-        '[disabled]': 'disabled || loading',
+        '[attr.aria-disabled]': 'loading',
         '[class._loading]': 'loading',
     },
 })
@@ -18,20 +25,28 @@ export class TuiButtonComponent {
     size = this.options.size;
 
     @Input()
-    loading = false;
+    loading: boolean | string | null = false;
 
     @Input()
     iconLeft = '';
 
     @Input()
     iconRight = '';
 
-    @Input()
-    disabled = false;
+    constructor(@Inject(TUI_BUTTON_OPTIONS) private readonly options: TuiButtonOptions) {}
 
     get loaderSize(): TuiSizeS {
         return tuiSizeBigger(this.size) ? 'm' : 's';
     }
 
-    constructor(@Inject(TUI_BUTTON_OPTIONS) private readonly options: TuiButtonOptions) {}
+    get label(): string {
+        return tuiIsString(this.loading) ? this.loading : '';
+    }
+
+    @HostListener('click.capture', ['$event'])
+    onClick(event: MouseEvent): void {
+        if (this.loading) {
+            event.stopPropagation();
+        }
+    }
 }
diff --git a/projects/experimental/components/button/button.style.less b/projects/experimental/components/button/button.style.less
@@ -10,6 +10,7 @@
     width: unset; // To override 100% coming from tuiWrapper
     white-space: nowrap;
     border-radius: var(--t-radius);
+    overflow: hidden;
     user-select: none;
     outline: none;
     cursor: pointer;
@@ -20,6 +21,14 @@
         margin-inline-end: -0.125rem;
     }
 
+    > .t-loader {
+        .fullsize();
+
+        .t-text {
+            position: absolute;
+        }
+    }
+
     &[data-size='xs'] {
         --t-size: var(--tui-height-xs);
         --t-radius: var(--tui-radius-xs);
@@ -103,7 +112,6 @@
         }
 
         > .t-loader {
-            .fullsize();
             opacity: 1;
         }
     }

diff --git a/projects/experimental/components/button/button.template.html b/projects/experimental/components/button/button.template.html
@@ -9,8 +9,11 @@
     [src]="iconRight"
 ></tui-svg>
 <tui-loader
-    *ngIf="loading"
+    aria-live="polite"
+    role="status"
     class="t-loader"
     [inheritColor]="true"
+    [showLoader]="!!loading"
     [size]="loaderSize"
+    [textContent]="label"
 ></tui-loader>