Skip to content

Set up WB lint rules in WB#3012

Merged
beaesguerra merged 6 commits intomainfrom
setup-wb-linting
Apr 16, 2026
Merged

Set up WB lint rules in WB#3012
beaesguerra merged 6 commits intomainfrom
setup-wb-linting

Conversation

@beaesguerra
Copy link
Copy Markdown
Member

@beaesguerra beaesguerra commented Apr 15, 2026

Summary:

Enabling the strict config from @khanacademy/eslint-plugin-wonder-blocks in the Wonder Blocks repo!

The strict config currently includes the no-custom-tab-role for now, so we address the lint errors that were detected after enabling the config.

Issue: WB-2308

Test plan:

  1. Confirm lint checks pass

  2. Confirm the wb lint rules can be detected when errors aren't addressed

When running pnpm lint:
Screenshot 2026-04-15 at 5 42 07 PM

In an IDE:
Screenshot 2026-04-15 at 5 41 36 PM

…d navigation to avoid using role=tab as an example. Instead, using role=button with aria-expanded=false, so that we can show that the role and aria attributes can be set.
@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Apr 15, 2026

🦋 Changeset detected

Latest commit: 4bafee2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 15, 2026

Size Change: 0 B

Total Size: 122 kB

ℹ️ View Unchanged
Filename Size
packages/eslint-plugin-wonder-blocks/dist/es/index.js 622 B
packages/wonder-blocks-accordion/dist/es/index.js 3 kB
packages/wonder-blocks-announcer/dist/es/index.js 2.43 kB
packages/wonder-blocks-badge/dist/es/index.js 2.02 kB
packages/wonder-blocks-banner/dist/es/index.js 2.01 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js 1.91 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js 755 B
packages/wonder-blocks-button/dist/es/index.js 4.28 kB
packages/wonder-blocks-card/dist/es/index.js 1.08 kB
packages/wonder-blocks-cell/dist/es/index.js 2.18 kB
packages/wonder-blocks-clickable/dist/es/index.js 2.6 kB
packages/wonder-blocks-core/dist/es/index.js 2.59 kB
packages/wonder-blocks-data/dist/es/index.js 5.48 kB
packages/wonder-blocks-date-picker/dist/es/index.js 8.06 kB
packages/wonder-blocks-dropdown/dist/es/index.js 19.7 kB
packages/wonder-blocks-form/dist/es/index.js 6.3 kB
packages/wonder-blocks-grid/dist/es/index.js 1.24 kB
packages/wonder-blocks-icon-button/dist/es/index.js 4.01 kB
packages/wonder-blocks-icon/dist/es/index.js 1.91 kB
packages/wonder-blocks-labeled-field/dist/es/index.js 3.47 kB
packages/wonder-blocks-layout/dist/es/index.js 1.63 kB
packages/wonder-blocks-link/dist/es/index.js 1.53 kB
packages/wonder-blocks-modal/dist/es/index.js 7.36 kB
packages/wonder-blocks-pill/dist/es/index.js 1.31 kB
packages/wonder-blocks-popover/dist/es/index.js 4.36 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js 1.48 kB
packages/wonder-blocks-search-field/dist/es/index.js 1.1 kB
packages/wonder-blocks-styles/dist/es/index.js 464 B
packages/wonder-blocks-switch/dist/es/index.js 1.55 kB
packages/wonder-blocks-tabs/dist/es/index.js 5.57 kB
packages/wonder-blocks-testing-core/dist/es/index.js 3.25 kB
packages/wonder-blocks-testing/dist/es/index.js 978 B
packages/wonder-blocks-theming/dist/es/index.js 384 B
packages/wonder-blocks-timing/dist/es/index.js 1.37 kB
packages/wonder-blocks-tokens/dist/es/index.js 5.18 kB
packages/wonder-blocks-toolbar/dist/es/index.js 906 B
packages/wonder-blocks-tooltip/dist/es/index.js 6.02 kB
packages/wonder-blocks-typography/dist/es/index.js 1.57 kB

compressed-size-action

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 15, 2026

npm Snapshot: NOT Published

🤕 Oh noes!! We couldn't find any changesets in this PR (c8041f7). As a result, we did not publish an npm snapshot for you.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 15, 2026

A new build was pushed to Chromatic! 🚀

https://5e1bf4b385e3fb0020b7073c-fcnrjkfahp.chromatic.com/

Chromatic results:

Metric Total
Captured snapshots 0
Tests with visual changes 0
Total stories 835
Inherited (not captured) snapshots [TurboSnap] 462
Tests on the build 462

aria-labelledby="tab-1"
style={styles.panel}
<Clickable
role="button"
Copy link
Copy Markdown
Member Author

@beaesguerra beaesguerra Apr 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated the example to use a different role and aria attribute. Based on the docs, I think the intent of this example was to show that Clickable can be interacted with and have aria attributes set! (?path=/docs/packages-clickable-clickable-accessibility--docs)

Comment thread package.json
"@khanacademy/eslint-config": "^5.2.0",
"@khanacademy/eslint-plugin": "^3.1.1",
"@khanacademy/eslint-plugin-wonder-blocks": "workspace:*",
"@khanacademy/eslint-plugin-wonder-blocks": "^0.2.0",
Copy link
Copy Markdown
Member Author

@beaesguerra beaesguerra Apr 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: We use the released version of the package for linting the project, rather than the workspace version! This fixes this error in CI:

> [email protected] lint:ci /home/github/work/wonder-blocks/wonder-blocks
> eslint --ext .ts --ext .js --ext .tsx --ext .jsx "."


Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the plugin "@khanacademy/eslint-plugin-wonder-blocks".

(The package "@khanacademy/eslint-plugin-wonder-blocks" was not found when loaded as a Node module from the directory "/home/github/work/wonder-blocks/wonder-blocks".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

    npm install @khanacademy/eslint-plugin-wonder-blocks@latest --save-dev

The plugin "@khanacademy/eslint-plugin-wonder-blocks" was referenced from the config file in ".eslintrc.js".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

 ELIFECYCLE  Command failed with exit code 2.

https://github.com/Khan/wonder-blocks/actions/runs/24484355505/job/71555787574?pr=3012

This would mean we need to release changes to the eslint plugin first before updating the WB repo to use any new rules!

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting! Why does this work differently than other packages where we import from the workspace? Something to do with the tooling lifecycle? It does seem a little cumbersome to maintain.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's strange because using workspace:* works locally! I will dig into this more and follow up with my findings! I'll land the PR for now so I can get a blog post prepped for the frontend guild meeting later :)

One benefit of having to release the plugin package first before using it in WB packages is that we don't need to address any existing errors as part of lint rule creation work so it'll be easier to break up the work into smaller PRs!

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I figured it out! We needed to build the packages before running the lint check so it would use the built version of the plugin :) Updated here: #3014

@beaesguerra beaesguerra marked this pull request as ready for review April 16, 2026 00:05
@khan-actions-bot khan-actions-bot requested a review from a team April 16, 2026 00:05
@khan-actions-bot
Copy link
Copy Markdown
Contributor

Gerald

Required Reviewers
  • @Khan/wonder-blocks for changes to .eslintrc.js, package.json, pnpm-lock.yaml, .changeset/purple-cars-happen.md, __docs__/wonder-blocks-clickable/accessibility.mdx, __docs__/wonder-blocks-clickable/accessibility.stories.tsx, packages/wonder-blocks-tabs/src/components/tab.tsx, packages/wonder-blocks-button/src/components/__tests__/activity-button.test.tsx, packages/wonder-blocks-button/src/components/__tests__/button.test.tsx, packages/wonder-blocks-tabs/src/components/__tests__/tab-panel.test.tsx, packages/wonder-blocks-tabs/src/components/__tests__/tablist.test.tsx

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

Copy link
Copy Markdown
Member

@marcysutton marcysutton left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for setting this up @beaesguerra! I left one question, but it's non-blocking.

Comment thread package.json
"@khanacademy/eslint-config": "^5.2.0",
"@khanacademy/eslint-plugin": "^3.1.1",
"@khanacademy/eslint-plugin-wonder-blocks": "workspace:*",
"@khanacademy/eslint-plugin-wonder-blocks": "^0.2.0",
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting! Why does this work differently than other packages where we import from the workspace? Something to do with the tooling lifecycle? It does seem a little cumbersome to maintain.

@beaesguerra beaesguerra merged commit 100701a into main Apr 16, 2026
24 of 25 checks passed
@beaesguerra beaesguerra deleted the setup-wb-linting branch April 16, 2026 17:43
@codecov
Copy link
Copy Markdown

codecov bot commented Apr 16, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 0.00%. Comparing base (b5073f1) to head (4bafee2).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@     Coverage Diff      @@
##   main   #3012   +/-   ##
============================
============================

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b5073f1...4bafee2. Read the comment docs.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants