From f1f02207f26ec966c4f3ed643dc6a17947b09e76 Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Fri, 12 Apr 2024 16:19:47 +0200
Subject: [PATCH] Alerting: Improve heading accessibility (#85723)

* Change from h5 to Text component

* Fix goworksum error

* Add headings for contact points and notification policies

* Alert group h2

* Reset labels and move h2 to group by

---------

Co-authored-by: Gilles De Mey <gilles.de.mey@gmail.com>
---
 .betterer.results                               |  3 ---
 .../features/alerting/unified/AlertGroups.tsx   | 17 ++++++-----------
 .../unified/components/RuleLocation.tsx         | 14 +++++++++-----
 .../components/alert-groups/AlertGroup.tsx      |  1 +
 .../components/contact-points/ContactPoints.tsx |  2 +-
 .../components/notification-policies/Policy.tsx | 10 ++++++++--
 .../unified/components/rules/CloudRules.tsx     |  6 ++++--
 .../unified/components/rules/GrafanaRules.tsx   |  6 ++++--
 8 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index c99dd56905e..eba0e4ac337 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -1488,9 +1488,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
-    "public/app/features/alerting/unified/AlertGroups.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/features/alerting/unified/AlertWarning.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"]
     ],
diff --git a/public/app/features/alerting/unified/AlertGroups.tsx b/public/app/features/alerting/unified/AlertGroups.tsx
index 1f1d720616c..52632ce32e7 100644
--- a/public/app/features/alerting/unified/AlertGroups.tsx
+++ b/public/app/features/alerting/unified/AlertGroups.tsx
@@ -1,8 +1,6 @@
-import { css } from '@emotion/css';
 import React, { useEffect } from 'react';
 
-import { GrafanaTheme2 } from '@grafana/data';
-import { Alert, LoadingPlaceholder, useStyles2 } from '@grafana/ui';
+import { Alert, LoadingPlaceholder, Text, Box } from '@grafana/ui';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
 import { useDispatch } from 'app/types';
 
@@ -29,7 +27,6 @@ const AlertGroups = () => {
   const dispatch = useDispatch();
   const [queryParams] = useQueryParams();
   const { groupBy = [] } = getFiltersFromUrlParams(queryParams);
-  const styles = useStyles2(getStyles);
 
   const { currentData: amConfigStatus } = useGetAlertmanagerChoiceStatusQuery();
 
@@ -79,7 +76,11 @@ const AlertGroups = () => {
             <React.Fragment key={`${JSON.stringify(group.labels)}-group-${index}`}>
               {((index === 1 && Object.keys(filteredAlertGroups[0].labels).length === 0) ||
                 (index === 0 && Object.keys(group.labels).length > 0)) && (
-                <p className={styles.groupingBanner}>Grouped by: {Object.keys(group.labels).join(', ')}</p>
+                <Box paddingY={2}>
+                  <Text element="h2" variant="body">
+                    Grouped by: {Object.keys(group.labels).join(', ')}
+                  </Text>
+                </Box>
               )}
               <AlertGroup alertManagerSourceName={selectedAlertmanager || ''} group={group} />
             </React.Fragment>
@@ -96,10 +97,4 @@ const AlertGroupsPage = () => (
   </AlertmanagerPageWrapper>
 );
 
-const getStyles = (theme: GrafanaTheme2) => ({
-  groupingBanner: css`
-    margin: ${theme.spacing(2, 0)};
-  `,
-});
-
 export default AlertGroupsPage;
diff --git a/public/app/features/alerting/unified/components/RuleLocation.tsx b/public/app/features/alerting/unified/components/RuleLocation.tsx
index 1a64d33d2cc..9b3dd5cd770 100644
--- a/public/app/features/alerting/unified/components/RuleLocation.tsx
+++ b/public/app/features/alerting/unified/components/RuleLocation.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Icon } from '@grafana/ui';
+import { Icon, Text } from '@grafana/ui';
 
 interface Props {
   namespace: string;
@@ -9,13 +9,17 @@ interface Props {
 
 const RuleLocation = ({ namespace, group }: Props) => {
   if (!group) {
-    return <>{namespace}</>;
+    return (
+      <Text element="h3" variant="body">
+        {namespace}
+      </Text>
+    );
   }
 
   return (
-    <>
-      {namespace} <Icon name="angle-right" /> {group}
-    </>
+    <Text element="h3" variant="body">
+      {namespace} <Icon name="angle-right" aria-label=">" /> {group}
+    </Text>
   );
 };
 
diff --git a/public/app/features/alerting/unified/components/alert-groups/AlertGroup.tsx b/public/app/features/alerting/unified/components/alert-groups/AlertGroup.tsx
index a50ff011d46..c6ba937c33b 100644
--- a/public/app/features/alerting/unified/components/alert-groups/AlertGroup.tsx
+++ b/public/app/features/alerting/unified/components/alert-groups/AlertGroup.tsx
@@ -36,6 +36,7 @@ export const AlertGroup = ({ alertManagerSourceName, group }: Props) => {
           {Object.keys(group.labels).length ? (
             <Stack direction="row" alignItems="center">
               <AlertLabels labels={group.labels} size="sm" />
+
               {receiverInGroup && (
                 <MetaText icon="at">
                   Delivered to <Strong>{group.receiver.name}</Strong>
diff --git a/public/app/features/alerting/unified/components/contact-points/ContactPoints.tsx b/public/app/features/alerting/unified/components/contact-points/ContactPoints.tsx
index 1618f8369a4..9bd140ec305 100644
--- a/public/app/features/alerting/unified/components/contact-points/ContactPoints.tsx
+++ b/public/app/features/alerting/unified/components/contact-points/ContactPoints.tsx
@@ -430,7 +430,7 @@ const ContactPointHeader = (props: ContactPointHeaderProps) => {
     <div className={styles.headerWrapper}>
       <Stack direction="row" alignItems="center" gap={1}>
         <Stack alignItems="center" gap={1}>
-          <Text variant="body" weight="medium">
+          <Text element="h2" variant="body" weight="medium">
             {name}
           </Text>
         </Stack>
diff --git a/public/app/features/alerting/unified/components/notification-policies/Policy.tsx b/public/app/features/alerting/unified/components/notification-policies/Policy.tsx
index 129734656b7..e829b76acf0 100644
--- a/public/app/features/alerting/unified/components/notification-policies/Policy.tsx
+++ b/public/app/features/alerting/unified/components/notification-policies/Policy.tsx
@@ -641,7 +641,9 @@ function DefaultPolicyIndicator() {
   const styles = useStyles2(getStyles);
   return (
     <>
-      <strong>Default policy</strong>
+      <Text element="h2" variant="body" weight="medium">
+        Default policy
+      </Text>
       <span className={styles.metadata}>
         All alert instances will be handled by the default policy if no other matching policies are found.
       </span>
@@ -650,7 +652,11 @@ function DefaultPolicyIndicator() {
 }
 
 function AutogeneratedRootIndicator() {
-  return <strong> Auto-generated policies</strong>;
+  return (
+    <Text element="h3" variant="body" weight="medium">
+      Auto-generated policies
+    </Text>
+  );
 }
 
 const InheritedProperties: FC<{ properties: InheritableProperties }> = ({ properties }) => (
diff --git a/public/app/features/alerting/unified/components/rules/CloudRules.tsx b/public/app/features/alerting/unified/components/rules/CloudRules.tsx
index 6c5cfc3a355..2f3dd7c7b21 100644
--- a/public/app/features/alerting/unified/components/rules/CloudRules.tsx
+++ b/public/app/features/alerting/unified/components/rules/CloudRules.tsx
@@ -4,7 +4,7 @@ import React, { useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import { GrafanaTheme2, urlUtil } from '@grafana/data';
-import { LinkButton, LoadingPlaceholder, Pagination, Spinner, useStyles2 } from '@grafana/ui';
+import { LinkButton, LoadingPlaceholder, Pagination, Spinner, useStyles2, Text } from '@grafana/ui';
 import { CombinedRuleNamespace } from 'app/types/unified-alerting';
 
 import { DEFAULT_PER_PAGE_PAGINATION } from '../../../../../core/constants';
@@ -55,7 +55,9 @@ export const CloudRules = ({ namespaces, expandAll }: Props) => {
     <section className={styles.wrapper}>
       <div className={styles.sectionHeader}>
         <div className={styles.headerRow}>
-          <h5>Mimir / Cortex / Loki</h5>
+          <Text element="h2" variant="h5">
+            Mimir / Cortex / Loki
+          </Text>
           {dataSourcesLoading.length ? (
             <LoadingPlaceholder
               className={styles.loader}
diff --git a/public/app/features/alerting/unified/components/rules/GrafanaRules.tsx b/public/app/features/alerting/unified/components/rules/GrafanaRules.tsx
index 7c846272b4e..4df99b28ff2 100644
--- a/public/app/features/alerting/unified/components/rules/GrafanaRules.tsx
+++ b/public/app/features/alerting/unified/components/rules/GrafanaRules.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { useToggle } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Button, LoadingPlaceholder, Pagination, Spinner, useStyles2 } from '@grafana/ui';
+import { Button, LoadingPlaceholder, Pagination, Spinner, useStyles2, Text } from '@grafana/ui';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
 import { CombinedRuleNamespace } from 'app/types/unified-alerting';
 
@@ -58,7 +58,9 @@ export const GrafanaRules = ({ namespaces, expandAll }: Props) => {
     <section className={styles.wrapper}>
       <div className={styles.sectionHeader}>
         <div className={styles.headerRow}>
-          <h5>Grafana</h5>
+          <Text element="h2" variant="h5">
+            Grafana
+          </Text>
           {loading ? <LoadingPlaceholder className={styles.loader} text="Loading..." /> : <div />}
           {hasGrafanaAlerts && canExportRules && (
             <Button