mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Alerting: Fix accessibility issues for alert rule list (#40816)
* accessibility attributes for rulelist * change label text
This commit is contained in:
parent
6c5dca9bb2
commit
fd7dd6edf1
@ -65,7 +65,7 @@ export const Alert = React.forwardRef<HTMLDivElement, Props>(
|
||||
)}
|
||||
{onRemove && buttonContent && (
|
||||
<div className={styles.buttonWrapper}>
|
||||
<Button variant="secondary" onClick={onRemove} type="button">
|
||||
<Button aria-label="Close alert" variant="secondary" onClick={onRemove} type="button">
|
||||
{buttonContent}
|
||||
</Button>
|
||||
</div>
|
||||
|
@ -27,7 +27,9 @@ export const ActionIcon: FC<Props> = ({
|
||||
tooltipPlacement = 'top',
|
||||
...rest
|
||||
}) => {
|
||||
const iconEl = <Icon className={cx(useStyles(getStyle), className)} onClick={onClick} name={icon} {...rest} />;
|
||||
const iconEl = (
|
||||
<Icon role="button" className={cx(useStyles(getStyle), className)} onClick={onClick} name={icon} {...rest} />
|
||||
);
|
||||
|
||||
const ariaLabel = typeof tooltip === 'string' ? tooltip : undefined;
|
||||
return (
|
||||
|
@ -54,12 +54,20 @@ export const RulesGroup: FC<Props> = React.memo(({ group, namespace, expandAll }
|
||||
const baseUrl = `/dashboards/f/${folderUID}/${kbn.slugifyForUrl(namespace.name)}`;
|
||||
if (folder?.canSave) {
|
||||
actionIcons.push(
|
||||
<ActionIcon key="edit" icon="pen" tooltip="edit" to={baseUrl + '/settings'} target="__blank" />
|
||||
<ActionIcon
|
||||
aria-label="edit folder"
|
||||
key="edit"
|
||||
icon="pen"
|
||||
tooltip="edit folder"
|
||||
to={baseUrl + '/settings'}
|
||||
target="__blank"
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (folder?.canAdmin) {
|
||||
actionIcons.push(
|
||||
<ActionIcon
|
||||
aria-label="manage permissions"
|
||||
key="manage-perms"
|
||||
icon="lock"
|
||||
tooltip="manage permissions"
|
||||
@ -72,10 +80,11 @@ export const RulesGroup: FC<Props> = React.memo(({ group, namespace, expandAll }
|
||||
} else if (hasRuler(rulesSource)) {
|
||||
actionIcons.push(
|
||||
<ActionIcon
|
||||
aria-label="edit rule group"
|
||||
data-testid="edit-group"
|
||||
key="edit"
|
||||
icon="pen"
|
||||
tooltip="edit"
|
||||
tooltip="edit rule group"
|
||||
onClick={() => setIsEditingGroup(true)}
|
||||
/>
|
||||
);
|
||||
@ -95,7 +104,11 @@ export const RulesGroup: FC<Props> = React.memo(({ group, namespace, expandAll }
|
||||
<Icon name={isCollapsed ? 'folder' : 'folder-open'} />
|
||||
{isCloudRulesSource(rulesSource) && (
|
||||
<Tooltip content={rulesSource.name} placement="top">
|
||||
<img className={styles.dataSourceIcon} src={rulesSource.meta.info.logos.small} />
|
||||
<img
|
||||
alt={rulesSource.meta.name}
|
||||
className={styles.dataSourceIcon}
|
||||
src={rulesSource.meta.info.logos.small}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
<h6 className={styles.heading}>{groupName}</h6>
|
||||
|
Loading…
Reference in New Issue
Block a user