Alt text for authored images.

Hi,

We were able to implement your use case successfully by writing a custom js. Please find the sample dialog.xml and custom js code below, which might help you in implementing your use case.

Sample dialog.xml:

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"

    jcr:primaryType="nt:unstructured"

    jcr:title="Rotating Image Component"

    sling:resourceType="cq/gui/components/authoring/dialog"

    extraClientlibs="[poc.clientlibs]"

    helpPath="https://www.adobe.com/go/aem6_2_docs_component_en#Title">

    <content

        jcr:primaryType="nt:unstructured"

        sling:resourceType="granite/ui/components/foundation/container">

        <layout

            jcr:primaryType="nt:unstructured"

            sling:resourceType="granite/ui/components/foundation/layouts/tabs"

            type="nav"/>

        <items jcr:primaryType="nt:unstructured">

            <image-tab

                jcr:primaryType="nt:unstructured"

                jcr:title="Image Details"

                sling:resourceType="granite/ui/components/foundation/section">

                <layout

                    jcr:primaryType="nt:unstructured"

                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"

                    margin="{Boolean}false"/>

                <items jcr:primaryType="nt:unstructured">

                    <column

                        jcr:primaryType="nt:unstructured"

                        sling:resourceType="granite/ui/components/foundation/container">

                        <items jcr:primaryType="nt:unstructured">

                            <rotating-image

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/container"

                                showhidetargetvalue="rotating-image">

                                <items jcr:primaryType="nt:unstructured">

                                    <heading

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="granite/ui/components/foundation/heading"

                                        class="coral-Heading coral-Heading--4"

                                        level="{Long}4"

                                        text="Rotating Image"/>

                                    <well

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="granite/ui/components/foundation/container">

                                        <layout

                                            jcr:primaryType="nt:unstructured"

                                            sling:resourceType="granite/ui/components/foundation/layouts/well"/>

                                        <items jcr:primaryType="nt:unstructured">

                                            <rotating-image

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/foundation/form/pathbrowser"

                                                class="rotating-image"

                                                fieldLabel="Rotating Image"

                                                name="./rotatingImage"

                                                rootPath="/content"/>

                                            <alt-text

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/foundation/form/textfield"

                                                class="rotating-image-alt-text"

                                                fieldLabel="Alt Text"

                                                name="./altText"

                                                rootPath="/content"/>

                                        </items>

                                    </well>

                                </items>

                            </rotating-image>

                        </items>

                    </column>

                </items>

            </image-tab>

        </items>

    </content>

</jcr:root>

Sample js:

$(document).on("foundation-contentloaded", function(e) {

        try {

            var $input = $('.rotating-image input');

            var showHideAlt = function(inp) {

                var $inp = $(inp),

                $altText = $inp.closest('[data-showhidetargetvalue="rotating-image"]').find('.rotating-image-alt-text'),

                $altTextWrap = $altText.closest('.coral-Form-fieldwrapper');

                if($(inp).val() !== '') {

                    $altText.attr("aria-required", "true");

                    $altTextWrap.show();

                } else {

                    $altText.removeAttr("aria-required");

                    $altTextWrap.hide();

                }

            }

            $input.off('.altTextTrigger').on('change.altTextTrigger keyup.altTextTrigger', function() {

                showHideAlt($(this));

            });

            $input.each(function(){

                showHideAlt($(this));

            });

        } catch(e) {

          console.log('error from foundation-contentlaoded event in example.js')

        }

    });

We hope this helps!

Regards,

TechAspect Solutions