Monograph catalog modals should keep focus until closed
jmcglone opened this issue · 0 comments
As a screen reader user, the modal windows on the monograph catalog page should hold focus until I either select an item or close the modal, so I do not end up focusing on elements outside of the modal window.
Currently, the monograph catalog "More" modal windows lose focus and allow a user to focus on elements and parts of the browser after moving through the modal display. An example of the focus order in Chrome when tabbing through the modal window:
It is likely this modal window is deep within Blacklight (or Hyrax's version of Blacklight) and it may be a better option to try and open a ticket and have changes made there. But it also may be possible to override Blacklight behavior with Javascript that adds ARIA attributes and maintains focus on the modal element by returning focus to position 1 after position 4 in the above screenshot.
- Investigate where the change should be made
- Add ARIA attributes
role="dialog"
andaria-labelledby="..."
, referencing the modal title, to.modal
- Add ARIA attributes
role="document"
to the.modal-dialog
itself. - Give a description of the modal dialog with
aria-describedby
on.modal
- Return focus to position 1 after position 4 by dynamically adjusting the
tabindex
attribute on elements.
Resources:
[1] https://getbootstrap.com/docs/3.3/javascript/#modals