Here is a modal windows setup enhanced for accessibility using the <role>
attribute.
link before button groups
This content shouldn't become part of the modal dialogs setup because it's outside the button groups.
example.com link for accessibility testing
A modal window is a graphical component that is displayed when executing a control, link or button of a web page, with content inside it and that visually meets the following conditions:
Navigation should be available only through the browser's system components, and through the elements contained in the modal. The document has the concept of a focus ring, which is the order in which elements obtain focus. By default the focus ring shall be obtained using document order. All focusable elements must be part of the default focus ring.
It is essential that a container maintain a usable and consistent strategy when focus leaves a container and is then later refocused, by dynamically modifying elements' navigation attributes. All content outside the modal window should be ignored and interactive elements should be locked for user manipulation: clicking, focusing and navigating.
System-dependent input facilities (e.g., the Tab key on most desktop computers) should be supported to allow navigation between elements that can obtain focus, and conversely, backing up with Shift + Tab, preventing the user from navigating to other parts of the document outside of the modal window. The focus is said to be “trapped” inside the dialog until the user explicitely decides to leave it.