Select Valid ID Form

[Ishfaq-code]

Summary

Adds the "Select Valid ID Form" along with the ability to click elements on the preview for interactions.

Key Changes

• Addition of SelectValidIDForm.js
• New save function in FixIssuesPage.js which uses both the activeIssue and the current activeContentItem to save
• ClickableInfo in FixIssuesPage.js to keep track of what is being clicked
• TempActiveContentItem to keep track of clicking and changes to DOM

Testing

1. To test make a new page on Canvas with elements with aria attributes. Use attributes that use IDs from other elements. Create other elements on the page as well. Give the attributes invalid ID to trigger the form. An example would be:

<p id="paragraph-about-fruits">Fruits are nature&rsquo;s sweet and nutritious gifts, offering a wide range of flavors, colors, and health benefits. They are rich in essential vitamins, minerals, and fiber, which help support overall well-being and protect the body against various diseases. From the crisp freshness of apples to the tropical sweetness of mangoes, fruits provide a natural source of energy and hydration. Many fruits also contain powerful antioxidants that boost the immune system and promote healthy skin. Whether eaten fresh, blended into smoothies, or used in cooking, fruits are a delicious and versatile part of a balanced diet.</p>
<div id="Fruits-clickable-id" aria-describedby="paragraph-about-fruits">Fruits</div>
<div aria-describedby="dkgsjsagjasgsadjsagdjasgjasgjsagvh" aria-controls="wekehbkbkbsadjkbaajsb">Vegtables</div>
<div>Stone</div> 

The form should behave as the following:

• Select multiple elements for an attribute
• Switch between which attribute to select for
• Remove attributes from the form
• Save it using new save function

[dmols]

Form works well, great work! I only spotted a few things that may need tweaking so that it's ready for merge:

• I'd probably change "Use Attribute" to "Restore Attribute" as it did remove it entirely, and that sounds a little more fitting. Also not entirely sold on the gray, but it probably needs a bit more contrast between the button and the form instructions background.

• Nitpick but is it possible to not have the divider for these, where it's the last one in the list? It looks kind of odd before the OR divider.

• It seems like when the issue is fixed, the form cannot grab what the error used to be. Is there a way we can make it so it retains this information? That way, if a user decides to change some IDs back, they can go back to this form to do so.

- We should also remove the description above the "Please select an ... " as other forms don't have any text above the form instructions (at least in the same box). You could potentially just change "Please select an attribute you want to add IDs to" to "Select an attribute below and click an element on the preview screen to link to" or something along those lines. There's probably a better way to condense that.