diff --git a/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx b/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx index 0467ae662d7..8ce01c3f128 100644 --- a/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx +++ b/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx @@ -101,6 +101,9 @@ export class DashboardRow extends React.Component { )} {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 */
 
diff --git a/public/sass/components/_row.scss b/public/sass/components/_row.scss index 8dc1b234d21..b955988c7e9 100644 --- a/public/sass/components/_row.scss +++ b/public/sass/components/_row.scss @@ -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;