I am working on making one of the AEM website of my client accessible. For the same, I want "aria-label" attribute should be added(value can be provided in authoring dialogue) to the anchor tag, when the target selected is "New tab".
Could not find much around it, following link describes we can customize the rtePlugin/linkPicker. But could not figure out my problem. Any help/guidance
http://experience-aem.blogspot.com/2017/06/aem-63-touch-ui-rte-rich-text-editor-color-picker-plugin-inplace-dialog-edit.html
Option 1) Reuse Alt Text/title from otb anchor link. No need to customize dialog. When Alt Text is authored otb will populate title like this <a title="Google" href="htttps://www.google.com">Google Link</a>
,
You will then need to Write a Link Transformer to copy title into aria-label. The rewriter will look for anchor tags; if title is present, copy into a new attribute aria-label and rewrite the anchor. If link rewriter is difficult, you can also rewrite the rte text from a sling model while saving the RTE text. Use a Jsoup parser to parse HTML, rewrite by copying title to aria-label and write back into JCR.
Option 2) Adding new text box for aria-label to dialog. You can refer to this blog post. But this option is needed only when Alt text is different from aria-label which I wonder why. Usually aria-label and titles are same and option 1 above will suffice.
So Finally was able to add aria-label attribute with some troubleshooting. Moreover the steps in the links mentioned above are same. Want to add additional details which I faced issue with
Adding new field
Follow the steps mentioned in the blog
After adding the field as mentioned in the blog the newly added attribute will get filtered by AEM. You will see the following error in error.log file
Error : "26.09.2017 12:40:42.804 INFO [0:0:0:0:0:0:0:1 [1506447642680] GET /content/we-retail/language-masters/en.html HTTP/1.1] org.apache.sling.xss.impl.HtmlToHtmlContentContext AntiSamy warning: The a tag contained an attribute that we could not process. The rel attribute had a value of "bookmark". This value could not be accepted for security reasons. We have chosen to remove this attribute from the tag and leave everything else in place so that we could process the input."
Solution: Declare the attribute in the AntiSamy configuration file in CRXDE Light.
Note : make the following changes in /apps/cq/xssprotection/config.xml (overlaying /libs/cq/xssprotection/config.xml), for Sightly/HTL its /libs/sling/xss/config.xml
Copy /libs/cq/xssprotection/config.xml to /apps/cq/xssprotection/config.xml.
Open /apps/cq/xssprotection/config.xml.
In the common-attributes section, add the following target attribute declaration.
<attribute name="aria-label>
<regexp-list>
<regexp value="[a-zA-Z0-9-_\$]+" />
</regexp-list>
</attribute>
Find the tag declaration by searching the term <tag name="a".
Add the line below in the list of attributes:
<attribute name="aria-label" />
Save the file. Now, the link will open in a new window if the option is selected.
Related
Im using TinyMCE richtext editor on Umbraco website. but when i tried to add any section tag and save, it will remove it automatically.
Eg : <section class='cls'>test content</section>
Anyone knows how to prevent it ?
i've tried => extended_valid_elements: 'section[!class]' also not working for me
Allow the section tag with class attribute by going to config/tinymceconfig.config.
Look for validElements setting and include "section[class]".
You might also need to retouch and re-save your web.config in order for new settings to take effect.
We have a tabbox whose tabpanels use include to include content:
<tabpanels height="100%">
<tabpanel>
<include src="#load(vm.myTabUrl)" />
</tabpanel>
...
</tabpanels>
Once in a while in production, the content of the include is not displayed. This behavior seems to be random and we don't know how to replicate it.
When it happens, the generated html contains a <div> for the include which only contains another empty <div> with class z-tmp:
ZK doesn't show any errors while rendering and neither does the javascript console. Also there are no failed http (zkau) requests. Any ideas?
ZK Client Engine is responsible for conversion of ZUL to HTML at client side.
ZK has a huge in-built component support compared to HTML. But the things that are displayed on Client side will be HTML itself.
We design a page in ZUL and it is converted into HTML in action. ZUL Components are larger than HTML components in number but in the end we get HTML components only with some changes in their structure.
How the ZUL page reconstructed to HTML page ?
ZUL page are converted to Div, input, anchor mostly.
ex: Groupbox
(ZUL) --> Multiple Div (HTML)
The ID of the DOM components are dynamically generated after conversion like z_p5,z_g3 and the ID
i.e given in ZUL page can be added at AID of the Component.
The DOM component can be allowed to have multiple styles separated
by spaces.
The Widget name is added to the component style as z-widget along
with our regular styles mentioned in ZUL page. The ZK Component name is added as z-widget in the style attribute of generated HTML DOM Component. As you have already seen that z-include is added in the style attribute of Div element in the above screenshot after generation
of page.
Coming to the Actual problem,
Open the AfterCompose method of the ViewModel of this page.
Assign myTabUrl directly with another ZUL page path and Notify it with
postNotifyChange method from below.
BindUtils.postNotifyChange(null, null, ClassName.this, "myTabUrl");
May be Variable is not properly assigned or Notifying the variable may be missed which caused this problem. If possible post the ZUL and VM code here if problem still not resolved after this trial.
I tried removing the p tag from RTE of AEM(6.2) by adding the property removeSingleParagraphContainer :true in rte text node.It removes the p tag from first paragraph but as soon as we enter the next paragarph the p tag gets added.It seems the component needed to be customized from out of box.
Is there any other way can we achieve this.
The functionality which I require is that no tag should get added until users selects a specific formatter tag from paraformat.
Thanks for the Help!
I've struggled with this issue once upon a time. As far as I know there is no way to do it with configuration. You'll need custom code to get rid of these <p>'s.
One thing I can advise is that it's far easier to do it from within your code once already reading the property from JCR - then tweaking the aem component not to add it.
This is the default behaviour of RTE OOTB. removeSingleParagraphContainer is for backward compatibility and not the behaviour you are expecting.
By default, pressing Enter will add a <p> tag but if you press Shift+Enter (at least on Mac, not sure on Windows) you will get a <br> tag which is probably what you are expecting.
The only way to change the behaviour is to overlay the RTE control.
My question is very basic . I am creating a new template and in that template, I will have a concrete structure using DIV elements. But in almost 7-8 if the DIV's, I need the data to be entered by the user.
What component/line of code I can use to have all those 7-8 DIV's editable and customizable by the page creator ?
I tried multiple paragraphs with :
<cq:include path="par" resourceType="foundation/components/parsys"/>
But only the top one appears on the page. !!
For having multiple paragraph just rename the path value in the cq:include tag. also check here
I have a Plone 4 site using collective.xdv for the theme. Overlays for the login and contact form work fine.
But if I go to edit > categorization tab and try to add a related item, the overlay is blank. Looking at it in Firebug, the tags are correct down to div.overlaycontent. But inside of that div is my static HTML from the XDV theme's index.html.
Is there a special rule that I need for the overlays?
I cannot use plone.app.theming because this site is using more than just Plone.
In the xdv configuration(or append "##xdv-settings" onto site url), you can add unstyled paths.
I think what you'll need is:
^.*/referencebrowser_popup(\?.*)?$
or
^.*refbrowser_popup(\?.*)?$
If neither of those work, figure out the url that's being requested and add it as an unstyled path.