fix: [Get Started][KEYBOARD]: Elements in closed accordions must not be able to take keyboard focus

[alexwizp]

Closes: https://github.com/elastic/security-team/issues/8898

Description

The Security > Get Started view for Serverless projects has a number of accordions that do not remove focusable content from the DOM. This can lead to a situation where keyboard users' focus is lost inside a closed accordion. This can create bad UX as the number of focusable elements inside an accordion increase. Screenshot attached below.

Steps to recreate

1. Open Cloud UI and create a Serverless Security project if none exist
2. When the project is created, click the Continue button
3. Navigate to the Security project Get started view. This link is in the lower left of the navigation pane.
4. Tab through the page until you see focus on the downward arrow on an accordion. Tab again and notice the focus disappears.
5. Verify focus is on a hidden element by opening the Console and typing document.activeElement into the prompt. This will show focus is on an element inside the accordion.

What was done?:

1. visible style was added. Using a visibility value of hidden/collapse on an element will remove it from the accessibility tree.

Screen:

Screen.Recording.2024-04-12.at.13.13.32.mov

[alexwizp]

/ci

[elasticmachine]

Pinging @elastic/security-threat-hunting (Team:Threat Hunting)

[elasticmachine]

Pinging @elastic/security-solution (Team: SecuritySolution)

[kibana-ci]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 6afe081

Failed CI Steps

• FTR Configs #40

Test Failures

• [job] [logs] FTR Configs #40 / alerting api integration security and spaces enabled Alerts - Group 1 alerts backfill rule runs ad hoc backfill task should handle timeouts

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
securitySolution	13.7MB	13.7MB	+185.0B

History

• 💔 Build #206538 failed 248a799
• 💚 Build #205878 succeeded 0e530a9
• 💚 Build #205520 succeeded cf8bcfd
• 💚 Build #205191 succeeded b1bc4d4
• 💚 Build #204535 succeeded 4f93cbc

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream