Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ESLint rule to prevent usage of the order CSS property #61247

Open
afercia opened this issue Apr 30, 2024 · 1 comment
Open

Add ESLint rule to prevent usage of the order CSS property #61247

afercia opened this issue Apr 30, 2024 · 1 comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Code Quality Issues or PRs that relate to code quality

Comments

@afercia
Copy link
Contributor

afercia commented Apr 30, 2024

Description

See #61241

Some components come with CSS in JS.

#61241 and #61243 aim to introduce a stylelint rule to prevent usage of the order CSS property, which is impactful for accessibility.

In the same way, it would be nice to add an ESLint rule to prevent usage of the order CSS property in any *.js file.

Unfortunately this isn't exactly my area of expertise so that I'd appreciate some guidance. I did see a similar rule added in #58130

Step-by-step reproduction instructions

  • Add an order CSS property e.g. order: 1; to any CSS-in-JS for example in this file..
  • Run npm run lint:js.
  • Observe the linter does not report any error.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@afercia afercia added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Code Quality Issues or PRs that relate to code quality labels Apr 30, 2024
@afercia
Copy link
Contributor Author

afercia commented May 2, 2024

I guess the patterns to catch would be, at least, the following ones. With and without leading spaces or tab characters:

order: 123;
    order: 123;

order: 123,
    order: 123,

order: '123',
    order: '123',


'order: 123;'
    'order: 123;'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

No branches or pull requests

1 participant