mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Accessibility: Make row actions keyboard accessible (#63367)
make row actions keyboard accessible
This commit is contained in:
parent
85c81ae080
commit
a48793b542
@ -101,6 +101,9 @@ export class DashboardRow extends React.Component<DashboardRowProps> {
|
||||
</div>
|
||||
)}
|
||||
{this.props.panel.collapsed === true && (
|
||||
/* disabling the a11y rules here as the button handles keyboard interactions */
|
||||
/* this is just to provide a better experience for mouse users */
|
||||
/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
|
||||
<div className="dashboard-row__toggle-target" onClick={this.onToggle}>
|
||||
|
||||
</div>
|
||||
|
@ -16,10 +16,6 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.dashboard-row__actions {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.dashboard-row__toggle-target {
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
@ -27,9 +23,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
.dashboard-row__actions {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -52,7 +48,6 @@
|
||||
|
||||
.dashboard-row__actions {
|
||||
color: $text-muted;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: 200ms opacity ease-in 200ms;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user