Extend initial a11y config for eslint (#2459)

## 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 includes: - Updated dev dependency: `@khanacademy/eslint-config` - Extending `@khanacademy/eslint-config/a11y` config in project's eslint config - Currently, the a11y config enables the `aphrodite-add-style-variable-name` rule from `@khanacademy/eslint-plugin`. This is the first step to adding more a11y linting rules so that the naming convention for html elements is more predictable for [custom component mapping](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#component-mapping) for `eslint-plugin-jsx-a11y` (see [rule docs](https://github.com/Khan/wonder-stuff/blob/main/packages/eslint-plugin-khan/docs/aphrodite-add-style-variable-name.md) for more details). - `@khanacademy/eslint-config/a11y` will be updated in another PR to include config for `eslint-plugin-jsx-a11y` - Addressing lint errors from the aphrodite-add-style-variable-name rule Issue: FEI-6050 Implementation Plan: - Khan/wonder-stuff#1114 Set up eslint a11y config and enable aphrodite-add-style-variable-name - (includes this PR) Use this new config in WB, perseus, webapp and address lint errors from the aphrodite-add-style-variable-name rule - Update the a11y.js config with the config based on the accessibility linting rules ADR - Use the updated config in projects and address existing errors by disabling the rules per line. Teams can address existing errors as they work in the area and new errors can be prevented with these lint rules! ## Test plan: - Run `pnpm lint` and make sure there are no linting errors. - Some variables were renamed internally, there should be no functional changes Author: beaesguerra Reviewers: jandrade Required Reviewers: Approved By: jandrade Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Chromatic - Build and test on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ⏭️ dependabot Pull Request URL: #2459
Khan · Feb 6, 2025 · 969864b · 969864b
1 parent bb2a026
commit 969864b
Show file tree

Hide file tree

Showing 17 changed files with 66 additions and 50 deletions.
diff --git a/.changeset/chatty-parents-swim.md b/.changeset/chatty-parents-swim.md
@@ -0,0 +1,15 @@
+---
+"@khanacademy/wonder-blocks-breadcrumbs": patch
+"@khanacademy/wonder-blocks-icon-button": patch
+"@khanacademy/wonder-blocks-accordion": patch
+"@khanacademy/wonder-blocks-clickable": patch
+"@khanacademy/wonder-blocks-dropdown": patch
+"@khanacademy/wonder-blocks-popover": patch
+"@khanacademy/wonder-blocks-button": patch
+"@khanacademy/wonder-blocks-core": patch
+"@khanacademy/wonder-blocks-form": patch
+"@khanacademy/wonder-blocks-icon": patch
+"@khanacademy/wonder-blocks-link": patch
+---
+
+Update internal addStyle variable name to address aphrodite-add-style-variable-name linting rule
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -2,6 +2,7 @@
 module.exports = {
     extends: [
         "@khanacademy",
+        "@khanacademy/eslint-config/a11y",
         // This config includes rules from @testing-library/jest-dom as well
         "plugin:testing-library/react",
         // This config includes rules from storybook to enforce story best

diff --git a/__docs__/components/token-table.tsx b/__docs__/components/token-table.tsx
@@ -5,9 +5,9 @@ import {addStyle} from "@khanacademy/wonder-blocks-core";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 
 const StyledTable = addStyle("table");
-const StyledTableRow = addStyle("tr");
-const StyledTableHeader = addStyle("th");
-const StyledTableCell = addStyle("td");
+const StyledTr = addStyle("tr");
+const StyledTh = addStyle("th");
+const StyledTd = addStyle("td");
 
 type Column<T> = {
     // The label to display in the table header.
@@ -44,26 +44,26 @@ export default function TokenTable<T>({
     return (
         <StyledTable style={styles.table}>
             <thead>
-                <StyledTableRow style={styles.header}>
+                <StyledTr style={styles.header}>
                     {columns.map((column, i) => (
-                        <StyledTableHeader key={i} style={styles.cell}>
+                        <StyledTh key={i} style={styles.cell}>
                             {column.label}
-                        </StyledTableHeader>
+                        </StyledTh>
                     ))}
-                </StyledTableRow>
+                </StyledTr>
             </thead>
             <tbody>
                 {data.map((row: any, idx) => (
-                    <StyledTableRow key={idx} style={styles.row}>
+                    <StyledTr key={idx} style={styles.row}>
                         {columns.map((column, i) => (
-                            <StyledTableCell key={i} style={styles.cell}>
+                            <StyledTd key={i} style={styles.cell}>
                                 {/* We pass the value directly or via the result of a function call. */}
                                 {typeof column.cell === "string"
                                     ? row[column.cell]
                                     : column.cell(row)}
-                            </StyledTableCell>
+                            </StyledTd>
                         ))}
-                    </StyledTableRow>
+                    </StyledTr>
                 ))}
             </tbody>
         </StyledTable>

diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "@babel/preset-typescript": "^7.24.1",
     "@changesets/cli": "^2.27.12",
     "@jest/globals": "^29.7.0",
-    "@khanacademy/eslint-config": "^5.0.1",
+    "@khanacademy/eslint-config": "^5.1.0",
     "@khanacademy/eslint-plugin": "^3.1.1",
     "@khanacademy/wonder-stuff-testing": "^3.0.5",
     "@rollup/plugin-babel": "^6.0.4",

diff --git a/packages/wonder-blocks-accordion/src/components/accordion.tsx b/packages/wonder-blocks-accordion/src/components/accordion.tsx
@@ -6,7 +6,7 @@ import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
 
 import AccordionSection from "./accordion-section";
 
-const StyledUnorderedList = addStyle("ul");
+const StyledUl = addStyle("ul");
 
 export type AccordionCornerKindType =
     | "square"
@@ -231,7 +231,7 @@ const Accordion = React.forwardRef(function Accordion(
     };
 
     return (
-        <StyledUnorderedList
+        <StyledUl
             style={[styles.wrapper, style]}
             onKeyDown={handleKeyDown}
             {...ariaProps}
@@ -278,7 +278,7 @@ const Accordion = React.forwardRef(function Accordion(
                     </li>
                 );
             })}
-        </StyledUnorderedList>
+        </StyledUl>
     );
 });
 

diff --git a/packages/wonder-blocks-breadcrumbs/src/components/breadcrumbs-item.tsx b/packages/wonder-blocks-breadcrumbs/src/components/breadcrumbs-item.tsx
@@ -23,7 +23,7 @@ type Props = AriaProps & {
     testId?: string;
 };
 
-const StyledListItem = addStyle("li");
+const StyledLi = addStyle("li");
 const StyledSvg = addStyle("svg");
 
 /**
@@ -54,15 +54,15 @@ const BreadcrumbsItem = React.forwardRef(function BreadcrumbsItem(
     };
 
     return (
-        <StyledListItem
+        <StyledLi
             {...otherProps}
             style={styles.item}
             data-testid={testId}
             ref={ref}
         >
             {children}
             {showSeparator && _renderSeparator()}
-        </StyledListItem>
+        </StyledLi>
     );
 });
 

diff --git a/packages/wonder-blocks-breadcrumbs/src/components/breadcrumbs.tsx b/packages/wonder-blocks-breadcrumbs/src/components/breadcrumbs.tsx
@@ -24,7 +24,7 @@ type Props = AriaProps & {
     testId?: string;
 };
 
-const StyledList = addStyle("ol");
+const StyledOl = addStyle("ol");
 
 /**
  * A breadcrumb trail consists of a list of links to the parent pages
@@ -85,7 +85,7 @@ const Breadcrumbs = React.forwardRef(function Breadcrumbs(
             data-testid={testId}
             ref={ref}
         >
-            <StyledList style={styles.container}>
+            <StyledOl style={styles.container}>
                 {React.Children.map(children, (item, index) => {
                     const isLastChild = index === lastChildIndex;
 
@@ -95,7 +95,7 @@ const Breadcrumbs = React.forwardRef(function Breadcrumbs(
                         ["aria-current"]: isLastChild ? "page" : undefined,
                     });
                 })}
-            </StyledList>
+            </StyledOl>
         </nav>
     );
 });

diff --git a/packages/wonder-blocks-button/src/components/button-core.tsx b/packages/wonder-blocks-button/src/components/button-core.tsx
@@ -23,7 +23,7 @@ import {ButtonIcon} from "./button-icon";
 
 type Props = SharedProps & ChildrenProps & ClickableState;
 
-const StyledAnchor = addStyle("a");
+const StyledA = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
 
@@ -205,13 +205,13 @@ const ButtonCore: React.ForwardRefExoticComponent<
                     {contents}
                 </StyledLink>
             ) : (
-                <StyledAnchor
+                <StyledA
                     {...commonProps}
                     href={href}
                     ref={ref as React.Ref<HTMLAnchorElement>}
                 >
                     {contents}
-                </StyledAnchor>
+                </StyledA>
             );
         } else {
             return (

diff --git a/packages/wonder-blocks-clickable/src/components/clickable.tsx b/packages/wonder-blocks-clickable/src/components/clickable.tsx
@@ -169,7 +169,7 @@ type Props =
           target?: never;
       });
 
-const StyledAnchor = addStyle("a");
+const StyledA = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
 
@@ -241,7 +241,7 @@ const Clickable = React.forwardRef(function Clickable(
             );
         } else if (activeHref && !useClient) {
             return (
-                <StyledAnchor
+                <StyledA
                     {...commonProps}
                     href={props.href}
                     role={props.role}
@@ -250,7 +250,7 @@ const Clickable = React.forwardRef(function Clickable(
                     ref={ref as React.Ref<HTMLAnchorElement>}
                 >
                     {props.children(clickableState)}
-                </StyledAnchor>
+                </StyledA>
             );
         } else {
             return (

diff --git a/packages/wonder-blocks-core/src/util/add-styles.typestest.tsx b/packages/wonder-blocks-core/src/util/add-styles.typestest.tsx
@@ -12,10 +12,10 @@ const styles = StyleSheet.create({
     },
 });
 
-const StyledList = addStyle("ul", styles.list);
+const StyledUl = addStyle("ul", styles.list);
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const list1 = <StyledList />;
+const list1 = <StyledUl />;
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const list2 = <StyledList style={styles.customList} />;
+const list2 = <StyledUl style={styles.customList} />;
diff --git a/packages/wonder-blocks-dropdown/src/components/option-item.tsx b/packages/wonder-blocks-dropdown/src/components/option-item.tsx
@@ -138,7 +138,7 @@ type DefaultProps = {
     selected: OptionProps["selected"];
 };
 
-const StyledListItem = addStyle("li");
+const StyledLi = addStyle("li");
 
 /**
  * For option items that can be selected in a dropdown, selection denoted either
@@ -272,7 +272,7 @@ export default class OptionItem extends React.Component<OptionProps> {
         // Only used for Combobox component, not SingleSelect/MultiSelect
         if (parentComponent === "listbox") {
             return (
-                <StyledListItem
+                <StyledLi
                     onMouseDown={(e) => {
                         // Prevents the combobox from losing focus when clicking
                         // on the option item.
@@ -292,7 +292,7 @@ export default class OptionItem extends React.Component<OptionProps> {
                     tabIndex={-1}
                 >
                     {this.renderCell()}
-                </StyledListItem>
+                </StyledLi>
             );
         }
 

diff --git a/packages/wonder-blocks-form/src/components/text-area.tsx b/packages/wonder-blocks-form/src/components/text-area.tsx
@@ -185,7 +185,7 @@ type TextAreaProps = AriaProps & {
     resizeType?: "horizontal" | "vertical" | "both" | "none";
 };
 
-const StyledTextArea = addStyle("textarea");
+const StyledTextarea = addStyle("textarea");
 
 const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
     function TextArea(
@@ -259,7 +259,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
 
         return (
             <View style={[{width: "100%"}, rootStyle]}>
-                <StyledTextArea
+                <StyledTextarea
                     id={uniqueId}
                     data-testid={testId}
                     ref={ref}

diff --git a/packages/wonder-blocks-icon-button/src/components/icon-button-core.tsx b/packages/wonder-blocks-icon-button/src/components/icon-button-core.tsx
@@ -82,7 +82,7 @@ type Props = SharedProps & {
     onKeyUp?: (e: React.KeyboardEvent) => unknown;
 };
 
-const StyledAnchor = addStyle("a");
+const StyledA = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
 
@@ -144,13 +144,13 @@ const IconButtonCore: React.ForwardRefExoticComponent<
                     {child}
                 </StyledLink>
             ) : (
-                <StyledAnchor
+                <StyledA
                     {...commonProps}
                     href={href}
                     ref={ref as React.Ref<HTMLAnchorElement>}
                 >
                     {child}
-                </StyledAnchor>
+                </StyledA>
             );
         } else {
             return (

diff --git a/packages/wonder-blocks-icon/src/components/phosphor-icon.tsx b/packages/wonder-blocks-icon/src/components/phosphor-icon.tsx
@@ -8,7 +8,7 @@ import {IconSize, PhosphorIconAsset} from "../types";
 
 // We use a span instead of an img because we want to use the mask-image CSS
 // property.
-const StyledIcon = addStyle("span");
+const StyledSpan = addStyle("span");
 
 type Props = Pick<AriaProps, "aria-hidden" | "aria-label" | "role"> & {
     /**
@@ -99,7 +99,7 @@ export const PhosphorIcon = React.forwardRef(function PhosphorIcon(
     const iconStyles = _generateStyles(color, pixelSize);
 
     return (
-        <StyledIcon
+        <StyledSpan
             {...sharedProps}
             className={classNames}
             style={[

diff --git a/packages/wonder-blocks-link/src/components/link-core.tsx b/packages/wonder-blocks-link/src/components/link-core.tsx
@@ -22,7 +22,7 @@ type Props = SharedProps &
         href: string;
     };
 
-const StyledAnchor = addStyle("a");
+const StyledA = addStyle("a");
 const StyledLink = addStyle(Link);
 
 const LinkCore = React.forwardRef(function LinkCore(
@@ -135,13 +135,13 @@ const LinkCore = React.forwardRef(function LinkCore(
                 {linkContent}
             </StyledLink>
         ) : (
-            <StyledAnchor
+            <StyledA
                 {...commonProps}
                 href={href}
                 ref={ref as React.ForwardedRef<HTMLAnchorElement>}
             >
                 {linkContent}
-            </StyledAnchor>
+            </StyledA>
         );
     };
 

diff --git a/packages/wonder-blocks-popover/src/components/popover-content.tsx b/packages/wonder-blocks-popover/src/components/popover-content.tsx
@@ -92,7 +92,7 @@ type DefaultProps = {
 };
 
 // Created to add custom styles to the icon or image elements
-const StyledImage = addStyle("img");
+const StyledImg = addStyle("img");
 
 /**
  * This is the container that is consumed by all the predefined variations. Its
@@ -177,7 +177,7 @@ export default class PopoverContent extends React.Component<Props> {
                 {typeof icon !== "string" ? (
                     icon
                 ) : (
-                    <StyledImage src={icon} style={styles.icon} />
+                    <StyledImg src={icon} style={styles.icon} />
                 )}
             </View>
         );

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml