fix: Add group role to element referenced by the alert focus ref (#3705)

Author: jorycunningham

src/alert/__tests__/alert.test.tsx

@@ -160,6 +160,15 @@ describe('Alert Component', () => {
     await expect(container).toValidateA11y();
   });
 
+  describe('a11y', () => {
+    it('has role group on the element referenced by the focus ref', () => {
+      let ref: AlertProps.Ref | null = null;
+      render(<Alert header="Important" ref={element => (ref = element)} />);
+      ref!.focus();
+      expect(document.activeElement).toHaveAttribute('role', 'group');
+    });
+  });
+
   describe('analytics', () => {
     test(`adds ${DATA_ATTR_ANALYTICS_ALERT} attribute with the alert type`, () => {
       const { container } = renderAlert({

src/alert/internal.tsx

@@ -134,7 +134,7 @@ const InternalAlert = React.forwardRef(
               )}
             >
               <div className={styles['alert-wrapper']}>
-                <div className={styles['alert-focus-wrapper']} tabIndex={-1} ref={focusRef}>
+                <div className={styles['alert-focus-wrapper']} tabIndex={-1} ref={focusRef} role="group">
                   <div className={clsx(styles.icon, styles.text)}>
                     <InternalIcon name={typeToIcon[type]} size={size} ariaLabel={statusIconAriaLabel} />
                   </div>