Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

AEMaaCS aria-label for links, Rich Text Editor cq/gui/components/authoring/dialog/richtext

Avatar

Level 7

For some reason whenever I view my page in publish mode, the aria-label is gone... for example <a href="home.html" aria-label="home page">Home</a>

for: cq/gui/components/authoring/dialog/richtext

I literally updated the crx/de with aria-label, and done @ context = 'html'

turns into:
<a href="home.html">Home</a>

 

How can I retain the aria-label="home page"?

Please help, thanks!

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Here's what you need to do, exactly:

  1. Login to AEM
  2. Visit http://localhost:4502/crx/de/index.jsp#/libs/cq/xssprotection/config.xml
  3. Overlay the XSS protection configuration by copying /libs/cq/xssprotection into /apps/cq/xssprotection (and all it’s children)
  4. Delete the /apps/cq/xssprotection/rep:policy
  5. From crx/DE you can edit the file /apps/cq/xssprotection/config.xml
  6. On your keyboard, hit “ctrl + f” to find <tag name=”a” action=”validate”>
  7. This is an XML file, so find the end of the closing tag </tag>
  8. Insert this line of code:
    <attribute name="aria-label">
        <regexp-list>
            <regexp name="anything"/>
        </regexp-list>
     </attribute>​
  9. Done

I've actually written an article for this if you want to see some visual gestures -> https://sourcedcode.com/blog/aem/aem-rich-text-editor-rendering-aria-labels

View solution in original post

2 Replies

Avatar

Community Advisor

You'd need to overlay /libs/cq/xssprotection/config.xml  and add the required attributes you want to allow in RTE.

You can refer to how to overlay it here.
https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-overlay-libs-cq-xss...

Avatar

Correct answer by
Community Advisor

Here's what you need to do, exactly:

  1. Login to AEM
  2. Visit http://localhost:4502/crx/de/index.jsp#/libs/cq/xssprotection/config.xml
  3. Overlay the XSS protection configuration by copying /libs/cq/xssprotection into /apps/cq/xssprotection (and all it’s children)
  4. Delete the /apps/cq/xssprotection/rep:policy
  5. From crx/DE you can edit the file /apps/cq/xssprotection/config.xml
  6. On your keyboard, hit “ctrl + f” to find <tag name=”a” action=”validate”>
  7. This is an XML file, so find the end of the closing tag </tag>
  8. Insert this line of code:
    <attribute name="aria-label">
        <regexp-list>
            <regexp name="anything"/>
        </regexp-list>
     </attribute>​
  9. Done

I've actually written an article for this if you want to see some visual gestures -> https://sourcedcode.com/blog/aem/aem-rich-text-editor-rendering-aria-labels