Refactor Dialog to be more accessible

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fannypack",
-  "version": "2.18.0",
+  "version": "2.18.2",
   "description": "An accessible, composable, and friendly React UI Kit",
   "main": "lib/index.js",
   "module": "es/index.js",

src/Dialog/Dialog.js

@@ -1,43 +1,62 @@
 // @flow
 import React, { type Element, type Node } from 'react';
 
-import Heading from '../Heading';
 import _Dialog from './styled';
 import DialogContent from './DialogContent';
 import DialogHeader from './DialogHeader';
 import DialogFooter from './DialogFooter';
+import DialogTitle from './DialogTitle';
+import DialogClose from './DialogClose';
 
 type Props = {
-  border: true | 'shadow',
+  a11yDescriptionId?: string,
+  a11yTitleId?: string,
+  border?: true | 'shadow',
   children: Node,
   className?: string,
   footer?: string | Element<any>,
+  onClickClose?: Function,
+  showCloseButton?: boolean,
   title?: string | Element<any>
 };
 
-const Dialog = ({ border, children, footer, title, ...props }: Props) => (
-  <_Dialog border={border} {...props}>
-    {typeof title === 'string' ? (
+const Dialog = ({
+  a11yDescriptionId,
+  a11yTitleId,
+  border,
+  children,
+  footer,
+  onClickClose,
+  showCloseButton,
+  title,
+  ...props
+}: Props) => (
+  <_Dialog aria-describedby={a11yDescriptionId} aria-labelledby={a11yTitleId} role="dialog" border={border} {...props}>
+    {title && (
       <DialogHeader>
-        <Heading as="h5" isSubHeading>
-          {title}
-        </Heading>
+        {typeof title === 'string' ? <DialogTitle id={a11yTitleId}>{title}</DialogTitle> : title}
+        {showCloseButton && <DialogClose onClick={onClickClose} />}
       </DialogHeader>
-    ) : (
-      <DialogHeader>title</DialogHeader>
     )}
-    <DialogContent>{children}</DialogContent>
+    <DialogContent id={a11yDescriptionId}>{children}</DialogContent>
     {footer && <DialogFooter>{footer}</DialogFooter>}
   </_Dialog>
 );
 
-Dialog.Content = DialogContent;
 Dialog.Header = DialogHeader;
+Dialog.Content = DialogContent;
+Dialog.Footer = DialogFooter;
+Dialog.Title = DialogTitle;
+Dialog.Close = DialogClose;
 
 Dialog.defaultProps = {
+  a11yDescriptionId: undefined,
+  a11yTitleId: undefined,
   border: true,
   className: undefined,
   footer: undefined,
+  onClickClose: undefined,
+  showCloseButton: false,
   title: undefined
 };
 

src/Dialog/Dialog.mdx

@@ -21,19 +21,48 @@ import Dialog from './index';
 ## Basic Usage
 
 <Playground>
-  <Dialog title="This is a title">
+  <Dialog>
+    <Dialog.Header>
+      <Dialog.Title>This is a title</Dialog.Title>
+    </Dialog.Header>
+    <Dialog.Content>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue,
+      ultrices eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur
+      lectus augue sit amet justo.
+    </Dialog.Content>
+  </Dialog>
+</Playground>
+
+## Footer
+
+You can render a footer for the dialog using the `footer` prop.
+
+<Playground>
+  <Dialog title="This is a title" footer={<ActionButtons />}>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue, ultrices
     eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur lectus
     augue sit amet justo.
   </Dialog>
 </Playground>
 
-## Footer
+## Close button
 
-You can render a footer for the dialog using the `footer` prop.
+To render a close icon on a dialog, use the `showCloseButton` prop.
+
+<Playground>
+  <Dialog onClickClose={() => console.log('close')} showCloseButton title="This is a title" footer={<ActionButtons />}>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue, ultrices
+    eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur lectus
+    augue sit amet justo.
+  </Dialog>
+</Playground>
+
+## Accessibility
+
+It is recommended to add an `a11yTitleId` and `a11yDescriptionId` so that screen readers can read the dialog effectively.
 
 <Playground>
-  <Dialog title="This is a title" footer={<ActionButtons/>}>
+  <Dialog a11yTitleId="title" a11yDescriptionId="description" title="This is a title" footer={<ActionButtons />}>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue, ultrices
     eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur lectus
     augue sit amet justo.
@@ -59,6 +88,13 @@ You can render a footer for the dialog using the `footer` prop.
   },
   Footer: {
     base: string | Object
+  },
+  Title: {
+    base: string | Object
+  },
+  Close: {
+    base: string | Object,
+    hover: string | Object
   }
 }
 ```

src/Dialog/DialogClose.js

@@ -0,0 +1,21 @@
+// @flow
+import React from 'react';
+
+import Icon from '../Icon';
+import { DialogClose as _DialogClose } from './styled';
+
+type Props = {
+  className?: string
+};
+
+const DialogClose = ({ children, ...props }: Props) => (
+  <_DialogClose kind="link" {...props}>
+    <Icon icon="cross" />
+  </_DialogClose>
+);
+
+DialogClose.defaultProps = {
+  className: undefined
+};
+
+export default DialogClose;

src/Dialog/DialogTitle.js

@@ -0,0 +1,21 @@
+// @flow
+import React, { type Node } from 'react';
+
+import { DialogTitle as _DialogTitle } from './styled';
+
+type Props = {
+  children: Node,
+  className?: string
+};
+
+const DialogTitle = ({ children, ...props }: Props) => (
+  <_DialogTitle as="h5" isSubHeading {...props}>
+    {children}
+  </_DialogTitle>
+);
+
+DialogTitle.defaultProps = {
+  className: undefined
+};
+
+export default DialogTitle;

src/Dialog/__tests__/Dialog.test.js

@@ -5,18 +5,40 @@ import 'jest-styled-components';
 
 it('renders correctly for a default dialog', () => {
   const { container } = render(
-    <Dialog title="This is a title">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue,
-      ultrices eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur
-      lectus augue sit amet justo.
+    <Dialog>
+      <Dialog.Header>
+        <Dialog.Title>This is a title</Dialog.Title>
+      </Dialog.Header>
+      <Dialog.Content>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue,
+        ultrices eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
+        consectetur lectus augue sit amet justo.
+      </Dialog.Content>
     </Dialog>
   );
   expect(container.firstChild).toMatchSnapshot();
 });
 
 it('renders correctly for a dialog with a footer', () => {
   const { container } = render(
-    <Dialog title="This is a title" footer={<div>test</div>}>
+    <Dialog>
+      <Dialog.Header>
+        <Dialog.Title>This is a title</Dialog.Title>
+      </Dialog.Header>
+      <Dialog.Content>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue,
+        ultrices eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum
+        consectetur lectus augue sit amet justo.
+      </Dialog.Content>
+      <Dialog.Footer>test</Dialog.Footer>
+    </Dialog>
+  );
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+it('renders correctly for a dialog with a close button', () => {
+  const { container } = render(
+    <Dialog showCloseButton title="This is a title">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue,
       ultrices eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur
       lectus augue sit amet justo.