fix(drawer): accepts id and aria-labelledby attributes (#1464)

rsuite · Feb 2, 2021 · c7a1194 · c7a1194
1 parent 42c456f
commit c7a1194
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/src/Drawer/test/DrawerSpec.js b/src/Drawer/test/DrawerSpec.js
@@ -11,6 +11,7 @@ describe('Drawer', () => {
       </Drawer>
     );
     assert.ok(instance.querySelectorAll('.rs-drawer.rs-drawer-right'));
+    assert.ok(instance.querySelector('[role="dialog"]'));
   });
 
   it('Should be full', () => {
@@ -36,6 +37,19 @@ describe('Drawer', () => {
     assert.ok(instance.querySelector('.rs-drawer.custom'));
   });
 
+  it('Should accept id and aria-labelledby attribute', () => {
+    const instance = getDOMNode(
+      <Drawer show id="drawer" aria-labelledby="drawer-title">
+        <h4 id="drawer-title">My Drawer</h4>
+        <p>message</p>
+      </Drawer>
+    );
+
+    const dialog = instance.querySelector('[role="dialog"]');
+    assert.equal(dialog.getAttribute('id'), 'drawer');
+    assert.equal(dialog.getAttribute('aria-labelledby'), 'drawer-title');
+  });
+
   it('Should have a custom style', () => {
     const fontSize = '12px';
     const instance = getDOMNode(<Drawer style={{ fontSize }} show />);

diff --git a/src/Modal/ModalDialog.tsx b/src/Modal/ModalDialog.tsx
@@ -14,7 +14,9 @@ export const modalDialogPropTypes = {
   style: PropTypes.object,
   dialogStyle: PropTypes.object,
   children: PropTypes.node,
-  dialogRef: refType
+  dialogRef: refType,
+  id: PropTypes.string,
+  'aria-labelledby': PropTypes.string
 };
 
 class ModalDialog extends React.Component<ModalDialogProps> {