IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Accessibility: Make row actions keyboard accessible (#63367)

Browse Source 
make row actions keyboard accessible
This commit is contained in:
Ashley Harrison 2023-02-23 15:20:59 +00:00 committed by GitHub
parent 85c81ae080
commit a48793b542
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
View File

@ -101,6 +101,9 @@ export class DashboardRow extends React.Component<DashboardRowProps> {
</div> </div>
)} )}
{this.props.panel.collapsed === true && ( {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 className="dashboard-row__toggle-target" onClick={this.onToggle}>
&nbsp; &nbsp;
</div> </div>

9
public/sass/components/_row.scss
View File

@ -16,10 +16,6 @@
opacity: 1; opacity: 1;
} }
.dashboard-row__actions {
visibility: hidden;
}
.dashboard-row__toggle-target { .dashboard-row__toggle-target {
flex: 1; flex: 1;
cursor: pointer; cursor: pointer;
@ -27,9 +23,9 @@
} }
} }
&:hover { &:hover,
&:focus-within {
.dashboard-row__actions { .dashboard-row__actions {
visibility: visible;
opacity: 1; opacity: 1;
} }
} }
@ -52,7 +48,6 @@
.dashboard-row__actions { .dashboard-row__actions {
color: $text-muted; color: $text-muted;
visibility: hidden;
opacity: 0; opacity: 0;
transition: 200ms opacity ease-in 200ms; transition: 200ms opacity ease-in 200ms;