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

@@ -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"]
     ],

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, Text, Box } from '@grafana/ui';
-import { Alert, LoadingPlaceholder, useStyles2 } 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;

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 (
-    <>
+    <Text element="h3" variant="body">
-      {namespace} <Icon name="angle-right" /> {group}
+      {namespace} <Icon name="angle-right" aria-label=">" /> {group}
-    </>
+    </Text>
   );
 };
 

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>

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>

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 }) => (

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}

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