Lint the About page CSS for WordPress 7.1

[afercia]

Trac ticket: https://core.trac.wordpress.org/ticket/65856

The CSS for the WordPress 7.1 About page contains several CSS Coding Standards errors.

This PR aims to fix most of them.

Importtant for accessibility:

At the moment, the about.css file contains two new order CSS properties. They are used for the responsive view at 600 pixels. They should be carefully checked to see if they introduce any accessibility problems.

A list of the errors is available in the attached txt file:

01 about-page-css-errors.txt

What this PR does not fix:

• It does not fix most of the 'Unexpected duplicate selector'. The duplicate selectors come from the structure of the file that is divided into sections. Still, they are unnecessary duplicate.
• 'Unexpected qualifying type selector' e.g. h3.is-larger-heading where the element type selector should not be used. So far, I'm considering this a 'warning' and not a real error although this is explicitly mentioned in the CSS Coding Standards:

Refrain from using over-qualified selectors, div.container can simply be stated as .container.

Use of AI Tools

None

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props afercia, wildworks, mukesh27.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[mukeshpanchal27]

Nice!

[mukeshpanchal27]

Refrain from using over-qualified selectors, div.container can simply be stated as .container.

Not able to see this type of selector change in PR. Did i missed anything?

[t-hamano]

Sorry, the commit 07788a5 was incorrect. I have fixed it in a5c848a.

[t-hamano]

I'd like to commit this as there are only two hours left until the 7.1 RC commit freeze today.

[t-hamano]

Committed: https://core.trac.wordpress.org/changeset/63212

[afercia]

Refrain from using over-qualified selectors, div.container can simply be stated as .container.

Not able to see this type of selector change in PR. Did i missed anything?

Yes, you missed what I mentioned in the section "What this PR does not fix".

[afercia]

For history, these are the errors and warnings left in the about.css file after the linting, based on the experimental Stylelint configuration in the works on #12934
In a future, all of these should be either fixed or get a stylelint-disable{-line}{-next-line} comment with a required disable reason added to the comment.

src/wp-admin/css/about.css
    81:1   ✖  Unexpected duplicate selector ".about__container", first used at line 22                                   no-duplicate-selectors
   146:1   ✖  Unexpected duplicate selector ".about__section", first used at line 111                                    no-duplicate-selectors
   242:1   ✖  Unexpected duplicate selector ".about__section .is-section-header", first used at line 186                 no-duplicate-selectors
   335:3   ✖  Avoid the order property. For accessibility reasons, visual, reading, and DOM order must match. Only use   property-disallowed-list
              the order property when it does not affect reading order, meaning, and interaction.
   339:3   ✖  Avoid the order property. For accessibility reasons, visual, reading, and DOM order must match. Only use   property-disallowed-list
              the order property when it does not affect reading order, meaning, and interaction.
   395:1   ✖  Unexpected duplicate selector ".about__container", first used at line 22                                   no-duplicate-selectors
   406:19  ⚠  Unexpected qualifying type selector "h3.is-larger-heading"                                                 selector-no-qualifying-type
   415:19  ⚠  Unexpected qualifying type selector "h1.is-smaller-heading"                                                selector-no-qualifying-type
   416:19  ⚠  Unexpected qualifying type selector "h2.is-smaller-heading"                                                selector-no-qualifying-type
   425:19  ⚠  Unexpected qualifying type selector "h3.is-smaller-heading"                                                selector-no-qualifying-type
   450:19  ⚠  Unexpected qualifying type selector "p.is-subheading"                                                      selector-no-qualifying-type
   480:17  ⚠  Unexpected qualifying type selector "a.button.button-hero"                                                 selector-no-qualifying-type
   540:19  ⚠  Unexpected qualifying type selector "hr.is-small"                                                          selector-no-qualifying-type
   545:19  ⚠  Unexpected qualifying type selector "hr.is-large"                                                          selector-no-qualifying-type
   549:19  ⚠  Unexpected qualifying type selector "hr.is-invisible"                                                      selector-no-qualifying-type
   553:19  ⚠  Unexpected qualifying type selector "div.updated"                                                          selector-no-qualifying-type
   554:19  ⚠  Unexpected qualifying type selector "div.error"                                                            selector-no-qualifying-type
   563:1   ✖  Unexpected duplicate selector ".about__section", first used at line 111                                    no-duplicate-selectors
   568:1   ✖  Unexpected duplicate selector ".about__section.is-feature", first used at line 200                         no-duplicate-selectors
   584:20  ⚠  Unexpected qualifying type selector "h3.is-larger-heading"                                                 selector-no-qualifying-type
   810:1   ✖  Expected no more than 1 empty line                                                                         @stylistic/max-empty-lines
   926:1   ✖  Expected no more than 1 empty line                                                                         @stylistic/max-empty-lines
   936:1   ✖  Expected no more than 1 empty line                                                                         @stylistic/max-empty-lines
   948:1   ✖  Expected no more than 1 empty line                                                                         @stylistic/max-empty-lines
   968:13  ⚠  Unexpected qualifying type selector "div.updated"                                                          selector-no-qualifying-type
   969:13  ⚠  Unexpected qualifying type selector "div.error"                                                            selector-no-qualifying-type
  1288:13  ⚠  Unexpected qualifying type selector "h2.wp-people-group"                                                   selector-no-qualifying-type
  1347:43  ⚠  Unexpected qualifying type selector "p.wp-credits-list"                                                    selector-no-qualifying-type
  1351:13  ⚠  Unexpected qualifying type selector "p.wp-credits-list"                                                    selector-no-qualifying-type

✖ 29 problems (12 errors, 17 warnings)
  4 errors potentially fixable with the "--fix" option.