Add a description key to theme.json style variations #45242
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: +46 B (0%) Total Size: 1.4 MB
ℹ️ View Unchanged
|
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
carolinan
commented
Nov 3, 2022
packages/edit-site/src/components/global-styles/screen-style-variations.js
Outdated
Show resolved
Hide resolved
Add aria-describedby
youknowriad
reviewed
Nov 14, 2022
packages/edit-site/src/components/global-styles/screen-style-variations.js
Outdated
Show resolved
Hide resolved
|
I wonder if the description should actually be visible. Maybe some design thoughts would be good on this PR. |
|
@jasmussen Hi! Who can help decide if the style variations in the styles sidebar should have a visible description? |
|
@youknowriad After the WP 6.0 compatibility files were removed, I seem to be unable to re-add "description" as a new top level key in theme.json in either the WP_Theme_JSON_6_1 or WP_Theme_JSON_6_2 classes (I tried both). |
|
I think you need to copy the functions that make use of the updated constants in the 6.2 file or something in that vein. |
|
Descriptions for style variations is not something that's yet been designed for the style variations, and so the UI hasn't been built to scale to them being exposed. Given that the style variation UI is likely going to be very much in flux in the 6.2 phase (see #45371) I'd be concerned about exposing such a description for the small thumbnails. To be clear, I think there's could be a place for it. For example, right now this big thumbnail looks clickable, even if in fact it does nothing:
I could see a design where clicking that surfaces a description as a flyout, perhaps metadata or other items. But it would need a bit of a design iteration. In that vein, I wouldn't visually surface these until we have a better plan for them. |
|
I will wait until #46579 is resolved then. |
This has been resolved. The PR description and testing instructions have also been updated. |
ajlende
approved these changes
May 31, 2023
ramonjd
added a commit
to ramonjd/wordpress-develop
that referenced
this pull request
Jun 25, 2023
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Jun 26, 2023
This changeset adds `description` to `VALID_TOP_LEVEL_KEYS` in `class-wp-theme-json.php` to allow for accessibility improvements. The description is added to the ARIA label of the style variation container. If the style variation has no description, only the title is used. One purpose is to use the text description to improve the style variation preview in the WordPress.org theme directory. See WordPress/gutenberg#45242. Props ramonopoly, poena. Fixes #58614. --Cette ligne, et les suivantes ci-dessous, seront ignorées-- M trunk/src/wp-includes/class-wp-theme-json.php git-svn-id: https://develop.svn.wordpress.org/trunk@56041 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Jun 26, 2023
This changeset adds `description` to `VALID_TOP_LEVEL_KEYS` in `class-wp-theme-json.php` to allow for accessibility improvements. The description is added to the ARIA label of the style variation container. If the style variation has no description, only the title is used. One purpose is to use the text description to improve the style variation preview in the WordPress.org theme directory. See WordPress/gutenberg#45242. Props ramonopoly, poena. Fixes #58614. --Cette ligne, et les suivantes ci-dessous, seront ignorées-- M trunk/src/wp-includes/class-wp-theme-json.php Built from https://develop.svn.wordpress.org/trunk@56041 git-svn-id: http://core.svn.wordpress.org/trunk@55553 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
pushed a commit
to platformsh/wordpress-performance
that referenced
this pull request
Jun 26, 2023
This changeset adds `description` to `VALID_TOP_LEVEL_KEYS` in `class-wp-theme-json.php` to allow for accessibility improvements. The description is added to the ARIA label of the style variation container. If the style variation has no description, only the title is used. One purpose is to use the text description to improve the style variation preview in the WordPress.org theme directory. See WordPress/gutenberg#45242. Props ramonopoly, poena. Fixes #58614. --Cette ligne, et les suivantes ci-dessous, seront ignorées-- M trunk/src/wp-includes/class-wp-theme-json.php Built from https://develop.svn.wordpress.org/trunk@56041 git-svn-id: https://core.svn.wordpress.org/trunk@55553 1a063a9b-81f0-0310-95a4-ce76da25c4cd
bph
added
the
[Feature] Themes
sethrubenstein
pushed a commit
to pewresearch/gutenberg
that referenced
this pull request
Jul 13, 2023
* Add description as a top-level key in theme.json
priethor
added
[Focus] Accessibility (a11y)
|
@carolinan @ajlende @ramonjd what's the status of the new string While reviewing the If the string is displayed to users in any way, we'd need to prepare PRs to update core and i18n-command filse (see example for i18n-command). If it doesn't require translation, we should remove it from the gutenberg's file. This has landed as part of WordPress 6.3, so I don't think there's any urgency to address it for 6.6 (we're in RC), though it'd be good to clarify in the coming days/weeks. |
|
I did not know about the command file. The description is part of the aria-label for the style variations In Editor > Styles and in It is not visible but used to add context for screen reader users. It needs to be translatable. |
In that case, would the process be:
Edit: Prepped a Core PR here: Trac ticket | Core PR I found an example from @oandregal that added the top-level I have a draft PR up here: wp-cli/i18n-command#408 I'm not sure if it's right. |
This was referenced Jul 1, 2024
|
Thanks for the follow-ups. I approved the core PR and the i18n-command PR is also working well for me (I cannot approve/merge there so I pinged the relevant people). |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Closes #44960
Why?
This is intended to be an accessibility improvement. Style variations are mostly visual, and there needs to be a text alternative that describes them.
One purpose is to use the text description to improve the style variation preview in the WordPress.org theme directory.
Testing Instructions
Install the theme Twenty Twenty-Three.
In your code editor, locate and open the Aubergine.json style variation in the themes
stylesfolder.Add the new description key and value as a top-level key in the JSON file:
"description": "Your description here"Activate the theme.
Go to Appearance, Editor.
Activate your screen reader if you haven't already.
In the Navigation Sidebar, select Styles from the menu.
Using the tab key, navigate past the Back button, the Stylebook button, and the Edit Styles button.
Navigate past the first style variation button, which is called Default.
The second button should announce the name "Aubergine" followed by the description you entered.
Next, please test the style variations in the edit mode:
Use the Shift + tab to navigate backward until you reach the Edit Styles button. Activate the button.
Tab forward until you reach the Stylebook button; this button means you have reached the Styles sidebar.
Tab forward past the Style Actions button until you reach Browse Styles. Activate this button.
Navigate past the first style variation button, which is called Default.
The second button should announce the name "Aubergine" followed by the description you entered.
Screenshots or screencast
style-variations-navigation-sidebar.mov