This is a migrated thread and some comments may be shown as answers.

[Solved] IFRAME causing Section 508 compliance failure

10 Answers 286 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Adam Nelson asked on 24 Mar 2008, 11:56 PM

Hello,

As mentioned in this post, one of our customers is running the app through HiSoftware's AccVerify tool to ensure the application is Section 508 compliant.

As you may have hoped, we are using many of your controls.

So now I'm trying to fix our use of the RadEditor. In production, we are using the ASP.NET version, not the Prometheus version, which is filled with non-compliant html (missing alt tags on images and elements). So I'm looking into swapping it out and using the Prometheus version.

Taking a vanilla page, dropping the Prometheus RadEditor onto the page, gives only 1 error - our friend the empty iframe tag, which is not allowed:

Rule: 1.1.6 - All IFRAME elements are required to contain element content.

Failure - IFRAME Element at Line: 182, Column: 153

 182: <TD class=rade_contentCell id=RadEditor1Center style="HEIGHT: 100%" vAlign=top><TEXTAREA id=RadEditor1 style="DISPLAY: none" name=RadEditor1></TEXTAREA><IFRAME style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100%; PADDING-TOP: 0px; HEIGHT: 100%" frameBorder=0></IFRAME></TD></TR>

Here's the aspx markup:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RadEditorInputIframePrometheus.aspx.cs" Inherits="WebApplication.RadEditorInputIframePrometheus" %> 
        
            <%@ Register assembly="Telerik.Web.UI, Version=2007.3.1314.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server"> 
        
                <title>RadEditor Prometheus INPUT and IFRAME 508 Compliance Issues</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server"> 
        
                    </asp:ScriptManager> 
        
                    <h1>RadEditor Prometheus INPUT and IFRAME 508 Compliance Issues</h1> 
        
                    <telerik:RadEditor ID="RadEditor1" Runat="server"> 
        
                    </telerik:RadEditor> 
        
                </form> 
        
            </body> 
        
            </html>

I tried using the javascript posted in the other thread, that did not work.

How do I fix this? Or can you get this fixed in your controls?

Thanks,
Rick

10 Answers, 1 is accepted

answered on 27 Mar 2008, 05:38 PM

Hi Rick Glos,

The editor IFRAME is not outputted from the server but from the client and you can get a reference to it with the following code:

var iframe = editor.GetContentAreaElement();

We tried to set the editor's IFRAME content with the following two ways

<script type="text/javascript">
function OnClientLoad(editor, args)
{
    var iframe = editor.GetContentAreaElement();
    //alert(iframe.tagName);

    var div = document.createElement("DIV");
    div.innerHTML = "AAAAAAAAAAAAA";
    iframe.appendChild(div);

}
</script>
<radE:RadEditor id="RadEditor1" runat="server" OnClientLoad="OnClientLoad"></radE:RadEditor>

AND

<script type="text/javascript">
function OnClientLoad(editor, args)
{
    var iframe = editor.GetContentAreaElement();
    iframe.innerHTML = "some text";
}
</script>
<radE:RadEditor id="RadEditor1" runat="server" OnClientLoad="OnClientLoad"></radE:RadEditor>

but none one of both solutions worked.

Since we were not able to set the content to the IFRAME element, you can try yourself to set it using the editor.GetContentAreaElement() reference to the IFRAME.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 27 Mar 2008, 10:11 PM

I was not able to get it to work either. For some reason, trying to set the innerHTML on the iframe element throws an error.

So I looked for another way to possible do it. Building up the iframe element via strings instead.

One way I came up with is using outerHTML

    
            // Try replacing the entire thing using outerHTML 
        
            var replacement = "<iframe style=\"padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; width: 100%; padding-top: 0px; height: 100%\" frameborder=0>Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>"; 
        
            var iframe = editor.get_ContentAreaElement(); 
        
            iframe.outerHTML = replacement; // this works

It's ugly but it worked.

UPDATE (doesn't work): Testing showed that it creates other bugs. For example, clicking the HTML tab in IE throws javascript error: 'parentNode' is null or not an object.

I'm wondering if this is something you can add to your controls since they possess this same issue? In fact, how are you planning on fixing this in the other control?

Accepted

answered on 07 May 2009, 10:38 AM

Hi Muhammad,

Unfortunately, it will not be possible to write a similar workaround for the new editor. We no longer render the <IFRAME> element from the server, so we cannot simply set its content there. Instead, the <IFRAME> is created dynamically on the client when the editor is initialized. We have already developed a solution for the ASP.NET AJAX RadEditor, using Rick's help. Paste the following code before your editor declaration:

    
            <iframe id="RadEditor1_contentIframe" runat="server" style="width:0px;height:0px;">Your browser does not support inline frames or is configured not to display inline frames.</iframe> 
        
            <script type="text/javascript">   
        
            function OnClientInit(editor) {   
        
              editor.get_contentAreaElement = function() {   
        
                if (!this._contentAreaElement) {   
        
                  var elem = $get(this.get_id() + "_contentIframe");   
        
                  elem.frameBorder = "0";   
        
                  elem.src = "javascript:'<html></html>';";   
        
                  elem.style.width = '100%';   
        
                  elem.style.margin = '0px';   
        
                  elem.style.padding = '0px';   
        
                  this._contentAreaElement = elem;   
        
                };   
        
                return this._contentAreaElement;   
        
              }; 
        
            }    
        
            </script> 
        
            <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad" OnClientInit="OnClientInit" ...>   
        
            </telerik:RadEditor>

Note the ID of the <iframe> element on top. It should start with the client ID of the RadEditor control. This is required if you wish to update the editor with Ajax.

Best wishes,
Lini
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.