Make the Templates list customized info accessible #42589
Closed
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
afercia
added
[Focus] Accessibility (a11y)
|
Size Change: -2 B (0%) Total Size: 1.26 MB
ℹ️ View Unchanged
|
|
Thanks for working on this, and apologies that it was missed in the original development. This changes the design quite a bit, so I think it'd be good to get some designer feedback. There might be other ways of solving this problem.
I think the original intent here is to show that this template was added by (or included with) the theme, but customized by a user. Because of that I do think 'Added by' makes more sense. Only plugin or theme provided templates can be customized in this way, so there is a strong connection to the Added by column rather than the title / description. An alternative might be something like this: But that's just my developer attempt. It may also be possible to do something that includes the name/avatar of the user, but I think only the details of the first user that customized the template are stored. |
talldan
reviewed
Jul 22, 2022
Comment on lines
+12
to
+17
| template.author && | ||
| template.has_theme_file && | ||
| ( template.origin === 'theme' || | ||
| ( ! template.origin && | ||
| [ 'theme', 'custom' ].includes( template.source ) ) || | ||
| template.origin === 'plugin' ) |
There was a problem hiding this comment.
It's pretty complicated because this combines all the logic into one, and it might be clearer to extract it into separate variables:
// Templates originally didn't have the 'origin' field so identify
// older customized templates by checking for no origin and a 'theme'
// or 'custom' source.
const isAddedByTheme = template.has_theme_file &&
( template.origin === 'theme' ||
( ! template.origin &&
[ 'theme', 'custom' ].includes( template.source ) ) );
const isAddedByPlugin = template.has_theme_file && template.origin === 'plugin';
const isCustomized = template.source === 'custom';
if ( ( isAddedByTheme || isAddedByPlugin ) && isCustomized ) {
|
I wonder how the outcome of #42555 affects things here? IE if we make the 'Clear customizations' action visible, then we may not need the 'has been edited' indicator since that is implied by the existence of the aforementioned button. |
|
Thanks all for your feedback. I'd agree this needs to wait for the outcome of #42555 |
|
I'm going to close this PR in favor of #47841 where I tried to follow the suggestion from #42555 (comment) and group the templates in two separated tables. |
This was referenced Feb 13, 2023
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.
Fixes #42557
What?
In the Templates list, makes the indication of whether a template has been customized accessible to all users.
Why?
The 'blue dot' and tooltip to indicate a template that has been customized by a user are not accessible. The tooltip is only shown on hover, thus isn't accessible to keyboard users and screen reader users. There's no other textual information available. Also, this is a data table. The 'Added by' column should only contain the data type indicated by the column header: who/what added the template. Instead, the 'customized info' is more related to the template state. The first column seems a more appropriate place for this information, as it's more a generic data type about the 'template details' (name, description, and state).
How?
Split the 'customized info' to a separate component that renders visible text in the first column.
There are several conditions in the logic to determine whether a template has been customized by a user. Previously, one of the conditions was based on (no)
imageUrl. I changed it to 'if there is a template author'. The other conditions are unchanged. I'd appreciate some help to check if this is correct. Cc @talldan 🙏Testing Instructions
Screenshots or screencast
Before:
After: