Overlay issue when using keyboard to navigate

[prinjos]

Is there a solution for the following? I was asked to address these accessibility issues for keyboard navigation.:

1. When there is a server timeout, the page content is covered with a translucent black overlay, with a status message at the very bottom that states “Disconnected from the server. Reload”. Navigating to this status message is problematic using the keyboard, as all interactive elements on the page behind the overlay are navigable. Using the Tab key, it takes multiple key presses to navigate to the “Reload” link, to refresh the page content.
   Would it be possible to ensure that this interactive element to reload the visual receives focus when it becomes active, so that keyboard users are made aware that further action is required. Placing this message at the top and not the bottom of the interactive visual footprint, would allow easier access for all users when the server connection is lost.

2. When the server timeout occurs, and the transparent overlay appears, keyboard navigation still occurs on the background page content beneath the overlay, which may be very confusing and problematic as keyboard users cannot readily identify the timeout message that appears after all the page content.
   When the transparent overlay appears, would it be possible for the timeout status message receives focus so that the keyboard user can easily activate the button to reload the visual? When the timeout occurs, ensure that no page content behind can be keyboard operational to avoid confusion.

I have tried using the waiter and hostess libraires and they produce the same issues.

You can see the issue at https://dv-vd.shinyapps.io/71-6047-x2024004-jp_en/, time out set to 60 seconds.

[ismirsehregal]

You could press the F5 key once to reload the page or build a custom timeout overlay as already mentioned here.