feat: adding loadingText attribute to define aria-valuetext

Author: willmendesneto

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
+<!-- Passing loading text to be used as WAI-ARIA `aria-valuetext` -->
+<!-- In this case, it will render the component using "Please wait ..." -->
+<!-- Otherwise, it defaults to "Loading..." -->
+<div class="skeleton-with-specific-loading-text">
+  <ngx-skeleton-loader loadingText="Please wait ..."></ngx-skeleton-loader>
+</div>
+```
+
 ### 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
+<div class="item">
+  <!-- Disables the animation -->
+  <ngx-skeleton-loader animation="false"></ngx-skeleton-loader>
+  <!-- Disables the animation, but receiving boolean value from binding -->
+  <!-- Via binding it can receive `false` (boolean), "false" (string), or any other animation type -->
+  <ngx-skeleton-loader [animation]="classAttributeWithBooleanFalseValue"></ngx-skeleton-loader>
+  <!-- Uses `progress` as animation -->
+  <ngx-skeleton-loader animation="progress"></ngx-skeleton-loader>
+  <ngx-skeleton-loader></ngx-skeleton-loader>
+  <!-- Uses `pulse` as animation -->
+  <ngx-skeleton-loader animation="pulse"></ngx-skeleton-loader>
+</div>
+```
 
 ## [2.6.2][] - 2020-12-08
 

README.md

@@ -114,13 +114,18 @@ export class YourAppComponent {}
 </div>
 ```
 
+## 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
 <div class="item">
   <!-- Disables the animation -->
   <ngx-skeleton-loader animation="false"></ngx-skeleton-loader>
+  <!-- Disables the animation, but receiving boolean value from binding -->
+  <!-- Via binding it can receive `false` (boolean), "false" (string), or any other animation type -->
+  <ngx-skeleton-loader [animation]="classAttributeWithBooleanFalseValue"></ngx-skeleton-loader>
   <!-- Uses `progress` as animation -->
   <ngx-skeleton-loader animation="progress"></ngx-skeleton-loader>
   <ngx-skeleton-loader></ngx-skeleton-loader>

projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.spec.ts

@@ -11,10 +11,18 @@ import { NgxSkeletonLoaderComponent } from './ngx-skeleton-loader.component';
         <ngx-skeleton-loader></ngx-skeleton-loader>
       </div>
 
+      <div class="skeleton-with-specific-loading-text">
+        <ngx-skeleton-loader loadingText="Loading. Please wait ..."></ngx-skeleton-loader>
+      </div>
+
       <div class="skeletons-animation-no-animation">
         <ngx-skeleton-loader animation="false"></ngx-skeleton-loader>
       </div>
 
+      <div class="skeletons-animation-no-animation-via-binding">
+        <ngx-skeleton-loader [animation]="animationWithFalsePassedViaBinding"></ngx-skeleton-loader>
+      </div>
+
       <div class="skeletons-animation-pulse">
         <ngx-skeleton-loader animation="pulse"></ngx-skeleton-loader>
       </div>
@@ -46,7 +54,9 @@ import { NgxSkeletonLoaderComponent } from './ngx-skeleton-loader.component';
     </div>
   `,
 })
-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', () => {

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(

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]="{