feat: accessibility on dropdown button

chore: test dropdown-button in modal

components/button/src/dropdown-button/__tests__/dropdown-button.test.js

@@ -1,9 +1,10 @@
-import { render, fireEvent, waitFor } from '@testing-library/react'
 import { Layer } from '@dhis2-ui/layer'
 import { Popper } from '@dhis2-ui/popper'
+import { render, fireEvent, waitFor } from '@testing-library/react'
 import { mount } from 'enzyme'
 import React from 'react'
 import { act } from 'react-dom/test-utils'
+import { Modal } from '../../../../modal/src/modal/modal.js'
 import { Button } from '../../index.js'
 import { DropdownButton } from '../dropdown-button.js'
 
@@ -62,6 +63,33 @@ describe('<DropdownButton>', () => {
 
                 fireEvent.keyDown(document, { key: 'Escape' })
 
+                await waitFor(() => {
+                    expect(queryByText(componentText)).not.toBeInTheDocument()
+                })
+            })
+            test('closes dropdown when escape key is pressed inside modal', async () => {
+                const componentText = 'Dropdown Content'
+                const modalContent = (
+                    <DropdownButton component={componentText} />
+                )
+
+                const { getByTestId, queryByText } = render(
+                    <Modal hide={false} onClose={() => {}}>
+                        {modalContent}
+                    </Modal>
+                )
+
+                const toggleButton = getByTestId(
+                    'dhis2-uicore-dropdownbutton-toggle'
+                )
+                fireEvent.click(toggleButton)
+
+                await waitFor(() => {
+                    expect(queryByText(componentText)).toBeInTheDocument()
+                })
+
+                fireEvent.keyDown(document, { key: 'Escape' })
+
                 await waitFor(() => {
                     expect(queryByText(componentText)).not.toBeInTheDocument()
                 })