fix(toast): adding alert role for toast

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Fixed
 - Chip - made remove button accessible with the keyboard [#480](https://github.com/IgniteUI/igniteui-webcomponents/issues/480)
+- Toast - added `role="alert"` to the message container for assistive software to read it without the need of focusing [#479](https://github.com/IgniteUI/igniteui-webcomponents/issues/479)
 
 ## [3.3.1] - 2022-08-10
 ### Changed

src/components/toast/toast.spec.ts

@@ -39,21 +39,19 @@ describe('Toast', () => {
       toast.setAttribute('display-time', `10000`);
       await elementUpdated(toast);
       expect(toast.displayTime).to.eq(10000);
-      expect(toast).dom.to.equal(
-        `<igc-toast display-time='10000'></igc-toast>`
-      );
+      expect(toast).dom.to.have.attribute('display-time', '10000');
     });
 
     it('should change the toast keepOpen option correctly.', async () => {
       toast.keepOpen = true;
       expect(toast.keepOpen).to.be.true;
       await elementUpdated(toast);
-      expect(toast).dom.to.equal(`<igc-toast keep-open></igc-toast>`);
+      expect(toast).dom.to.have.attribute('keep-open');
 
       toast.keepOpen = false;
       expect(toast.keepOpen).to.be.false;
       await elementUpdated(toast);
-      expect(toast).dom.to.equal(`<igc-toast></igc-toast>`);
+      expect(toast).dom.to.not.have.attribute('keep-open');
     });
 
     it('show method should open the toast', async () => {

src/components/toast/toast.ts

@@ -67,6 +67,16 @@ export default class IgcToastComponent extends LitElement {
     }
   }
 
+  public override connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'alert');
+    }
+    if (!this.hasAttribute('aria-live')) {
+      this.setAttribute('aria-live', 'polite');
+    }
+  }
+
   protected override render() {
     return html`<slot></slot>`;
   }