From fd7dd6edf133dd94a4defbb42f4fe160324fb14d Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Tue, 9 Nov 2021 10:35:12 +0100 Subject: [PATCH] Alerting: Fix accessibility issues for alert rule list (#40816) * accessibility attributes for rulelist * change label text --- .../grafana-ui/src/components/Alert/Alert.tsx | 2 +- .../unified/components/rules/ActionIcon.tsx | 4 +++- .../unified/components/rules/RulesGroup.tsx | 19 ++++++++++++++++--- 3 files changed, 20 insertions(+), 5 deletions(-) diff --git a/packages/grafana-ui/src/components/Alert/Alert.tsx b/packages/grafana-ui/src/components/Alert/Alert.tsx index 1679da447c4..de73527b6e8 100644 --- a/packages/grafana-ui/src/components/Alert/Alert.tsx +++ b/packages/grafana-ui/src/components/Alert/Alert.tsx @@ -65,7 +65,7 @@ export const Alert = React.forwardRef( )} {onRemove && buttonContent && (
-
diff --git a/public/app/features/alerting/unified/components/rules/ActionIcon.tsx b/public/app/features/alerting/unified/components/rules/ActionIcon.tsx index f920a599026..dee4d21887a 100644 --- a/public/app/features/alerting/unified/components/rules/ActionIcon.tsx +++ b/public/app/features/alerting/unified/components/rules/ActionIcon.tsx @@ -27,7 +27,9 @@ export const ActionIcon: FC = ({ tooltipPlacement = 'top', ...rest }) => { - const iconEl = ; + const iconEl = ( + + ); const ariaLabel = typeof tooltip === 'string' ? tooltip : undefined; return ( diff --git a/public/app/features/alerting/unified/components/rules/RulesGroup.tsx b/public/app/features/alerting/unified/components/rules/RulesGroup.tsx index b84aeaa0ba8..b5237649c03 100644 --- a/public/app/features/alerting/unified/components/rules/RulesGroup.tsx +++ b/public/app/features/alerting/unified/components/rules/RulesGroup.tsx @@ -54,12 +54,20 @@ export const RulesGroup: FC = React.memo(({ group, namespace, expandAll } const baseUrl = `/dashboards/f/${folderUID}/${kbn.slugifyForUrl(namespace.name)}`; if (folder?.canSave) { actionIcons.push( - + ); } if (folder?.canAdmin) { actionIcons.push( = React.memo(({ group, namespace, expandAll } } else if (hasRuler(rulesSource)) { actionIcons.push( setIsEditingGroup(true)} /> ); @@ -95,7 +104,11 @@ export const RulesGroup: FC = React.memo(({ group, namespace, expandAll } {isCloudRulesSource(rulesSource) && ( - + {rulesSource.meta.name} )}
{groupName}