From 1812bdb0b87812ff13b27bce9f23c22929fc3367 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Mon, 3 Jul 2023 14:37:53 +0300
Subject: [PATCH 1/2] fix(toast): toast rendered as visible with `open="false"`

---
 packages/bee-q/src/components/toast/bq-toast.tsx       | 7 ++++++-
 packages/bee-q/src/components/toast/scss/bq-toast.scss | 6 +++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/bee-q/src/components/toast/bq-toast.tsx b/packages/bee-q/src/components/toast/bq-toast.tsx
index ed227c095..4e06b2907 100644
--- a/packages/bee-q/src/components/toast/bq-toast.tsx
+++ b/packages/bee-q/src/components/toast/bq-toast.tsx
@@ -208,7 +208,12 @@ export class BqToast {
 
   render() {
     return (
-      <Host aria-hidden={!this.open ? 'true' : 'false'} hidden={!this.open ? 'true' : 'false'} role="status">
+      <Host
+        class={{ 'is-hidden': !this.open }}
+        aria-hidden={!this.open ? 'true' : 'false'}
+        hidden={!this.open ? 'true' : 'false'}
+        role="status"
+      >
         <output class="bq-toast" part="wrapper">
           <div class={{ [`bq-toast--icon ${this.type}`]: true, '!hidden': this.hideIcon }} part="icon">
             <slot name="icon">
diff --git a/packages/bee-q/src/components/toast/scss/bq-toast.scss b/packages/bee-q/src/components/toast/scss/bq-toast.scss
index e81140ff4..a22aaae3b 100644
--- a/packages/bee-q/src/components/toast/scss/bq-toast.scss
+++ b/packages/bee-q/src/components/toast/scss/bq-toast.scss
@@ -5,11 +5,11 @@
 @import './bq-toast.variables';
 
 :host {
-  @apply hidden;
+  @apply inline-block;
 }
 
-:host([open]) {
-  @apply inline-block;
+:host(.is-hidden) {
+  @apply hidden;
 }
 
 .bq-toast {

From 31a6358256650333b0e660fea256c0c5f5087c66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Mon, 3 Jul 2023 14:42:19 +0300
Subject: [PATCH 2/2] test(toast): add e2e tests for `open` attribute

---
 .../toast/__tests__/bq-toast.e2e.ts           | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/packages/bee-q/src/components/toast/__tests__/bq-toast.e2e.ts b/packages/bee-q/src/components/toast/__tests__/bq-toast.e2e.ts
index 20fb1d0fb..092a78722 100644
--- a/packages/bee-q/src/components/toast/__tests__/bq-toast.e2e.ts
+++ b/packages/bee-q/src/components/toast/__tests__/bq-toast.e2e.ts
@@ -21,6 +21,42 @@ describe('bq-toast', () => {
     expect(element.shadowRoot).not.toBeNull();
   });
 
+  it('should render as hidden', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<bq-toast></bq-toast>');
+
+    const element = await page.find('bq-toast');
+    expect(element).toEqualAttribute('aria-hidden', 'true');
+    expect(element).toHaveClass('is-hidden');
+  });
+
+  it('should render as hidden with `open="false"`', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<bq-toast open="false"></bq-toast>');
+
+    const element = await page.find('bq-toast');
+    expect(element).toEqualAttribute('aria-hidden', 'true');
+    expect(element).toHaveClass('is-hidden');
+  });
+
+  it('should render as open', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<bq-toast open></bq-toast>');
+
+    const element = await page.find('bq-toast');
+    expect(element).not.toEqualAttribute('aria-hidden', 'true');
+    expect(element).not.toHaveClass('is-hidden');
+  });
+
+  it('should render as open with `open="true"`', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<bq-toast open="true"></bq-toast>');
+
+    const element = await page.find('bq-toast');
+    expect(element).not.toEqualAttribute('aria-hidden', 'true');
+    expect(element).not.toHaveClass('is-hidden');
+  });
+
   it('should display text', async () => {
     const page = await newE2EPage();
     await page.setContent('<bq-toast>Text</bq-toast>');