Issue description

Screen reader does not render when "Log work" modal dialog appears on page and also focus doesn’t trap within the modal dialog.

STR

1. Launch URL 
2. Turn on screen reader and navigate to "Projects" link from header region and activate it.
3. Activate any one project and preview the issue.
4. Activate "Actions" button from left navigation menu.
5. Activate "log work" link which will trigger "log work" modal dialog.

Actual Behaviour

When screen reader activates "Log work" modal dialog, screen reader users unaware of it as the screen reader does not render about the presence of web dialogue on page. Moreover focus does not move to the first interactive element i.e "Time spent" input field and keyboard focus moves inappropriately to top of the page when modal appears on the page. This made it difficult for screen reader and keyboard only users to interact with the modal dialog effectively

Expected Behaviour

Screen reader should render when modal dialog appears on page, for this add role="dialog" and "aria-labelledby" attribute to the <div> element containing the modal dialog title. Keyboard focus should be set to first interactive element of modal dialog i.e "Time spent" input field and it should be trap within the modal dialog.

Screen Recording

https://a11y-internal.atlassian.net/secure/attachment/16540/Screen+Recording+2021-12-31+at+1.40.58+PM.mov

AXQA Ref:AXQA-76