From a72c60677c958d2fbdbf343864c2ee656e930477 Mon Sep 17 00:00:00 2001
From: Chenglong Wang <chenglong.wang@microsoft.com>
Date: Tue, 9 Dec 2025 11:46:36 -0800
Subject: [PATCH] fix accessibility

---
 src/views/About.tsx          | 480 +++++++++--------------------------
 src/views/DataFormulator.tsx |   2 +-
 2 files changed, 121 insertions(+), 361 deletions(-)

diff --git a/src/views/About.tsx b/src/views/About.tsx
index 8277733..689c076 100644
--- a/src/views/About.tsx
+++ b/src/views/About.tsx
@@ -1,16 +1,13 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { Box, Typography, Button, useTheme, alpha, IconButton, Divider } from "@mui/material";
-import React, { FC, useState, useEffect, useRef } from "react";
-import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
-import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import { Box, Typography, Button, useTheme, alpha, Divider } from "@mui/material";
+import React, { FC } from "react";
 import GridViewIcon from '@mui/icons-material/GridView';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import YouTubeIcon from '@mui/icons-material/YouTube';
 import PrecisionManufacturingIcon from '@mui/icons-material/PrecisionManufacturing';
 
-import dfLogo from '../assets/df-logo.png';
 import { toolName } from "../app/App";
 import { useSelector } from "react-redux";
 import { DataFormulatorState } from "../app/dfSlice";
@@ -50,241 +47,129 @@ const features: Feature[] = [
     }
 ];
 
-const screenshots: {url: string, description: string}[] = [
-    {url: "/data-formulator-screenshot-v0.5.webp", description: "Explore consumer price trends from 2005 to 2025"},
-    {url: "/screenshot-movies-report.webp", description: "Report: Top directors by their revenue"},
-    {url: "/screenshot-renewable-energy.webp", description: "Renewable energy percentage by country"},
-    {url: '/screenshot-unemployment.webp', description: 'Report: Unemployment rate affected by 2008 financial crisis'},
-    {url: '/screenshot-claude-performance.webp', description: 'Compare Claude models\' performance on different tasks'},
-];
-
 export const About: FC<{}> = function About({ }) {
     const theme = useTheme();
-    const [currentFeature, setCurrentFeature] = useState(0);
-    const [currentScreenshot, setCurrentScreenshot] = useState(0);
-    const videoRef = useRef<HTMLVideoElement | null>(null);
-    const videoDurationsRef = useRef<Map<string, number>>(new Map());
-
-    const handlePrevious = () => {
-        setCurrentFeature((prev) => (prev === 0 ? features.length - 1 : prev - 1));
-    };
-
-    const handleNext = () => {
-        setCurrentFeature((prev) => (prev === features.length - 1 ? 0 : prev + 1));
-    };
-
-    // Auto-advance features based on video duration
-    useEffect(() => {
-        const currentMedia = features[currentFeature].media;
-        const isVideo = features[currentFeature].mediaType === 'video';
-        
-        // Default duration for images or if video duration is not yet loaded
-        let duration = 10000; // 10 seconds for images
-        
-        if (isVideo && videoDurationsRef.current.has(currentMedia)) {
-            // Use the stored video duration (in milliseconds)
-            duration = videoDurationsRef.current.get(currentMedia)! * 1000;
-            duration = duration + 3000; // add 3 seconds to the video duration
-        }
-
-        const timeoutId = setTimeout(() => {
-            setCurrentFeature((prev) => (prev + 1) % features.length);
-        }, duration);
-
-        return () => clearTimeout(timeoutId);
-    }, [currentFeature]);
-
-    // Preload adjacent carousel items for smoother transitions
-    useEffect(() => {
-        const preloadMedia = (index: number) => {
-            const feature = features[index];
-            if (feature.mediaType === 'video') {
-                const video = document.createElement('video');
-                video.src = feature.media;
-                video.preload = 'metadata';
-            } else {
-                const img = new Image();
-                img.src = feature.media;
-            }
-        };
-
-        // Preload next and previous features
-        const nextIndex = (currentFeature + 1) % features.length;
-        const prevIndex = currentFeature === 0 ? features.length - 1 : currentFeature - 1;
-        
-        preloadMedia(nextIndex);
-        preloadMedia(prevIndex);
-
-        // Preload next and previous screenshots
-        const nextScreenshot = (currentScreenshot + 1) % screenshots.length;
-        const prevScreenshot = currentScreenshot === 0 ? screenshots.length - 1 : currentScreenshot - 1;
-        
-        const img1 = new Image();
-        img1.src = screenshots[nextScreenshot].url;
-        const img2 = new Image();
-        img2.src = screenshots[prevScreenshot].url;
-    }, [currentFeature, currentScreenshot]);
-
     const serverConfig = useSelector((state: DataFormulatorState) => state.serverConfig);
 
     let actionButtons = !serverConfig.PROJECT_FRONT_PAGE ? (
-        <Box sx={{ display: 'flex', justifyContent: 'center', gap: 1, mb: 4, flexWrap: 'wrap' }}>
+        <Box component="nav" aria-label="Primary actions" sx={{ display: 'flex', justifyContent: 'center', gap: 1.5, mb: 4, flexWrap: 'wrap' }}>
             <Button size="large" variant="contained" color="primary" 
-                startIcon={<PrecisionManufacturingIcon sx={{ fontSize: '1rem' }} />}
+                startIcon={<PrecisionManufacturingIcon aria-hidden="true" />}
                 href="/app"
             >Start Exploration</Button>
         </Box>
     ) : (
-        <Box sx={{ display: 'flex', justifyContent: 'center', gap: 2, mb: 4, flexWrap: 'wrap', '.MuiButton-root': { textTransform: 'none' } }}>
+        <Box component="nav" aria-label="Primary actions" sx={{ display: 'flex', justifyContent: 'center', gap: 1.5, mb: 4, flexWrap: 'wrap' }}>
             <Button size="large" variant="outlined" color="primary" 
-                startIcon={<YouTubeIcon sx={{ fontSize: '1rem', color: '#FF0000' }} />}
+                sx={{ textTransform: 'none' }}
+                startIcon={<Box component="img" sx={{ width: 20, height: 20 }} alt="" aria-hidden="true" src="/pip-logo.svg" />}
                 target="_blank"
                 rel="noopener noreferrer"
-                href="https://www.youtube.com/watch?v=GfTE2FLyMrs"
-            >What's New in v0.5?</Button>
+                aria-label="Install Locally via pip (opens in new tab)"
+                href="https://pypi.org/project/data-formulator/"
+            >Install Locally</Button>
+            <Button size="large" variant="contained" color="primary" 
+                sx={{ textTransform: 'none' }}
+                startIcon={<GridViewIcon aria-hidden="true" />}
+                href="/app"
+            >Try Online Demo</Button>
             <Button size="large" variant="outlined" color="primary" 
-                startIcon={<GitHubIcon sx={{ fontSize: '1rem', color: '#000000' }} />}
+                sx={{ textTransform: 'none' }}
+                startIcon={<YouTubeIcon sx={{ color: '#FF0000' }} aria-hidden="true" />}
                 target="_blank"
                 rel="noopener noreferrer"
-                href="https://github.com/microsoft/data-formulator"
-            >GitHub</Button>
-            <Divider orientation="vertical" sx={{ mx: 1 }} flexItem />
+                aria-label="Watch Video on YouTube (opens in new tab)"
+                href="https://www.youtube.com/watch?v=GfTE2FLyMrs"
+            >Video</Button>
             <Button size="large" variant="outlined" color="primary" 
-                startIcon={<Box component="img" sx={{ width: 24, height: 24 }} alt="" src="/pip-logo.svg" />}
+                sx={{ textTransform: 'none' }}
+                startIcon={<GitHubIcon aria-hidden="true" />}
                 target="_blank"
                 rel="noopener noreferrer"
-                href="https://pypi.org/project/data-formulator/"
-            >Install Locally</Button>
-            <Button size="large" variant="outlined" color="primary" 
-                sx={{
-                    animation: 'subtleGlow 2s ease-in-out infinite',
-                    '@keyframes subtleGlow': {
-                        '0%, 100%': {
-                            boxShadow: `0 0 8px ${alpha(theme.palette.primary.main, 0.4)}, 0 0 16px ${alpha(theme.palette.primary.main, 0.2)}`,
-                        },
-                        '50%': {
-                            boxShadow: `0 0 12px ${alpha(theme.palette.primary.main, 0.6)}, 0 0 24px ${alpha(theme.palette.primary.main, 0.3)}, 0 0 32px ${alpha(theme.palette.primary.main, 0.1)}`,
-                        }
-                    },
-                    '&:hover': {
-                        animation: 'subtleGlow 1.5s ease-in-out infinite',
-                        boxShadow: `0 0 16px ${alpha(theme.palette.primary.main, 0.7)}, 0 0 32px ${alpha(theme.palette.primary.main, 0.4)} !important`,
-                    }
-                }}
-                startIcon={<GridViewIcon sx={{ fontSize: '1rem' }} />}
-                href="/app"
-            >Try Online Demo</Button>
-            <Typography variant="caption" sx={{ mt: 1.5, color: 'text.secondary', fontStyle: 'italic' }}>
-                Psst — install locally for the full experience ✨. The online demo has limited features (at the moment).
-            </Typography>
+                aria-label="View on GitHub (opens in new tab)"
+                href="https://github.com/microsoft/data-formulator"
+            >GitHub</Button>
         </Box>
     );
 
     return (
-        <Box sx={{
-            display: "flex", 
-            flexDirection: "column", 
-            textAlign: "center", 
-            overflowY: "auto",
-            width: '100%',
-            height: '100%',
-            background: `
-                linear-gradient(90deg, ${alpha(theme.palette.text.secondary, 0.01)} 1px, transparent 1px),
-                linear-gradient(0deg, ${alpha(theme.palette.text.secondary, 0.01)} 1px, transparent 1px)
-            `,
-            backgroundSize: '16px 16px',
-        }}>
-            <Box sx={{margin:'auto', pb: '5%', display: "flex", flexDirection: "column", textAlign: "center", maxWidth: 1200}}>
-                {/* Header with logo and title */}
-                <Box sx={{display: 'flex', mx: 'auto', mt: 4}}>
-                    <Typography fontSize={84} sx={{ml: 2, letterSpacing: '0.05em'}}>{toolName}</Typography> 
+        <Box 
+            component="main"
+            role="main"
+            sx={{
+                display: "flex", 
+                flexDirection: "column", 
+                overflowY: "auto",
+                width: '100%',
+                height: '100%',
+                background: `
+                    linear-gradient(90deg, ${alpha(theme.palette.text.secondary, 0.01)} 1px, transparent 1px),
+                    linear-gradient(0deg, ${alpha(theme.palette.text.secondary, 0.01)} 1px, transparent 1px)
+                `,
+                backgroundSize: '16px 16px',
+            }}
+        >
+            <Box sx={{margin:'auto', py: 4, display: "flex", flexDirection: "column", textAlign: "center", maxWidth: 1000, width: '100%', px: 3}}>
+                {/* Header with title */}
+                <Box component="header" sx={{display: 'flex', flexDirection: 'column', mx: 'auto', mt: 2}}>
+                    <Typography component="h1" fontSize={84} sx={{letterSpacing: '0.05em'}}>{toolName}</Typography> 
+                    <Typography component="p" sx={{ 
+                        fontSize: 24, color: theme.palette.text.secondary, 
+                        textAlign: 'center', mb: 4}}>
+                        Explore data with visualizations, powered by AI agents. 
+                    </Typography>
                 </Box>
-                <Typography sx={{ 
-                    fontSize: 24, color: theme.palette.text.secondary, 
-                    textAlign: 'center', mb: 4}}>
-                    Explore data with visualizations, powered by AI agents. 
-                </Typography>
                 
                 {actionButtons}
 
-                {/* Interactive Features Carousel */}
-                <Box sx={{
-                    mx: 'auto',
-                    maxWidth: 1200,
-                    borderRadius: 3, 
-                    position: 'relative',
-                }}>
-                    <Box sx={{ 
-                        display: 'flex', 
-                        alignItems: 'center', 
-                        gap: 3,
-                        height: '40vh',
-                        minHeight: 320,
-                    }}>
-                        {/* Left Arrow */}
-                        <IconButton 
-                            onClick={handlePrevious}
+                {/* Features Grid - 2 columns, 4 rows */}
+                <Box 
+                    component="section" 
+                    aria-label="Features"
+                    sx={{ display: 'flex', flexDirection: 'column', gap: 5, mt: 2 }}
+                >
+                    {features.map((feature, index) => (
+                        <Box 
+                            component="article"
+                            key={index}
+                            aria-labelledby={`feature-title-${index}`}
                             sx={{ 
-                                flexShrink: 0,
-                                bgcolor: alpha(theme.palette.primary.main, 0.1),
-                                '&:hover': {
-                                    bgcolor: alpha(theme.palette.primary.main, 0.2),
-                                }
+                                display: 'flex', 
+                                flexDirection: index % 2 === 0 ? 'row' : 'row-reverse',
+                                gap: 4,
+                                alignItems: 'center',
                             }}
                         >
-                            <ArrowBackIosNewIcon />
-                        </IconButton>
-
-                        {/* Feature Content */}
-                        <Box sx={{ 
-                            flex: 1, 
-                            display: 'flex', 
-                            flexDirection: 'row',
-                            gap: 4,
-                            alignItems: 'center',
-                        }}>
                             {/* Text Content */}
                             <Box sx={{ 
                                 flex: 1,
-                                textAlign: 'left',
-                                minWidth: 300,
+                                textAlign: index % 2 === 0 ? 'left' : 'right',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                justifyContent: 'center',
                             }}>
                                 <Typography 
-                                    variant="h4" 
-                                    sx={{ mb: 2 }}
+                                    component="h2"
+                                    id={`feature-title-${index}`}
+                                    sx={{ 
+                                        fontSize: 28,
+                                        fontWeight: 500,
+                                        mb: 1.5,
+                                        color: theme.palette.text.primary,
+                                    }}
                                 >
-                                    {features[currentFeature].title}
+                                    {feature.title}
                                 </Typography>
                                 <Typography 
-                                    variant="body1" 
-                                    sx={{ color: 'text.secondary', lineHeight: 1.8 }}
+                                    component="p"
+                                    sx={{ 
+                                        fontSize: 17,
+                                        color: 'text.secondary', 
+                                        lineHeight: 1.7,
+                                    }}
                                 >
-                                    {features[currentFeature].description}
+                                    {feature.description}
                                 </Typography>
-                                
-                                {/* Feature Indicators */}
-                                <Box sx={{ display: 'flex', gap: 1, mt: 3 }}>
-                                    {features.map((_, index) => (
-                                        <Box
-                                            key={index}
-                                            onClick={() => setCurrentFeature(index)}
-                                            sx={{
-                                                width: 32,
-                                                height: 4,
-                                                borderRadius: 2,
-                                                bgcolor: index === currentFeature 
-                                                    ? theme.palette.primary.main 
-                                                    : alpha(theme.palette.text.secondary, 0.2),
-                                                cursor: 'pointer',
-                                                '&:hover': {
-                                                    bgcolor: index === currentFeature 
-                                                        ? theme.palette.primary.main 
-                                                        : alpha(theme.palette.text.secondary, 0.4),
-                                                }
-                                            }}
-                                        />
-                                    ))}
-                                </Box>
                             </Box>
 
                             {/* Media Content */}
@@ -292,30 +177,18 @@ export const About: FC<{}> = function About({ }) {
                                 flex: 1,
                                 borderRadius: 2,
                                 overflow: 'hidden',
-                                boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
-                                minWidth: 300,
-                                maxWidth: 500,
+                                border: '1px solid rgba(0,0,0,0.1)',
                             }}>
-                                {features[currentFeature].mediaType === 'video' ? (
+                                {feature.mediaType === 'video' ? (
                                     <Box
                                         component="video"
-                                        key={features[currentFeature].media}
-                                        src={features[currentFeature].media}
-                                        ref={videoRef}
+                                        src={feature.media}
                                         autoPlay
                                         loop
                                         muted
                                         playsInline
                                         preload="metadata"
-                                        onLoadedMetadata={(e) => {
-                                            const video = e.currentTarget as HTMLVideoElement;
-                                            if (video.duration && !isNaN(video.duration)) {
-                                                videoDurationsRef.current.set(
-                                                    features[currentFeature].media,
-                                                    video.duration
-                                                );
-                                            }
-                                        }}
+                                        aria-label={`Video demonstration: ${feature.title}`}
                                         sx={{
                                             width: '100%',
                                             height: 'auto',
@@ -325,8 +198,8 @@ export const About: FC<{}> = function About({ }) {
                                 ) : (
                                     <Box
                                         component="img"
-                                        src={features[currentFeature].media}
-                                        alt={features[currentFeature].title}
+                                        src={feature.media}
+                                        alt={feature.title}
                                         loading="lazy"
                                         sx={{
                                             width: '100%',
@@ -337,161 +210,48 @@ export const About: FC<{}> = function About({ }) {
                                 )}
                             </Box>
                         </Box>
-
-                        {/* Right Arrow */}
-                        <IconButton 
-                            onClick={handleNext}
-                            sx={{ 
-                                flexShrink: 0,
-                                bgcolor: alpha(theme.palette.primary.main, 0.1),
-                                '&:hover': {
-                                    bgcolor: alpha(theme.palette.primary.main, 0.2),
-                                }
-                            }}
-                        >
-                            <ArrowForwardIosIcon />
-                        </IconButton>
-                    </Box>
-                </Box>
-                
-                {/* Screenshots Carousel Section */}
-                <Box sx={{ mt: 6, mx: 2 }}>
-                    <Box sx={{ 
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                        gap: 3
-                    }}>
-                        {/* Screenshot Container */}
-                        <Box 
-                            key={currentScreenshot}
-                            onClick={() => setCurrentScreenshot((currentScreenshot + 1) % screenshots.length)}
-                            sx={{
-                                height: 680,
-                                width: 'auto',
-                                borderRadius: 8,
-                                cursor: 'pointer',
-                                overflow: 'hidden',
-                                border: '1px solid rgba(0,0,0,0.1)',
-                                boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
-                                position: 'relative',
-                                display: 'flex',
-                                justifyContent: 'center',
-                                textDecoration: 'none',
-                                animation: 'fadeSlideIn 0.1s ease-out',
-                                '&:hover': {
-                                    boxShadow: '0 8px 24px rgba(0,0,0,0.2)',
-                                    '& .description-overlay': {
-                                        opacity: 1,
-                                    }
-                                }
-                            }}
-                        >
-                            <Box 
-                                component="img" 
-                                sx={{
-                                    display: 'block',
-                                    clipPath: 'inset(2px 0 0 0)'
-                                }} 
-                                alt={screenshots[currentScreenshot].description} 
-                                src={screenshots[currentScreenshot].url}
-                                loading="lazy"
-                            />
-                            <Box
-                                className="description-overlay"
-                                sx={{
-                                    position: 'absolute',
-                                    bottom: 0,
-                                    left: 0,
-                                    right: 0,
-                                    backgroundColor: 'rgba(250, 250, 250, 0.6)',
-                                    backdropFilter: 'blur(8px)',
-                                    padding: 2,
-                                    opacity: 0,
-                                    transition: 'opacity 0.3s ease',
-                                }}
-                            >
-                                <Typography 
-                                    variant="body1" 
-                                    color="text.secondary"
-                                    sx={{ 
-                                        fontSize: '2rem',
-                                        fontWeight: 400,
-                                        textAlign: 'center'
-                                    }}
-                                >
-                                    {screenshots[currentScreenshot].description}
-                                </Typography>
-                            </Box>
-                        </Box>
-
-                        {/* Screenshot Indicators */}
-                        <Box sx={{ display: 'flex', gap: 1 }}>
-                            {screenshots.map((_, index) => (
-                                <Box
-                                    key={index}
-                                    onClick={() => setCurrentScreenshot(index)}
-                                    sx={{
-                                        width: 32,
-                                        height: 4,
-                                        borderRadius: 2,
-                                        bgcolor: index === currentScreenshot 
-                                            ? theme.palette.primary.main 
-                                            : alpha(theme.palette.text.secondary, 0.2),
-                                        cursor: 'pointer',
-                                        transition: 'all 0.3s ease',
-                                        '&:hover': {
-                                            bgcolor: index === currentScreenshot 
-                                                ? theme.palette.primary.main 
-                                                : alpha(theme.palette.text.secondary, 0.4),
-                                        }
-                                    }}
-                                />
-                            ))}
-                        </Box>
-                    </Box>
+                    ))}
                 </Box>
 
                 <Box sx={{ mt: 6, mx: 2 }}>
-                    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-                        <Typography variant="caption">
-                            How does Data Formulator handle your data?
-                        </Typography>
-                        <Typography 
-                            variant="caption" 
-                            sx={{ mt: 1, textAlign: 'left' }}
-                        >
-                            <li><strong>Data Storage:</strong> Uploaded data (csv, xlsx, json, clipboard, messy data etc.) is stored in browser's local storage only</li>
-                            <li><strong>Data Processing:</strong> Local installation runs Python on your machine; online demo sends the data to server for data transformations (but not stored)</li>
-                            <li><strong>Database:</strong> Only available for locally installed Data Formulator (a DuckDB database file is created in temp directory to store data); not available in online demo</li>
-                            <li><strong>LLM Endpoints:</strong> Small data samples are sent to LLM endpoints along with the prompt. Use your trusted model provider if working with private data.</li>
-                        </Typography>
-                        <Typography variant="caption" sx={{ mt: 4, color: 'text.secondary' }}>
-                            Research Prototype from Microsoft Research
-                        </Typography>
-                    </Box>
+                    <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                        <strong>Data handling:</strong> Data stored in browser only • Local install runs Python locally; online demo processes server-side (not stored) • LLM receives small samples with prompts
+                    </Typography>
+                    <Typography variant="body2" sx={{ display: 'block', mt: 1, color: 'text.secondary' }}>
+                        Research Prototype from Microsoft Research
+                    </Typography>
                 </Box>
             </Box>
 
             {/* Footer */}
-            <Box sx={{ color: 'text.secondary', display: 'flex', 
-                        backgroundColor: 'rgba(255, 255, 255, 0.89)',
-                        alignItems: 'center', justifyContent: 'center' }}>
+            <Box 
+                component="footer"
+                role="contentinfo"
+                sx={{ color: 'text.secondary', display: 'flex', 
+                    backgroundColor: 'rgba(255, 255, 255, 0.89)',
+                    alignItems: 'center', justifyContent: 'center' }}
+            >
                 <Button size="small" color="inherit" 
-                        sx={{ textTransform: 'none'}} 
-                        target="_blank" rel="noopener noreferrer" 
+                        sx={{ textTransform: 'none' }} 
+                        target="_blank" 
+                        rel="noopener noreferrer" 
+                        aria-label="Privacy & Cookies (opens in new tab)"
                         href="https://www.microsoft.com/en-us/privacy/privacystatement">Privacy & Cookies</Button>
-                <Divider orientation="vertical" variant="middle" flexItem sx={{ mx: 1 }} />
+                <Divider orientation="vertical" variant="middle" flexItem sx={{ mx: 1 }} aria-hidden="true" />
                 <Button size="small" color="inherit" 
-                        sx={{ textTransform: 'none'}} 
-                        target="_blank" rel="noopener noreferrer" 
+                        sx={{ textTransform: 'none' }} 
+                        target="_blank" 
+                        rel="noopener noreferrer" 
+                        aria-label="Terms of Use (opens in new tab)"
                         href="https://www.microsoft.com/en-us/legal/intellectualproperty/copyright">Terms of Use</Button>
-                <Divider orientation="vertical" variant="middle" flexItem sx={{ mx: 1 }} />
+                <Divider orientation="vertical" variant="middle" flexItem sx={{ mx: 1 }} aria-hidden="true" />
                 <Button size="small" color="inherit" 
-                        sx={{ textTransform: 'none'}} 
-                        target="_blank" rel="noopener noreferrer" 
+                        sx={{ textTransform: 'none' }} 
+                        target="_blank" 
+                        rel="noopener noreferrer" 
+                        aria-label="Contact Us (opens in new tab)"
                         href="https://github.com/microsoft/data-formulator/issues">Contact Us</Button>
-                <Typography sx={{ display: 'inline', fontSize: '12px', ml: 1 }}> @ {new Date().getFullYear()}</Typography>
+                <Typography component="span" sx={{ fontSize: '12px', ml: 1 }}>© {new Date().getFullYear()}</Typography>
             </Box>
         </Box>)
 }
diff --git a/src/views/DataFormulator.tsx b/src/views/DataFormulator.tsx
index ead4e94..0ea145b 100644
--- a/src/views/DataFormulator.tsx
+++ b/src/views/DataFormulator.tsx
@@ -331,7 +331,7 @@ export const DataFormulatorFC = ({ }) => {
                         zIndex: 1000,
                     }}>
                         <Box sx={{margin:'auto', pb: '5%', display: "flex", flexDirection: "column", textAlign: "center"}}>
-                            <Box component="img" sx={{  width: 196, margin: "auto" }} alt="" src={dfLogo} fetchPriority="high" />
+                            <Box component="img" sx={{  width: 196, margin: "auto" }} alt="Data Formulator logo" src={dfLogo} fetchPriority="high" />
                             <Typography variant="h3" sx={{marginTop: "20px", fontWeight: 200, letterSpacing: '0.05em'}}>
                                 {toolName}
                             </Typography>