Add attribute to anchor in AEM Rich text editor Link

0
votes

I am working on making one of the AEM website of my client accessible. For the same, I want "aria-label" attribute should be added(value can be provided in authoring dialogue) to the anchor tag, when the target selected is "New tab". Could not find much around it, following link describes we can customize the rtePlugin/linkPicker. But could not figure out my problem. Any help/guidance

http://experience-aem.blogspot.com/2017/06/aem-63-touch-ui-rte-rich-text-editor-color-picker-plugin-inplace-dialog-edit.html

2
aemrich-text-editor
What have you tried so far? Indeed, most likely you will have to create/overwrite the default link plugin. – ronnyfm
@ronnyfm - This is the first project I am doing for AEM and could not find much option online for my requirement. So I have not tried anything as of now and looking for guidance here – Pradeep

2 Answers

1
votes

Option 1) Reuse Alt Text/title from otb anchor link. No need to customize dialog. When Alt Text is authored otb will populate title like this <a title="Google" href="htttps://www.google.com">Google Link</a>

enter image description here,

You will then need to Write a Link Transformer to copy title into aria-label. The rewriter will look for anchor tags; if title is present, copy into a new attribute aria-label and rewrite the anchor. If link rewriter is difficult, you can also rewrite the rte text from a sling model while saving the RTE text. Use a Jsoup parser to parse HTML, rewrite by copying title to aria-label and write back into JCR.

Option 2) Adding new text box for aria-label to dialog. You can refer to this blog post. But this option is needed only when Alt text is different from aria-label which I wonder why. Usually aria-label and titles are same and option 1 above will suffice.

0
votes

So Finally was able to add aria-label attribute with some troubleshooting. Moreover the steps in the links mentioned above are same. Want to add additional details which I faced issue with

  1. Adding new field
    Follow the steps mentioned in the blog

  2. After adding the field as mentioned in the blog the newly added attribute will get filtered by AEM. You will see the following error in error.log file

    Error : "26.09.2017 12:40:42.804 INFO [0:0:0:0:0:0:0:1 [1506447642680] GET /content/we-retail/language-masters/en.html HTTP/1.1] org.apache.sling.xss.impl.HtmlToHtmlContentContext AntiSamy warning: The a tag contained an attribute that we could not process. The rel attribute had a value of "bookmark". This value could not be accepted for security reasons. We have chosen to remove this attribute from the tag and leave everything else in place so that we could process the input."

    Solution: Declare the attribute in the AntiSamy configuration file in CRXDE Light. Note : make the following changes in /apps/cq/xssprotection/config.xml (overlaying /libs/cq/xssprotection/config.xml), for Sightly/HTL its /libs/sling/xss/config.xml

  3. Copy /libs/cq/xssprotection/config.xml to /apps/cq/xssprotection/config.xml.

  4. Open /apps/cq/xssprotection/config.xml. In the common-attributes section, add the following target attribute declaration.

    <attribute name="aria-label> <regexp-list> <regexp value="[a-zA-Z0-9-_\$]+" /> </regexp-list> </attribute>

  5. Find the tag declaration by searching the term <tag name="a".

  6. Add the line below in the list of attributes:

    <attribute name="aria-label" />

Save the file. Now, the link will open in a new window if the option is selected.