Merge branch 'master' into batched-dependabot-updates

projects/canopy/src/lib/alert/alert.component.spec.ts

@@ -11,17 +11,15 @@ describe('LgAlertComponent', () => {
   let component: LgAlertComponent;
   let fixture: ComponentFixture<LgAlertComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        declarations: [ LgAlertComponent, MockComponents(LgIconComponent) ],
-      }).compileComponents();
-
-      fixture = TestBed.createComponent(LgAlertComponent);
-      component = fixture.componentInstance;
-      fixture.detectChanges();
-    }),
-  );
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LgAlertComponent, MockComponents(LgIconComponent) ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LgAlertComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
 
   it('should create', () => {
     expect(component).toBeTruthy();
@@ -38,18 +36,36 @@ describe('LgAlertComponent', () => {
     expect(fixture.nativeElement.getAttribute('class')).toContain('success');
   });
 
-  it('does not add a Aria role for the info variant', () => {
-    component.variant = 'info';
-    fixture.detectChanges();
+  describe('role', () => {
+    it('does not add a Aria role for the info variant', () => {
+      component.variant = 'info';
+      fixture.detectChanges();
 
-    expect(fixture.nativeElement.getAttribute('role')).toBeNull();
-  });
+      expect(fixture.nativeElement.getAttribute('role')).toBeNull();
+    });
 
-  it('adds the Aria role "alert" for all other variants', () => {
-    component.variant = 'warning';
-    fixture.detectChanges();
+    it('does not add a Aria role for the generic variant', () => {
+      component.variant = 'generic';
+      fixture.detectChanges();
+
+      expect(fixture.nativeElement.getAttribute('role')).toBeNull();
+    });
+
+    for (const variant of [ 'success', 'warning', 'error' ]) {
+      it(`adds the Aria role "alert" for the ${variant} variant`, () => {
+        component.variant = variant as Variant;
+        fixture.detectChanges();
 
-    expect(fixture.nativeElement.getAttribute('role')).toBe('alert');
+        expect(fixture.nativeElement.getAttribute('role')).toBe('alert');
+      });
+    }
+
+    it('overrides the role attribute when role input is set', () => {
+      component.role = 'status';
+      fixture.detectChanges();
+
+      expect(fixture.nativeElement.getAttribute('role')).toBe('status');
+    });
   });
 
   it('does not renders an icon for generic variant', () => {

projects/canopy/src/lib/alert/alert.component.ts

@@ -30,20 +30,28 @@ export class LgAlertComponent {
 
     this.renderer.addClass(this.hostElement.nativeElement, `lg-variant--${variant}`);
     this._variant = variant;
+    this.setRole();
   }
   get variant() {
     return this._variant;
   }
 
   @HostBinding('class.lg-alert') class = true;
+  @HostBinding('attr.role') _role: string;
 
-  @HostBinding('attr.role') get role(): string {
-    if (this.variant !== 'info' && this.variant !== 'generic') {
-      return 'alert';
-    }
+  constructor(
+    private renderer: Renderer2,
+    private hostElement: ElementRef,
+  ) {
+    this.variant = 'generic';
   }
 
-  constructor(private renderer: Renderer2, private hostElement: ElementRef) {
-    this.variant = 'generic';
+  @Input() set role(role: string) {
+    this._role = role;
+  }
+  private setRole() {
+    if (!this._role && this.variant !== 'info' && this.variant !== 'generic') {
+      this._role = 'alert';
+    }
   }
 }

projects/canopy/src/lib/alert/docs/alert.stories.ts

@@ -46,6 +46,10 @@ export default {
         type: 'select',
       },
     },
+    role: {
+      description: 'The ARIA role for the alert.',
+      defaultValue: '',
+    },
     class: {
       table: {
         disable: true,
@@ -57,7 +61,9 @@ export default {
 const template = `
 <lg-alert
   [showIcon]="showIcon"
-  [variant]="variant">
+  [variant]="variant"
+  [role]="role"
+>
   {{content}} Here is some <a href="#"> link text</a>.
 </lg-alert>
 `;

projects/canopy/src/lib/alert/docs/guide.stories.mdx

@@ -67,6 +67,10 @@ e.g. You must confirm the terms & conditions before we can send your umbrella
 
 A basic inline message that should only be used if the others are unsuitable. The icon in this instance is editable and should be tailored to align with the message.
 
+## Role
+
+The role attribute is automatically set to 'alert' for any non-info and generic variants. It can be manually set or overridden through property binding.
+
 ## How it works
 
 The inline message works best when placed in close proximity to another element, so that the user can clearly understand the context of the message.

projects/canopy/src/lib/utils/index.ts

@@ -0,0 +1 @@
+export * from './dom.service';

projects/canopy/src/public-api.ts

@@ -2,6 +2,7 @@
  * Public API Surface of canopy
  */
 
+export * from './lib/utils/index';
 export * from './lib/accordion/index';
 export * from './lib/alert/index';
 export * from './lib/banner/index';