Popups
Popups are not a good user experience for keyboard-only/screen reader users and as a rule of thumb we should steer away from using them.
When a popup appears it does not have keyboard focus which means that keyboard only/screen reader users are unable to tab to the content within the popup. Screen reader and keyboard-only users can easily become distracted and disoriented.
When a popup unexpectedly appears it does not have keyboard focus which means that screen reader users are unable to use the TAB key on the keyboard to navigate to the content within the popup. They cannot visually see the popup on the screen, unless it's automatically programmed to completely shift the focus away from the main window. However, this would be very disorienting to screen reader users.
Modal Windows
If there is no other solution than a popup use a modal window. It must be programmed in a way that allows for the following.
The modal dialog needs to trap the keyboard. When a modal dialog/popup box is triggered, the keyboard focus needs to immediately move to the first actionable element in the popup/modal.
The keyboard user needs to be able to access all controls in the modal window.
The keyboard user needs to have the ability to close the modal window.
Once the modal window has been closed the keyboard focus needs to be restored to the main webpage
Example:
<div id="backdrop" class="no-scroll">
<div
role="alertdialog"
aria-modal="true"
aria-labelledby="dialog_label"
aria-describedby="dialog_desc">
<h2 id="dialog_label">Confirmation</h2>
<div id="dialog_desc">
<p>Are you sure you want to delete this file?</p>
</div>
<button type="button" onclick="closeDialog(this)">
No. Close this popup.
</button>
<button type="button" onclick="deleteFile(this)">
Yes. Delete the file.
</button>
</div>
</div>
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal