RAC DropZone - fix aria violation + make aria-label more customizable (#4703)

* labeling ideas

* allow custom aria-label

* fix aria-label, add additional tests

* add aria-label to useLabel

---------

Co-authored-by: Daniel Lu <[email protected]>

Author: yihuiliao

packages/react-aria-components/src/DropZone.tsx

@@ -12,9 +12,9 @@
 
 import {AriaLabelingProps} from '@react-types/shared';
 import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
-import {DropOptions, mergeProps, useClipboard, useDrop, useFocusRing, useHover, useId, VisuallyHidden} from 'react-aria';
+import {DropOptions, mergeProps, useClipboard, useDrop, useFocusRing, useHover, VisuallyHidden} from 'react-aria';
 import {FileTriggerContext} from './FileTrigger';
-import {filterDOMProps, useLabels} from '@react-aria/utils';
+import {filterDOMProps, useLabels, useSlotId} from '@react-aria/utils';
 import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
 import {TextContext} from './Text';
 
@@ -51,9 +51,10 @@ function DropZone(props: DropZoneProps, ref: ForwardedRef<HTMLDivElement>) {
   let {dropProps, dropButtonProps, isDropTarget} = useDrop({...props, ref: buttonRef, hasDropButton: true});
   let {hoverProps, isHovered} = useHover({});
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();
-  
-  let textId = useId();
-  let labelProps = useLabels({'aria-labelledby': textId});
+
+  let textId = useSlotId();
+  let ariaLabel = props['aria-label'] || 'DropZone';
+  let labelProps = useLabels({'aria-label': ariaLabel, 'aria-labelledby': textId});
 
   let {clipboardProps} = useClipboard({
     onPaste: (items) => props.onDrop?.({
@@ -92,8 +93,8 @@ function DropZone(props: DropZoneProps, ref: ForwardedRef<HTMLDivElement>) {
         <VisuallyHidden>
           <button
             {...mergeProps(dropButtonProps, focusProps, clipboardProps, labelProps)}
-            aria-label="DropZone" // will need to update with string formatter
-            ref={buttonRef} />   
+            aria-label={ariaLabel}
+            ref={buttonRef} />
         </VisuallyHidden>
         {renderProps.children}
       </div>

packages/react-aria-components/stories/index.stories.tsx

@@ -797,6 +797,7 @@ export const DropzoneExampleWithFileTriggerLink = (props) => (
   <div>
     <DropZone
       {...props}
+      aria-label={'testing aria-label'}
       className={styles.dropzone}
       onDrop={action('OnDrop')}
       onDropEnter={action('OnDropEnter')}

packages/react-aria-components/test/DropZone.test.js

@@ -11,7 +11,7 @@
  */
 
 import {act, fireEvent, render} from '@react-spectrum/test-utils';
-import {Button, DropZone, DropZoneContext, FileTrigger, Text} from '../';
+import {Button, DropZone, DropZoneContext, FileTrigger, Link, Text} from '../';
 import {ClipboardEvent, DataTransfer, DataTransferItem, DragEvent} from '@react-aria/dnd/test/mocks';
 import {Draggable} from '@react-aria/dnd/test/examples';
 import React from 'react';
@@ -112,7 +112,32 @@ describe('DropZone', () => {
       </DropZone>);
     let text = getByText('Test');
     let button = getByRole('button');
-    expect(button).toHaveAttribute('aria-labelledby', `${text.id}`);
+    expect(button).toHaveAttribute('aria-labelledby', `${button.id} ${text.id}`);
+  });
+
+  it('should apply default aria-label', () => {
+    let {getByRole} = render(
+      <DropZone
+        data-testid="foo">
+        <FileTrigger>
+          <Link>Upload</Link>
+        </FileTrigger>
+      </DropZone>);
+    let button = getByRole('button');
+    expect(button).toHaveAttribute('aria-label', 'DropZone');
+  });
+
+  it('should allow custom aria-label', () => {
+    let {getByRole} = render(
+      <DropZone
+        data-testid="foo"
+        aria-label="test aria-label">
+        <FileTrigger>
+          <Link>Upload</Link>
+        </FileTrigger>
+      </DropZone>);
+    let button = getByRole('button');
+    expect(button).toHaveAttribute('aria-label', 'test aria-label');
   });
 
   it('should support render props', () => {