fix: [Get Started][KEYBOARD]: Elements in closed accordions must not …

…be able to take keyboard focus (#180678)

Closes: elastic/security-team#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](https://console.qa.cld.elstc.co/) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#visible)
style was added. Using a visibility value of hidden/collapse on an
element will remove it from the [accessibility
tree](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis).

### Screen: 


https://github.com/elastic/kibana/assets/20072247/acf62fe0-7a12-4fdc-9961-2ecf17c20e0b

x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/card_step.styles.ts

@@ -21,10 +21,15 @@ export const useCardStepStyles = () => {
         '.stepContentWrapper': {
           display: 'grid',
           gridTemplateRows: '1fr',
-          transition: `grid-template-rows ${HEIGHT_ANIMATION_DURATION}ms ease-in`,
+          visibility: 'visible',
+          transition: `
+            grid-template-rows ${HEIGHT_ANIMATION_DURATION}ms ease-in, 
+            visibility ${euiTheme.animation.normal} ${euiTheme.animation.resistance}
+          `,
         },
 
         '&.step-panel-collapsed .stepContentWrapper': {
+          visibility: 'collapse',
           gridTemplateRows: '0fr',
         },
 
@@ -74,6 +79,8 @@ export const useCardStepStyles = () => {
     }),
     [
       completeStepBackgroundColor,
+      euiTheme.animation.normal,
+      euiTheme.animation.resistance,
       euiTheme.base,
       euiTheme.colors.body,
       euiTheme.colors.successText,