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: Improve keyboard accessibility in GettingStarted panel (#58966)

Browse Source 
fix keyboard a11y in `GettingStarted` panel
This commit is contained in:
Ashley Harrison 2022-11-18 15:29:50 +00:00 committed by GitHub
parent 01afe9fbd4
commit e19957bbc8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
public/app/plugins/panel/gettingstarted/GettingStarted.tsx
View File

@ -90,21 +90,29 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
</div> </div>
) : ( ) : (
<> <>
<div className={styles.dismiss}> <Button variant="secondary" fill="text" className={styles.dismiss} onClick={this.dismiss}>
<div onClick={this.dismiss}>Remove this panel</div> Remove this panel
</div> </Button>
{currentStep === steps.length - 1 && ( {currentStep === steps.length - 1 && (
<div className={cx(styles.backForwardButtons, styles.previous)} onClick={this.onPreviousClick}> <Button
<Button aria-label="To advanced tutorials" icon="angle-left" variant="secondary" /> className={cx(styles.backForwardButtons, styles.previous)}
</div> onClick={this.onPreviousClick}
aria-label="To advanced tutorials"
icon="angle-left"
variant="secondary"
/>
)} )}
<div className={styles.content}> <div className={styles.content}>
<Step step={step} /> <Step step={step} />
</div> </div>
{currentStep < steps.length - 1 && ( {currentStep < steps.length - 1 && (
<div className={cx(styles.backForwardButtons, styles.forward)} onClick={this.onForwardClick}> <Button
<Button aria-label="To basic tutorials" icon="angle-right" variant="secondary" /> className={cx(styles.backForwardButtons, styles.forward)}
</div> onClick={this.onForwardClick}
aria-label="To basic tutorials"
icon="angle-right"
variant="secondary"
/>
)} )}
</> </>
)} )}
@ -166,9 +174,8 @@ const getStyles = stylesFactory(() => {
`, `,
backForwardButtons: css` backForwardButtons: css`
position: absolute; position: absolute;
bottom: 50%;
top: 50%; top: 50%;
height: 50px; transform: translateY(-50%);
`, `,
previous: css` previous: css`
left: 10px; left: 10px;
@ -185,11 +192,8 @@ const getStyles = stylesFactory(() => {
} }
`, `,
dismiss: css` dismiss: css`
display: flex; align-self: flex-end;
justify-content: flex-end;
cursor: pointer;
text-decoration: underline; text-decoration: underline;
margin-right: ${theme.spacing(2)};
margin-bottom: ${theme.spacing(1)}; margin-bottom: ${theme.spacing(1)};
`, `,
loading: css` loading: css`