Skip to content

Commit

Permalink
feat: accessibility on dropdown button
Browse files Browse the repository at this point in the history
feat: accessibility on dropdown button

chore: test dropdown-button in modal

chore: update the test for dropdown button in modal
  • Loading branch information
Chisomchima committed May 8, 2024
1 parent 08c3e68 commit 681086f
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
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'

Expand Down Expand Up @@ -43,7 +45,64 @@ describe('<DropdownButton>', () => {
})
)
})
it('closes dropdown when escape key is pressed', async () => {
const componentText = 'Dropdown Content'

const { getByTestId, queryByText } = render(
<DropdownButton component={componentText} />
)

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()
})
})
test('modal remains open when dropdown button is closed on escape click', async () => {
const dropdownButtonText = 'Dropdown Content'
const headingText = 'Heading Text'
const modalContent = (
<div>
<h1>{headingText}</h1>
<DropdownButton component={dropdownButtonText} />
</div>
)

const { getByTestId, queryByText } = render(
<Modal hide={false} onClose={() => {}}>
{modalContent}
</Modal>
)

const toggleButton = getByTestId(
'dhis2-uicore-dropdownbutton-toggle'
)
fireEvent.click(toggleButton)

await waitFor(() => {
expect(queryByText(dropdownButtonText)).toBeInTheDocument()
})

fireEvent.keyDown(document, { key: 'Escape' })

await waitFor(() => {
expect(
queryByText(dropdownButtonText)
).not.toBeInTheDocument()
expect(queryByText(headingText)).toBeInTheDocument()
})
})
})

describe('closed state', () => {
const onClick = jest.fn()
const wrapper = mount(
Expand Down
26 changes: 26 additions & 0 deletions components/button/src/dropdown-button/dropdown-button.js
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,31 @@ class DropdownButton extends Component {

anchorRef = React.createRef()

componentDidMount() {
document.addEventListener('keydown', this.handleKeyDown)
}

componentWillUnmount() {
document.removeEventListener('keydown', this.handleKeyDown)
}

// handleKeyDown = (event) => {
// event.preventDefault()
// if (event.key === 'Escape' && this.state.open) {
// event.stopPropagation()
// this.setState({ open: false })
// }
// }

handleKeyDown = (event) => {
if (event.key === 'Escape') {
if (this.state.open) {
event.stopPropagation()
this.setState({ open: false })
}
}
}

onClickHandler = ({ name, value }, event) => {
const handleClick = (open) => {
if (this.props.onClick) {
Expand Down Expand Up @@ -133,6 +158,7 @@ class DropdownButton extends Component {
tabIndex={tabIndex}
type={type}
initialFocus={initialFocus}
data-test="dhis2-uicore-dropdownbutton-toggle"
>
{children}
<ArrowIconComponent className={arrow.className} />
Expand Down

0 comments on commit 681086f

Please sign in to comment.