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 QueryEditorHelp examples keyboard interactive (#59355)

Browse Source 
* Cloudwatch: A11y - Make example log keyboard interactive

* Change all cheat sheets to buttons

* Make suggestions block
This commit is contained in:
Ida Štambuk 2022-12-05 16:03:24 +01:00 committed by GitHub
parent 7deaeb0f9e
commit 3544250baf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/plugins/datasource/cloudwatch/components/LogsCheatSheet.tsx
View File

@ -223,10 +223,10 @@ export default class LogsCheatSheet extends PureComponent<
onClickExample(query: CloudWatchQuery) { onClickExample(query: CloudWatchQuery) {
this.props.onClickExample(query); this.props.onClickExample(query);
} }
renderExpression(expr: string, keyPrefix: string) { renderExpression(expr: string, keyPrefix: string) {
return ( return (
<div <button
type="button"
className="cheat-sheet-item__example" className="cheat-sheet-item__example"
key={expr} key={expr}
onClick={() => onClick={() =>
@ -241,7 +241,7 @@ export default class LogsCheatSheet extends PureComponent<
} }
> >
<pre>{renderHighlightedMarkup(expr, keyPrefix)}</pre> <pre>{renderHighlightedMarkup(expr, keyPrefix)}</pre>
</div> </button>
); );
} }

9
public/app/plugins/datasource/loki/components/LokiCheatSheet.tsx
View File

@ -81,9 +81,14 @@ export default class LokiCheatSheet extends PureComponent<QueryEditorHelpProps<L
}; };
return ( return (
<div className="cheat-sheet-item__example" key={expr} onClick={(e) => onClick({ refId: 'A', expr })}> <button
type="button"
className="cheat-sheet-item__example"
key={expr}
onClick={(e) => onClick({ refId: 'A', expr })}
>
<code>{expr}</code> <code>{expr}</code>
</div> </button>
); );
} }

5
public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx
View File

@ -35,12 +35,13 @@ const PromCheatSheet = (props: QueryEditorHelpProps<PromQuery>) => (
<div className="cheat-sheet-item" key={index}> <div className="cheat-sheet-item" key={index}>
<div className="cheat-sheet-item__title">{item.title}</div> <div className="cheat-sheet-item__title">{item.title}</div>
{item.expression ? ( {item.expression ? (
<div <button
type="button"
className="cheat-sheet-item__example" className="cheat-sheet-item__example"
onClick={(e) => props.onClickExample({ refId: 'A', expr: item.expression })} onClick={(e) => props.onClickExample({ refId: 'A', expr: item.expression })}
> >
<code>{item.expression}</code> <code>{item.expression}</code>
</div> </button>
) : null} ) : null}
<div className="cheat-sheet-item__label">{item.label}</div> <div className="cheat-sheet-item__label">{item.label}</div>
</div> </div>

6
public/sass/pages/_explore.scss
View File

@ -139,7 +139,11 @@
.cheat-sheet-item__example { .cheat-sheet-item__example {
margin: $space-xs 0; margin: $space-xs 0;
cursor: pointer; // element is interactive, clear button styles
text-align: left;
border: none;
background: transparent;
display: block;
} }
.query-type-toggle { .query-type-toggle {