From 5926906d180e6009d637888e02d1fa388de03458 Mon Sep 17 00:00:00 2001
From: Kiarokh Moattar <kiarokh@icloud.com>
Date: Tue, 6 Aug 2024 15:19:39 +0200
Subject: [PATCH] fix(snackbar): improve accessibility of the dismiss button

---
 src/components/snackbar/snackbar.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/snackbar/snackbar.tsx b/src/components/snackbar/snackbar.tsx
index 4a2a815839..0c3cdddafd 100644
--- a/src/components/snackbar/snackbar.tsx
+++ b/src/components/snackbar/snackbar.tsx
@@ -12,6 +12,7 @@ import {
 } from '@stencil/core';
 import translate from '../../global/translations';
 import { SnackbarContainer } from './container';
+import { createRandomString } from 'src/util/random-string';
 
 const container = new SnackbarContainer();
 const hideAnimationDuration = 300;
@@ -112,8 +113,13 @@ export class Snackbar {
     @State()
     private closing: boolean = true;
 
+    private snackbarId: string;
     private timeoutId?: number;
 
+    public constructor() {
+        this.snackbarId = createRandomString();
+    }
+
     @Listen('changeOffset')
     protected onChangeIndex(event: CustomEvent<number>) {
         event.stopPropagation();
@@ -173,6 +179,7 @@ export class Snackbar {
                     open: this.open,
                     'is-closing': this.closing,
                 }}
+                id={this.snackbarId}
             >
                 <div class="surface" role="status" aria-relevant="additions">
                     <div class="label" aria-atomic="false">
@@ -226,6 +233,7 @@ export class Snackbar {
                     icon="multiply"
                     label={label}
                     onClick={this.close}
+                    aria-controls={this.snackbarId}
                 />
             </div>
         );