Accessibility issues in admin Font Library

[joedolson]

See note from @afercia on Slack; ​https://wordpress.slack.com/archives/C02RP4X03/p1776614733174009

There are multiple issues that need to be resolved to make this more consistent with other core admin interfaces. The most critical issue is that the main heading needs to be changed to an h1 instead of using an h2; but the header element is inappropriate in this context, as well.

[hbhalodia]

Hi @joedolson @afercia I am creating an upstream issue for the same to fix this. As it should get first fixed in the Gutenberg. I would link the issue here.

[Edit]

Added the issue here - ​https://github.com/WordPress/gutenberg/issues/77481

Thanks,

[hbhalodia]

Hi @joedolson @afercia Raised the PR - ​https://github.com/WordPress/gutenberg/pull/77482 to at least update the heading to level 1 for the release as mentioned on the slack - ​https://wordpress.slack.com/archives/C02RP4X03/p1776614733174009

Thanks,

[wildworks]

The most critical issue is that the main heading needs to be changed to an h1 instead of using an h2;

This has been fixed in ​https://github.com/WordPress/gutenberg/pull/77482

but the header element is inappropriate in this context, as well.

Next, we need to resolve this issue.

[afercia]

Worth noting in 7.0 there's at least one more page that uses this pattern: the new Connectors page at wp-admin/options-connectors.php. At least there's a H1 heading there but the inappropriate usage of the header element and the ARIA landmarks nesting should be fixed there as well.

I'm not sure I understand why these pages use a full white background color. There have been long discussions with a recent attempt to use a full white for the admin pages background (I think in #62831). The prevalent opinion was to not do that. Those changes were reverted. Now I see full white again, which is against any usability, UX, and accessibility best practice I'm aware of. It's a well-known design principle:

• Never use full white.
• Never use full black.

[wildworks]

I'm not sure I understand why these pages use a full white background color. There have been long discussions with a recent attempt to use a full white for the admin pages background (I think in #62831). The prevalent opinion was to not do that. Those changes were reverted. Now I see full white again, which is against any usability, UX, and accessibility best practice I'm aware of. It's a well-known design principle:

It seems there have been some discussions regarding background colors in Gutenberg.

​https://github.com/WordPress/gutenberg/pull/76869

In the latest Gutenberg, the background color appears to be #fcfcfc. @cgastrell, @simison, @jameskoster and @aduth might know something about it.

## Summary

Ticket #65100 reports several accessibility issues in the admin Font Library, and in comment #5 ​@afercia noted that the new Connectors page at wp-admin/options-connectors.php (introduced in 7.0) uses the same pattern and shares those issues — including a pure white body background that is inconsistent with the rest of core admin and against documented accessibility/UX best practice ("Never use full white", comment #5).

Both page-wp-admin.php wrapper files add this inline style:

body {
    background: #fff;
}

This causes the white content cards (.components-item) to blend into the body background and is inconsistent with every other core admin screen, which use #f0f0f1 (defined in src/wp-admin/css/common.css, line 225).

This PR changes that override to #f0f0f1 on both pages so they match the rest of the core admin UI and give the white cards visible contrast with their surroundings — directly addressing the background-color concern from comments #5 and #6 on the ticket.

## Files changed

• src/wp-includes/build/pages/font-library/page-wp-admin.php
• src/wp-includes/build/pages/options-connectors/page-wp-admin.php

Both are single-line changes: background: #fff; → background: #f0f0f1;.

## Not in scope for this PR

The other accessibility items from the ticket are rendered by the Gutenberg @wordpress/admin-ui Page/Header component (compiled into src/wp-includes/build/routes/**), so the fix has to land in Gutenberg and will sync down on the next package update:

• H1 vs H2 heading level — already fixed upstream in ​WordPress/gutenberg#77482.
• Inappropriate <header> landmark on the page title block — comment #4; tracked in ​WordPress/gutenberg#77481.
• ARIA landmarks nesting on the Connectors page — comment #5; same Gutenberg component.

Once those Gutenberg fixes land and the build sync regenerates these files, the background: #f0f0f1; value in this PR is consistent with the plan in comment #6 (latest Gutenberg uses a near-white, not pure white).

## Test plan

• [ ] Load wp-admin/options-connectors.php (Settings → Connectors) and confirm the body background matches the rest of wp-admin (#f0f0f1) and the connector cards visually stand out.
• [ ] Load wp-admin/font-library.php (Appearance → Fonts) and confirm the same.
• [ ] Confirm no visual regression elsewhere on those two screens.
• [ ] Compare side-by-side with wp-admin/options-general.php to confirm consistency.

Props joedolson, afercia, hbhalodia, wildworks.

Made with ​Cursor

[wildworks]

@khokansardar Thanks for working on this. However, as noted in ​this comment, we cannot directly modify this file. The fix needs to be made upstream, in Gutenberg.

The color changes should be approached with caution as they are closely related to the new design system.

Now I see full white again, which is against any usability, UX, and accessibility best practice I'm aware of. It's a well-known design principle:

In the latest version of Gutenberg, '--wpds-color-bg-surface-neutral': '#fcfcfc' is defined as a design token and is used for the page background color. I believe we first need to discuss whether this color should be permitted, considering accessibility and the discussion at #62831.

Let me close this based on https://core.trac.wordpress.org/ticket/65100#comment:8.

[jorbin]

As this needs to be fixed in Gutenberg, I'm removing the has-patch keyword.

[wildworks]

This ticket raises three issues:

1. The main heading needs to be changed to an "h1" instead of using an "h2".
2. The "header" element is inappropriate in this context
3. Avoid using full white for the page background.

The first and second issues have already been fixed upstream and have been backported to 7.0.

​https://github.com/WordPress/gutenberg/pull/78002

The third point will probably also need to be fixed upstream.

Mirror the changes from Gutenberg PR WordPress/gutenberg#78002 (which backports WordPress/gutenberg#77617 and WordPress/gutenberg#78001 to the wp/7.0 branch) into the auto-generated wordpress-develop bundles for the Connectors and Font Library admin screens.

Two of the three accessibility issues raised in the ticket are addressed by this sync:

• Page heading is now an h1 instead of an h2. The bundled Header component's default headingLevel is bumped from 2 to 1, and the now-redundant explicit headingLevel: 1 overrides at the Connectors and Font Library route stages are dropped.
• The inappropriate <header> landmark inside the page's region landmark is removed by dropping the render: <header /> prop on the Stack wrapping the page header, eliminating the nested banner landmark.

The third issue (full-white body background) still needs to land upstream in Gutenberg per the latest comment on the ticket.

Bundles updated for both the readable and minified outputs of:

• src/wp-includes/build/routes/connectors-home/content.js
• src/wp-includes/build/routes/connectors-home/content.min.js
• src/wp-includes/build/routes/font-list/content.js
• src/wp-includes/build/routes/font-list/content.min.js

The version hash in each content.min.asset.php is bumped to the md5 of the new minified bundle so cached browser copies are invalidated; the next official Gutenberg sync will overwrite these with the build pipeline's canonical hashes.

Props joedolson, afercia, hbhalodia, wildworks.
See #65100.

Mirror the changes from Gutenberg PR ​https://github.com/WordPress/gutenberg/pull/78002

This task is not necessary. In the next GB update, the build files in WordPress core will also be updated automatically.

[joedolson]

I think that there's a larger underlying tension that needs to be resolved concerning how to mesh the two designs. The current background isn't preferred - it doesn't match the slightly softer color palette in Gutenberg at #fcfcfc nor does it match the core background at #f0f0f0. But there are other differences as well that should be addressed to better synchronize the two designs, such as the main heading style & the border radius on the content area.

I think that we should consider this ticket to be closed, and open a new ticket for 7.1 to address smoothing out these design differences with accessibility in mind.