mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
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:
parent
4c80f262db
commit
f5c2cbaf8e
1 changed files with 4 additions and 0 deletions
|
@ -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(', ')} {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue