Unable to add a "role" attribute to table tags

[JonMaguire]

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]

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..

[JonMaguire]

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]

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.

[kautuk_sahni]

@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.

[Harwinder-singh]

@JonMaguire A very similar discussion on this topic - https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-6-5-5-tabindex-attribu...

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...

Check if this helps you to solve your use case.

[JonMaguire]

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]

@JonMaguire This seems to be an RTE issue as confirmed by @konstantyn_diachenko 

[JonMaguire]

@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?

[Harwinder-singh]

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

[JonMaguire]

Thanks, @Harwinder-singh. I'll open a ticket and return to this thread when I know more for those following this.