Issue Summary

The focus moves inappropriately after activating the "Hide the header" button.

Steps to Reproduce

1. Open the "Kanban board" page.
2. Navigate to the mentioned instance and activate it.
3. Observe that the focus moves to the "Quick filters" button.
4. Navigate to the "show the header" button and activate it.
5. Observe that the focus moves to the header section of the page.

Screen Recording

Screen Recording 2024-02-12 at 3.06.59 PM.mov

Screenshot

Actual Results

The focus moves inappropriately in the following scenarios:

• When the user activates the "Hide the header" button, the keyboard focus moves to the "Quick filters" button instead of moving onto the triggering element "Show the header" button.

• And, when the user activates the "Show the header" button, the keyboard focus moves to the top of the page instead of moving onto the triggering element "Hide the header" button.

As a result, keyboard-only and screen reader users will have to navigate the triggering button again before accessing the content which is after the screen content.

Also, the position of the button changes programmatically in the DOM. This created an inappropriate reading order for the users of assistive technologies.

Expected Results

When the user navigates and activates the "Hide the header" button, the keyboard focus should move to the triggering element.

Ensure that the keyboard focus moves the triggering element which can be achieved via the JavaScript focus() method.

For more information, refer to the following link: [HTMLElement: focus() method - Web APIs | MDN|https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus]

Place the content of webpages in the correct meaningful sequence in the source code. CSS can be used to maintain the presentation of the page.

Workaround

Currently, there is no known workaround for this behaviour. A workaround will be added here when available

Environment

MacBook Pro (16-inch, 2021)
macOs Sonoma 14.3
Chrome - Version 120.0.6099.109 (Official Build) (arm64)
Firefox- Version 92.0 (64-bit) 
Safari- Version 17.3 (19617.2.4.11.8)
JAWS- Version 2023
NVDA- Version 2021.2 
Voiceover - Version Latest