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