RTE table plugin unhide a header

Question

Hi Community,

I need clarification and help on one of the RTE plugins(Table), when the table plugin is used in a component it offers to make modifications to the table cell, like the example below.

When a cell is selected, click on the table option the above window pops up, when the cell type is set to header and hidden header option is toggled and save the dialog box, this "cq-wcm-foundation-aria-visuallyhidden" class is added to that cell.

My issue is, when I reopen the dialog box and click on the table option again the toggle is disabled. If I enable it again, a new set of DOM is added along with that class.

Need clarification, if this is a default behavior due to core components.
If so, can I do anything so that it stays enabled after reopening the dialog. Any other suggestions would also be good.

I hope this explanation is sufficient, if additional information is required, please let me know.

Thanks,

EstebanBustamante · Accepted Answer

Hi,

It looks like this property is intended for WCAG purposes: https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/configuring-and-extending/configure-rich-text-editor-plug-ins#hiddenheader. So you could add your own CSS to manipulate your data/cell further. What you described sounds like an issue, i would recommend submitting an Adobe ticket to get confirmation that this is an issue, and perhaps, the way to fix / workaround this is to add a custom dialog listener that will check the class and DOM present in the proper place and manually(via JS) show the state of the button as toggled.

Here are some references about using the dialog listeners:

https://aemlab.blogspot.com/2019/07/aem-rte-custom-plugins-1.html

https://medium.com/activate-aem/loading-custom-js-in-an-aem-dialog-6b31e9a36743

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-add-a-js-file-to-a-particular-component-dialog-box/m-p/447174
Hope this helps