Added possibility to customize role attribute of the <svg> element

Fixes #148
FortAwesome · Aug 9, 2019 · b9fbd93 · b9fbd93
1 parent 3d45099
commit b9fbd93
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/projects/demo/src/app/app.component.html b/projects/demo/src/app/app.component.html
@@ -6,7 +6,7 @@ <h3>Icon as Object (with title attribute—inspect the DOM to see it)</h3>
 <h3>Icon looked up in library by name</h3>
 <p>Possible after adding the <code>faUser</code> icon from the <code>free-solid-svg-icons</code> package to the library.</p>
 <p>The default prefix of <code>fas</code> is assumed. Also, add a border.</p>
-<fa-icon icon='user' [border]="true"></fa-icon>
+<fa-icon icon='user' [border]="true" a11yRole="presentation"></fa-icon>
 
 <h3>Duotone icons</h3>
 <fa-duotone-icon [icon]="faDummy"></fa-duotone-icon>

diff --git a/src/lib/icon/icon.component.spec.ts b/src/lib/icon/icon.component.spec.ts
@@ -91,6 +91,20 @@ describe('FaIconComponent', () => {
     expect(queryByCss(fixture, 'svg').classList.contains('fa-spin')).toBeTruthy();
   });
 
+  it('should be possible to customize `role` attribute of the rendered SVG icon', () => {
+    @Component({
+      selector: 'fa-host',
+      template: '<fa-icon [icon]="faUser" a11yRole="presentation"></fa-icon>'
+    })
+    class HostComponent {
+      faUser = faUser;
+    }
+
+    const fixture = initTest(HostComponent);
+    fixture.detectChanges();
+    expect(queryByCss(fixture, 'svg').getAttribute('role')).toBe('presentation');
+  });
+
   describe('custom service configuration', () => {
 
     let fixture: ComponentFixture<HostComponent>;

diff --git a/src/lib/icon/icon.component.ts b/src/lib/icon/icon.component.ts
@@ -50,6 +50,13 @@ export class FaIconComponent implements OnChanges {
   @Input() classes?: string[] = [];
   @Input() transform?: string | Transform;
 
+  /**
+   * Specify the `role` attribute for the rendered <svg> element.
+   *
+   * @default 'img'
+   */
+  @Input() a11yRole: string;
+
   /**
    * @deprecated Since 0.5.0. Will be removed in 0.6.0. Use `icon` property directly.
    */
@@ -120,7 +127,10 @@ export class FaIconComponent implements OnChanges {
       classes: [...faClassList(classOpts), ...this.classes],
       mask: faNormalizeIconSpec(this.mask, this.iconService.defaultPrefix),
       styles: this.styles != null ? this.styles : {},
-      symbol: this.symbol
+      symbol: this.symbol,
+      attributes: {
+        role: this.a11yRole
+      }
     };
   }