feat: Dialog support aria-* in closable

react-component · Feb 28, 2024 · a74b4c7 · a74b4c7
1 parent 4b418fd
commit a74b4c7
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git a/src/Dialog/Content/Panel.tsx b/src/Dialog/Content/Panel.tsx
@@ -104,7 +104,7 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
     if (closable) {
       return closeIcon ?? <span className={`${prefixCls}-close-x`} />;
     }
-    return null;
+    return <span className={`${prefixCls}-close-x`} />;
   }, [closable, closeIcon]);
 
   let closer: React.ReactNode;

diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
@@ -640,4 +640,44 @@ describe('dialog', () => {
     );
     spy.mockRestore();
   });
+
+  it('support aria-* in closable', () => {
+    const onClose = jest.fn();
+    const wrapper = mount(
+      <Dialog 
+        closable={{
+          closeIcon:"test",
+          'aria-label': 'test aria-label',
+        }} 
+        visible 
+        onClose={onClose} 
+      />
+    );
+    jest.runAllTimers();
+    wrapper.update();
+
+    const btn = wrapper.find('.rc-dialog-close');
+    expect(btn.text()).toBe('test');
+    expect(btn.getDOMNode().getAttribute('aria-label')).toBe('test aria-label');
+    btn.simulate('click');
+
+    jest.runAllTimers();
+    wrapper.update();
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+  it('should not display closeIcon when closable is false', () => {
+    const onClose = jest.fn();
+    const wrapper = mount(
+      <Dialog 
+        closable={false} 
+        visible 
+        onClose={onClose} 
+      />
+    );
+    jest.runAllTimers();
+    wrapper.update();
+
+    const btn = wrapper.find('.rc-dialog-close');
+    expect(btn.find('.rc-dialog-close-x')).not.toBeNull();
+  });
 });