From fd7dd6edf133dd94a4defbb42f4fe160324fb14d Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peterholmberg@users.noreply.github.com>
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<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>
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<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 (
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<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>