Alt text for Images, Banners and Slides for better accessibility and SEO

Author: manavluhar

app/code/Magento/PageBuilder/view/adminhtml/pagebuilder/content_type/banner.xml

@@ -41,6 +41,7 @@
                         <attribute name="virtual_link_href" storage_key="link_url" source="href" converter="Magento_PageBuilder/js/converter/attribute/link-href" persistence_mode="write"/>
                         <attribute name="virtual_link_target" storage_key="link_url" source="target" converter="Magento_PageBuilder/js/converter/attribute/link-target" persistence_mode="write"/>
                         <attribute name="virtual_link_type" storage_key="link_url" source="data-link-type" converter="Magento_PageBuilder/js/converter/attribute/link-type" persistence_mode="write"/>
+                        <attribute name="title_attribute" source="title"/>
                     </element>
                     <element name="empty_link"/>
                     <element name="wrapper">
@@ -64,6 +65,8 @@
                         <attribute name="video_play_only_visible" source="data-video-play-only-visible"/>
                         <attribute name="video_lazy_load" source="data-video-lazy-load"/>
                         <attribute name="video_fallback_image" source="data-video-fallback-src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
+                        <attribute name="alt" source="alt"/>
+                        <attribute name="title_attribute" source="title"/>
                     </element>
                     <element name="overlay">
                         <style name="overlay_color" source="background_color" converter="Magento_PageBuilder/js/content-type/banner/converter/style/overlay-background-color" persistence_mode="write"/>
@@ -126,6 +129,7 @@
                         <attribute name="virtual_link_href" storage_key="link_url" source="href" converter="Magento_PageBuilder/js/converter/attribute/link-href" persistence_mode="write"/>
                         <attribute name="virtual_link_target" storage_key="link_url" source="target" converter="Magento_PageBuilder/js/converter/attribute/link-target" persistence_mode="write"/>
                         <attribute name="virtual_link_type" storage_key="link_url" source="data-link-type" converter="Magento_PageBuilder/js/converter/attribute/link-type" persistence_mode="write"/>
+                        <attribute name="title_attribute" source="title"/>
                     </element>
                     <element name="empty_link"/>
                     <element name="wrapper">
@@ -149,6 +153,8 @@
                         <attribute name="video_play_only_visible" source="data-video-play-only-visible"/>
                         <attribute name="video_lazy_load" source="data-video-lazy-load"/>
                         <attribute name="video_fallback_image" source="data-video-fallback-src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
+                        <attribute name="alt" source="alt"/>
+                        <attribute name="title_attribute" source="title"/>
                     </element>
                     <element name="overlay">
                         <style name="overlay_color" source="background_color" converter="Magento_PageBuilder/js/content-type/banner/converter/style/overlay-background-color" persistence_mode="write"/>
@@ -211,6 +217,7 @@
                         <attribute name="virtual_link_href" storage_key="link_url" source="href" converter="Magento_PageBuilder/js/converter/attribute/link-href" persistence_mode="write"/>
                         <attribute name="virtual_link_target" storage_key="link_url" source="target" converter="Magento_PageBuilder/js/converter/attribute/link-target" persistence_mode="write"/>
                         <attribute name="virtual_link_type" storage_key="link_url" source="data-link-type" converter="Magento_PageBuilder/js/converter/attribute/link-type" persistence_mode="write"/>
+                        <attribute name="title_attribute" source="title"/>
                     </element>
                     <element name="empty_link"/>
                     <element name="wrapper">
@@ -234,6 +241,8 @@
                         <attribute name="video_play_only_visible" source="data-video-play-only-visible"/>
                         <attribute name="video_lazy_load" source="data-video-lazy-load"/>
                         <attribute name="video_fallback_image" source="data-video-fallback-src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
+                        <attribute name="alt" source="alt"/>
+                        <attribute name="title_attribute" source="title"/>
                     </element>
                     <element name="overlay">
                         <style name="overlay_color" source="background_color" converter="Magento_PageBuilder/js/content-type/banner/converter/style/overlay-background-color" persistence_mode="write"/>
@@ -297,6 +306,7 @@
                         <attribute name="virtual_link_href" storage_key="link_url" source="href" converter="Magento_PageBuilder/js/converter/attribute/link-href" persistence_mode="write"/>
                         <attribute name="virtual_link_target" storage_key="link_url" source="target" converter="Magento_PageBuilder/js/converter/attribute/link-target" persistence_mode="write"/>
                         <attribute name="virtual_link_type" storage_key="link_url" source="data-link-type" converter="Magento_PageBuilder/js/converter/attribute/link-type" persistence_mode="write"/>
+                        <attribute name="title_attribute" source="title"/>
                     </element>
                     <element name="empty_link"/>
                     <element name="wrapper">
@@ -318,6 +328,8 @@
                         <attribute name="video_play_only_visible" source="data-video-play-only-visible"/>
                         <attribute name="video_lazy_load" source="data-video-lazy-load"/>
                         <attribute name="video_fallback_image" source="data-video-fallback-src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
+                        <attribute name="alt" source="alt"/>
+                        <attribute name="title_attribute" source="title"/>
                     </element>
                     <element name="overlay">
                         <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/overlay-border-radius" persistence_mode="write"/>

app/code/Magento/PageBuilder/view/adminhtml/pagebuilder/content_type/slide.xml

@@ -44,6 +44,7 @@
                         <attribute name="virtual_link_href" storage_key="link_url" source="href" converter="Magento_PageBuilder/js/converter/attribute/link-href" persistence_mode="write"/>
                         <attribute name="virtual_link_target" storage_key="link_url" source="target" converter="Magento_PageBuilder/js/converter/attribute/link-target" persistence_mode="write"/>
                         <attribute name="virtual_link_type" storage_key="link_url" source="data-link-type" converter="Magento_PageBuilder/js/converter/attribute/link-type" persistence_mode="write"/>
+                        <attribute name="title_attribute" source="title"/>
                     </element>
                     <element name="empty_link"/>
                     <element name="overlay">
@@ -70,6 +71,8 @@
                         <attribute name="video_play_only_visible" source="data-video-play-only-visible"/>
                         <attribute name="video_lazy_load" source="data-video-lazy-load"/>
                         <attribute name="video_fallback_image" source="data-video-fallback-src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
+                        <attribute name="alt" source="alt"/>
+                        <attribute name="title_attribute" source="title"/>
                     </element>
                     <element name="content">
                         <html name="content" preview_converter="Magento_PageBuilder/js/converter/html/directive"/>
@@ -128,6 +131,7 @@
                         <attribute name="virtual_link_href" storage_key="link_url" source="href" converter="Magento_PageBuilder/js/converter/attribute/link-href" persistence_mode="write"/>
                         <attribute name="virtual_link_target" storage_key="link_url" source="target" converter="Magento_PageBuilder/js/converter/attribute/link-target" persistence_mode="write"/>
                         <attribute name="virtual_link_type" storage_key="link_url" source="data-link-type" converter="Magento_PageBuilder/js/converter/attribute/link-type" persistence_mode="write"/>
+                        <attribute name="title_attribute" source="title"/>
                     </element>
                     <element name="empty_link"/>
                     <element name="overlay">
@@ -154,6 +158,8 @@
                         <attribute name="video_play_only_visible" source="data-video-play-only-visible"/>
                         <attribute name="video_lazy_load" source="data-video-lazy-load"/>
                         <attribute name="video_fallback_image" source="data-video-fallback-src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
+                        <attribute name="alt" source="alt"/>
+                        <attribute name="title_attribute" source="title"/>
                     </element>
                     <element name="content">
                         <html name="content" preview_converter="Magento_PageBuilder/js/converter/html/directive"/>
@@ -212,6 +218,7 @@
                         <attribute name="virtual_link_href" storage_key="link_url" source="href" converter="Magento_PageBuilder/js/converter/attribute/link-href" persistence_mode="write"/>
                         <attribute name="virtual_link_target" storage_key="link_url" source="target" converter="Magento_PageBuilder/js/converter/attribute/link-target" persistence_mode="write"/>
                         <attribute name="virtual_link_type" storage_key="link_url" source="data-link-type" converter="Magento_PageBuilder/js/converter/attribute/link-type" persistence_mode="write"/>
+                        <attribute name="title_attribute" source="title"/>
                     </element>
                     <element name="empty_link"/>
                     <element name="overlay">
@@ -238,6 +245,8 @@
                         <attribute name="video_play_only_visible" source="data-video-play-only-visible"/>
                         <attribute name="video_lazy_load" source="data-video-lazy-load"/>
                         <attribute name="video_fallback_image" source="data-video-fallback-src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
+                        <attribute name="alt" source="alt"/>
+                        <attribute name="title_attribute" source="title"/>
                     </element>
                     <element name="content">
                         <html name="content" preview_converter="Magento_PageBuilder/js/converter/html/directive"/>
@@ -297,6 +306,7 @@
                         <attribute name="virtual_link_href" storage_key="link_url" source="href" converter="Magento_PageBuilder/js/converter/attribute/link-href" persistence_mode="write"/>
                         <attribute name="virtual_link_target" storage_key="link_url" source="target" converter="Magento_PageBuilder/js/converter/attribute/link-target" persistence_mode="write"/>
                         <attribute name="virtual_link_type" storage_key="link_url" source="data-link-type" converter="Magento_PageBuilder/js/converter/attribute/link-type" persistence_mode="write"/>
+                        <attribute name="title_attribute" source="title"/>
                     </element>
                     <element name="empty_link"/>
                     <element name="overlay">
@@ -324,6 +334,8 @@
                         <attribute name="video_play_only_visible" source="data-video-play-only-visible"/>
                         <attribute name="video_lazy_load" source="data-video-lazy-load"/>
                         <attribute name="video_fallback_image" source="data-video-fallback-src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
+                        <attribute name="alt" source="alt"/>
+                        <attribute name="title_attribute" source="title"/>
                     </element>
                     <element name="content">
                         <html name="content" preview_converter="Magento_PageBuilder/js/converter/html/directive"/>

app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_banner_form.xml

@@ -291,4 +291,27 @@
             </formElements>
         </field>
     </fieldset>
+    <fieldset name="seo" sortOrder="40">
+        <settings>
+            <label translate="true">Search Engine Optimization</label>
+            <collapsible>true</collapsible>
+            <opened>true</opened>
+        </settings>
+        <field name="alt" sortOrder="10" formElement="input">
+            <settings>
+                <label translate="true">Alternative Text</label>
+                <validation>
+                    <rule name="validate-string" xsi:type="boolean">true</rule>
+                </validation>
+            </settings>
+        </field>
+        <field name="title_attribute" sortOrder="20" formElement="input">
+            <settings>
+                <label translate="true">Title Attribute</label>
+                <validation>
+                    <rule name="validate-string" xsi:type="boolean">true</rule>
+                </validation>
+            </settings>
+        </field>
+    </fieldset>
 </form>

app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_slide_form.xml

@@ -310,4 +310,27 @@
             </formElements>
         </field>
     </fieldset>
+    <fieldset name="seo" sortOrder="50">
+        <settings>
+            <label translate="true">Search Engine Optimization</label>
+            <collapsible>true</collapsible>
+            <opened>true</opened>
+        </settings>
+        <field name="alt" sortOrder="10" formElement="input">
+            <settings>
+                <label translate="true">Alternative Text</label>
+                <validation>
+                    <rule name="validate-string" xsi:type="boolean">true</rule>
+                </validation>
+            </settings>
+        </field>
+        <field name="title_attribute" sortOrder="20" formElement="input">
+            <settings>
+                <label translate="true">Title Attribute</label>
+                <validation>
+                    <rule name="validate-string" xsi:type="boolean">true</rule>
+                </validation>
+            </settings>
+        </field>
+    </fieldset>
 </form>