From ddc5ae6f4dc782026f289f7e1a3f71f1739f3b1a Mon Sep 17 00:00:00 2001
From: Yunwen Zheng <yunwen.zheng@grafana.com>
Date: Thu, 23 Oct 2025 11:25:26 -0400
Subject: [PATCH] Git Sync UI a11y finding fixes (#112751)

* ProgressBar: progressbar nodes must have accsible name fix

* BrowseActions: Bulk move and delete drawwer a11y fix

* FolderActionsButton: Move and delete drawer a11y fix

* ConfigForm: a11y fix missing id

* GettingStarted: Skip img alt since its decorative

* JobContent: heading a11y fix

* StatusBadge: add displayOnly prop to avoid cursor pointer display when its not necessary

* RepositoryTypeCards: Card missing discernible text

* i18n

* input id fix
---
 .../BrowseActions/BrowseActions.tsx           | 16 ++++--
 .../components/FolderActionsButton.tsx        | 14 +++--
 .../provisioning/Config/ConfigForm.tsx        |  4 +-
 .../GettingStarted/GettingStarted.tsx         |  3 +-
 .../features/provisioning/Job/JobContent.tsx  |  2 +-
 .../Repository/RepositoryActions.tsx          |  2 +-
 .../provisioning/Shared/ProgressBar.tsx       | 10 +++-
 .../Shared/RepositoryTypeCards.tsx            | 52 ++++++++++---------
 .../provisioning/Shared/StatusBadge.tsx       | 12 +++--
 public/locales/en-US/grafana.json             |  5 ++
 10 files changed, 81 insertions(+), 39 deletions(-)

diff --git a/public/app/features/browse-dashboards/components/BrowseActions/BrowseActions.tsx b/public/app/features/browse-dashboards/components/BrowseActions/BrowseActions.tsx
index d703846925b..9ab6c750585 100644
--- a/public/app/features/browse-dashboards/components/BrowseActions/BrowseActions.tsx
+++ b/public/app/features/browse-dashboards/components/BrowseActions/BrowseActions.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import { Trans, t } from '@grafana/i18n';
 import { config, reportInteraction } from '@grafana/runtime';
-import { Button, Drawer, Stack } from '@grafana/ui';
+import { Button, Drawer, Stack, Text } from '@grafana/ui';
 import appEvents from 'app/core/app_events';
 import { ManagerKind } from 'app/features/apiserver/types';
 import { BulkDeleteProvisionedResource } from 'app/features/provisioning/components/BulkActions/BulkDeleteProvisionedResource';
@@ -152,7 +152,12 @@ export function BrowseActions({ folderDTO }: Props) {
       {/* bulk delete */}
       {showBulkDeleteProvisionedResource && (
         <Drawer
-          title={t('browse-dashboards.action.bulk-delete-provisioned-resources', 'Bulk Delete Provisioned Resources')}
+          title={
+            // Heading levels should only increase by one (a11y)
+            <Text variant="h3" element="h2">
+              {t('browse-dashboards.action.bulk-delete-provisioned-resources', 'Bulk Delete Provisioned Resources')}
+            </Text>
+          }
           onClose={() => setShowBulkDeleteProvisionedResource(false)}
           size="md"
         >
@@ -169,7 +174,12 @@ export function BrowseActions({ folderDTO }: Props) {
       {/* bulk move */}
       {showBulkMoveProvisionedResource && (
         <Drawer
-          title={t('browse-dashboards.action.bulk-move-provisioned-resources', 'Bulk Move Provisioned Resources')}
+          title={
+            // Heading levels should only increase by one (a11y)
+            <Text variant="h3" element="h2">
+              {t('browse-dashboards.action.bulk-move-provisioned-resources', 'Bulk Move Provisioned Resources')}
+            </Text>
+          }
           onClose={() => setShowBulkMoveProvisionedResource(false)}
           size="md"
         >
diff --git a/public/app/features/browse-dashboards/components/FolderActionsButton.tsx b/public/app/features/browse-dashboards/components/FolderActionsButton.tsx
index fcdfd203c0a..2fc2a30a32f 100644
--- a/public/app/features/browse-dashboards/components/FolderActionsButton.tsx
+++ b/public/app/features/browse-dashboards/components/FolderActionsButton.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { AppEvents } from '@grafana/data';
 import { Trans, t } from '@grafana/i18n';
 import { locationService, reportInteraction } from '@grafana/runtime';
-import { Button, Drawer, Dropdown, Icon, Menu, MenuItem } from '@grafana/ui';
+import { Button, Drawer, Dropdown, Icon, Menu, MenuItem, Text } from '@grafana/ui';
 import { Permissions } from 'app/core/components/AccessControl/Permissions';
 import { appEvents } from 'app/core/core';
 import { RepoType } from 'app/features/provisioning/Wizard/types';
@@ -180,7 +180,11 @@ export function FolderActionsButton({ folder, repoType, isReadOnlyRepo }: Props)
       )}
       {showDeleteProvisionedFolderDrawer && (
         <Drawer
-          title={t('browse-dashboards.action.delete-provisioned-folder', 'Delete provisioned folder')}
+          title={
+            <Text variant="h3" element="h2">
+              {t('browse-dashboards.action.delete-provisioned-folder', 'Delete provisioned folder')}
+            </Text>
+          }
           subtitle={folder.title}
           onClose={() => setShowDeleteProvisionedFolderDrawer(false)}
         >
@@ -192,7 +196,11 @@ export function FolderActionsButton({ folder, repoType, isReadOnlyRepo }: Props)
       )}
       {showMoveProvisionedFolderDrawer && (
         <Drawer
-          title={t('browse-dashboards.action.move-provisioned-folder', 'Move provisioned folder')}
+          title={
+            <Text variant="h3" element="h2">
+              {t('browse-dashboards.action.move-provisioned-folder', 'Move provisioned folder')}
+            </Text>
+          }
           subtitle={folder.title}
           onClose={() => setShowMoveProvisionedFolderDrawer(false)}
         >
diff --git a/public/app/features/provisioning/Config/ConfigForm.tsx b/public/app/features/provisioning/Config/ConfigForm.tsx
index e44a103c408..211422b0c2a 100644
--- a/public/app/features/provisioning/Config/ConfigForm.tsx
+++ b/public/app/features/provisioning/Config/ConfigForm.tsx
@@ -162,7 +162,7 @@ export function ConfigForm({ data }: ConfigFormProps) {
       <FormPrompt onDiscard={reset} confirmRedirect={isDirty} />
       <Stack direction="column" gap={2}>
         <Field noMargin label={t('provisioning.config-form.label-repository-type', 'Repository type')}>
-          <Input value={getRepositoryTypeConfig(type)?.label || type} disabled />
+          <Input id="repository-type" value={getRepositoryTypeConfig(type)?.label || type} disabled />
         </Field>
         <Field
           noMargin
@@ -274,7 +274,7 @@ export function ConfigForm({ data }: ConfigFormProps) {
               />
             </Field>
             <Field noMargin label={gitFields.pathConfig.label} description={gitFields.pathConfig.description}>
-              <Input {...register('path')} />
+              <Input id="repository-path" {...register('path')} />
             </Field>
           </>
         )}
diff --git a/public/app/features/provisioning/GettingStarted/GettingStarted.tsx b/public/app/features/provisioning/GettingStarted/GettingStarted.tsx
index de986fe4748..d38c19c9fd5 100644
--- a/public/app/features/provisioning/GettingStarted/GettingStarted.tsx
+++ b/public/app/features/provisioning/GettingStarted/GettingStarted.tsx
@@ -153,7 +153,8 @@ export default function GettingStarted({ items }: Props) {
       <Stack direction="column" gap={6} wrap="wrap">
         <Stack gap={10} alignItems="center">
           <div className={styles.imageContainer}>
-            <img src={provisioningSvg} className={styles.image} alt={'Grafana provisioning'} />
+            {/* decorative img, use empty str to skip alt*/}
+            <img src={provisioningSvg} className={styles.image} alt="" />
           </div>
           <FeaturesList
             hasRequiredFeatures={hasRequiredFeatures}
diff --git a/public/app/features/provisioning/Job/JobContent.tsx b/public/app/features/provisioning/Job/JobContent.tsx
index b1911c95908..06a9e41e5f2 100644
--- a/public/app/features/provisioning/Job/JobContent.tsx
+++ b/public/app/features/provisioning/Job/JobContent.tsx
@@ -79,7 +79,7 @@ export function JobContent({ jobType, job, isFinishedJob = false, onStatusChange
           <Stack direction="column" alignItems="center">
             <Stack direction="row" alignItems="center" justifyContent="center" gap={2}>
               <Spinner size={24} />
-              <Text element="h5" color="secondary">
+              <Text element="h3" variant="h5" color="secondary">
                 {message ?? state ?? t('provisioning.job-status.starting', 'Starting...')}
               </Text>
             </Stack>
diff --git a/public/app/features/provisioning/Repository/RepositoryActions.tsx b/public/app/features/provisioning/Repository/RepositoryActions.tsx
index edadb2b538e..a7aa3b71f5a 100644
--- a/public/app/features/provisioning/Repository/RepositoryActions.tsx
+++ b/public/app/features/provisioning/Repository/RepositoryActions.tsx
@@ -27,7 +27,7 @@ export function RepositoryActions({ repository }: RepositoryActionsProps) {
   return (
     <Stack wrap="wrap">
       {isReadOnlyRepo && <Badge color="darkgrey" text={t('folder-repo.read-only-badge', 'Read only')} />}
-      <StatusBadge repo={repository} />
+      <StatusBadge repo={repository} displayOnly />
       {repoHref && (
         <Button variant="secondary" icon={providerIcon} onClick={() => window.open(repoHref, '_blank')}>
           <Trans i18nKey="provisioning.repository-actions.source-code">Source code</Trans>
diff --git a/public/app/features/provisioning/Shared/ProgressBar.tsx b/public/app/features/provisioning/Shared/ProgressBar.tsx
index e3a88412aed..e0ae4e5e6dd 100644
--- a/public/app/features/provisioning/Shared/ProgressBar.tsx
+++ b/public/app/features/provisioning/Shared/ProgressBar.tsx
@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import { useRef, useEffect } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { t } from '@grafana/i18n';
 import { useStyles2 } from '@grafana/ui';
 
 interface ProgressBarProps {
@@ -24,7 +25,14 @@ const ProgressBar = ({ progress, topBottomSpacing }: ProgressBarProps) => {
   }
 
   return (
-    <div className={styles.container}>
+    <div
+      className={styles.container}
+      aria-label={t('provisioning.shared.progress-bar.aria-label', 'Progress Bar')}
+      role="progressbar"
+      aria-valuenow={progress}
+      aria-valuemin={0}
+      aria-valuemax={100}
+    >
       <div className={shouldAnimate ? styles.fillerAnimated : styles.filler} style={{ width: `${progress}%` }} />
     </div>
   );
diff --git a/public/app/features/provisioning/Shared/RepositoryTypeCards.tsx b/public/app/features/provisioning/Shared/RepositoryTypeCards.tsx
index 9fc36d249c7..446aece2942 100644
--- a/public/app/features/provisioning/Shared/RepositoryTypeCards.tsx
+++ b/public/app/features/provisioning/Shared/RepositoryTypeCards.tsx
@@ -27,15 +27,17 @@ export function RepositoryTypeCards() {
           <Stack direction="row" gap={1} wrap>
             {gitProviders.map((config) => (
               <Card key={config.type} href={`${CONNECT_URL}/${config.type}`} className={styles.card} noMargin>
-                <Stack gap={2} alignItems="center">
-                  <RepoIcon type={config.type} />
-                  <Trans
-                    i18nKey="provisioning.repository-type-cards.configure-with-provider"
-                    values={{ provider: config.label }}
-                  >
-                    Configure with {'{{ provider }}'}
-                  </Trans>
-                </Stack>
+                <Card.Heading>
+                  <Stack gap={2} alignItems="center">
+                    <RepoIcon type={config.type} />
+                    <Trans
+                      i18nKey="provisioning.repository-type-cards.configure-with-provider"
+                      values={{ provider: config.label }}
+                    >
+                      Configure with {'{{ provider }}'}
+                    </Trans>
+                  </Stack>
+                </Card.Heading>
               </Card>
             ))}
           </Stack>
@@ -53,21 +55,23 @@ export function RepositoryTypeCards() {
           <Stack direction="row" gap={1} wrap>
             {otherProviders.map((config) => (
               <Card key={config.type} href={`${CONNECT_URL}/${config.type}`} className={styles.card} noMargin>
-                <Stack gap={2} alignItems="center">
-                  <RepoIcon type={config.type} />
-                  {config.type === 'local' ? (
-                    <Trans i18nKey="provisioning.repository-type-cards.configure-file">
-                      Configure file provisioning
-                    </Trans>
-                  ) : (
-                    <Trans
-                      i18nKey="provisioning.repository-type-cards.configure-with-provider"
-                      values={{ provider: config.label }}
-                    >
-                      Configure with {'{{ provider }}'}
-                    </Trans>
-                  )}
-                </Stack>
+                <Card.Heading>
+                  <Stack gap={2} alignItems="center">
+                    <RepoIcon type={config.type} />
+                    {config.type === 'local' ? (
+                      <Trans i18nKey="provisioning.repository-type-cards.configure-file">
+                        Configure file provisioning
+                      </Trans>
+                    ) : (
+                      <Trans
+                        i18nKey="provisioning.repository-type-cards.configure-with-provider"
+                        values={{ provider: config.label }}
+                      >
+                        Configure with {'{{ provider }}'}
+                      </Trans>
+                    )}
+                  </Stack>
+                </Card.Heading>
               </Card>
             ))}
           </Stack>
diff --git a/public/app/features/provisioning/Shared/StatusBadge.tsx b/public/app/features/provisioning/Shared/StatusBadge.tsx
index 075e44d7772..385e8d91bd0 100644
--- a/public/app/features/provisioning/Shared/StatusBadge.tsx
+++ b/public/app/features/provisioning/Shared/StatusBadge.tsx
@@ -7,9 +7,13 @@ import { PROVISIONING_URL } from '../constants';
 
 interface StatusBadgeProps {
   repo?: Repository;
+  displayOnly?: boolean; // if true, disable click action and cursor will be default
 }
 
-export function StatusBadge({ repo }: StatusBadgeProps) {
+/**
+ * @description Displays a status badge for the given provisioned repository.
+ */
+export function StatusBadge({ repo, displayOnly = false }: StatusBadgeProps) {
   if (!repo) {
     return null;
   }
@@ -86,10 +90,12 @@ export function StatusBadge({ repo }: StatusBadgeProps) {
       color={color}
       icon={icon}
       text={text}
-      style={{ cursor: 'pointer' }}
+      style={{ cursor: displayOnly ? 'default' : 'pointer' }}
       tooltip={tooltip}
       onClick={() => {
-        locationService.push(`${PROVISIONING_URL}/${repo.metadata?.name}/?tab=overview`);
+        if (!displayOnly) {
+          locationService.push(`${PROVISIONING_URL}/${repo.metadata?.name}/?tab=overview`);
+        }
       }}
     />
   );
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 93d41306f46..19ebdcca999 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -11810,6 +11810,11 @@
       "next": "Next",
       "previous": "Previous"
     },
+    "shared": {
+      "progress-bar": {
+        "aria-label": "Progress Bar"
+      }
+    },
     "sidebar-item": {
       "label-completed-step": "Completed step",
       "label-current-step": "Current step",