Fix a11y insights

.vscode/launch.json

@@ -5,7 +5,7 @@
             "name": "Flask",
             "type": "debugpy",
             "request": "launch",
-            "program": "${workspaceFolder}/app.py",
+            "program": "${workspaceFolder}/py-src/data_formulator/app.py",
             "args": ["run", "--no-debugger", "--no-reload"],
             "env": {
                 "FLASK_APP": "app.py",

src/app/App.tsx

@@ -106,7 +106,7 @@ export const ImportStateButton: React.FC<{}> = ({ }) => {
 
 
     return <Tooltip title="load a saved session">
-                <Button variant="text" color="primary" component="label" 
+                <Button variant="text" color="primary" 
                     //endIcon={<InputIcon />}
                 >
                     <Input inputProps={{ accept: '.dfstate', multiple: false  }} id="upload-data-file"
@@ -224,6 +224,9 @@ export const AppFC: FC<AppFCProps> = function AppFC(appProps) {
             custom: {
                 main: "rgb(255, 160, 122)", //lightsalmon
             },
+            warning: {
+                main: '#bf5600', // New accessible color, original (#ed6c02) has insufficient color contrast of 3.11
+            },
         },
     });
 
@@ -245,12 +248,12 @@ export const AppFC: FC<AppFCProps> = function AppFC(appProps) {
                 aria-label="View Mode"
                 sx={{ marginRight: "8px", height: 32, padding: "4px 0px", marginTop: "2px", "& .MuiToggleButton-root": { padding: "0px 6px" } }}
             >
-                <ToggleButton value="carousel">
+                <ToggleButton value="carousel" aria-label="view list">
                     <Tooltip title="view list">
                         <ViewSidebarIcon fontSize="small" sx={{ transform: "scaleX(-1)" }} />
                     </Tooltip>
                 </ToggleButton>
-                <ToggleButton value="gallery">
+                <ToggleButton value="gallery" aria-label="view grid">
                     <Tooltip title="view grid">
                         <GridViewIcon fontSize="small" />
                     </Tooltip>

src/scss/App.scss

@@ -26,7 +26,7 @@ h2.view-title {
     margin: 0;
     line-height: 1.75;
     display: inline-block;
-    color: #777;
+    color: #717171;
     //font-weight: 600;
     //text-transform: uppercase;
     font-size: 14px;

src/scss/DataView.scss

@@ -32,7 +32,7 @@
     margin-top: 4px;
     display: inline-block;
     font-size: 18px;
-    color: #777;
+    color: #717171;
 }
 
 .table-container-small {

src/scss/EncodingShelf.scss

@@ -44,6 +44,10 @@
         flex-direction: column;
         justify-content: center
     }
+
+    .table-list-item {
+        display: flex;
+    }
 }
 
 .auto-sort-option-label {

src/views/ConceptCard.tsx

@@ -130,7 +130,7 @@ export const ConceptCard: FC<ConceptCardProps> = function ConceptCard({ field })
 
 
 
-    let opacity = isDragging ? 0.3 :(notInFocusedTable ? 0.4 : 1);
+    let opacity = isDragging ? 0.3 :(notInFocusedTable ? 0.65 : 1);
     let fontStyle = "inherit";
     let border = "hidden";
 
@@ -278,7 +278,7 @@ export const ConceptCard: FC<ConceptCardProps> = function ConceptCard({ field })
                 <Typography className="draggable-card-title" sx={{ fontSize: 13, height: 28, width: "100%" }} component={'span'} gutterBottom>
                     {typeIconMenu}
                     {fieldNameEntry}
-                    {field.semanticType ? <Typography sx={{fontSize: "xx-small", marginLeft: "6px", color: 'darkgray', fontStyle: 'italic'}}>-- {field.semanticType}</Typography> : ""}
+                    {field.semanticType ? <Typography sx={{fontSize: "xx-small", marginLeft: "6px", fontStyle: 'italic'}}>-- {field.semanticType}</Typography> : ""}
                     {/* {field.source == "custom" ? exampleToComponent(field.domain.values, 3) : ""} */}
                 </Typography>
                 <Box className='draggable-card-action-button' sx={{ position: "absolute", right: 1, background: 'rgba(255, 255, 255, 0.95)' }}>{cardHeaderOptions}</Box>

src/views/ConceptShelf.tsx

@@ -129,7 +129,7 @@ export const ConceptShelf: FC<ConceptShelfProps> = function ConceptShelf() {
                 <Box className="data-fields-list">
                     <Box sx={{display: "block", width: "100%"}}>
                         <Divider orientation="horizontal" textAlign="left">
-                            <Typography component="h2" sx={{fontSize: "10px"}} color="darkgray">
+                            <Typography component="h2" sx={{fontSize: "10px"}} color="text.secondary">
                                 field operators
                             </Typography>
                         </Divider>
@@ -143,7 +143,7 @@ export const ConceptShelf: FC<ConceptShelfProps> = function ConceptShelf() {
                     </Box>
                     {groupNames.map(gp => [
                         <Box sx={{display: "block", width: "100%"}}>
-                            <Divider orientation="horizontal" textAlign="left"><Typography component="h2" sx={{fontSize: "10px"}} color="darkgray">
+                            <Divider orientation="horizontal" textAlign="left"><Typography component="h2" sx={{fontSize: "10px"}} color="text.secondary">
                                 {gp}
                             </Typography></Divider>
                         </Box>,

src/views/DataThread.tsx

@@ -5,29 +5,18 @@ import React, { FC, useEffect, useRef, useState } from 'react';
 
 import {
     Box,
-    Button,
     Divider,
     Typography,
     LinearProgress,
-    ListItem,
     Stack,
     ListItemIcon,
-    List,
     Card,
     IconButton,
     Tooltip,
     ButtonGroup,
     useTheme,
-    Drawer,
-    ListItemButton,
-    ListItemText,
-    Collapse,
-    Grow,
-    alpha,
 } from '@mui/material';
 
-import embed from 'vega-embed';
-import AnimateOnChange from 'react-animate-on-change'
 import { VegaLite } from 'react-vega'
 
 
@@ -128,11 +117,11 @@ let SingleThreadView: FC<{
             let currentActiveFields = new Set(extractActiveFields(trigger))
             let fieldsIdentical = _.isEqual(previousActiveFields, currentActiveFields)
 
-            let triggerCard = <ListItem key={'thread-card-trigger-box'} sx={{padding: '0'}}>
+            let triggerCard = <div key={'thread-card-trigger-box'}>
                 <Box sx={{flex: 1}} /*sx={{ width: 'calc(100% - 8px)', marginLeft: 1, borderLeft: '1px dashed darkgray' }}*/ >
                     <TriggerCard className={selectedClassName} trigger={trigger} hideFields={fieldsIdentical} />   
                 </Box>
-            </ListItem>;
+            </div>;
 
             return <Box sx={{display: 'flex', flexDirection: 'column'}} key={`trigger-card-${trigger.chartRef}`}>
                 {triggerCard}
@@ -165,7 +154,7 @@ let SingleThreadView: FC<{
         // only charts without dependency can be deleted
         let tableDeleteEnabled = table?.derive && !tables.some(t => t.derive?.trigger.tableId == tableId);
 
-        let colloapsedTableBox = <ListItem sx={{padding: 0}}>
+        let colloapsedTableBox = <div style={{padding: 0}}>
             <Box sx={{textTransform: 'none', padding: 0, minWidth: 0, color: 'gray'}} >
                 <Stack direction="row" sx={{fontSize: '12px', fontWeight: tableId == focusedTableId ? 'bold' : 'normal'}} alignItems="center" gap={"2px"}>
                     <TableRowsIcon fontSize="inherit"  sx={{fontWeight: 'inherit'}}/>
@@ -174,9 +163,9 @@ let SingleThreadView: FC<{
                     </Typography>
                 </Stack>
             </Box>
-        </ListItem>;
+        </div>;
 
-        let regularTableBox = <ListItem ref={relevantCharts.some(c => c.chartId == focusedChartId) ? scrollRef : null} sx={{padding: '0px'}}>
+        let regularTableBox = <div ref={relevantCharts.some(c => c.chartId == focusedChartId) ? scrollRef : null} style={{padding: '0px'}}>
             <Card className={`data-thread-card ${selectedClassName}`} variant="outlined" 
                     sx={{ width: '100%', background: 'aliceblue' }} 
                     onClick={() => { 
@@ -222,14 +211,14 @@ let SingleThreadView: FC<{
                     </ButtonGroup>
                 </Box>
             </Card>
-        </ListItem>
+        </div>
 
         let chartElementProps = collapsed ? {display: 'flex', flexWrap: 'wrap'} : {}
 
         return [
             regularTableBox,
             <Box sx={{display: 'flex', flexDirection: 'row'}}>
-                <Button sx={{minWidth: '1px', padding: '0px', width: '17px',  flex: 'none', display: 'flex'
+                <div style={{minWidth: '1px', padding: '0px', width: '17px',  flex: 'none', display: 'flex'
                             //borderLeft: '1px dashed darkgray',
                             }}>
                     <Box sx={{padding:0, width: '1px', margin:'auto', height: '100%',
@@ -238,7 +227,7 @@ let SingleThreadView: FC<{
                                 backgroundImage: 'linear-gradient(180deg, darkgray, darkgray 75%, transparent 75%, transparent 100%)',
                                 backgroundSize: '1px 6px, 3px 100%'
                             }}></Box>
-                </Button>
+                </div>
                 <Box sx={{flex: 1, padding: '8px 0px', minHeight: '8px', ...chartElementProps}}>
                     {releventChartElements}
                 </Box>
@@ -281,14 +270,14 @@ let SingleThreadView: FC<{
                 "& .MuiDivider-wrapper": { display: 'flex', flexDirection: 'row' },
                 "&::before, &::after": {  borderColor: 'darkgray',  borderWidth: '2px', width: 50 },
             }}>
-                <Typography sx={{fontSize: "10px", fontWeight: 'bold', color:'rgba(100, 100, 100, 0.8)', textTransform: 'none'}}>
+                <Typography sx={{fontSize: "10px", fontWeight: 'bold', color:'text.secondary', textTransform: 'none'}}>
                     {`thread - ${threadIdx + 1}`}
                 </Typography>
             </Divider>
         </Box>
-        <List sx={{padding: '2px 4px 2px 4px', marginTop: 0, marginBottom: '8px', direction: 'ltr'}}>
+        <div style={{padding: '2px 4px 2px 4px', marginTop: 0, marginBottom: '8px', direction: 'ltr'}}>
             {content}
-        </List>
+        </div>
     </Box>    
 }
 
@@ -480,9 +469,11 @@ export const DataThread: FC<{}> = function ({ }) {
                 <Typography className="view-title" component="h2" sx={{marginTop: "6px"}}>
                     Data Threads
                 </Typography>
-                <IconButton size={'small'} color="primary" disabled={leafTables.length <= 1} onClick={() => { setThreadDrawerOpen(!threadDrawerOpen); }}>
-                    {drawerOpen ? <ChevronLeftIcon /> : <ChevronRightIcon />}
-                </IconButton>
+                <Tooltip title={drawerOpen ? "collapse" : "expand"}>
+                    <IconButton size={'small'} color="primary" disabled={leafTables.length <= 1} onClick={() => { setThreadDrawerOpen(!threadDrawerOpen); }}>
+                        {drawerOpen ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+                    </IconButton>
+                </Tooltip>
             </Box>
             <Box sx={{transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms', overflow: 'auto', 
                       direction: 'rtl', display: 'flex', flex: 1}}  

src/views/DataView.tsx

@@ -84,7 +84,7 @@ export const FreeDataViewFC: FC<FreeDataViewProps> = function DataView({  $table
         if (colDefs) {
             colDefs = [{
                 id: "#rowId", label: "#", minWidth: 10, align: undefined, width: 40,
-                format: (value: any) => <Typography fontSize="inherit" color="rgba(0,0,0,0.5)">{value}</Typography>, 
+                format: (value: any) => <Typography fontSize="inherit" color="rgba(0,0,0,0.65)">{value}</Typography>, 
                 dataType: Type.Number,
                 source: "original", 
             }, ...colDefs]
@@ -110,7 +110,7 @@ export const FreeDataViewFC: FC<FreeDataViewProps> = function DataView({  $table
 
     let genTableLink =  (t: DictTable) => 
         <Link underline="hover" key={t.id} sx={{cursor: "pointer"}} 
-            color="primary" onClick={()=>{ dispatch(dfActions.setFocusedTable(t.id)) }}>
+            color="#1770c7" onClick={()=>{ dispatch(dfActions.setFocusedTable(t.id)) }}>
             <Typography sx={{fontWeight: t.id == focusedTableId? "bold" : "inherit", fontSize: 'inherit'}} component='span'>{t.id}</Typography>
         </Link>;
 

src/views/EncodingBox.tsx

@@ -594,14 +594,14 @@ export const EncodingBox: FC<EncodingBoxProps> = function EncodingBox({ channel,
         }}
         freeSolo
         renderInput={(params) => (
-            <TextField {...params} variant="standard" autoComplete='off' 
+            <TextField {...params} variant="standard" autoComplete='off' placeholder='field or concept'
                 sx={{height: "24px", "& .MuiInput-root": {height: "24px", fontSize: "small"}}} />
         )}
     />
 
     const filter = createFilterOptions<string>();
     // when there is no field added, allow users to directly type concepts here, and it will be created on the fly.
-    let encContent = field == undefined ? 
+    const encContent = field == undefined ? 
         (encoding.aggregate == 'count' ? [ aggregateDisplay ] : [
             normalizedDisplay,
             aggregateDisplay,

src/views/EncodingShelfCard.tsx

@@ -208,7 +208,7 @@ export const EncodingShelfCard: FC<EncodingShelfCardProps> = function ({ chartId
         .map(([group, channelList]) => {
 
             let component = <Box>
-                <Typography key={`encoding-group-${group}`} sx={{ fontSize: 10, color: "darkgray", marginTop: "6px", marginBottom: "2px" }}>{group}</Typography>
+                <Typography key={`encoding-group-${group}`} sx={{ fontSize: 10, color: "text.secondary", marginTop: "6px", marginBottom: "2px" }}>{group}</Typography>
                 {channelList.filter(channel => Object.keys(encodingMap).includes(channel))
                     .map(channel => <EncodingBox key={`shelf-${channel}`} channel={channel as Channel} chartId={chartId} />)}
             </Box>
@@ -538,30 +538,36 @@ export const EncodingShelfCard: FC<EncodingShelfCardProps> = function ({ chartId
         <Box sx={{ width: "100%", minWidth: "210px", height: '100%', display: "flex", flexDirection: "column" }}>
             <Box key='mark-selector-box' sx={{ flex: '0 0 auto' }}>
                 <FormControl sx={{ m: 1, minWidth: 120, width: "100%", margin: "0px 0"}} size="small">
+                    <InputLabel 
+                        id="chart-mark-select-label"
+                        sx={{
+                            color: "text.secondary",
+                            transform: "none",
+                            fontSize: "10px",
+                            margin: "-2px 0px 0px 4px",
+                        }}
+                    >Chart Type</InputLabel>
                     <Select
                         variant="standard"
                         labelId="chart-mark-select-label"
                         id="chart-mark-select"
                         value={chart.chartType}
-                        label="Visualization Type"
+                        title="Chart Type"
                         renderValue={(value: string) => {
                             const t = getChartTemplate(value);
                             return (
-                                <Box>
-                                    {/* <InputLabel shrink id="chart-mark-select-label">Visualization Type</InputLabel> */}
-                                    <MenuItem sx={{padding: "0px 0px 0px 4px"}}>
-                                        <ListItemIcon sx={{minWidth: "24px"}}>
-                                            {typeof t?.icon == 'string' ? <img height="24px" width="24px" src={t?.icon} alt="" role="presentation" /> : t?.icon}
-                                            </ListItemIcon>
-                                        <ListItemText sx={{marginLeft: "2px", whiteSpace: "initial"}} primaryTypographyProps={{fontSize: '12px'}}>{t?.chart}</ListItemText>
-                                    </MenuItem>
-                                </Box>
+                                <div style={{display: 'flex', padding: "0px 0px 0px 4px"}}>
+                                    <ListItemIcon sx={{minWidth: "24px"}}>
+                                        {typeof t?.icon == 'string' ? <img height="24px" width="24px" src={t?.icon} alt="" role="presentation" /> : t?.icon}
+                                        </ListItemIcon>
+                                    <ListItemText sx={{marginLeft: "2px", whiteSpace: "initial"}} primaryTypographyProps={{fontSize: '12px'}}>{t?.chart}</ListItemText>
+                                </div>
                             )
                         }}
                         onChange={(event) => { handleUpdateChartType(event.target.value) }}>
                         {Object.entries(CHART_TEMPLATES).map(([group, templates]) => {
                             return [
-                                <ListSubheader sx={{ color: "darkgray", lineHeight: 2, fontSize: 12 }} key={group}>{group}</ListSubheader>,
+                                <ListSubheader sx={{ color: "text.secondary", lineHeight: 2, fontSize: 12 }} key={group}>{group}</ListSubheader>,
                                 ...templates.map((t, i) => (
                                     <MenuItem sx={{ fontSize: 12, paddingLeft: 3, paddingRight: 3 }} value={t.chart} key={`${group}-${i}`}>
                                         <ListItemIcon>