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
Open the form and click on Title (there is no need to enter any data).
Continue "tabbing over" until the "Clear Entries" button is highlighted.
Press the Tab key 1 more time and the focus will disappear.
Open "Developer Tools", open the Console and type document.activeElement.
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.
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
document.activeElement.<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):
Mobile Device, Tablet, Phone (complete if not Desktop):
Additional context