fix: [Obs Alerts > Rules][KEYBOARD]: Inspect Alerts Table button should always be visible and must be visible on keyboard focus (#183513)

Closes: https://github.com/elastic/observability-dev/issues/3361

## Description

The Obs Alerts have a button for opening an `Inspect Alerts table` modal
that is only visible on `:hover`. This button is easily missed by
keyboard navigation because it is not visible on `:focus`. My
recommendation is the button should **always** be visible and must be
visible when it receives focus. Screenshot attached below.

### Steps to recreate

1. Open the [Obs
Alerts](https://keepserverless-qa-oblt-b4ba07.kb.eu-west-1.aws.qa.elastic.cloud/app/observability/alerts)
table
2. Create an alert that's sure to fire, like a custom threshold that's
very low, like 100 or 1000 documents
3. Run the alert rule from the `Rules` view
4. When the alert appears in `Alerts`, tab through to the data grid
5. Watch closely for focus to "disappear"
6. Press `Tab` again and focus should reappear
7. Now press `Shift + Tab` to make focus disappear again
8. Press `Enter` and verify the modal opens

### What was done?:
1. `&:focus-visible` styles were added to correctly handle keyboard
navigation

### Screen:


c8644009-e966-4e19-920a-62cf04b741a6
This commit is contained in:
Alexey Antonov 2024-05-16 18:42:04 +03:00 committed by GitHub
parent 4c80f262db
commit f5c2cbaf8e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -28,6 +28,10 @@ const StyledDiv = euiStyled.div<StyledDivProps>`
pointer-events: none;
opacity: 0;
transition: opacity ${getOr(250, 'eui.euiAnimSpeedNormal', theme)} ease;
&:focus-visible {
pointer-events: auto;
opacity: 1;
}
}
${targetClassNames.map((cn) => `&:hover .${cn}`).join(', ')} {