custom component settings don't seem to be working?

[jrdn91]

I've followed the setup to get custom components to be recognized and for the aria rules to throw but they aren't working

Here is the config I'm working with

module.exports = {
  extends: ["next", "plugin:jsx-a11y/recommended", "prettier"],
  settings: {
    next: {
      rootDir: ["apps/*/", "packages/*/"],
    },
    "jsx-a11y": {
      components: {
        Box: "div",
      },
    },
  },
  ignorePatterns: ["next.config.js", ".eslintrc.js"],
  plugins: ["jsx-a11y", "simple-import-sort"],
  rules: {
    "no-console": ["error", { allow: ["warn", "error"] }],
    "spaced-comment": "error",
    "simple-import-sort/imports": "warn",
    "@next/next/no-html-link-for-pages": "off",
    "react/jsx-key": "off",
    "@next/next/no-img-element": "off",
  },
}

All the other rules work so I know that eslint is working here

When I attempt to use the Box element from MUI I'm not getting any warnings at all when I for instance have this...

<Box
      tabIndex={0}
      onKeyDown={handleAccessibilityKeyDown}
      onClick={handleNavigateToItemPage}
      sx={{
        backgroundImage: `url(${itemImage})`,
        backgroundSize: "cover",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        height: 300,
        width: 365,
        p: 1.75,
        position: "relative",
        borderRadius: 1,
        flexShrink: 0,
        cursor: "pointer",
      }}
>

But when I change that Box to a div I get the rule warning that a role needs to be added to interactive elements. Am I missing some kind of config or setup here?

[susanhenriquezcp]

I had the same problem! Did you find any solution for this? Thank you!

[jrdn91]

I have not, really hoping someone picks this up and it turns out to be something simple

[ljharb]

That's because they're not released yet - they were added in #844.

Always look at the docs for the version tag you're using, not the ones on main.

[jrdn91]

That's because they're not released yet - they were added in #844.

Always look at the docs for the version tag you're using, not the ones on main.

I see now, that it's been merged, any idea on when we could expect the next version that includes this feature? I will probably install it from the git URL to get this as I would really like to start using this now

[ljharb]

You can't install it from git, because there's a build process.

There's no timeline for releases, but I am hoping soon.

[jrdn91]

Yeah I just looked at that, suppose I could build manually and link it possibly but hopefully the NPM version will see a new build with this feature soon