fix: [Dashboard > Detection & Response][KEYBOARD]: Elements with keyb…

…oard focus must be visible (elastic#178213)

Closes: elastic/security-team#8622
Closes: elastic/security-team#8623
Closes: elastic/security-team#8621
Closes: elastic/security-team#8628

## Description

The Overview dashboard has two buttons that are invisible on keyboard
focus. These buttons toggle modal dialogs and are only visible on hover.
Screenshot attached.

### Steps to recreate

1. Open [Detection & Response
dashboard](https://kibana.siem.estc.dev/app/security/detection_response)
2. Open dev tools and type `document.activeElement` into the live
expression window to have the active element follow your focus
3. Tab through the view until focus gets "lost" or disappears in the
Open alerts by rule table
4. Verify focus is on a button that is not visible on the page

### Solution

Update opacity also on `:focus-visible`. See
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible."

### Screen


https://github.com/elastic/kibana/assets/20072247/dcfe86c9-fdbb-4bfb-956b-8f4b62a1b6bc

x-pack/plugins/security_solution/public/common/components/hover_visibility_container/index.tsx

@@ -24,8 +24,11 @@ const StyledDiv = styled.div<{ targetClassNames: string[] }>`
         pointer-events: none;
         opacity: 0;
         transition: opacity ${(props) => getOr(250, 'theme.eui.euiAnimSpeedNormal', props)} ease;
+        &:focus-visible {
+          pointer-events: auto;
+          opacity: 1;
+        }
       }
-
       ${targetClassNames.map((cn) => `&:hover .${cn}`).join(', ')} {
         pointer-events: auto;
         opacity: 1;