feat(snackbar): make snackbars more accessible (#1043)

Author: ychhabra-eightfold

src/components/InfoBar/InfoBar.tsx

@@ -14,6 +14,7 @@ import LocaleReceiver, {
   useLocaleReceiver,
 } from '../LocaleProvider/LocaleReceiver';
 import enUS from './Locale/en_US';
+import { useMergedRefs } from '../../hooks/useMergedRefs';
 
 import styles from './infoBar.module.scss';
 import themedComponentStyles from './infoBar.theme.module.scss';
@@ -28,13 +29,15 @@ export const InfoBar: FC<InfoBarsProps> = React.forwardRef(
       closable,
       closeButtonAriaLabelText: defaultCloseButtonAriaLabelText,
       closeButtonProps,
+      closeButtonRef: externalCloseButtonRef,
       closeIcon = IconName.mdiClose,
       configContextProps = {
         noGradientContext: false,
         noThemeContext: false,
       },
       content,
       contentClassNames,
+      contentId,
       contentWrapperClassNames,
       gradient = false,
       icon,
@@ -50,7 +53,11 @@ export const InfoBar: FC<InfoBarsProps> = React.forwardRef(
       moveFocusToSnackbar = false,
       ...rest
     } = props;
-    const closeButtonRef = useRef<HTMLButtonElement>(null);
+    const internalCloseButtonRef = useRef<HTMLButtonElement>(null);
+    const closeButtonRef = useMergedRefs(
+      internalCloseButtonRef,
+      externalCloseButtonRef
+    );
 
     const contextualGradient: Gradient = useContext(GradientContext);
     const mergedGradient: boolean = configContextProps.noGradientContext
@@ -85,14 +92,6 @@ export const InfoBar: FC<InfoBarsProps> = React.forwardRef(
       );
     }, [mergedLocale]);
 
-    useEffect(() => {
-      setTimeout(() => {
-        if (ref && 'current' in ref && moveFocusToSnackbar && closable) {
-          ref.current.focus();
-        }
-      }, 0);
-    }, [ref]);
-
     const infoBarClassNames: string = mergeClasses([
       styles.infoBar,
       { [styles.bordered]: !!bordered },
@@ -142,6 +141,7 @@ export const InfoBar: FC<InfoBarsProps> = React.forwardRef(
                 ref={ref}
                 style={style}
                 role={role}
+                aria-describedby={contentId}
               >
                 <Icon
                   path={getIconName()}
@@ -154,7 +154,9 @@ export const InfoBar: FC<InfoBarsProps> = React.forwardRef(
                     contentWrapperClassNames,
                   ])}
                 >
-                  <div className={messageClasses}>{content}</div>
+                  <div className={messageClasses} id={contentId}>
+                    {content}
+                  </div>
                   {actionButtonProps && (
                     <Button
                       buttonWidth={ButtonWidth.fitContent}

src/components/InfoBar/InfoBar.types.ts

@@ -75,6 +75,11 @@ export interface InfoBarsProps
    * Custom classes of the content.
    */
   contentClassNames?: string;
+  /**
+   * ID attribute for the content element.
+   * Useful for aria-describedby references.
+   */
+  contentId?: string;
   /**
    * Custom classes of the content wrapper.
    */
@@ -132,4 +137,8 @@ export interface InfoBarsProps
    * @default false
    */
   moveFocusToSnackbar?: boolean;
+  /**
+   * Ref for the close button element
+   */
+  closeButtonRef?: React.Ref<HTMLButtonElement>;
 }

src/components/LocaleProvider/index.tsx

@@ -14,6 +14,7 @@ import type { StepperLocale } from '../Stepper';
 import type { TableLocale } from '../Table/Table.types';
 import type { UploadLocale } from '../Upload/Upload.types';
 import type { ValidateMessages } from '../Form/Internal/OcForm.types';
+import type { SnackbarLocale } from '../Snackbar/Snackbar.types';
 import LocaleContext from './Context';
 
 export interface Locale {
@@ -36,6 +37,7 @@ export interface Locale {
   Table?: TableLocale;
   TimePicker?: Record<string, any>;
   Upload?: UploadLocale;
+  Snackbar?: SnackbarLocale;
 }
 
 export interface LocaleProviderProps {