Add edit buttons to assessments also when there is no keyphrase or relevant content

[agnieszkaszuba]

Context

• The keyphrase in meta description, keyphrase in slug, and keyphrase in SEO title assessments have recently been made available also when there is no keyphrase and/or no meta description/slug/SEO title. The edit buttons were disabled in these conditions in the first iteration, but in this PR we are making them available.

Summary

This PR can be summarized in the following changelog entry:

• Adds edit buttons next to the keyphrase in meta description, keyphrase in slug, and keyphrase in SEO title assessments when there is no keyphrase and/or no meta description, slug, or SEO title.

Relevant technical choices:

• The editFieldName property of the assessment result is now used instead of the identifier property to determine where the edit button should jump to. The identifier is no longer a reliable way to know which field to jump to, because for the keyphrase in slug, keyphrase in meta description, and keyphrase in SEO title assessments we want it to jump to the keyphrase field when the keyphrase is missing, but to another field when the keyphrase is added.
  • Previously, the value of this property was a translatable string (e.g. __( "slug", "wordpress-seo" )) that was used as a replacement variable in the translation string for the button's aria label. That's not the case anymore.
• A new property, editFieldAriaLabel, was added to the assessment result. This property contains the translation string that should be used for the aria label of the button (e.g. __( "Edit your slug", "wordpress-seo" )). This also makes the string more translatable, compared to the previous approach where we pass the name of the field as a replacement variable to the string (e.g. __( "Edit your %1$s", "wordpress-seo" ))

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

Edit button for the keyphrase length assessment

• Create a new post and don't set a keyphrase
• Confirm that there is an edit button next to the keyphrase length assessment
• Hover over the button and confirm that the label says "Edit your keyphrase"

• Click the button and confirm that it jumps to the focus keyphrase field
• Add a one-word keyphrase and confirm the assessment traffic light turns green and there is no edit button
• Add the keyphrase grain free cat food for senior cats
• Confirm that the assessment traffic light turn orange and that the edit button appears
• Hover over the button and confirm that it says "Edit your keyphrase"
• Click the button and confirm that it jumps to the focus keyphrase field

Edit button for the function words in keyphrase assessment

• Create a new post
• Set the keyphrase to of
• Confirm that the function words in keyphrase assessment appears and that there is an edit button
• Hover over the button and confirm that the label says "Edit your keyphrase"
• Click the button and confirm that it jumps to the focus keyphrase field

Edit button for the meta description length assessment

• Create a new post and don't add a meta description
• Confirm that an edit button appears next to the meta description length assessment feedback
• Hover over the button and confirm that the label says "Edit your meta description"
• Click the button and confirm that it jumps to the meta description field

Edit button for the keyphrase in meta description assessment

• Create a new post and don't add a meta description nor a keyphrase
• Confirm that an edit button appears next to the keyphrase in meta description assessment feedback
• Hover over the button and confirm that the label says "Edit your keyphrase"
• Click the button and confirm that it jumps to the keyphrase field
• Add a meta description
• Confirm that an edit button appears next to the keyphrase in meta description assessment feedback
• Hover over the button and confirm that the label says "Edit your keyphrase"
• Click the button and confirm that it jumps to the keyphrase field
• Delete the meta description and add a keyphrase
• Confirm that an edit button appears next to the keyphrase in meta description assessment feedback
• Hover over the button and confirm that the label says "Edit your meta description"
• Click the button and confirm that it jumps to the meta description field
• Add a meta description that doesn't contain the keyphrase
• Confirm that an edit button appears next to the keyphrase in meta description assessment feedback
• Hover over the button and confirm that the label says "Edit your meta description"
• Click the button and confirm that it jumps to the meta description field

Edit button for the SEO title width assessment

• Create a new post and remove all variables from the SEO title so that it's empty
• Confirm that an edit button appears next to the SEO title width assessment feedback
• Hover over the button and confirm that the label says "Edit your SEO title"
• Click the button and confirm that it jumps to the SEO title field

Edit button for the keyphrase in SEO title assessment

• Create a new post and remove all variables from the SEO title so that it's empty
• Confirm that an edit button appears next to the keyphrase in SEO title assessment feedback
• Hover over the button and confirm that the label says "Edit your keyphrase"
• Click the button and confirm that it jumps to the keyphrase field
• Add an SEO title
• Confirm that an edit button appears next to the keyphrase in SEO title assessment feedback
• Hover over the button and confirm that the label says "Edit your keyphrase"
• Click the button and confirm that it jumps to the keyphrase field
• Remove the SEO title and add a keyphrase
• Confirm that an edit button appears next to the keyphrase in SEO title assessment feedback
• Hover over the button and confirm that the label says "Edit your SEO title"
• Click the button and confirm that it jumps to the SEO title field
• Add an SEO title that doesn't contain the keyphrase
• Confirm that an edit button appears next to the keyphrase in SEO title assessment feedback
• Hover over the button and confirm that the label says "Edit your SEO title"
• Click the button and confirm that it jumps to the SEO title field

Edit button for the keyphrase in slug assessment

• Create a new post and don't add a slug or keyphrase
• Confirm that an edit button appears next to the keyphrase in slug assessment feedback
• Hover over the button and confirm that the label says "Edit your keyphrase"
• Click the button and confirm that it jumps to the keyphrase field
• Add a slug
• Confirm that an edit button appears next to the keyphrase in slug assessment feedback
• Hover over the button and confirm that the label says "Edit your keyphrase"
• Click the button and confirm that it jumps to the keyphrase field
• Remove the slug and add a keyphrase
• Confirm that an edit button appears next to the keyphrase in slug assessment feedback
• Hover over the button and confirm that the label says "Edit your slug"
• Click the button and confirm that it jumps to the slug field
• Add a slug that doesn't contain the keyphrase
• Confirm that an edit button appears next to the keyphrase in slug assessment feedback
• Hover over the button and confirm that the label says "Edit your slug"
• Click the button and confirm that it jumps to the slug field

Relevant test scenarios

• Changes should be tested with the browser console open
• Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
• Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other)
• Changes should be tested on different browsers
• Changes should be tested on multisite

Test instructions for QA when the code is in the RC

• QA should use the same steps as above.

QA can test this PR by following these steps:

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

Other environments

• This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.

Documentation

• I have written documentation for this change. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.

Quality assurance

• I have tested this code to the best of my abilities.
• During testing, I had activated all plugins that Yoast SEO provides integrations for.
• I have added unit tests to verify the code works as intended.
• If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
• I have written this PR in accordance with my team's definition of done.
• I have checked that the base branch is correctly set.

Innovation

• No innovation project is applicable for this PR.
• This PR falls under an innovation project. I have attached the innovation label.
• I have added my hours to the WBSO document.

Fixes https://github.com/Yoast/lingo-other-tasks/issues/558

[coveralls]

Pull Request Test Coverage Report for Build f927edb1341c892e21266c012e585289989d16c4

Details

• 36 of 44 (81.82%) changed or added relevant lines in 10 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+0.03%) to 53.224%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/analysis-report/src/AnalysisList.js	3	4	75.0%
packages/yoastseo/src/values/AssessmentResult.js	7	9	77.78%
packages/js/src/components/contentAnalysis/Results.js	0	5	0.0%

Totals
Change from base Build 1559468c934d22082a1169d4ccf3bb126621465e:	0.03%
Covered Lines:	31758
Relevant Lines:	59914

---

💛 - Coveralls