Feature: add custom alt tag to "HeaderImage"

[JoshuaHungDinh]

Resolves # GIVE-568

Description

This introduces a new setting that allows users to include custom alt tag information for the HeaderImage setting. This is done by passing attachment.alt to the onChange handler inside the media-library component. If no alt tag information is available the alt tag will use the form title as a fallback.

The media-library component will assign an empty string if the information is not filled out, so a Nullish coalescing operator (??) was added to the formSettings and the Logical OR (||) was used in the HeaderTemplate to ensure the form title properly renders as a fallback.

Affects

HeaderImage
FormSettings

Visuals

alt-tag-test.mov

Testing Instructions

• Create a v3 form
• Add a an image for the Header, while selecting an image on the right of the media uploader you should see an input to add alt tag information. Assign custom alt tag text.
• Right click HeaderImage in design preview to open up the console and view the img tag, you should see the alt property is assigned your custom text. Also verify on the frontend page.
• Go back to the builder and remove the alt tag information.
• View the element in the console for both design preview & on the frontend. Verify that the alt tag has been replaced by the form title.

Pre-review Checklist

• Acceptance criteria satisfied and marked in related issue
• Relevant @unreleased tags included in DocBlocks
• Includes unit tests
• Reviewed by the designer (if follows a design)
• Self Review of code and UX completed

[kjohnson]

@JoshuaHungDinh could you add a test to FormSettings for the fallback value?

[kjohnson]

This could be simplified to a shorthand ternary (?:). That is, if the array key exists but is an empty string or null (otherwise you'll get undefined index notice).

[kjohnson]

Note that the shorthand ternary behaves differently that the null coalescing operator (??).

[JoshuaHungDinh]

Good to know next time. I seem to have had mixed the FormSettings and the HeaderTemplate conditionals. The Nullish coalescing operator in fact does work for the FormSettings. At the time of testing I did not have the proper conditional in the template & had mixed the two up. c73d199

Unless Im mistaken I couldn't find FormSetting Tests but I would be happy to make them for the fallbacks. Maybe in a new PR?

[kjohnson]

While I often suggest moving additional work in a separate PR, in the case of a test I think it would be important to add it as a part of the PR. I see that the class does not have a test yet,so if you'd like to jump on a pairing session I'd be happy to work together on adding the test.

[JoshuaHungDinh]

Hey @kjohnson , I wanted to let you know that I saw this. I was thinking we could connect on Friday, if you're available?

[kjohnson]

@JoshuaHungDinh I dropped the ball here and meant to follow-up on Friday. My apologies. To get you unblocked I'll add my review for this PR and then we can setup a test for it.

[JoshuaHungDinh]

That sounds great. No worries, same here. It's just Fun-Friday work. No real expectation on a timeline for this. Thank you!

[rickalday]

Passed manual QA tests.