Dialogs aria-labelledby

packages/@react-aria/dialog/package.json

@@ -19,7 +19,8 @@
     "react": "^16.8.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.6.2"
+    "@babel/runtime": "^7.6.2",
+    "@react-aria/utils": "^3.0.0-rc.1"
   },
   "publishConfig": {
     "access": "public"

packages/@react-aria/dialog/src/useDialog.ts

@@ -11,6 +11,7 @@
  */
 
 import {AllHTMLAttributes, RefObject, useEffect} from 'react';
+import {useSlotId} from '@react-aria/utils';
 
 export interface DialogProps {
   ref: RefObject<HTMLElement | null>,
@@ -19,10 +20,13 @@ export interface DialogProps {
 
 interface DialogAria {
   dialogProps: AllHTMLAttributes<HTMLElement>
+  titleProps: AllHTMLAttributes<HTMLElement>
 }
 
 export function useDialog(props: DialogProps): DialogAria {
   let {ref, role = 'dialog'} = props;
+  let titleId = useSlotId();
+  titleId = props['aria-label'] ? undefined : titleId;
 
   // Focus the dialog itself on mount, unless a child element is already focused.
   useEffect(() => {
@@ -34,7 +38,11 @@ export function useDialog(props: DialogProps): DialogAria {
   return {
     dialogProps: {
       role,
-      tabIndex: -1
+      tabIndex: -1,
+      'aria-labelledby': props['aria-labelledby'] || titleId
+    },
+    titleProps: {
+      id: titleId
     }
   };
 }

packages/@react-aria/utils/src/useId.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {useMemo, useState} from 'react';
+import {useLayoutEffect, useMemo, useState} from 'react';
 
 let map: Map<string, (v: string) => void> = new Map();
 
@@ -44,3 +44,15 @@ export function mergeIds(a: string, b: string): string {
 
   return b;
 }
+
+export function useSlotId(): string {
+  let [id, setId] = useState(useId());
+  useLayoutEffect(() => {
+    let setCurr = map.get(id);
+    if (setCurr && !document.getElementById(id)) {
+      setId(null);
+    }
+  }, [id]);
+
+  return id;
+}

packages/@react-spectrum/dialog/src/Dialog.tsx

@@ -79,13 +79,13 @@ let sizeMap = {
 function BaseDialog({children, slots, size, role, ...otherProps}: SpectrumBaseDialogProps) {
   let ref = useRef();
   let sizeVariant = sizeMap[size];
-  let {dialogProps} = useDialog({ref, role});
+  let {dialogProps, titleProps} = useDialog({ref, role, ...otherProps});
   if (!slots) {
     slots = {
       container: {UNSAFE_className: styles['spectrum-Dialog-grid']},
       hero: {UNSAFE_className: styles['spectrum-Dialog-hero']},
       header: {UNSAFE_className: styles['spectrum-Dialog-header']},
-      heading: {UNSAFE_className: styles['spectrum-Dialog-heading']},
+      heading: {UNSAFE_className: styles['spectrum-Dialog-heading'], ...titleProps},
       typeIcon: {UNSAFE_className: styles['spectrum-Dialog-typeIcon']},
       divider: {UNSAFE_className: styles['spectrum-Dialog-divider'], size: 'M'},
       content: {UNSAFE_className: styles['spectrum-Dialog-content']},

packages/@react-spectrum/dialog/stories/Dialog.stories.tsx

@@ -220,7 +220,6 @@ function render({width = 'auto', isDismissable = undefined, ...props}) {
   );
 }
 
-
 function renderHero({width = 'auto', isDismissable = undefined, ...props}) {
   return (
     <div style={{display: 'flex', width, margin: '100px 0'}}>

packages/@react-spectrum/dialog/test/Dialog.test.js

@@ -13,6 +13,8 @@
 import {cleanup, fireEvent, render} from '@testing-library/react';
 import {Dialog} from '../';
 import {DialogContext} from '../src/context';
+import {Header} from '@react-spectrum/view';
+import {Heading} from '@react-spectrum/typography';
 import {ModalProvider} from '@react-aria/dialog';
 import React from 'react';
 
@@ -29,6 +31,8 @@ describe('Dialog', function () {
 
     let dialog = getByRole('dialog');
     expect(document.activeElement).toBe(dialog);
+    // if there is no heading, then we shouldn't auto label
+    expect(dialog).not.toHaveAttribute('aria-labelledby');
   });
 
   it('auto focuses the dialog itself if there is no focusable child', function () {
@@ -92,4 +96,61 @@ describe('Dialog', function () {
     let dialog = getByRole('dialog');
     expect(dialog).toHaveAttribute('aria-modal', 'true');
   });
+
+  it('should be labelled by its header', function () {
+    let {getByRole} = render(
+      <ModalProvider>
+        <DialogContext.Provider value={{type: 'modal'}}>
+          <Dialog>
+            <Heading><Header>The Title</Header></Heading>
+          </Dialog>
+        </DialogContext.Provider>
+      </ModalProvider>
+    );
+
+    let dialog = getByRole('dialog');
+    let heading = getByRole('heading');
+
+    let id = heading.id;
+    expect(dialog).toHaveAttribute('aria-labelledby', id);
+  });
+
+  it('if aria-labelledby is specified, then that takes precedence over the title', function () {
+    let {getByRole} = render(
+      <div>
+        <ModalProvider>
+          <DialogContext.Provider value={{type: 'modal'}}>
+            <Dialog aria-labelledby="batman">
+              <Heading><Header>The Title</Header></Heading>
+            </Dialog>
+          </DialogContext.Provider>
+        </ModalProvider>
+        <span id="batman">Good grammar is essential, Robin.</span>
+      </div>
+    );
+
+    let dialog = getByRole('dialog');
+    let heading = getByRole('heading');
+
+    let id = heading.id;
+    expect(dialog).not.toHaveAttribute('aria-labelledby', id);
+    expect(dialog).toHaveAttribute('aria-labelledby', 'batman');
+  });
+
+  it('if aria-label is specified, then that takes precedence over the title', function () {
+    let {getByRole} = render(
+      <ModalProvider>
+        <DialogContext.Provider value={{type: 'modal'}}>
+          <Dialog aria-label="robin">
+            <Heading><Header>The Title</Header></Heading>
+          </Dialog>
+        </DialogContext.Provider>
+      </ModalProvider>
+    );
+
+    let dialog = getByRole('dialog');
+
+    expect(dialog).not.toHaveAttribute('aria-labelledby');
+    expect(dialog).toHaveAttribute('aria-label', 'robin');
+  });
 });