From bafe002fa349c77846540b07f0624714afa717b6 Mon Sep 17 00:00:00 2001
From: Dmitry Shilov <dshilov@microsoft.com>
Date: Thu, 4 Sep 2025 11:39:11 +0200
Subject: [PATCH] chore: Enhance accessibility (#2208)

- Add tabIndex to button
- Add aria attributes to icons and headings
---
 src/Explorer/SplashScreen/FabricHome.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Explorer/SplashScreen/FabricHome.tsx b/src/Explorer/SplashScreen/FabricHome.tsx
index 7b6cae00c..5e567eb58 100644
--- a/src/Explorer/SplashScreen/FabricHome.tsx
+++ b/src/Explorer/SplashScreen/FabricHome.tsx
@@ -119,7 +119,7 @@ const FabricHomeScreenButton: React.FC<FabricHomeScreenButtonProps & { className
 }) => {
   const styles = useStyles();
   return (
-    <div role="button" className={`${styles.buttonContainer} ${className}`} onClick={onClick}>
+    <div role="button" className={`${styles.buttonContainer} ${className}`} onClick={onClick} tabIndex={0}>
       <div className={styles.buttonUpperPart}>{icon}</div>
       <div aria-label={title} className={styles.buttonLowerPart}>
         <div>{title}</div>
@@ -147,7 +147,7 @@ export const FabricHomeScreen: React.FC<SplashScreenProps> = (props: SplashScree
       {
         title: "Sample data",
         description: "Automatically load sample data in your database",
-        icon: <img src={CosmosDbBlackIcon} />,
+        icon: <img src={CosmosDbBlackIcon} alt={"Azure Cosmos DB icon"} aria-hidden="true" />,
         onClick: () => setOpenSampleDataImportDialog(true),
       },
       {
@@ -181,7 +181,7 @@ export const FabricHomeScreen: React.FC<SplashScreenProps> = (props: SplashScree
           explorer={props.explorer}
           databaseName={userContext.fabricContext?.databaseName}
         />
-        <div className={styles.title} role="heading" aria-label={title}>
+        <div className={styles.title} role="heading" aria-label={title} aria-level={1}>
           {title}
         </div>
         {getSplashScreenButtons()}