Enable jsx-a11y eslint rules (#2232)

## Summary: This work is part of the implementation of [ADR#781 Enabling more lint rules for accessibility](https://khanacademy.atlassian.net/wiki/x/IoBVyg) These changes include: - Updating `@khanacademy/eslint-config` to the latest version to include new jsx-a11y configuration and settings - Updating `esling-plugin-jsx-a11y` to the latest version so it is up to date - Addressed existing errors by adding `eslint-disable-next-line` - View the PR commits for a breakdown of errors by rule - Used `npx [email protected] .` to disable lint errors per rule - Provided custom component mapping for jsx-a11y in the eslint config since Perseus has custom components New potential a11y issues can be prevented with these lint rules and existing errors can be addressed over time by the team! The lint error messages have a link to the [rule docs](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/main/docs/rules) for more details! A breakdown of the existing jsx-a11y errors: <img width="1019" alt="perseus-linting-errors-before" src="https://github.com/user-attachments/assets/8191e551-4147-43cb-bbcf-79b0e5684c26" /> ### Implementation Plan: - Khan/wonder-stuff#1114 Set up eslint a11y config and enable aphrodite-add-style-variable-name - Use this new config in WB, perseus, webapp and address lint errors from the aphrodite-add-style-variable-name rule - Khan/wonder-blocks#2459 - #2193 - Khan/webapp#29212 - Khan/wonder-stuff#1118 Update the eslint-config/a11y config with the config based on the accessibility linting rules ADR - (includes this PR) Use the updated config in projects and address existing errors by disabling the rules per line. Issue: FEI-1133 ## Test plan: - Run `yarn lint` and make sure there are no linting errors Author: beaesguerra Reviewers: catandthemachines, beaesguerra, #frontend-infra-web Required Reviewers: Approved By: catandthemachines Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x) Pull Request URL: #2232
Khan · Feb 13, 2025 · dc99898 · dc99898
1 parent 3ec6ec1
commit dc99898
Show file tree

Hide file tree

Showing 34 changed files with 783 additions and 60 deletions.
diff --git a/.changeset/four-pans-sneeze.md b/.changeset/four-pans-sneeze.md
@@ -0,0 +1,7 @@
+---
+"@khanacademy/math-input": patch
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+Tooling: Enabled jsx-a11y lint rules and disabled existing errors that were found
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -101,6 +101,19 @@ module.exports = {
         react: {
             version: "detect",
         },
+        "jsx-a11y": {
+            // Map perseus components to their corresponding DOM elements. This
+            // helps eslint-plugin-jsx-a11y understand what the underlying
+            // elements are. For more details, see
+            // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y?tab=readme-ov-file#component-mapping
+            components: {
+                NumericInput: "input",
+                ScrolllessNumberTextField: "input",
+                BlurInput: "input",
+                TextInput: "input",
+                NumberInput: "input",
+            },
+        },
     },
     env: {
         "cypress/globals": true,

diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
         "@cypress/code-coverage": "^3.12.24",
         "@cypress/react": "^8.0.0",
         "@jest/globals": "^29.7.0",
-        "@khanacademy/eslint-config": "^5.1.0",
+        "@khanacademy/eslint-config": "^5.2.0",
         "@khanacademy/eslint-plugin": "^3.1.1",
         "@khanacademy/mathjax-renderer": "^2.1.1",
         "@khanacademy/wonder-blocks-button": "7.1.1",
@@ -84,7 +84,7 @@
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-jest": "28.9.0",
         "eslint-plugin-jsdoc": "^48.2.1",
-        "eslint-plugin-jsx-a11y": "^6.7.1",
+        "eslint-plugin-jsx-a11y": "^6.10.2",
         "eslint-plugin-monorepo": "^0.3.2",
         "eslint-plugin-prettier": "^5.1.3",
         "eslint-plugin-promise": "^6.1.1",

diff --git a/packages/math-input/src/components/input/math-input.tsx b/packages/math-input/src/components/input/math-input.tsx
@@ -992,9 +992,11 @@ class MathInput extends React.Component<Props, State> {
                     >
                         {/* NOTE(charlie): This is used purely to namespace the styles in
                 overrides.css. */}
+                        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- TODO(LEMS-2871): Address a11y error */}
                         <div
                             className="keypad-input"
                             // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
+                            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- TODO(LEMS-2871): Address a11y error
                             tabIndex={"0"}
                             ref={(node) => {
                                 this.inputRef = node;

diff --git a/packages/math-input/src/fake-react-native-web/view.tsx b/packages/math-input/src/fake-react-native-web/view.tsx
@@ -70,6 +70,7 @@ class View extends React.Component<Props> {
             (this.props.extraClassName ? ` ${this.props.extraClassName}` : "");
 
         return (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- TODO(LEMS-2871): Address a11y error
             <div
                 className={className}
                 style={this.props.dynamicStyle}

diff --git a/packages/perseus-editor/src/components/graph-settings.tsx b/packages/perseus-editor/src/components/graph-settings.tsx
@@ -554,6 +554,7 @@ class GraphSettings extends React.Component<Props, State> {
                             </div>
                         )}
                         <div className="perseus-widget-row">
+                            {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- TODO(LEMS-2871): Address a11y error */}
                             <label>Markings: </label>
                             <ButtonGroup
                                 value={this.props.markings}

diff --git a/packages/perseus-editor/src/components/sortable.tsx b/packages/perseus-editor/src/components/sortable.tsx
@@ -207,6 +207,7 @@ class SortableItem extends React.Component<ItemProps> {
         }
 
         return (
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- TODO(LEMS-2871): Address a11y error
             <li
                 draggable={this.props.draggable}
                 className={[dragState, css(styles.sortableListItem)].join(" ")}

diff --git a/packages/perseus-editor/src/diffs/text-diff.tsx b/packages/perseus-editor/src/diffs/text-diff.tsx
@@ -169,6 +169,7 @@ class TextDiff extends React.Component<any, any> {
                 </div>
                 {_.map([BEFORE, AFTER], (side, index) => {
                     return (
+                        // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- TODO(LEMS-2871): Address a11y error
                         <div
                             className={className + " " + side}
                             key={index}

diff --git a/packages/perseus-editor/src/diffs/widget-diff.tsx b/packages/perseus-editor/src/diffs/widget-diff.tsx
@@ -65,6 +65,7 @@ class CollapsedRow extends React.Component<any> {
     render(): React.ReactNode {
         const self = this;
         return (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- TODO(LEMS-2871): Address a11y error
             <div onClick={self.props.onClick} style={{clear: "both"}}>
                 {_.map([BEFORE, AFTER], function (side) {
                     return (

diff --git a/packages/perseus-editor/src/widgets/cs-program-editor.tsx b/packages/perseus-editor/src/widgets/cs-program-editor.tsx
@@ -239,6 +239,7 @@ class CSProgramEditor extends React.Component<any> {
                     }}
                 />
                 <br />
+                {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- TODO(LEMS-2871): Address a11y error */}
                 <label>
                     Settings:
                     <PairsEditor

diff --git a/packages/perseus-editor/src/widgets/grapher-editor.tsx b/packages/perseus-editor/src/widgets/grapher-editor.tsx
@@ -134,6 +134,7 @@ class GrapherEditor extends React.Component<Props> {
                     onChange={this.change("graph")}
                 />
                 <div className="perseus-widget-row">
+                    {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- TODO(LEMS-2871): Address a11y error */}
                     <label>Available functions: </label>
                     <MultiButtonGroup
                         allowEmpty={false}

diff --git a/packages/perseus-editor/src/widgets/iframe-editor.tsx b/packages/perseus-editor/src/widgets/iframe-editor.tsx
@@ -156,6 +156,7 @@ class IframeEditor extends React.Component<IframeEditorProps> {
                     />
                 </label>
                 <br />
+                {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- TODO(LEMS-2871): Address a11y error */}
                 <label>
                     Settings:
                     <PairsEditor

diff --git a/packages/perseus-editor/src/widgets/image-editor.tsx b/packages/perseus-editor/src/widgets/image-editor.tsx
@@ -259,8 +259,10 @@ class ImageEditor extends React.Component<Props> {
             <div className="image-settings">
                 {!Util.isLabeledSVG(backgroundImage.url) && (
                     <div>
+                        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- TODO(LEMS-2871): Address a11y error */}
                         <label>
                             <div>Preview:</div>
+                            {/* eslint-disable-next-line jsx-a11y/img-redundant-alt -- TODO(LEMS-2871): Address a11y error */}
                             <img
                                 alt="Editor preview of image"
                                 src={backgroundImage.url}
@@ -281,6 +283,7 @@ class ImageEditor extends React.Component<Props> {
                 </div>
 
                 <div>
+                    {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- TODO(LEMS-2871): Address a11y error */}
                     <label>
                         <div>
                             Alt text:
@@ -303,6 +306,7 @@ class ImageEditor extends React.Component<Props> {
                     </label>
                 </div>
                 <div>
+                    {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- TODO(LEMS-2871): Address a11y error */}
                     <label>
                         <div>Caption:</div>
                         <Editor

diff --git a/packages/perseus-editor/src/widgets/label-image/answer-choices.tsx b/packages/perseus-editor/src/widgets/label-image/answer-choices.tsx
@@ -90,6 +90,7 @@ const DraggableGripIcon = () => (
  * A button link to add a new answer.
  */
 const AddAnswer = ({onClick}: AddAnswerProps): React.ReactElement => (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events, jsx-a11y/anchor-is-valid -- TODO(LEMS-2871): Address a11y error
     <Link
         className={css(styles.addAnswer, editorStyles.addAnswer)}
         onClick={onClick}
@@ -111,6 +112,7 @@ const Answer = ({
     onRemove,
 }: AnswerProps): React.ReactElement => (
     <li className={css(styles.answer)}>
+        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events, jsx-a11y/anchor-is-valid -- TODO(LEMS-2871): Address a11y error, TODO(LEMS-2871): Address a11y error */}
         <Link onClick={onRemove}>
             <Icon icon={removeIcon} size={24} color="#D92916" />
         </Link>
@@ -125,6 +127,7 @@ const Answer = ({
 
         <div className={css(styles.spacer)} />
 
+        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid -- TODO(LEMS-2871): Address a11y error */}
         <Link
             style={[styles.disabled]}
             title="Answer reordering is not implemented."

diff --git a/packages/perseus-editor/src/widgets/label-image/question-markers.tsx b/packages/perseus-editor/src/widgets/label-image/question-markers.tsx
@@ -103,6 +103,7 @@ export default class QuestionMarkers extends React.Component<Props> {
                             maxHeight: imageHeight,
                         }}
                     >
+                        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- TODO(LEMS-2871): Address a11y error */}
                         <img
                             alt=""
                             className={css(styles.image)}

diff --git a/packages/perseus-editor/src/widgets/numeric-input-editor.tsx b/packages/perseus-editor/src/widgets/numeric-input-editor.tsx
@@ -351,6 +351,7 @@ class NumericInputEditor extends React.Component<Props, State> {
         const suggestedAnswerTypes = (i: any) => (
             <>
                 <div className="perseus-widget-row">
+                    {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- TODO(LEMS-2871): Address a11y error */}
                     <label>Possible answer formats&ensp;</label>
                     <InfoTip>
                         <p>
@@ -482,6 +483,7 @@ class NumericInputEditor extends React.Component<Props, State> {
         const labelText = (
             <>
                 <div className="perseus-widget-row">
+                    {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- TODO(LEMS-2871): Address a11y error */}
                     <label>Aria label</label>
                     <InfoTip>
                         <p>
@@ -588,6 +590,7 @@ class NumericInputEditor extends React.Component<Props, State> {
                                     (answer.maxError ? " with-max-error" : "")
                                 }
                             >
+                                {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- TODO(LEMS-2871): Address a11y error */}
                                 <label>User input:</label>
                                 <NumberInput
                                     value={answer.value}

diff --git a/packages/perseus/src/components/__tests__/zoomable.test.tsx b/packages/perseus/src/components/__tests__/zoomable.test.tsx
@@ -250,6 +250,7 @@ describe("Zoomable", () => {
         const onClickHandler = jest.fn();
         renderAndWaitToSettle(
             <Zoomable>
+                {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- TODO(LEMS-2871): Address a11y error */}
                 <span onClick={onClickHandler}>Some zoomable text</span>
             </Zoomable>,
         );
@@ -274,6 +275,7 @@ describe("Zoomable", () => {
         const onClickHandler = jest.fn();
         rerender(
             <Zoomable>
+                {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- TODO(LEMS-2871): Address a11y error */}
                 <span onClick={onClickHandler}>Some zoomable text</span>
             </Zoomable>,
         );

diff --git a/packages/perseus/src/components/graph.tsx b/packages/perseus/src/components/graph.tsx
@@ -415,15 +415,18 @@ class Graph extends React.Component<Props> {
         }
 
         return (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- TODO(LEMS-2871): Address a11y error
             <div
                 className="graphie-container blank-background"
                 style={{
                     width: this.props.box[0],
                     height: this.props.box[1],
                 }}
                 // @ts-expect-error - TS2339 - Property 'onMouseOut' does not exist on type 'Graph'.
+                // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events -- TODO(LEMS-2871): Address a11y error
                 onMouseOut={this.onMouseOut}
                 // @ts-expect-error - TS2339 - Property 'onMouseOver' does not exist on type 'Graph'.
+                // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events -- TODO(LEMS-2871): Address a11y error
                 onMouseOver={this.onMouseOver}
                 // @ts-expect-error - TS2339 - Property 'onClick' does not exist on type 'Graph'.
                 onClick={this.onClick}

diff --git a/packages/perseus/src/components/highlighting/ui/highlight-tooltip.tsx b/packages/perseus/src/components/highlighting/ui/highlight-tooltip.tsx
@@ -94,6 +94,7 @@ class HighlightTooltip extends React.PureComponent<Props> {
         // TooltipContent wouldn't let me overwrite
         // user-select and onClick
         const content: any = (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- TODO(LEMS-2871): Address a11y error
             <div
                 className={css(styles.tooltipLabel)}
                 onClick={this.props.onClick}
@@ -111,6 +112,7 @@ class HighlightTooltip extends React.PureComponent<Props> {
         } as const;
 
         return (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- TODO(LEMS-2871): Address a11y error
             <div
                 style={style}
                 onMouseEnter={this.props.onMouseEnter}

diff --git a/packages/perseus/src/components/image-loader.tsx b/packages/perseus/src/components/image-loader.tsx
@@ -143,7 +143,9 @@ class ImageLoader extends React.Component<Props, State> {
         const staticUrl = getDependencies().staticUrl;
 
         return (
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- TODO(LEMS-2871): Address a11y error
             <img
+                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- TODO(LEMS-2871): Address a11y error
                 tabIndex={0}
                 src={staticUrl(src)}
                 onKeyUp={onKeyUp}

diff --git a/packages/perseus/src/components/math-input.tsx b/packages/perseus/src/components/math-input.tsx
@@ -310,6 +310,7 @@ class InnerMathInput extends React.Component<InnerProps, State> {
                     this.props.hasError && styles.wrapperError,
                 ]}
             >
+                {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- TODO(LEMS-2871): Address a11y error */}
                 <div
                     style={{
                         display: "flex",
@@ -330,6 +331,7 @@ class InnerMathInput extends React.Component<InnerProps, State> {
                         });
                     }}
                 >
+                    {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- TODO(LEMS-2871): Address a11y error */}
                     <span
                         className={className}
                         ref={(ref) => (this.__mathFieldWrapperRef = ref)}

diff --git a/packages/perseus/src/components/sortable.tsx b/packages/perseus/src/components/sortable.tsx
@@ -377,6 +377,7 @@ class Draggable extends React.Component<DraggableProps, DraggableState> {
             style.margin = this.props.margin;
         }
         return (
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- TODO(LEMS-2871): Address a11y error
             <li
                 className={className}
                 style={style}

diff --git a/packages/perseus/src/components/zoomable.tsx b/packages/perseus/src/components/zoomable.tsx
@@ -306,6 +306,7 @@ class Zoomable extends React.Component<Props, State> {
         } as const;
 
         return (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- TODO(LEMS-2871): Address a11y error
             <span
                 onClick={this.handleClick}
                 onClickCapture={this.handleClickIfZoomed}

diff --git a/packages/perseus/src/perseus-api.tsx b/packages/perseus/src/perseus-api.tsx
@@ -147,6 +147,7 @@ export const ApiOptions = {
             Link: (
                 props: any,
             ): React.ReactElement<React.ComponentProps<"a">> => {
+                // eslint-disable-next-line jsx-a11y/anchor-has-content -- TODO(LEMS-2871): Address a11y error
                 return <a {...props} />;
             },
         },

diff --git a/packages/perseus/src/widgets/categorizer/categorizer.tsx b/packages/perseus/src/widgets/categorizer/categorizer.tsx
@@ -147,6 +147,7 @@ export class Categorizer
                                                 }
                                                 key={catNum}
                                             >
+                                                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus -- TODO(LEMS-2871): Address a11y error */}
                                                 <div
                                                     role="button"
                                                     aria-label={catName}

diff --git a/packages/perseus/src/widgets/cs-program/cs-program.tsx b/packages/perseus/src/widgets/cs-program/cs-program.tsx
@@ -172,6 +172,7 @@ class CSProgram extends React.Component<Props> implements Widget {
                     styleContainer && styles.container,
                 )}
             >
+                {/* eslint-disable-next-line jsx-a11y/iframe-has-title -- TODO(LEMS-2871): Address a11y error */}
                 <iframe
                     sandbox={sandboxOptions}
                     src={url}

diff --git a/packages/perseus/src/widgets/expression/expression.tsx b/packages/perseus/src/widgets/expression/expression.tsx
@@ -347,6 +347,7 @@ export class Expression
                         {this.props.visibleLabel}
                     </LabelSmall>
                 )}
+                {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- TODO(LEMS-2871): Address a11y error */}
                 <div
                     className={className}
                     onBlur={() =>

diff --git a/packages/perseus/src/widgets/iframe/iframe.tsx b/packages/perseus/src/widgets/iframe/iframe.tsx
@@ -156,6 +156,7 @@ class Iframe extends React.Component<Props> implements Widget {
         //  creator "went wild".
         // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
         return (
+            // eslint-disable-next-line jsx-a11y/iframe-has-title -- TODO(LEMS-2871): Address a11y error
             <iframe
                 sandbox={sandboxProperties}
                 style={style}

diff --git a/packages/perseus/src/widgets/mock-widgets/mock-widget.tsx b/packages/perseus/src/widgets/mock-widgets/mock-widget.tsx
@@ -101,6 +101,7 @@ class MockWidgetComponent extends React.Component<Props> implements Widget {
     render(): React.ReactNode {
         return (
             <View style={styles.widgetContainer}>
+                {/* eslint-disable-next-line jsx-a11y/no-redundant-roles -- TODO(LEMS-2871): Address a11y error */}
                 <TextField
                     ref={(ref) => (this.inputRef = ref)}
                     aria-label="Mock Widget"

diff --git a/packages/perseus/src/widgets/orderer/orderer.tsx b/packages/perseus/src/widgets/orderer/orderer.tsx
@@ -272,6 +272,7 @@ class Card extends React.Component<CardProps, CardState> {
         const onMouseDown = this.props.animating ? $.noop : this.onMouseDown;
 
         return (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- TODO(LEMS-2871): Address a11y error
             <div
                 className={"card-wrap"}
                 style={style}

diff --git a/packages/perseus/src/widgets/python-program/python-program.tsx b/packages/perseus/src/widgets/python-program/python-program.tsx
@@ -67,6 +67,7 @@ class PythonProgram extends React.Component<Props> implements Widget {
         // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
         return (
             <View style={styles.container}>
+                {/* eslint-disable-next-line jsx-a11y/iframe-has-title -- TODO(LEMS-2871): Address a11y error */}
                 <iframe
                     sandbox={sandboxOptions}
                     src={url}

diff --git a/packages/perseus/src/widgets/radio/base-radio.tsx b/packages/perseus/src/widgets/radio/base-radio.tsx
@@ -376,6 +376,7 @@ const BaseRadio = function ({
                     // somehow break something happening inside a choice's
                     // child Renderers, by changing when we mount/unmount?
                     return (
+                        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions -- TODO(LEMS-2871): Address a11y error
                         <li
                             key={i}
                             ref={(e) => (listElem = e)}

diff --git a/packages/perseus/src/widgets/video/video.tsx b/packages/perseus/src/widgets/video/video.tsx
@@ -97,6 +97,7 @@ class Video extends React.Component<Props> implements Widget {
                         {this.context.strings.videoWrapper}
                     </View>
 
+                    {/* eslint-disable-next-line jsx-a11y/iframe-has-title -- TODO(LEMS-2871): Address a11y error */}
                     <iframe
                         // TODO(joshuan): Consider not using iframes when we're
                         // loading this from webapp. This iframe is problematic
-Original file line number
+Diff line change
@@ Expand Up / @@ -239,6 +239,7 @@ class CSProgramEditor extends React.Component<any> { @@
                         }}
                     />
                     <br />
+                    {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- TODO(LEMS-2871): Address a11y error */}
                     <label>
                         Settings:
                         <PairsEditor
@@ Expand Down @@