Feat: Pass data attributes through on Toast (#7923)

* Feat: Pass data attributes through on Toast

* Fix lint issues

* Code review suggestion

Author: lukpsaxo

packages/@react-aria/toast/src/useToast.ts

@@ -12,11 +12,11 @@
 
 import {AriaButtonProps} from '@react-types/button';
 import {AriaLabelingProps, DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';
+import {filterDOMProps, useId, useSlotId} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {QueuedToast, ToastState} from '@react-stately/toast';
 import {useEffect, useState} from 'react';
-import {useId, useSlotId} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface AriaToastProps<T> extends AriaLabelingProps {
@@ -72,14 +72,15 @@ export function useToast<T>(props: AriaToastProps<T>, state: ToastState<T>, ref:
     setIsVisible(true);
   }, []);
 
+  let toastProps = filterDOMProps(props, {labelable: true});
+
   return {
     toastProps: {
+      ...toastProps,
       role: 'alertdialog',
       'aria-modal': 'false',
-      'aria-label': props['aria-label'],
       'aria-labelledby': props['aria-labelledby'] || titleId,
       'aria-describedby': props['aria-describedby'] || descriptionId,
-      'aria-details': props['aria-details'],
       tabIndex: 0
     },
     contentProps: {

packages/@react-aria/toast/test/useToast.test.js

@@ -26,13 +26,13 @@ describe('useToast', () => {
     close.mockClear();
   });
 
-  let renderToastHook = (toast, state, wrapper) => {
-    let {result} = renderHook(() => useToast({toast}, state, useRef(document.createElement('div'))), {wrapper});
+  let renderToastHook = (props, state, wrapper) => {
+    let {result} = renderHook(() => useToast(props, state, useRef(document.createElement('div'))), {wrapper});
     return result.current;
   };
 
   it('handles defaults', function () {
-    let {closeButtonProps, toastProps, contentProps, titleProps} = renderToastHook({}, {close});
+    let {closeButtonProps, toastProps, contentProps, titleProps} = renderToastHook({toast: {}}, {close});
 
     expect(toastProps.role).toBe('alertdialog');
     expect(contentProps.role).toBe('alert');
@@ -42,12 +42,18 @@ describe('useToast', () => {
   });
 
   it('handles close button', function () {
-    let {closeButtonProps} = renderToastHook({key: 1}, {close});
+    let {closeButtonProps} = renderToastHook({toast: {key: 1}}, {close});
     closeButtonProps.onPress();
 
     expect(close).toHaveBeenCalledTimes(1);
     expect(close).toHaveBeenCalledWith(1);
   });
+
+  it('passes through data attributes', function () {
+    let {toastProps} = renderToastHook({toast: {}, 'data-test-id': 'toast'}, {close});
+
+    expect(toastProps['data-test-id']).toBe('toast');
+  });
 });
 
 describe('single toast at a time', () => {
@@ -71,7 +77,7 @@ describe('single toast at a time', () => {
     await user.tab();
     await user.keyboard('{Enter}');
     await user.keyboard('{Enter}');
-    
+
     let toast = tree.getByRole('alertdialog');
     expect(toast.textContent).toContain('Mmmmm toast 2x');
     let closeButton = within(toast).getByRole('button');