Merge pull request #60 from microsoft/eslint-jsxa11y

danmarshall · web-flow · commit a7b02df9002a · 2025-02-05T14:21:03.000-08:00
Eslint
diff --git a/eslint.config.js b/eslint.config.js
@@ -2,7 +2,7 @@ import globals from "globals";
 import pluginJs from "@eslint/js";
 import tseslint from "typescript-eslint";
 import pluginReact from "eslint-plugin-react";
-
+import jsxA11y from "eslint-plugin-jsx-a11y";
 
 /** @type {import('eslint').Linter.Config[]} */
 export default [
@@ -18,6 +18,9 @@ export default [
   ...tseslint.configs.recommended,
   pluginReact.configs.flat.recommended,
   {
+    plugins: {
+      'jsx-a11y': jsxA11y,
+    },
     rules: {
       "@typescript-eslint/ban-ts-comment": "off",
       "@typescript-eslint/no-non-null-asserted-optional-chain": "off",
@@ -27,11 +30,9 @@ export default [
       "@typescript-eslint/no-unused-vars": "off",
       "no-empty-pattern": "off",
       "no-empty": "off",
-      "no-var": "off",
       "no-unsafe-optional-chaining": "off",
       "no-useless-escape": "off",
       "prefer-const": "off",
-      "react/jsx-key": "off",
       "react/no-unescaped-entities": "off",
     }
   }
diff --git a/package.json b/package.json
@@ -76,6 +76,7 @@
         "@typescript-eslint/parser": "^8.16.0",
         "@vitejs/plugin-react-swc": "^3.7.0",
         "eslint": "^9.15.0",
+        "eslint-plugin-jsx-a11y": "^6.10.2",
         "eslint-plugin-react": "^7.37.2",
         "globals": "^15.12.0",
         "sass": "^1.77.6",
diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -124,8 +124,8 @@ export const ExportStateButton: React.FC<{}> = ({}) => {
     return <Tooltip title="save session locally">
         <Button variant="text" onClick={()=>{
             function download(content: string, fileName: string, contentType: string) {
-                    var a = document.createElement("a");
-                    var file = new Blob([content], {type: contentType});
+                    let a = document.createElement("a");
+                    let file = new Blob([content], {type: contentType});
                     a.href = URL.createObjectURL(file);
                     a.download = fileName;
                     a.click();
diff --git a/src/data/utils.ts b/src/data/utils.ts
@@ -139,7 +139,7 @@ export function tupleEqual(a: any[], b: any[]) {
     if (a === b) return true;
     if (a == null || b == null) return false;
     if (a.length !== b.length) return false;
-    for (var i = 0; i < a.length; ++i) {
+    for (let i = 0; i < a.length; ++i) {
         if (a[i] !== b[i]) return false;
     }
     return true;
diff --git a/src/views/ConceptCard.tsx b/src/views/ConceptCard.tsx
@@ -622,6 +622,7 @@ export const DerivedConceptForm: FC<ConceptFormProps> = function DerivedConceptF
                             console.log(conceptShelfItems.find(f => f.id == conceptID)?.source)
                             let chipColor = conceptShelfItems.find(f => f.id == conceptID)?.source == "original" ? theme.palette.primary.light : theme.palette.custom.main;
                             return <Chip 
+                                key={conceptID}
                                 variant="outlined" size="small" 
                                 // color={}
                                 sx={{ 
diff --git a/src/views/ConceptShelf.tsx b/src/views/ConceptShelf.tsx
@@ -142,7 +142,9 @@ export const ConceptShelf: FC<ConceptShelfProps> = function ConceptShelf() {
                         <OperatorCard operator="bin" />
                     </Box>
                     {groupNames.map(gp => [
-                        <Box sx={{display: "block", width: "100%"}}>
+                        <Box 
+                            key={`concept-group-${gp}`}
+                            sx={{display: "block", width: "100%"}}>
                             <Divider orientation="horizontal" textAlign="left"><Typography component="h2" sx={{fontSize: "10px"}} color="text.secondary">
                                 {gp}
                             </Typography></Divider>
diff --git a/src/views/DataThread.tsx b/src/views/DataThread.tsx
@@ -217,7 +217,9 @@ let SingleThreadView: FC<{
 
         return [
             regularTableBox,
-            <Box sx={{display: 'flex', flexDirection: 'row'}}>
+            <Box 
+                key={`table-${tableId}`}
+                sx={{display: 'flex', flexDirection: 'row'}}>
                 <div style={{minWidth: '1px', padding: '0px', width: '17px',  flex: 'none', display: 'flex'
                             //borderLeft: '1px dashed darkgray',
                             }}>
@@ -381,11 +383,11 @@ export const DataThread: FC<{}> = function ({ }) {
             assembledChart = (({ data, ...o }) => o)(assembledChart);
 
             let getRandom = (seed: number) => {
-                var x = Math.sin(seed++) * 10000;
+                let x = Math.sin(seed++) * 10000;
                 return x - Math.floor(x);
             }
             let getRandomSubarray = (arr: any[], size: number) => {
-                var shuffled = arr.slice(0), i = arr.length, temp, index;
+                let shuffled = arr.slice(0), i = arr.length, temp, index;
                 while (i--) {
                     index = Math.floor((i + 1) * getRandom(233 * i + 888));
                     temp = shuffled[index];
@@ -456,7 +458,9 @@ export const DataThread: FC<{}> = function ({ }) {
         {leafTables.map((lt, i) => {
             let usedTableIds = leafTables.slice(0, i)
                 .map(x => [x.id, ...getTriggers(x, tables).map(y => y.tableId) || []]).flat();
-            return <SingleThreadView  scrollRef={scrollRef} threadIdx={i} leafTable={lt} chartElements={chartElements} usedTableIds={usedTableIds} />
+            return <SingleThreadView
+                key={`thread-${lt.id}`}
+                scrollRef={scrollRef} threadIdx={i} leafTable={lt} chartElements={chartElements} usedTableIds={usedTableIds} />
         })}
     </Box>
 
diff --git a/src/views/EncodingShelfCard.tsx b/src/views/EncodingShelfCard.tsx
@@ -99,7 +99,9 @@ export const TriggerCard: FC<{className?: string, trigger: Trigger, hideFields?:
             .map(([channel, encoding], index) => {
                 let field = fieldItems.find(f => f.id == encoding.fieldID) as FieldItem;
                 return [index > 0 ? '⨉' : '', 
-                        <Chip sx={{color:'inherit', maxWidth: '110px', marginLeft: "2px", height: 18, fontSize: 12, borderRadius: '4px', 
+                        <Chip 
+                            key={`trigger-${channel}-${field.id}`}
+                            sx={{color:'inherit', maxWidth: '110px', marginLeft: "2px", height: 18, fontSize: 12, borderRadius: '4px', 
                                    border: '1px solid rgb(250 235 215)', background: 'rgb(250 235 215 / 70%)',
                                    '& .MuiChip-label': { paddingLeft: '6px', paddingRight: '6px' }}} 
                               label={`${field.name}`} />]
@@ -157,7 +159,9 @@ export const MiniTriggerCard: FC<{className?: string, trigger: Trigger, hideFiel
             .map(([channel, encoding], index) => {
                 let field = fieldItems.find(f => f.id == encoding.fieldID) as FieldItem;
                 return [index > 0 ? '⨉' : '', 
-                        <Chip sx={{color:'inherit', maxWidth: '110px', marginLeft: "2px", height: 16, fontSize: 'inherit', borderRadius: '4px', 
+                        <Chip 
+                            key={`trigger-${channel}-${field.id}`}
+                            sx={{color:'inherit', maxWidth: '110px', marginLeft: "2px", height: 16, fontSize: 'inherit', borderRadius: '4px', 
                                    border: '1px solid rgb(250 235 215)', background: 'rgb(250 235 215 / 70%)',
                                    '& .MuiChip-label': { paddingLeft: '6px', paddingRight: '6px' }}} 
                               label={`${field.name}`} />]
diff --git a/src/views/EncodingShelfThread.tsx b/src/views/EncodingShelfThread.tsx
@@ -90,11 +90,11 @@ export let ChartElementFC: FC<{chart: Chart, tableRows: any[], boxWidth?: number
         assembledChart = (({ data, ...o }) => o)(assembledChart);
 
         let getRandom = (seed: number) => {
-            var x = Math.sin(seed++) * 10000;
+            let x = Math.sin(seed++) * 10000;
             return x - Math.floor(x);
         }
         let getRandomSubarray = (arr: any[], size: number) => {
-            var shuffled = arr.slice(0), i = arr.length, temp, index;
+            let shuffled = arr.slice(0), i = arr.length, temp, index;
             while (i--) {
                 index = Math.floor((i + 1) * getRandom(233 * i + 888));
                 temp = shuffled[index];
@@ -404,7 +404,9 @@ export const EncodingShelfThread: FC<EncodingShelfThreadProps> = function ({ cha
     }
 
     //let triggers = currentTable.derive.triggers;
-    let tableList = activeTableThread.map((tableId) => <div className="table-list-item">
+    let tableList = activeTableThread.map((tableId) => <div
+        key={tableId}
+        className="table-list-item">
         <Button variant="text" sx={{textTransform: 'none', padding: 0, minWidth: 0}} onClick={() => { dispatch(dfActions.setFocusedTable(tableId)) }}>
             <Stack direction="row" sx={{fontSize: '12px'}} alignItems="center" gap={"2px"}>
                 <TableRowsIcon fontSize="inherit" />
@@ -416,7 +418,9 @@ export const EncodingShelfThread: FC<EncodingShelfThreadProps> = function ({ cha
     </div>);
 
     let tableCards = activeTableThread.map((tableId) => 
-        <Card variant='outlined' sx={{padding: '2px 0 2px 0'}}>
+        <Card 
+            key={tableId}
+            variant='outlined' sx={{padding: '2px 0 2px 0'}}>
             <Button variant="text" sx={{textTransform: 'none', padding: 0, marginLeft: 1, minWidth: 0}} onClick={() => { dispatch(dfActions.setFocusedTable(tableId)) }}>
                 <Stack direction="row" sx={{fontSize: '12px'}} alignItems="center" gap={"2px"}>
                     <TableRowsIcon fontSize="inherit" />
@@ -439,7 +443,9 @@ export const EncodingShelfThread: FC<EncodingShelfThreadProps> = function ({ cha
         let currentActiveFields = new Set(extractActiveFields(trigger))
         let fieldsIdentical = _.isEqual(previousActiveFields, currentActiveFields)
 
-        return  <Box sx={{padding: 0, display: 'flex'}}>
+        return  <Box 
+                    key={trigger.tableId}
+                    sx={{padding: 0, display: 'flex'}}>
                     {/* <SouthIcon sx={{fontSize: "inherit", margin: 'auto 4px'}} /> */}
                     <Box sx={{minWidth: '1px', padding: '0px', width: '17px',  flex: 'none', display: 'flex', flexDirection: 'column'
                               //borderLeft: '1px dashed darkgray',
@@ -501,7 +507,9 @@ export const EncodingShelfThread: FC<EncodingShelfThreadProps> = function ({ cha
         let postInstructEndPoint = activeTableThread.findIndex(s => s == activeThreadChart.tableRef);
         postInstruction = <Collapse orientation="vertical" in={true} sx={{width: "100%"}}>
                 <Box  sx={{padding: '4px 0px', display: 'flex', flexDirection: "column" }}>
-                    {interleaveArrays([<Box sx={{width: '17px', height: '12px'}}>
+                    {interleaveArrays([<Box
+                        key="post-instruction"
+                        sx={{width: '17px', height: '12px'}}>
                             <Box sx={{padding:0, width: '1px', margin:'auto', height: '100%',
                                                     backgroundImage: 'linear-gradient(180deg, darkgray, darkgray 75%, transparent 75%, transparent 100%)',
                                                     backgroundSize: '1px 6px, 3px 100%'}}></Box>
@@ -531,7 +539,9 @@ export const EncodingShelfThread: FC<EncodingShelfThreadProps> = function ({ cha
                 </Typography>
             </Box> */}
              {[   
-                <Box sx={{display: 'flex'}}> 
+                <Box
+                    key="encoding-shelf" 
+                    sx={{display: 'flex'}}> 
                     {previousInstructions}
                 </Box>,
                 // <Box sx={{padding: '4px 0px', background: 'aliceblue', margin: 'auto', width: '200px', height: '6px', paddingBottom: 0.5}}></Box>
diff --git a/src/views/InfoPanel.tsx b/src/views/InfoPanel.tsx
@@ -73,7 +73,6 @@ export const InfoPanelFC: FC<{ $tableRef: React.RefObject<AgGridReact | Selectab
         return {
             id: `simple-tab-${index}`,
             'aria-controls': `simple-tabpanel-${index}`,
-            key: `simple-tab-${index}`
         };
     }
 
@@ -89,7 +88,9 @@ export const InfoPanelFC: FC<{ $tableRef: React.RefObject<AgGridReact | Selectab
                 <IconButton color="primary" sx={{ borderRadius: 0 }} onClick={() => { setHidePanel(!hidePanel) }}>{hidePanel ? <UnfoldMoreIcon /> : <UnfoldLessIcon />}</IconButton>
                 <Tabs value={Math.abs(tabValue)} >
                     {tabEntries.map((entry, index) => (
-                        <Tab  className={entry.highlight && index != tabValue ? "background-highlight" : ''} 
+                        <Tab
+                            key={`simple-tab-${index}`}
+                            className={entry.highlight && index != tabValue ? "background-highlight" : ''} 
                             onClick={(event) => { handleTabSwitch(event, index) }} label={entry.label} {...a11yProps(index)} 
                             sx={{ "&.MuiTab-root": { "textTransform": "none" } }} />))}
                 </Tabs>
diff --git a/src/views/SelectableDataGrid.tsx b/src/views/SelectableDataGrid.tsx
@@ -87,7 +87,9 @@ const SelectableCell = createSelectable<SelectableCellProps>((props: TSelectable
                 match.length > 0 && matchIndex > -1 ? (
                     [
                         `${value}`.substring(0, matchIndex),
-                        <span className="bold">{match}</span>,
+                        <span 
+                            key={`match-${indices[0]}-${indices[1]}`}
+                            className="bold">{match}</span>,
                         `${value}`.substring(matchIndex + match.length)
                     ]
                 ) : (value)
diff --git a/src/views/TableSelectionView.tsx b/src/views/TableSelectionView.tsx
@@ -136,7 +136,9 @@ export const TableSelectionView: React.FC<TableSelectionViewProps> = function Ta
                 {challengeView}
             </Paper>
 
-            return  <TabPanel value={value} index={i} >
+            return  <TabPanel 
+                        key={i}
+                        value={value} index={i} >
                         {content}
                         <Box width="100%" sx={{display: "flex"}}>
                             <Typography sx={{fontSize: 10, color: "text.secondary"}}>{Object.keys(t.rows[0]).length} columns{hideRowNum ? "" : ` ⨉ ${t.rows.length} rows`}</Typography>
diff --git a/src/views/VisualizationView.tsx b/src/views/VisualizationView.tsx
@@ -546,7 +546,7 @@ export const ChartEditorFC: FC<{  cachedCandidates: DictTable[],
             }}>{codeExpl}</MuiMarkdown>
 
     let focusedComponent = [];
-    if (Boolean(candidatesViewAnchorEl)) {
+    if (candidatesViewAnchorEl) {
         focusedComponent = [
             //chartActionItems,
             <Box key="derived-dialog" sx={{ margin: "16px", display: "flex", flexDirection: "column", flex: "1", justifyContent: 'flex-start'}}>
@@ -663,7 +663,9 @@ export const ChartEditorFC: FC<{  cachedCandidates: DictTable[],
         </Box>,
         // <EncodingShelf key='encoding-shelf' synthesisRunning={synthesisRunning} chartId={chart.id} 
         //                handleUpdateCandidates={handleUpdateCandidates} handleSetSynthesisStatus={handleSetSynthesisStatus} />
-        <Collapse collapsedSize={48} in={!collapseEditor} orientation='horizontal' 
+        <Collapse 
+            key='encoding-shelf'
+            collapsedSize={48} in={!collapseEditor} orientation='horizontal' 
             sx={{position: 'relative'}}>
             <Box sx={{display: 'flex', flexDirection: 'row', height: '100%'}}>
                 <Tooltip placement="left" title={collapseEditor ? "open editor" : "hide editor"}>
@@ -675,7 +677,6 @@ export const ChartEditorFC: FC<{  cachedCandidates: DictTable[],
                 <EncodingShelfThread key='encoding-shelf' chartId={focusedChart.id} />
             </Box>
         </Collapse>,
-        
     ]
 
     let [scaleMin, scaleMax] = [0.2, 2.4]
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -139,7 +139,7 @@ export function tupleEqual(a: any[], b: any[]) {`
`139`	`139`	`if (a === b) return true;`
`140`	`140`	`if (a == null \|\| b == null) return false;`
`141`	`141`	`if (a.length !== b.length) return false;`
`142`		`- for (var i = 0; i < a.length; ++i) {`
	`142`	`+ for (let i = 0; i < a.length; ++i) {`
`143`	`143`	`if (a[i] !== b[i]) return false;`
`144`	`144`	`}`
`145`	`145`	`return true;`