chore(next): updates from main (#1796)

* fix(Notifications): improve screen-reader support (#1790)

* chore(changelog): add v8.76.1

---------

Co-authored-by: Florent <[email protected]>

Author: jzempel

docs/changelogs/v8.md

@@ -9,6 +9,12 @@
 
 _Note: Gaps between patch versions are faulty, broken or test releases._
 
+## v8.76.1 (2024-04-18)
+
+#### :bug: Bug Fix
+* `notifications`
+  * [#1790](https://github.com/zendeskgarden/react-components/pull/1790) fix(Notifications): improve screen-reader support ([@ze-flo](https://github.com/ze-flo))
+
 ## v8.76.0 (2024-04-12)
 
 #### :rocket: New Feature

packages/notifications/src/elements/Notification.spec.tsx

@@ -20,13 +20,14 @@ describe('Notification', () => {
   it('has a default role attribute', () => {
     const { container } = render(<Notification type="success" />);
 
-    expect(container.firstChild).toHaveAttribute('role', 'status');
+    expect(container.firstChild).toHaveAttribute('role', 'alert');
   });
 
   it('can have its role attribute modified', () => {
-    const { container } = render(<Notification type="error" role="alert" />);
+    // eslint-disable-next-line jsx-a11y/prefer-tag-over-role
+    const { container } = render(<Notification type="error" role="status" />);
 
-    expect(container.firstChild).toHaveAttribute('role', 'alert');
+    expect(container.firstChild).toHaveAttribute('role', 'status');
   });
 
   it('can have its role attribute removed', () => {

packages/notifications/src/elements/Notification.tsx

@@ -16,25 +16,19 @@ import { Paragraph } from './content/Paragraph';
 import { Close } from './content/Close';
 
 export const NotificationComponent = forwardRef<HTMLDivElement, INotificationProps>(
-  ({ role, ...props }, ref) => {
-    const Icon = props.type ? validationIcons[props.type] : InfoStrokeIcon;
-    const hue = props.type && validationHues[props.type];
+  ({ children, type, ...props }, ref) => {
+    const Icon = type ? validationIcons[type] : InfoStrokeIcon;
+    const hue = type && validationHues[type];
 
     return (
-      <StyledNotification
-        ref={ref}
-        type={props.type}
-        isFloating
-        {...props}
-        role={role === undefined ? 'status' : role}
-      >
-        {props.type && (
+      <StyledNotification ref={ref} type={type} isFloating role="alert" {...props}>
+        {type && (
           <StyledIcon $hue={hue}>
             <Icon />
           </StyledIcon>
         )}
 
-        {props.children}
+        {children}
       </StyledNotification>
     );
   }