Opened 3 days ago
Last modified 3 days ago
#66004 new defect (bug)
Twenty Twenty: Remove/replace abandoned `stylelint-a11y` dependency
| Reported by: | desrosj | Owned by: | |
|---|---|---|---|
| Priority: | normal | Milestone: | 7.2 |
| Component: | Bundled Theme | Version: | |
| Severity: | normal | Keywords: | has-patch |
| Cc: | Focuses: |
Description
The stylelint-a11y dependency has been abandoned, not receiving an update for over 7 years.
The package is currently incompatible with newer versions of Stylelint and Node.js.
This should be removed or replaced.
Change History (4)
#2
@
3 days ago
It looks like there is a reasonable replacement in @double-great/stylelint-a11y. However, this would need to make use of version 3.4.15 initially because 3.5.0 drops Node.js 20.x support.
As for how this is used within the theme, only 2 rules are utilized:
a11y/no-outline-nonea11y/selector-pseudo-class-focus
Currently, there are no violations of the first, and 2 of the second (though it's actually one true violation within source files):
assets/css/editor-style-block.css 964:1 ✖ Expected that .editor-styles-wrapper .wp-block-button__link:hover, .editor-styles-wrapper .wp-block-file__button:hover is used together with :focus pseudo-class assets/css/editor-style-block-rtl.css 960:1 ✖ Expected that .editor-styles-wrapper .wp-block-button__link:hover, .editor-styles-wrapper .wp-block-file__button:hover is used together with :focus pseudo-class
Twenty Twenty is the only default theme that has this dependency, or as far as I can tell, an equivalent rule. Another option is to fix this one violation and remove this dependency entirely. While not ideal as it removes a level of protection against introducing bad accessibility patterns, the linting is not currently run as part of the current GitHub Actions workflows. So it's dependent on contributors running the lint:css command locally.
This ticket was mentioned in PR #13338 on WordPress/wordpress-develop by @desrosj.
3 days ago
#3
- Keywords has-patch added
The `@double-great/stylelint-a11y` package is a seemingly well maintained fork of the original stylelint-a11y which has not been updated for over 7 years.
This replaces stylelint-a11y with @double-great/stylelint-a11y.
Note: the latest version of the package is not used intentionally. Version 3.5.0 dropped support for Node.js 20.x. After Core is updated to use 24.x, the latest version of @double-great/stylelint-a11y can be used.
Trac ticket: Core-66004.
Pull Requests in this GitHub repository must be linked to a ticket in the WordPress Core Trac instance (https://core.trac.wordpress.org), and are only used for code review. No pull requests will be merged on GitHub.
See the WordPress Handbook page on using PRs for Code Review more information: https://make.wordpress.org/core/handbook/contribute/git/github-pull-requests-for-code-review/
If this is your first time contributing, you may also find reviewing these guides first to be helpful:
- FAQs for New Contributors: https://make.wordpress.org/core/handbook/tutorials/faq-for-new-contributors/
- Contributing with Code Guide: https://make.wordpress.org/core/handbook/contribute/
- WordPress Coding Standards: https://make.wordpress.org/core/handbook/best-practices/coding-standards/
- Inline Documentation Standards: https://make.wordpress.org/core/handbook/best-practices/inline-documentation-standards/
- Browser Support Policies: https://make.wordpress.org/core/handbook/best-practices/browser-support/
- Proper spelling and grammar related best practices: https://make.wordpress.org/core/handbook/best-practices/spelling/
- ✨ If you are using AI tools, you must adhere to the AI Guidelines: https://make.wordpress.org/ai/handbook/ai-guidelines/
-->
Trac ticket: Core-66004.
## Use of AI Tools
Cursor with Composer 2.5 was used to analyze the situation for possible ways to fix this issue.
#4
@
3 days ago
The stylelint-a11y dependency was added in
https://github.com/WordPress/twentytwenty/pull/626
[54687] added the :hover underline for Button and File blocks in the editor. The button-style links are underlined for the :focus state on the front end, but these elements do not receive focus in the editor.
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png)
This is blocking the efforts to update Core from Node.js
20.xto24.xin #65451.