From 00e68dc4c51347d3514983cbf7fcd3aa64ace43c Mon Sep 17 00:00:00 2001 From: Will Mendes Date: Fri, 5 Feb 2021 18:20:49 -0300 Subject: [PATCH] feat: adding loadingText attribute to define aria-valuetext --- CHANGELOG.md | 29 +++++++++++++++ README.md | 10 ++++- .../lib/ngx-skeleton-loader.component.spec.ts | 37 +++++++++++++++---- .../src/lib/ngx-skeleton-loader.component.ts | 7 +++- .../src/lib/ngx-skeleton-loader.html | 2 +- 5 files changed, 74 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4751dfc..706c3f3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,9 +7,38 @@ and this project adheres to [Semantic Versioning](http://semver.org/). ## [Unreleased][] +### Added + +- Adding new `loadingText` attribute to be used as WAI-ARIA `aria-valuetext`. In this case, it will render the component using "Please wait ...". Otherwise, it defaults to "Loading..." + +```html + + + +
+ +
+``` + ### Updated - Using OnPush as changeDetection mechanism into ngx-skeleton-loader component +- Adding ability to pass `false` as string or boolean (coming from variable value via binding) on `animation` attribute in `ngx-skeleton-loader` component configuration. animation will receive `false` as string when attribute field it's not using binding. Component now can receive `false` (boolean), "false" (string), or any other animation type via binding. + +```html +
+ + + + + + + + + + +
+``` ## [2.6.2][] - 2020-12-08 diff --git a/README.md b/README.md index a2a4710..3456864 100644 --- a/README.md +++ b/README.md @@ -114,13 +114,18 @@ export class YourAppComponent {} ``` +## WAI-ARIA values + +- loadingText - _default_ `Loading...`: attribute that defines the text value for `aria-valuetext` attribute. Defaults to "Loading..." + ## Animations You can also define which CSS animation you want to use - even not use any, if it's the case - in your skeleton loader by passing the options in your component via `[animation]` attribute. ### Options -- `false`: it will disable the animation; +- `"false"` (as string): it will disable the animation; +- `false` (as boolean): it will disable the animation. Animation will receive `false` as string when attribute field it's not using binding. Component now can receive `false` (boolean), "false" (string), or any other animation type via binding; - `progress` - _default_: it will use it `progress` as animation; - `progress-dark`: it will use it `progress-dark` as animation. Recommended if your color schema is darken; - `pulse`: it will use `pulse` as animation; @@ -136,6 +141,9 @@ you need to apply the style changes on the
+ + + diff --git a/projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.spec.ts b/projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.spec.ts index d337899..29e013e 100644 --- a/projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.spec.ts +++ b/projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.spec.ts @@ -11,10 +11,18 @@ import { NgxSkeletonLoaderComponent } from './ngx-skeleton-loader.component';
+
+ +
+
+
+ +
+
@@ -46,7 +54,9 @@ import { NgxSkeletonLoaderComponent } from './ngx-skeleton-loader.component'; `, }) -class ContainerComponent {} +class ContainerComponent { + animationWithFalsePassedViaBinding = false; +} describe('NgxSkeletonLoaderComponent', () => { let fixture: any; @@ -71,12 +81,12 @@ describe('NgxSkeletonLoaderComponent', () => { }); it('should add all relevant WAI-ARIA `aria-` attributes in all ngx-skeleton-loader', () => { - expect(fixture.nativeElement.querySelectorAll('[aria-busy="true"]').length).toBe(10); - expect(fixture.nativeElement.querySelectorAll('[aria-valuemin="0"]').length).toBe(10); - expect(fixture.nativeElement.querySelectorAll('[aria-valuemax="100"]').length).toBe(10); - expect(fixture.nativeElement.querySelectorAll('[aria-valuetext="Loading..."]').length).toBe(10); - expect(fixture.nativeElement.querySelectorAll('[role="progressbar"]').length).toBe(10); - expect(fixture.nativeElement.querySelectorAll('[tabindex="0"]').length).toBe(10); + expect(fixture.nativeElement.querySelectorAll('[aria-busy="true"]').length).toBe(12); + expect(fixture.nativeElement.querySelectorAll('[aria-valuemin="0"]').length).toBe(12); + expect(fixture.nativeElement.querySelectorAll('[aria-valuemax="100"]').length).toBe(12); + expect(fixture.nativeElement.querySelectorAll('[aria-valuetext]').length).toBe(12); + expect(fixture.nativeElement.querySelectorAll('[role="progressbar"]').length).toBe(12); + expect(fixture.nativeElement.querySelectorAll('[tabindex="0"]').length).toBe(12); }); it('should use progress as default animation if `animation` is not passed as component attribute', () => { @@ -89,6 +99,12 @@ describe('NgxSkeletonLoaderComponent', () => { }); }); + describe('When skeleton is created passing loading text to be used as WAI-ARIA `aria-valuetext`', () => { + it('should render a single skeleton', () => { + expect(fixture.nativeElement.querySelectorAll('[aria-valuetext="Loading. Please wait ..."]').length).toBe(1); + }); + }); + describe('When skeleton is created with count', () => { it('should render skeleton based on given count attribute', () => { expect(fixture.nativeElement.querySelectorAll('.skeletons-with-count .loader').length).toBe(2); @@ -107,6 +123,13 @@ describe('NgxSkeletonLoaderComponent', () => { fixture.nativeElement.querySelectorAll('.skeletons-animation-no-animation .loader:not(.animation)').length, ).toBe(1); }); + + it('should NOT add progress animation styles based on animation class if animation value is passed via binding', () => { + expect( + fixture.nativeElement.querySelectorAll('.skeletons-animation-no-animation-via-binding .loader:not(.animation)') + .length, + ).toBe(1); + }); }); describe('When skeleton is created using `pulse` as animation', () => { diff --git a/projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.ts b/projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.ts index c12cce3..93ac530 100644 --- a/projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.ts +++ b/projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.ts @@ -11,11 +11,14 @@ export class NgxSkeletonLoaderComponent implements OnInit, AfterViewInit, OnDest @Input() count = 1; + @Input() + loadingText = 'Loading...'; + @Input() appearance: 'circle' | '' = ''; @Input() - animation: 'progress' | 'progress-dark' | 'pulse' | 'false' = 'progress'; + animation: 'progress' | 'progress-dark' | 'pulse' | 'false' | false = 'progress'; @Input() theme: { [k: string]: string } = {}; @@ -27,7 +30,7 @@ export class NgxSkeletonLoaderComponent implements OnInit, AfterViewInit, OnDest this.items.length = this.count; const allowedAnimations = ['progress', 'progress-dark', 'pulse', 'false']; - if (allowedAnimations.indexOf(this.animation) === -1) { + if (allowedAnimations.indexOf(String(this.animation)) === -1) { // Shows error message only in Development if (isDevMode()) { console.error( diff --git a/projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.html b/projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.html index ba1d800..cdb72d9 100644 --- a/projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.html +++ b/projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.html @@ -4,7 +4,7 @@ aria-busy="true" aria-valuemin="0" aria-valuemax="100" - aria-valuetext="Loading..." + [attr.aria-valuetext]="loadingText" role="progressbar" tabindex="0" [ngClass]="{