Feature: add custom alt tag to "HeaderImage"

src/DonationForms/Properties/FormSettings.php

@@ -188,6 +188,12 @@ class FormSettings implements Arrayable, Jsonable
      */
     public $designSettingsImageUrl;
 
+    /**
+     * @unreleased
+     * @var string
+     */
+    public $designSettingsImageAlt;
+
     /**
      * @since 3.4.0
      * @var string
@@ -321,6 +327,7 @@ public static function fromArray(array $array): self
         ) ? $array['pdfSettings'] : [];
 
         $self->designSettingsImageUrl = $array['designSettingsImageUrl'] ?? '';
+        $self->designSettingsImageAlt = $array['designSettingsImageAlt'] ?? $self->formTitle;
         $self->designSettingsImageStyle = ! empty($array['designSettingsImageStyle']) ? new DesignSettingsImageStyle(
             $array['designSettingsImageStyle']
         ) : DesignSettingsImageStyle::BACKGROUND();

src/DonationForms/resources/app/form/Header.tsx

@@ -32,7 +32,7 @@ export default function Header({form}: {form: DonationForm}) {
                     form.settings?.designSettingsImageUrl && (
                         <HeaderImageTemplate
                             url={form.settings?.designSettingsImageUrl}
-                            alt={form.settings?.formTitle}
+                            alt={form.settings?.designSettingsImageAlt || form.settings?.formTitle}
                             color={form.settings?.designSettingsImageColor}
                             opacity={form.settings?.designSettingsImageOpacity}
                         />

src/FormBuilder/resources/js/form-builder/src/components/settings/MediaLibrary/index.tsx

@@ -12,7 +12,7 @@ import './styles.scss';
 type MediaLibrary = {
     id: string;
     value: string;
-    onChange: (url: string) => void;
+    onChange: (url: string, alt: string) => void;
     reset: () => void;
     label: string;
     help?: string;
@@ -44,7 +44,7 @@ export default function MediaLibrary({id, value, onChange, label, help, actionLa
             // Get media attachment details from the frame state
             var attachment = frame.state().get('selection').first().toJSON();
 
-            onChange(attachment.url);
+            onChange(attachment.url, attachment.alt);
         });
 
         // Finally, open the modal on click

src/FormBuilder/resources/js/form-builder/src/settings/design/general-controls/header/index.tsx

@@ -123,16 +123,18 @@ export default function Header({dispatch, publishSettings}) {
                             label={__('Image', 'give')}
                             actionLabel={__('Upload Image', 'give')}
                             value={designSettingsImageUrl}
-                            onChange={(designSettingsImageUrl) => {
+                            onChange={(designSettingsImageUrl, designSettingsImageAlt) => {
                                 dispatch(
                                     setFormSettings({
                                         designSettingsImageUrl,
+                                        designSettingsImageAlt,
                                         designSettingsImageStyle,
                                     })
                                 );
 
                                 publishSettings({
                                     designSettingsImageUrl,
+                                    designSettingsImageAlt,
                                     designSettingsImageStyle,
                                 });
                             }}

src/FormBuilder/resources/js/form-builder/src/types/formSettings.ts

@@ -45,6 +45,7 @@ export type FormSettings = {
     pdfSettings: object;
     designSettingsImageUrl: string;
     designSettingsImageStyle: string;
+    designSettingsImageAlt: string;
     designSettingsLogoUrl: string;
     designSettingsLogoPosition: string;
     designSettingsSectionStyle: string;