Help Text Should Be Properly Hidden

[nojronatron]

Describe the bug

When a user tabs through the page, the tab order allows selecting page elements that are off-screen (the "Form Information - READ" link target content). This is confusing for a keyboard-only user and could cause issues when a Screen Reader is used.

To Reproduce

1. Open the form and click on Title (there is no need to enter any data).
2. Continue "tabbing over" until the "Clear Entries" button is highlighted.
3. Press the Tab key 1 more time and the focus will disappear.
4. Open "Developer Tools", open the Console and type document.activeElement.
5. The Console will reveal the following element as a response: <a class="close" href="#close">

Note: Screen Readers will attempt to announce this anchor element, but it is completely out of context for the UI state.

Expected behavior

After "tabbing away" from the "Clear Entries" button, the highlighted element should be "Form Information - READ", and a Screen Reader should announce as much.

Screenshots

Desktop (complete if not using a phone/mobile device):

• OS: Windows 11
• Browser and version: Chrome 126.0.6478.116, Firefox 127.0.2

Mobile Device, Tablet, Phone (complete if not Desktop):

• Device: not tested
• OS: not tested
• Browser and version: not tested

Additional context

• Currently, the "Form Information - READ" content is brought into view by an 'onclick' expression that calls 'location.href="#pop1"`.
• The "Click to close this help" link is styled like a button but is actually an Anchor element.
• The scrollable content appears as a popup/modal but is really styled content that might be difficult to navigate by keyboard and/or visual assisting technologies.
• Correctly set the visibility of offscreen content.