Level 3

Unable to add a "role" attribute to table tags

Forum|Forum|11 months ago
February 25, 2025
4 replies
1484 views

After running an accessibility scan, we found some tables on our site that do not have header tags since they are display-only and are not conveying data. The recommendation was to add role="presentation" to these table tags.

I added the following to /apps/cq/xssprotection/config.xml

 <attribute name="role" description="The 'role' attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.">
		 	<literal-list>
				<literal value="toolbar"/>
				<literal value="tooltip"/>
				<literal value="feed"/>
				<literal value="math"/>
				<literal value="presentation"/>
				<literal value="none"/>
				<literal value="note"/>
			</literal-list>
		 </attribute>

Unfortunately, the role attribute is still stripped out after retrying to add it in the RTE

I then tried adding a regex to this, but that did not help.

I also tried removing the literal-list leaving only the regex.

I verified the role attribute is there in CRX.

What am I missing?

AEM On-Premise version 6.5.21.0

Core Component version 2.27.0

Core Text Component version 2

konstantyn_diachenko

Community Advisor

Hi @jonmaguire ,

Did you just add this configuration inside <common-attributes> tag? Then it won't work.

<common-attributes>
    ...    
    <attribute name="role" description="The 'role' attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.">
            <literal-list>
                <literal value="toolbar"/>
                <literal value="tooltip"/>
                <literal value="feed"/>
                <literal value="math"/>
                <literal value="presentation"/>
                <literal value="none"/>
                <literal value="note"/>
            </literal-list>
        </attribute>
</common-attributes>

I added also this attribute inside <global-tag-attributes> tag and it started working.

<global-tag-attributes>
    ...
    <attribute name="role"/>
</global-tag-attributes>

However, the role attribute in HTML cannot be set on any HTML tag, but it can be used on most HTML elements to define their semantic role for assistive technologies like screen readers. Some elements have implicit roles that make setting the role attribute unnecessary or even redundant.

You can leave it as global tag attribute or configure it per each allowed tag like for div:

<tag name="div" action="validate">
    <attribute name="align"/>
    <!-- START: Additions for oembed inserts -->
    <attribute name="data-align">
        <regexp-list>
            <regexp name="anything" />
        </regexp-list>
    </attribute>
    <attribute name="data-resizetype">
        <regexp-list>
            <regexp name="anything" />
        </regexp-list>
    </attribute>
    <!-- END: Additions for oembed inserts -->
    <attribute name="role"/>
</tag>

Bet regards,

Kostiantyn Diachenko..

Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.

JonMaguireAuthor

Level 3

Thanks @konstantyn_diachenko.

I tried adding the attribute to the global tags, but that did not work.

	<global-tag-attributes>
		<!-- Not valid in base, head, html, meta, param, script, style, and title elements. -->
		<attribute name="id"/>
		<attribute name="style"/>
		<attribute name="title"/>
		<attribute name="class"/>
		<!-- Not valid in base, br, frame, frameset, hr, iframe, param, and script elements.  -->
		<attribute name="lang"/>
        <attribute name="role"/>
	</global-tag-attributes>

I also tried adding it to the table tag, but that did not work either.

<tag name="table" action="validate">
			<attribute name="height"/>
			<attribute name="width"/>
			<attribute name="border"/>
			<attribute name="bgcolor"/>
			<attribute name="cellpadding"/>
			<attribute name="cellspacing"/>
			<attribute name="background"/>
			<attribute name="align"/>
            <attribute name="role"/>
			<attribute name="noresize">
				<literal-list>
					<literal value="noresize"/>
					<literal value=""/>
				</literal-list>
			</attribute>
		</tag>

I cleared cache and restarted my instance but I'm getting the same results.

As to the comment about the role attribute itself, as I mentioned in my post, this came up from an accessibility scan and our reason for adding this attribute is for assistive technologies.

EDIT: I checked the error log and it is still actively being removed

26.02.2025 08:27:35.439 *INFO* [[0:0:0:0:0:0:0:1] [1740580055227] GET /content/cfin/en/planning/resources/market-economic-insights/12-16-24.html HTTP/1.1] org.apache.sling.xss.impl.HtmlToHtmlContentContext AntiSamy warning: The table tag contained an attribute that we could not process. The role attribute has been filtered out, but the tag is still in place. The value of the attribute was "presentation".

Thanks again,

Jon

konstantyn_diachenko

Community Advisor

I tested this configuration in pure component. Not via RTE. Seems like the problem with RTE configuration and @harwinder-singh attached a link to good solution.

Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.

kautuk_sahni

Community Manager

@h_kataria @kamal_kishor @harwinder-singh @himanshu_jain @vinay-lakshman @asifchowdhury @fanindra_surat @rajumuddana @sateaswa94 Your input would really help! If you have time, please review this question and share your thoughts.

Kautuk Sahni

Harwinder-singh

Community Advisor

@jonmaguire A very similar discussion on this topic - https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-6-5-5-tabindex-attribute-is-removed-by-xss-protection-even/td-p/443762

Your problem might be stemming out of the fact that the XssFiltering in RTE happens at the dialog level.

A fix for that is provided here - https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/touch-ui-rte-removing-data-attributes/m-p/251260/highlight/true#M12074

Check if this helps you to solve your use case.

JonMaguireAuthor

Level 3

Thanks, @harwinder-singh .

I'm getting closer but am still having issues.

To verify it being an RTE issue, I followed the instructions from your second link. I added the disableXSSFiltering property to my text node.

<text
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="cq/gui/components/authoring/dialog/richtext"
                                                disableXSSFiltering="{Boolean}true"
                                                externalStyleSheets="[/apps/cfin/clientlibs/clientlib-site/css/site.css]"
                                                name="./text"
                                                showBreadcrumb="{Boolean}true"
                                                useFixedInlineToolbar="{Boolean}true">
                                                <rtePlugins jcr:primaryType="nt:unstructured">

Now I am able to see the role="presentation" in the HTML within the RTE. Unfortunately, this is still stripped out when viewing the page as published.

I did add a simple table with the role attribute to the text component to test outside of the RTE, and the role attribute is preserved. This leads me to believe it is an RTE issue, but I'm not sure what else to try.

Regarding your first link, I believe I'm following the documentation correctly at this point for the config.xml

One possibility I did notice is the inline RTE does strips out the role attribute, but looking at the solution from your second link I'm unsure where to add the disableXSSFiltering property to my component. This is my current code for the uiSettings node

<inline
                                                            jcr:primaryType="nt:unstructured"
                                                            toolbar="[format#bold,format#italic,format#underline,#justify,#lists,links#modifylink,links#unlink,#paraformat,styleformat#styles]">
                                                            <popovers jcr:primaryType="nt:unstructured">
                                                                <justify
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
                                                                    ref="justify"/>
                                                                <lists
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
                                                                    ref="lists"/>
                                                                <paraformat
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="paraformat:getFormats:paraformat-pulldown"
                                                                    ref="paraformat"/>
                                                            </popovers>
                                                        </inline>

Do I need to add an RTE option here as well?

Thanks again,

Jon

Harwinder-singh

Community Advisor

@harwinder-singh I agree, but do you mean an issue with my RTE implementation or the RTE in general and I should contact Adobe Support?

@jonmaguire This looks more like a general RTE issue. You can log a ticket with Adobe support and have them verify this.

kautuk_sahni

Community Manager

@jonmaguire Did you find the suggestions helpful? Please let us know if you need more information. If a response worked, kindly mark it as correct for posterity; alternatively, if you found a solution yourself, we’d appreciate it if you could share it with the community. Thank you!

Kautuk Sahni

JonMaguireAuthor

Level 3

Hi @kautuk_sahni,

I currently have a ticket open for this issue with Adobe support. At the moment the RTE ignoring the config.xml seems to be a limitation of its functionality, but I have yet to hear if this is intentional or an oversight. I'll keep everyone posted.

In the meantime, if anyone has other suggestions, I'd welcome them.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded