Expand my Community achievements bar.

Applications for the 2024-2025 Adobe Experience Manager Champion Program are open!
SOLVED

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

Avatar

Level 6

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

Level 8

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