Fixes accessibility issue created by incorrect dialog role (#285)

* Fixes roles

* Adds aria-modal attribute

* Updates snapshot

* Adds aria-modal to snapshot

* Moves aria-modal

Author: mellis481

src/Dialog/Content/index.tsx

@@ -14,12 +14,12 @@ export type ContentProps = {
   onVisibleChanged: (visible: boolean) => void;
   onMouseDown: React.MouseEventHandler;
   onMouseUp: React.MouseEventHandler;
-} & IDialogChildProps
+} & IDialogChildProps;
 
 export type ContentRef = {
   focus: () => void;
   changeActive: (next: boolean) => void;
-}
+};
 
 const Content = React.forwardRef<ContentRef, ContentProps>((props, ref) => {
   const {
@@ -141,7 +141,8 @@ const Content = React.forwardRef<ContentRef, ContentProps>((props, ref) => {
       {({ className: motionClassName, style: motionStyle }, motionRef) => (
         <div
           key="dialog-element"
-          role="document"
+          role="dialog"
+          aria-modal="true"
           ref={motionRef}
           style={{ ...motionStyle, ...style, ...contentStyle }}
           className={classNames(prefixCls, className, motionClassName)}

src/Dialog/index.tsx

@@ -182,7 +182,6 @@ export default function Dialog(props: IDialogChildProps) {
         className={classNames(`${prefixCls}-wrap`, wrapClassName)}
         ref={wrapperRef}
         onClick={onWrapperClick}
-        role="dialog"
         aria-labelledby={title ? ariaId : null}
         style={{ zIndex, ...wrapStyle, display: !animatedVisible ? 'none' : null }}
         {...wrapProps}

tests/__snapshots__/index.spec.tsx.snap

@@ -9,13 +9,13 @@ exports[`dialog add rootClassName should render correct 1`] = `
   />
   <div
     class="rc-dialog-wrap"
-    role="dialog"
     style="font-size: 10px;"
     tabindex="-1"
   >
     <div
+      aria-modal="true"
       class="rc-dialog"
-      role="document"
+      role="dialog"
       style="width: 600px; height: 903px;"
     >
       <div
@@ -59,12 +59,12 @@ exports[`dialog should render correct 1`] = `
   <div
     aria-labelledby="test-id"
     class="rc-dialog-wrap"
-    role="dialog"
     tabindex="-1"
   >
     <div
+      aria-modal="true"
       class="rc-dialog"
-      role="document"
+      role="dialog"
     >
       <div
         aria-hidden="true"