Purpose: Focus handling: Review and make consistent dialog issue amongst screen readers

Summary: Recent accessibility reviews by University of Colorado at Boulder have cited dialog focus inconsistencies in the Lists app.

Lists app.
's comments in green
notes from review:

• There were other instances where focus was inconsistent amongst screen readers and it moved to behind a dialog. Moving focus out of a dialog is an issue as well as it is disorienting and users who will have to find a way back into the dialog.  

  • If the user deletes a line when creating a query, JAWS focus leaves the dialog. NVDA focus goes to the “test query” button.  
    When a focused element is removed from the DOM, JAWS sends focus back to the body of the document rather than keeping it where it was. To fix this, focus must be programmatically sent to correct place - to the first field of the previous line. If you know the index of the removed row, you can obtain the previous row element with something like document.querySelector("[class^=repeatableFieldItem-]:nth-child(i)") .. then use the getFirstFocusable() utility from stripes-components to focus the first field in that row.

  • If the user selects “test query” button, JAWS focus leaves the dialog and goes to the top of the page. NVDA focus leaves the dialog and goes to the “inactive radio button.” 
    If enforceFocus is set to true on the Modal, focus should no longer travel outside of it. When the modal closes, the ‘Build query’ button should be focused. I could not reproduce the issue when the “Test query” button was pressed.