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.

[dmols]

Changes look great! We probably just need a few more accessibility changes for it to be ready to merge.

• We need a widget on the form that has the role of alert, with inner html that changes based on what element is selected on the right, and which aria attribute we want the element to be. The aria alert would only trigger when we select the element on the preview screen.
• Instructions for the screen reader would be useful for when the user selects any of the form options (aria-controls , aria-describedby). Ideally, it's an assertive aria-live since we want the user to know what to do on the preview screen once they select an option.
• More so for keyboard users, but it'd be a good idea to shift focus to the preview screen as soon as a selection is made on the left. Once you select an item on the right, it should also shift focus the user's attention back to the form, so they can select another form option. This would be more like how we generally perceive the flow.

Let me know if you have any questions!