Make WordPress Core

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)

#1 @desrosj
3 days ago

This is blocking the efforts to update Core from Node.js 20.x to 24.x in #65451.

#2 @desrosj
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-none
  • a11y/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:

-->

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 @sabernhardt
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.

Note: See TracTickets for help on using tickets.