Alerting: Fix accessibility issues for alert rule list (#40816)

* accessibility attributes for rulelist

* change label text
This commit is contained in:
Peter Holmberg 2021-11-09 10:35:12 +01:00 committed by GitHub
parent 6c5dca9bb2
commit fd7dd6edf1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 5 deletions

View File

@ -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>

View File

@ -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 (

View File

@ -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>