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

UI/Card: Refactor Card component for improved accessibility (#41890)

Browse Source 
* UI/Card: Improve accessibility of Card component

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
This commit is contained in:
kay delaney
2022-01-06 15:48:12 +00:00
committed by GitHub
parent d55d2d3da7
commit 890c43adf1
19 changed files with 619 additions and 417 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
public/app/plugins/panel/alertlist/AlertList.tsx
View File

@@ -145,11 +145,8 @@ export function AlertList(props: PanelProps<AlertListOptions>) {
currentAlertState.value &&
currentAlertState.value!.map((alert) => (
<li className={styles.alertRuleItem} key={`alert-${alert.id}`}>
<Card
heading={alert.name}
href={`${alert.url}?viewPanel=${alert.panelId}`}
className={styles.cardContainer}
>
<Card href={`${alert.url}?viewPanel=${alert.panelId}`} className={styles.cardContainer}>
<Card.Heading>{alert.name}</Card.Heading>
<Card.Figure className={cx(styles.alertRuleItemIcon, alert.stateModel.stateClass)}>
<Icon name={alert.stateModel.iconClass} size="xl" className={styles.alertIcon} />
</Card.Figure>
@@ -166,7 +163,8 @@ export function AlertList(props: PanelProps<AlertListOptions>) {
recentStateChanges.value &&
recentStateChanges.value.map((alert) => (
<li className={styles.alertRuleItem} key={`alert-${alert.id}`}>
<Card heading={alert.alertName} className={styles.cardContainer}>
<Card className={styles.cardContainer}>
<Card.Heading>{alert.alertName}</Card.Heading>
<Card.Figure className={cx(styles.alertRuleItemIcon, alert.stateModel.stateClass)}>
<Icon name={alert.stateModel.iconClass} size="xl" />
</Card.Figure>