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

Author: ze-flo

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 { validationIcons, validationHues } from '../utils/icons';
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export const Notification = 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>
     );
   }