To make our app more keyboard friendly, the Document modal should close on pressing Escape.
Our other modals already do this nicely!
Perhaps the Document Viewer modal it could use the same Modal component as the others?
The forward and backwards button of the DocViewer also don't have any labels, try to use RefObject to give them aria labels.
Acceptance Criteria
Given the Document viewer modal is open
When users press the Escape key
Then the modal closes
Given the Document viewer modal is open
When users clicks off the modal
Then the modal closes
Given the Document viewer modal is open
When users press tab to cycle focusable elements
Then focus is kept within the modal
Given the Document viewer modal is open
When the modal is closed
Then focus is returned to the last element that had it before the modal opened
Given the user uses a screenreader
When they select the forward/backwards buttons
Then they hear "next/previous document"
Description
To make our app more keyboard friendly, the Document modal should close on pressing Escape. Our other modals already do this nicely! Perhaps the Document Viewer modal it could use the same Modal component as the others? The forward and backwards button of the DocViewer also don't have any labels, try to use RefObject to give them aria labels.
Acceptance Criteria
Given the Document viewer modal is open When users press the Escape key Then the modal closes
Given the Document viewer modal is open When users clicks off the modal Then the modal closes
Given the Document viewer modal is open When users press tab to cycle focusable elements Then focus is kept within the modal
Given the Document viewer modal is open When the modal is closed Then focus is returned to the last element that had it before the modal opened
Given the user uses a screenreader When they select the forward/backwards buttons Then they hear "next/previous document"
Screenshot of Document viewer modal