fix(components/icon): variant input is respected for SVG-based icons (#…

…2688) (#2701)
blackbaud · Sep 6, 2024 · 1d6953c · 1d6953c
1 parent 85a8cb1
commit 1d6953c
Show file tree

Hide file tree

Showing 5 changed files with 425 additions and 218 deletions.
diff --git a/libs/components/icon/src/lib/icon/fixtures/icon.component.fixture.html b/libs/components/icon/src/lib/icon/fixtures/icon.component.fixture.html
@@ -1,6 +1,7 @@
 <sky-icon
   [fixedWidth]="fixedWidth"
   [icon]="icon"
+  [iconName]="iconName"
   [iconType]="iconType"
   [size]="size"
   [variant]="variant"

diff --git a/libs/components/icon/src/lib/icon/fixtures/icon.component.fixture.ts b/libs/components/icon/src/lib/icon/fixtures/icon.component.fixture.ts
@@ -8,6 +8,7 @@ import { SkyIconVariantType } from '../types/icon-variant-type';
 })
 export class IconTestComponent {
   public icon = 'circle';
+  public iconName: string | undefined;
   public iconType: 'fa' | 'skyux' | undefined;
   public size: string | undefined = '3x';
   public fixedWidth: boolean | undefined = false;

diff --git a/libs/components/icon/src/lib/icon/icon-svg.component.spec.ts b/libs/components/icon/src/lib/icon/icon-svg.component.spec.ts
@@ -4,6 +4,7 @@ import {
   fakeAsync,
   tick,
 } from '@angular/core/testing';
+import { expectAsync } from '@skyux-sdk/testing';
 
 import { SkyIconSvgResolverService } from './icon-svg-resolver.service';
 import { SkyIconSvgComponent } from './icon-svg.component';
@@ -77,6 +78,15 @@ describe('Icon SVG component', () => {
     validateIconId('#test-16-solid');
   }));
 
+  it('should display the resolved icon by ID, size, and variant', fakeAsync(() => {
+    fixture.componentRef.setInput('iconName', 'test');
+    fixture.componentRef.setInput('iconSize', '2x');
+    fixture.componentRef.setInput('iconVariant', 'solid');
+    detectUrlChanges();
+
+    validateIconId('#test-32-solid');
+  }));
+
   it("should use the host element's text color as its fill color", fakeAsync(() => {
     fixture.nativeElement.style.color = '#0f0';
 
@@ -94,4 +104,63 @@ describe('Icon SVG component', () => {
 
     validateIconId('');
   }));
+
+  describe('a11y', () => {
+    async function detectUrlChanges(): Promise<void> {
+      fixture.detectChanges();
+
+      // Resolve icon ID Observable and apply changes.
+      await fixture.whenStable();
+      fixture.detectChanges();
+    }
+
+    it('should be accessible (icon: "test", size: undefined, variant: undefined)', async () => {
+      fixture.componentRef.setInput('iconName', 'test');
+      await detectUrlChanges();
+
+      await expectAsync(fixture.nativeElement).toBeAccessible();
+    });
+
+    it('should be accessible (icon: "test", size: 2x, variant: undefined)', async () => {
+      fixture.componentRef.setInput('iconName', 'test');
+      fixture.componentRef.setInput('iconSize', '2x');
+      await detectUrlChanges();
+
+      await expectAsync(fixture.nativeElement).toBeAccessible();
+    });
+
+    it('should be accessible (icon: "test", size: undefined, variant: "solid")', async () => {
+      fixture.componentRef.setInput('iconName', 'test');
+      fixture.componentRef.setInput('iconVariant', 'solid');
+      await detectUrlChanges();
+
+      await expectAsync(fixture.nativeElement).toBeAccessible();
+    });
+
+    it('should be accessible (icon: "test", size: undefined, variant: "line")', async () => {
+      fixture.componentRef.setInput('iconName', 'test');
+      fixture.componentRef.setInput('iconVariant', 'line');
+      await detectUrlChanges();
+
+      await expectAsync(fixture.nativeElement).toBeAccessible();
+    });
+
+    it('should be accessible (icon: "test", size: 2x, variant: "solid")', async () => {
+      fixture.componentRef.setInput('iconName', 'test');
+      fixture.componentRef.setInput('iconSize', '2x');
+      fixture.componentRef.setInput('iconVariant', 'solid');
+      await detectUrlChanges();
+
+      await expectAsync(fixture.nativeElement).toBeAccessible();
+    });
+
+    it('should be accessible (icon: "test", size: 2x, variant: "line")', async () => {
+      fixture.componentRef.setInput('iconName', 'test');
+      fixture.componentRef.setInput('iconSize', '2x');
+      fixture.componentRef.setInput('iconVariant', 'line');
+      await detectUrlChanges();
+
+      await expectAsync(fixture.nativeElement).toBeAccessible();
+    });
+  });
 });
diff --git a/libs/components/icon/src/lib/icon/icon.component.html b/libs/components/icon/src/lib/icon/icon.component.html
@@ -1,5 +1,9 @@
 @if (iconName) {
-  <sky-icon-svg [iconName]="iconName" [iconSize]="size" />
+  <sky-icon-svg
+    [iconName]="iconName"
+    [iconSize]="size"
+    [iconVariant]="variant"
+  />
 } @else {
   <i
     *ngIf="icon"