Fix RSP DropZone's filled message announcement on different platforms (#5123)

* Fix RSP DropZone’s filled message announcement on different platforms

* only pass aria-labelledby to useLabels

* use virtual dragging for ios, add aria-hidden to div, update tests

* remove conditional for filled message

* update package json

* spacing

* add drag manager to cause re-render

* update package

* remove useEffect

* remove drag manager

* update package json

* update package again

Author: yihuiliao

packages/@react-spectrum/dropzone/src/DropZone.tsx

@@ -40,7 +40,7 @@ function DropZone(props: SpectrumDropZoneProps, ref: DOMRef<HTMLDivElement>) {
     <RACDropZone
       {...mergeProps(otherProps)}
       {...styleProps as Omit<React.HTMLAttributes<HTMLElement>, 'onDrop'>}
-      aria-labelledby={isFilled ? messageId : null}
+      aria-labelledby={isFilled && messageId}
       className={
       classNames(
         styles,

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

@@ -55,10 +55,12 @@ function DropZone(props: DropZoneProps, ref: ForwardedRef<HTMLDivElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
 
   let textId = useSlotId();
+  let dropzoneId = useSlotId();
   let ariaLabel = props['aria-label'] || stringFormatter.format('dropzoneLabel');
-  let messageId = (isDropTarget && props['aria-labelledby']) ? props['aria-labelledby'] : null;
-  let ariaLabelledby = [textId, messageId].filter(Boolean).join(' ');
-  let labelProps = useLabels({'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby});
+  let messageId = props['aria-labelledby'];
+  // Chrome + VO will not announce the drop zone's accessible name if useLabels combines an aria-label and aria-labelledby
+  let ariaLabelledby = [dropzoneId, textId, messageId].filter(Boolean).join(' ');
+  let labelProps = useLabels({'aria-labelledby': ariaLabelledby});
 
   let {clipboardProps} = useClipboard({
     onPaste: (items) => props.onDrop?.({
@@ -95,6 +97,10 @@ function DropZone(props: DropZoneProps, ref: ForwardedRef<HTMLDivElement>) {
         data-focus-visible={isFocusVisible || undefined}
         data-drop-target={isDropTarget || undefined} >
         <VisuallyHidden>
+          {/* Added as a workaround for a Chrome + VO bug where it will not announce the aria label */}
+          <div id={dropzoneId} aria-hidden="true">
+            {ariaLabel}
+          </div>
           <button
             {...mergeProps(dropButtonProps, focusProps, clipboardProps, labelProps)}
             ref={buttonRef} />

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

@@ -108,32 +108,21 @@ describe('DropZone', () => {
     expect(dropzone).not.toHaveClass('focus');
   });
 
-  it('should apply correct aria-labelledby', () => {
+  it('should apply correct default aria-labelledby', () => {
     let {getByRole, getByText} = render(
       <DropZone className="test">
         <Text slot="label">
           Test
         </Text>
       </DropZone>);
     let text = getByText('Test');
+    let div = getByText('DropZone');
     let button = getByRole('button');
-    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');
+    expect(button).toHaveAttribute('aria-labelledby', `${div.id} ${text.id}`);
   });
 
   it('should allow custom aria-label', () => {
-    let {getByRole} = render(
+    let {getByRole, getByText} = render(
       <DropZone
         data-testid="foo"
         aria-label="test aria-label">
@@ -142,7 +131,8 @@ describe('DropZone', () => {
         </FileTrigger>
       </DropZone>);
     let button = getByRole('button');
-    expect(button).toHaveAttribute('aria-label', 'test aria-label');
+    let div = getByText('test aria-label');
+    expect(button).toHaveAttribute('aria-labelledby', `${div.id}`);
   });
 
   it('should support render props', async () => {