fix: snackbar: added focus to close button in snackbar (#955)

rmotwani-c-eightfold · ypatadia-eightfold · ypatadia-eightfold · commit 23baf0b1389a · 2025-03-13T17:35:48.000-07:00
* fix: snackbar: added focus to close button in snackbar

* fix: snackbar: returned focus to serve snack button

* test: snackBar: updated test cases

---------

Co-authored-by: ypatadia-eightfold &lt;ypatadia@eightfold.ai&gt;
diff --git a/src/components/InfoBar/InfoBar.tsx b/src/components/InfoBar/InfoBar.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { FC, Ref, useContext, useEffect, useState } from 'react';
+import React, { FC, Ref, useContext, useEffect, useRef, useState } from 'react';
 import GradientContext, { Gradient } from '../ConfigProvider/GradientContext';
 import { OcThemeName } from '../ConfigProvider';
 import ThemeContext, {
@@ -48,6 +48,7 @@ export const InfoBar: FC<InfoBarsProps> = React.forwardRef(
       type = InfoBarType.neutral,
       ...rest
     } = props;
+    const closeButtonRef = useRef<HTMLButtonElement>(null);
 
     const contextualGradient: Gradient = useContext(GradientContext);
     const mergedGradient: boolean = configContextProps.noGradientContext
@@ -82,6 +83,12 @@ export const InfoBar: FC<InfoBarsProps> = React.forwardRef(
       );
     }, [mergedLocale]);
 
+    setTimeout(() => {
+      if (closeButtonRef.current) {
+        closeButtonRef.current.focus();
+      }
+    }, 1000);
+
     const infoBarClassNames: string = mergeClasses([
       styles.infoBar,
       { [styles.bordered]: !!bordered },
@@ -129,7 +136,6 @@ export const InfoBar: FC<InfoBarsProps> = React.forwardRef(
                 className={infoBarClassNames}
                 ref={ref}
                 style={style}
-                role={role}
               >
                 <Icon
                   path={getIconName()}
@@ -141,7 +147,9 @@ export const InfoBar: FC<InfoBarsProps> = React.forwardRef(
                     contentWrapperClassNames,
                   ])}
                 >
-                  <div className={messageClasses}>{content}</div>
+                  <div className={messageClasses} role={role}>
+                    {content}
+                  </div>
                   {actionButtonProps && (
                     <Button
                       buttonWidth={ButtonWidth.fitContent}
@@ -162,6 +170,7 @@ export const InfoBar: FC<InfoBarsProps> = React.forwardRef(
                     iconProps={{ path: closeIcon }}
                     onClick={onClose}
                     shape={ButtonShape.Round}
+                    ref={closeButtonRef}
                     transparent
                     {...closeButtonProps}
                     classNames={mergeClasses([
diff --git a/src/components/InfoBar/__snapshots__/InfoBar.test.tsx.snap b/src/components/InfoBar/__snapshots__/InfoBar.test.tsx.snap
@@ -4,7 +4,6 @@ exports[`InfoBar InfoBar is Disruptive 1`] = `
 <div>
   <div
     class="info-bar disruptive"
-    role="alert"
   >
     <span
       aria-hidden="false"
@@ -27,6 +26,7 @@ exports[`InfoBar InfoBar is Disruptive 1`] = `
     >
       <div
         class="message body2"
+        role="alert"
       >
         InfoBar test disruptive
       </div>
@@ -39,7 +39,6 @@ exports[`InfoBar InfoBar is Neutral 1`] = `
 <div>
   <div
     class="info-bar neutral"
-    role="alert"
   >
     <span
       aria-hidden="false"
@@ -62,6 +61,7 @@ exports[`InfoBar InfoBar is Neutral 1`] = `
     >
       <div
         class="message body2"
+        role="alert"
       >
         InfoBar test neutral
       </div>
@@ -74,7 +74,6 @@ exports[`InfoBar InfoBar is Positive 1`] = `
 <div>
   <div
     class="info-bar positive"
-    role="alert"
   >
     <span
       aria-hidden="false"
@@ -97,6 +96,7 @@ exports[`InfoBar InfoBar is Positive 1`] = `
     >
       <div
         class="message body2"
+        role="alert"
       >
         InfoBar test positive
       </div>
@@ -109,7 +109,6 @@ exports[`InfoBar InfoBar is Warning 1`] = `
 <div>
   <div
     class="info-bar warning"
-    role="alert"
   >
     <span
       aria-hidden="false"
@@ -132,6 +131,7 @@ exports[`InfoBar InfoBar is Warning 1`] = `
     >
       <div
         class="message body2"
+        role="alert"
       >
         InfoBar test warning
       </div>
@@ -144,7 +144,6 @@ exports[`InfoBar InfoBar is bordered 1`] = `
 <div>
   <div
     class="info-bar bordered neutral"
-    role="alert"
   >
     <span
       aria-hidden="false"
@@ -167,6 +166,7 @@ exports[`InfoBar InfoBar is bordered 1`] = `
     >
       <div
         class="message body2"
+        role="alert"
       >
         InfoBar test border
       </div>
@@ -179,7 +179,6 @@ exports[`InfoBar Renders a custom icon when the icon prop uses a custom icon 1`]
 <div>
   <div
     class="info-bar neutral"
-    role="alert"
   >
     <span
       aria-hidden="false"
@@ -202,6 +201,7 @@ exports[`InfoBar Renders a custom icon when the icon prop uses a custom icon 1`]
     >
       <div
         class="message body2"
+        role="alert"
       >
         InfoBar test icon
       </div>
@@ -214,7 +214,6 @@ exports[`InfoBar Renders without crashing 1`] = `
 <div>
   <div
     class="info-bar neutral"
-    role="alert"
   >
     <span
       aria-hidden="false"
@@ -237,6 +236,7 @@ exports[`InfoBar Renders without crashing 1`] = `
     >
       <div
         class="message body2"
+        role="alert"
       >
         InfoBar test render
       </div>
diff --git a/src/components/Snackbar/Snackbar.tsx b/src/components/Snackbar/Snackbar.tsx
@@ -11,6 +11,7 @@ export const Snackbar: FC<SnackbarProps> = ({ classNames, ...rest }) => {
   const snackbarClasses = mergeClasses([styles.snackbar, classNames]);
   return (
     <InfoBar
+      tabIndex={0}
       {...rest}
       classNames={snackbarClasses}
       contentClassNames={styles.content}
diff --git a/src/components/Snackbar/SnackbarContainer.tsx b/src/components/Snackbar/SnackbarContainer.tsx
@@ -67,6 +67,7 @@ export const SnackbarContainer: FC<SnackbarContainerProps> = ({
       >
         {getPositionSnacks(position).map((snack) => (
           <Snackbar
+            tabIndex={-1}
             {...snack}
             key={snack.id}
             onClose={() => {
diff --git a/src/components/Snackbar/snack.ts b/src/components/Snackbar/snack.ts
@@ -11,6 +11,8 @@ import { InfoBarType } from '../InfoBar';
 
 const DEFAULT_POSITION: SnackbarPosition = 'top-center';
 
+let focusedElementRef: HTMLElement | null = null;
+
 export const SNACK_EVENTS: Record<string, string> = {
   SERVE: 'serveSnack',
   EAT: 'eatSnack',
@@ -30,6 +32,9 @@ export const serve = (props: SnackbarProps): VoidFunction => {
   if (canUseDocElement()) {
     document.dispatchEvent(serveSnackEvent);
   }
+
+  focusedElementRef = document.activeElement as HTMLElement;
+
   if (!props.closable || props.actionButtonProps) {
     setTimeout(() => {
       eat(id);
@@ -48,6 +53,9 @@ export const eat = (snackId: string): void => {
   if (canUseDocElement()) {
     document.dispatchEvent(removeSnackEvent);
   }
+  if (focusedElementRef) {
+    focusedElementRef.focus();
+  }
 };
 
 export const serveNeutral = (props: SnackbarProps) =>

Original file line number	Diff line number	Diff line change
@@ -4,7 +4,6 @@ exports[`InfoBar InfoBar is Disruptive 1`] = `
`4`	`4`	`<div>`
`5`	`5`	`<div`
`6`	`6`	`class="info-bar disruptive"`
`7`		`- role="alert"`
`8`	`7`	`>`
`9`	`8`	`<span`
`10`	`9`	`aria-hidden="false"`
@@ -27,6 +26,7 @@ exports[`InfoBar InfoBar is Disruptive 1`] = `
`27`	`26`	`>`
`28`	`27`	`<div`
`29`	`28`	`class="message body2"`
	`29`	`+ role="alert"`
`30`	`30`	`>`
`31`	`31`	`InfoBar test disruptive`
`32`	`32`	`</div>`
@@ -39,7 +39,6 @@ exports[`InfoBar InfoBar is Neutral 1`] = `
`39`	`39`	`<div>`
`40`	`40`	`<div`
`41`	`41`	`class="info-bar neutral"`
`42`		`- role="alert"`
`43`	`42`	`>`
`44`	`43`	`<span`
`45`	`44`	`aria-hidden="false"`
@@ -62,6 +61,7 @@ exports[`InfoBar InfoBar is Neutral 1`] = `
`62`	`61`	`>`
`63`	`62`	`<div`
`64`	`63`	`class="message body2"`
	`64`	`+ role="alert"`
`65`	`65`	`>`
`66`	`66`	`InfoBar test neutral`
`67`	`67`	`</div>`
@@ -74,7 +74,6 @@ exports[`InfoBar InfoBar is Positive 1`] = `
`74`	`74`	`<div>`
`75`	`75`	`<div`
`76`	`76`	`class="info-bar positive"`
`77`		`- role="alert"`
`78`	`77`	`>`
`79`	`78`	`<span`
`80`	`79`	`aria-hidden="false"`
@@ -97,6 +96,7 @@ exports[`InfoBar InfoBar is Positive 1`] = `
`97`	`96`	`>`
`98`	`97`	`<div`
`99`	`98`	`class="message body2"`
	`99`	`+ role="alert"`
`100`	`100`	`>`
`101`	`101`	`InfoBar test positive`
`102`	`102`	`</div>`
@@ -109,7 +109,6 @@ exports[`InfoBar InfoBar is Warning 1`] = `
`109`	`109`	`<div>`
`110`	`110`	`<div`
`111`	`111`	`class="info-bar warning"`
`112`		`- role="alert"`
`113`	`112`	`>`
`114`	`113`	`<span`
`115`	`114`	`aria-hidden="false"`
@@ -132,6 +131,7 @@ exports[`InfoBar InfoBar is Warning 1`] = `
`132`	`131`	`>`
`133`	`132`	`<div`
`134`	`133`	`class="message body2"`
	`134`	`+ role="alert"`
`135`	`135`	`>`
`136`	`136`	`InfoBar test warning`
`137`	`137`	`</div>`
@@ -144,7 +144,6 @@ exports[`InfoBar InfoBar is bordered 1`] = `
`144`	`144`	`<div>`
`145`	`145`	`<div`
`146`	`146`	`class="info-bar bordered neutral"`
`147`		`- role="alert"`
`148`	`147`	`>`
`149`	`148`	`<span`
`150`	`149`	`aria-hidden="false"`
@@ -167,6 +166,7 @@ exports[`InfoBar InfoBar is bordered 1`] = `
`167`	`166`	`>`
`168`	`167`	`<div`
`169`	`168`	`class="message body2"`
	`169`	`+ role="alert"`
`170`	`170`	`>`
`171`	`171`	`InfoBar test border`
`172`	`172`	`</div>`
@@ -179,7 +179,6 @@ exports[`InfoBar Renders a custom icon when the icon prop uses a custom icon 1`]
`179`	`179`	`<div>`
`180`	`180`	`<div`
`181`	`181`	`class="info-bar neutral"`
`182`		`- role="alert"`
`183`	`182`	`>`
`184`	`183`	`<span`
`185`	`184`	`aria-hidden="false"`
@@ -202,6 +201,7 @@ exports[`InfoBar Renders a custom icon when the icon prop uses a custom icon 1`]
`202`	`201`	`>`
`203`	`202`	`<div`
`204`	`203`	`class="message body2"`
	`204`	`+ role="alert"`
`205`	`205`	`>`
`206`	`206`	`InfoBar test icon`
`207`	`207`	`</div>`
@@ -214,7 +214,6 @@ exports[`InfoBar Renders without crashing 1`] = `
`214`	`214`	`<div>`
`215`	`215`	`<div`
`216`	`216`	`class="info-bar neutral"`
`217`		`- role="alert"`
`218`	`217`	`>`
`219`	`218`	`<span`
`220`	`219`	`aria-hidden="false"`
@@ -237,6 +236,7 @@ exports[`InfoBar Renders without crashing 1`] = `
`237`	`236`	`>`
`238`	`237`	`<div`
`239`	`238`	`class="message body2"`
	`239`	`+ role="alert"`
`240`	`240`	`>`
`241`	`241`	`InfoBar test render`
`242`	`242`	`</div>`
Original file line number	Diff line number	Diff line change
`@@ -67,6 +67,7 @@ export const SnackbarContainer: FC<SnackbarContainerProps> = ({`
`67`	`67`	`>`
`68`	`68`	`{getPositionSnacks(position).map((snack) => (`
`69`	`69`	`<Snackbar`
	`70`	`+ tabIndex={-1}`
`70`	`71`	`{...snack}`
`71`	`72`	`key={snack.id}`
`72`	`73`	`onClose={() => {`