Aria-Complementary-Label-Visible Form - Final

[Ishfaq-code]

Summary

This PR adds a new form for dealing with the issue ruleset: aria_complementary_label_visible which requires clickable elements. This allows for the preview on the right of the form to be now interactable.

Key Changes

A new state variable previewInfo is being passed by the parent component FixIssuesPage.js to FixIssuesContentPreview.js and UfixitWidget.js which allows it to be used by the preview element + the form. This is the main input for this form and form is checked for errors and saved using this variable

A new state variable copiedContentItem is being passed down from the parent component FixIssuesPage.js to FixIssuesContentPreview.js where it is being used to keep track of newly added IDs to elements that are NOT the activeIssue element. The handleIssueSave() function now checks this variable and priortizes the html stored in it before saving.

Also check the following functions in FixIssuesContentPreview.js for in-depth understanding of how the functionalities work:

• addIdToElementInHtml(htmlString, xpath, generatedId)
• removeIdToElementInHtml(htmlString, xpath, id)
• handlePreviewValues = (newId, selectedFlag = false)
• handleClickablePreview = (e)

Functionalities

When this form is now active we can click on any elements on the right EXCEPT the element pointed to by the activeIssue.

The following behaviour is expected:

• When clicking on an element with an already EXISTING ID, it is highlighted and the ID is saved in previewInfo for later saving

• When clicking on an element with a NON-EXISTING ID, it:

  • First Generates the ID
  • Attaches the ID to the element and updates the page
  • Save a copy of the updated html in copiedContentItem for later saving

• When clicking on an already selected element, it is deselected with all IDs reset to correct values

• When clicking on an already selected element with a custom generated ID, the ID is removed and then deselected

• Clicking anywhere else on the preview container deselects everything and resets everything

Testing

To test this form:

• Make a new canvas content item (page works best)
• Edit it's html
• Add all elements you need and add an an elements with a complementary role with an aria-label attribute OR an aside element with an aria-label attribute.