Tervel Peykov's blog

Accessibility and RadEditor

Tervel Peykov & Rumen Jekov — Wed, 16 Jul 2008 10:20:33 GMT

The following�blog post was written together with Rumen Jekov, who�is the most experienced support officer at Telerik and has been supporting RadEditor for a number of years now. If you are a RadEditor user, and you contact us, chances are you will be receiving an answer from him.

The blog post discusses the accessibility features of RadEditor. While accessibility options were not considered important couple of years ago, things have changed - and will be changing even more in the future. For enterprize customers and governmental institutions accessibility is becoming a top priority, and we have gone at great lengths to add accessibility features to our products. Of course, this is an ongoing effort, rather than a one-time go. We keep adding accessibility features to the RadEditor, such as the ability to navigate tools with the keyboard, or switch focus from the content area to the toolbars and back using a keyboard shortcut. One accessibility feature that was added recently to RadEditor is (cross-browser) support for AccessKey.

We hope the following information will be helpful to all who want to learn more about the editor's accessibility features.

�Accessibility and RadEditor

Telerik RadEditor satisfies the requirements for accessibility, which is a result of the following:

The interface of the RadEditor is "Level A" accessible (in compliance with the W3C Web Accessibility Guidelines 1.0). Verified with the HiSoftware's AccVerify tool.
RadEditor passes the check of the W3C accessibility validator (click the W3C logo on one of the on-line examples). Verified with the HiSoftware's AccVerify tool.
Semantic rendering - helps the screen readers and alternative browsing devices to read and interpret the content easier. RadEditor offers title attributes for all tools.
Keyboard Shortcuts - All tools and commands can be associated with shortcuts either with a property of the object or in the ToolsFile.xml file. You can find more information in the following help article: Keyboard Shortcuts.
Toolbar optimization - when the ToolbarMode property is not set to "Default", but for example to "ShowOnFocus" then the editor's tools are initialized at the moment of displaying, but not on page load.

ToolProviderID - this property helps significantly reduce the HTML markup and JSON sent from server to the client when multiple RadEditor objects with the same tools are used on the same page. The ToolProviderID should be set to the ID of another RadEditor, e.g.

    
                <telerik:radeditor runat="server" ID="RadEditor1"></telerik:radeditor> 
            
                <telerik:radeditor runat="server" ID="RadEditor2" ToolProviderID="RadEditor1"></telerik:radeditor> 
            
                <telerik:radeditor runat="server" ID="RadEditor3" ToolProviderID="RadEditor1"></telerik:radeditor>

AccessKey - This accessibility property sets a keyboard shortcut key to access the content area of RadEditor, e.g.

�

    
                <telerik:radeditor runat="server" ID="RadEditor1" AccessKey="1"></telerik:radeditor> 
            
                <telerik:radeditor runat="server" ID="RadEditor2" AccessKey="2"></telerik:radeditor> 
            
                <telerik:radeditor runat="server" ID="RadEditor3" AccessKey="3"></telerik:radeditor>

Note: In Internet Explorer use Alt + AccessKey to give focus to the element with a specified access key.
To activate an access key in Firefox 2.0 use Shift + Alt + AccessKey.

Full keyboard accessibility - RadEditor is a fully keyboard navigable component, including shortcuts to open and operate with drop-downs, tools and dialogs, achieving true accessibility.
- F10 special key - focus goes on toolbars
- Full toolbars navigation - use arrow keys or TAB / Ctrl-TAB key
- Navigatable dropdowns - RadEditor also provides the ability to navigate dropdown items as well. Press enter to execute command.
FullScreen mode (F11 shortcut) - this feature maximizes your available space to better access, view and edit the editor's content

�
Zoom tool ( - Internet Explorer only) - changes the level of content magnification. You can use the 'zoom' dropdown to increase the zoom factor of all elements inside the content area and make them larger and much easier for reading and observation
Dialogs accessibility - ability to switch dialog tabs with keyboard and to navigate dialog controls with Tab. You can switch to the next tab by clicking TAB and after that Enter. You can navigate through the elements in the Dialog using the TAB key.
Optional accessibility settings according to W3C WAI and Section 508 Accessibility Guidelines - the content generated by the RadEditor can become accessible if the author fills in all required fields (marked with a special accessibility icon - Section 508).
- every content element, which is more complex than pure text, has additional accessibility fields for detailed description (e.g. tooltip, long description, etc.)
- new or existing tables can be enriched with special accessibility fields from the Table Wizard or from the Table Properties dialog
OnClientPasteHtml - The OnClientPasteHtml event is useful in scenarios where the developers need to examine or modify the HTMl to be pasted by an editor tool before it is inserted in the editor content area. Using this event the developer can enforce the creation of accessible HTML/XHTML content.

Some common cases where the event can be used are:
- Check whether user specified alt attribute for an image
- Make modifications to a table being inserted (e.g. set a specific classname, etc)
- Examine or modify a link before it is inserted
Custom skins - RadEditor offers the ability to create custom skins with more accessible appearance (e.g. larger buttons, high-contrast colors, etc.). You can find more information how to make your own custom skin in the following help articles: Creating a custom skin and Create New Skin.

Section 508

The USA federal mandate requires that information technology be made accessible to people with disabilities. Much of Section 508 compliance concerns making Web sites, intranets, and web-enabled applications accessible. Section 508 compliance has since become a major prerequisite not only in government related software, but also in most enterprize and corporate software solutions.

W3C Web Content Accessibility Guidelines 1.0

The main goal of these guidelines is to encourage developers in creating applications providing accessible contents. However, adhering to these guidelines will also make Web content more accessible to all kind of users, using different devices and interfaces: desktop browser, voice browser, mobile phone, automobile-based personal computer, etc.

In accordance with these guidelines W3C defines three levels of conformance developers may implement in order to provide some level of content compliance to their products:

Compliance Level "A"
Compliance Level "AA"
Compliance Level "AAA"

For more details on W3C "Web Content Accessibility Guidelines 1.0" see http://www.w3.org/TR/WAI-WEBCONTENT/

In our attempt to make our products content compliant, each web-control we develop and its QSF strive to obtain at least one of conformance levels listed above.

�

Some RadToolTip tips & tricks

Tervel Peykov & Svetlina Anati — Fri, 11 Jul 2008 07:03:00 GMT

I wrote this blog post together with our support officer Svetlina, who is in charge of answering tickets submitted for RadToolTip, RadSplitter and RadWindow. She has prepared a short list of tips and tricks based on some recurring questions that we have noticed over time. The original tips&tricks list had 12 entries, but some of the solutions were eventually built into the RadToolTip code, so it was reduced to 7 :)

We hope this post will be useful to all who try to combine the tooltip with other RadControls and use it in more advanced scenarios that are not always covered in our online demos. We will be following soon with tips & tricks sections for other popular controls such as RadWindow and RadEditor. Enjoy reading!

RadToolTip Tips &Tricks

RadToolTip online demos page
RadToolTip overview page

1. Empty tooltip manager tooltipifies all elements on the page
The RadToolTipManager has a property called Autotooltipify. At present its default value is true. This means that if the RadToolTipManager's TargetContorls collection is empty, the manager will automatically tooltipify all elements on the page that have their title(ToolTip) property set.

This property was not present in the original RadToolTipManager implementation and was added later due to many requests. We are considering to also change its default value from true to false, because patterns of RadToolTipManager usage show that the manager is commonly used to tooltipify only specific elements. You can find more information and an online demo about it here.
http://www.telerik.com/demos/aspnet/prometheus-futures/ToolTip/Examples/AutoTooltipify/DefaultCS.aspx

2. AJAX in tooltip only updates tooltip content area
The OnAjaxUpdate event of the RadToolTipManager initiates an AJAX request when the user moves the mouse over a particular 'tooltipified' element on the client. This allows for dynamically loading and displaying rich data content for a particular element on demand. By using it you can update only the content of the tooltips which tooltipify the controls declared in the RadToolTipManager's TargetControls collection. This event cannot be used for updating other parts of the page (other update panels on it).

3. Differences between usage scenarios of RadToolTipManager and RadToolTip
RadToolTip and RadToolTipManager are similar in use and can deliver the same end result. Yet there are scenarios when one control can deliver the desired result with less developer effort. A demo which shows the differences in the RadToolTip and RadToolTipManager can be found here: http://www.telerik.com/DEMOS/ASPNET/Prometheus/ToolTip/Examples/ToolTipVersusToolTipManager/DefaultCS.aspx

4. HTML elements that cannot be tooltipified
There are some elements which cannot be tooltipified with a standard browser tooltip and respectively with RadToolTip because of their specific structure. For example, such elements are those, which have a <SELECT> html tags, because they include other elements which are not real HTML objects (examples are <asp:DropDownList>, <asp:ListBox>, etc). Other elements which are not good for tooltipifing are IFRAME, OBJECT, EMBED.
In conclusion we can say that if it is possible to configure an element to show a standard tooltip, it can be tooltipified with RadToolTip, too. Otherwise it is not possible.

5. RadControls for which RadTooltip TargetControlID cannot be directly bound
There are some RadControls for which the RadToolTip cannot be directly bound. When you use them you need to attach the tooltip to the control's specific internal HTML element whose ID is different and made by adding a specific suffix. Such controls are RadComboBox, RadToolBar, RadTextBox and their corresponding suffixes are _Input, _button, _text.

You can find how to tooltipify an entire RadComboBox control or its items separately here:
http://www.telerik.com/support/kb/article/b454K-hmh-b454T-cmc-b454c-cmc.aspx

How to tooltipify a RadInput control - RadTextBox, RadNumericTextBox, RadMaskedTextBox, RadDateInput is demonstrated here:
http://www.telerik.com/support/kb/article/b454K-hmm-b454T-cmc-b454c-cmc.aspx

6. RequiredFieldValidator inside the RadToolTip
When you use a RequiredFieldValidator inside a RadToolTip you add the RequiredFieldValidator to the page, not only to the displayed in the tooltip part of it. After that, when you click any of your page's elements which cause validation, those trigger the check of the validator, which fails even if the content of the tooltip is invisible. That is why, in such scenarios you have to set the CausesValidation property to false for all elements on the page that do not require it.

7. RadTooltip and RadGrid Classic - put the grid into an UpdatePanel and turn off the grid AJAX - it won't work properly when using RadGrid's AJAX
When you use RadToolTipManager to tooltipify a Classic RadGrid the tooltips are not updated and disappear after an AJAX request made by the RadGrid by EnableAjax = true. This is due to RadGrid performing an internal AJAX request which slightly differs from the standard MS AJAX request. Because of this the RadToolTipManager is not "informed" about the update and doesn't update the tooltips. In order to make the correct request you must put the RadGrid in an Update panel and to set its EnableAjax property to false.
The RadGrid for ASP.NET AJAX control can be used with Ajax enabled with RadToolTipManager without such problems because its implementation allows this.

Ever needed a demo using RadControls for ASP.NET AJAX using the Q1 2008 RadControls suite?

Tervel Peykov — Tue, 10 Jun 2008 10:16:00 GMT

I visited DevConnections in Orlando about a month ago. There my colleague Todd Anglin and I held a vendor session called "Developing Rich, Responsive Applications using Telerik RadControls for ASP.NET AJAX". My team had prepared a demo for the vendor session - and we have 3 major goals when we started implementing it:

We wanted to keep the code to a minimum (which I think we managed quite nicely). Most of the about 200 lines of server code are related to database queries, and the client-side only uses about 40 lines of code.
We wanted it to be real-lfe and do something meaningful, so we chose to use the well-known Northwind database
We wanted to use AJAX and Web Services in order to ensure fast, efficient and responsive application.

At the vendor session I focused on clarifying when it is good to use AJAX, and when it is better to use Web services to achieve the desired result. In my�experience, the potential of using web services for speeding up the performance of an application is very underutilised - not only are they powerful, but since a lot of our products from the RadControls suite have built-in WebService support - it is also very simple to use them.

It is best to use AJAX when there is some kind of a process involved, and to use WebServices for data presentation. The main reason for this is that AJAX maintains the whole application state, providing for "integrity" between the different components on the page, while the Web services are pure, lightweight - but have no "sense" of state. Without getting into much further detail (perhaps I should devote a separate blog post on that one) and to avoid boring you, I gladly present you the application itself to explore,�download and play with:�

Live link:�http://www.telerik.com/crmsample/

Code library link: http://www.telerik.com/community/code-library/submission/b311D-bechtd.aspx

��

Overview

The following demo application uses the Microsoft Northwind database and controls from the RadControls suite to develop a rich interactive application with very little amount of code. The application uses AJAX and WebServices to load data on demand, and demonstrates the seamless integration of RadControls into the MS AJAX framework, as well as the built in web-service support of several RadControls.

�

The application consists of a master page, and two ASPX pages - Default.aspx and EuropeanCountries.aspx. Both pages provide somewhat similar functionality and display similar data, but with somewhat different approaches. The client code needed for fine-tuning the application totals less than 50 lines, and practically all the server-side code is related to accessing the database and processing the returned datasets.

�

What the application is about

The main application page features a tree view with countries on the left, and a grid on the right.

Clicking on a tree node causes the customers for a particular country to be displayed using a web service to load the data.
Additional information [e.g. the customer profile] is displayed in a tooltip which uses a web service to fetch data on demand.
The grid on the right side features the orders a customer made so far, and its content is loaded with AJAX (a partial page update occurs) when a customer is selected from the tree view.
Clicking on a grid row causes additional information about an order to be displayed (e.g. the type and number of products in that order) in a tooltip that loads its data using a web service.

RadControls featured in the application

The controls used in the application are:

RadSplitter (for page layout), RadTreeView (for country/customers hierarchy), RadGrid (for grid data), RadToolTip (for various tasks where rich-content loaded on demand is needed), RadWindow (a fully customizable windowed control used as a dialog container), RadComboBox (as a rich dropdown), RadDatePicker (for choosing dates), RadFormDecorator (to style page buttons, checkboxes and radiobuttons if any), RadMenu (for horizontal navigation)

�

Extras

Additional codeless features demonstrated in the application are grid sorting, grid alternating rows and row hover effects.
When using a Web Service to load content [e.g. in a tooltip], it is not possible to load a typed user control. At first glance it seems one must manually construct the whole HTML response by using code. However, the application features a much better, yet very simple approach - using reflection to bind a data object to a control, without the need for casting the control to its actual type. This allows for using regular .ASCX-es with markup that is easy to change by designers.
There is client code in the RadWindow that loads order lists that causes the window to shrink or expand, depending on the number of orders when the order grid loads. This code will later enter into the RadWindow product itself and will be exposed from a Boolean property.

Demo screenshots

1. The application main page, featuring a tree with customers organized in hierarchy by country. Customer orders are on the right. Hovering a customer causes his/her profile to be fetched from the database using a web service.

�

2. �Demonstration how the web-service call for loading customers is executed

3. Hovering a customer causes his profile to be displayed in a tooltip

�

4. Clicking a row for an order causes the products ordered to be displayed in a tooltip using a web service.

�

5. Each order can be edited by clicking on the Edit link on the right. This causes a separate dialog to be loaded (using a RadWindow) where the order details can be changed. Once the changes are confirmed and the order is updated, the dialog causes the grid to refresh using AJAX to display the changes immediately.

�

6. The European customers page features an image map of Europe, where each country is marked as an image area. Hovering the image area causes a tooltip to appear featuring clickable links for all customers from the selected country.

�

7. Clicking on a customer causes a new dialog to appear featuring all the customer orders. The window's height is automatically changed to be as high as the orders' list.

�

RadEditor... on msdn2.microsoft.com

Tervel Peykov — Tue, 29 Apr 2008 12:06:27 GMT

It has been some time this was in the making... and as of the beginning of this week RadEditor is the editor one uses to submit community content in MSDN. Here is a hasty screenshot I made for you:

To my best knowledge, this is the fifth Microsoft team that adopts the RadEditor, yet I believe it is the first team to use it on a public Microsoft site (besides, such an important one). The other teams using the editor are doing internal MS content, and since I have not explicitly asked for permission to list their names here, I will refrain from doing that, however tempted I feel.

While this is certainly a good proof of RadEditor's qualities, and of Telerik products in a broader sense, it is also a challenge to live up to the expectations. And even if you won't jump yet on the msdn site to submit your community posts, it is still you - the Telerik community - who will benefit from the fact the editor is there. Now we will need to address reported problems even faster than before :)

Prometheus Futures and... new RadFormDecorator :)

Tervel Peykov — Fri, 28 Mar 2008 12:37:48 GMT

Did you know that we just released our Prometheus Futures build?
And what exactly a Futures build means?
It is nothing less than a preview build for the 2008 Q1 RadControls suite release coming in April! We keep adding new controls to the Prometheus suite to get it ready for its official premiere. Three long-awaited RadControls Classic controls were ported to the suite -��RadToolbar, RadPanelbar, RadTabstrip, thus�bringing the total number of Prometheus controls to twenty-two.

The Prometheus suite is�more than a suite of controls. It is built on top of MS AJAX, and offers a common client-side framework that allows for small overall client-side footprint, compared to the fully-self containted RadControls Classic.�I highly�recommend checking out the online demos available here:
http://www.telerik.com/demos/aspnet/prometheus-futures�

Here is a forum post that features plenty of information about what's packed in the build:
http://www.telerik.com/community/forums/thread/b311D-bcmkaa.aspx

I would also like to take the chance to share some information about a brand new control developed by my team,�that we just added to the suite - the all-new RadFormDecorator :) The FormDecorator started more like a fun project that we posted in our CodeLibrary section. However, judging by the amount of comments it generated, it turns out people have been waiting for such a thing for quite some time.
http://www.telerik.com/community/code-library/submission/b311D-bcaecg.aspx

What is the RadFormDecorator control? It will skin your page buttons, checkboxes, radiobuttons, checkbox lists, radiobutton lists without the need for you to write any code or change anything on the page! Just drop the RadFormDecorator - set a property or two in case you need fine-tuning, and off you go! It cannot get more "unobtrusive" than that :)�So many people wanted it a part of the Prometheus suite, that we decided to include it there, with all the bells and whistles - revised client code, support for all the Prometheus skins, as well as implementing new features that keep coming. Here are the RadFormDecorator current online demos, in case you want to give them a quick look -
http://www.telerik.com/demos/aspnet/prometheus-futures/FormDecorator/Examples/Default/DefaultCS.aspx

Here are the main features of the RadFormDecorator (compared to the CodeProject version):�

12 skins�
Hover/Out states for the buttons using pure CSS�
Caching of images for IE6 for smooth user experience�
CSS for disabled radiobuttons, checkboxes and buttons�
Various CSS look & feel improvements

Internally, we also have 2 new examples, and the following new features complete:

DecorationZoneID - allows decorating parts of the page, not the whole page. Among other things, this allows using multiple RadFormDecorator to skin different sections of the page.
Automatically detects partial page updates and re-decorates updated page portions
Ability to allso skin the scrollbars (IE only) - for all 12 skins.

And, of course, there are more improvements that we have in mind for the control :)

r.a.d.controls, Event-handing, Atlas and Opera

Tervel Peykov — Tue, 09 May 2006 20:33:00 GMT

I came across some funny event handler behavior while researching a strange problem of one of our controls (r.a.d.window) under Opera.
Three problems are always present when writing self-contained, reusable, cross-browser DHTML controls - differences in browser APIs, consideration for third-party code on the page that might be messing with the API and - last but not least - unexpected and weird browser behavior. All these came together in the problem I am about to describe.

Different browsers define different ways to attach event handlers - e.g. attachEvent in IE, addEventListener in Firefox and Safari, and support for both in Opera. One also needs to make sure that events are using the "on" in IE e.g. "onload" in IE and "load" in Firefox. For r.a.d.controls we have written a thin layer that hides the browser difference and allows a control to register for an event without making any browser checks.The core of the approach is:

if (attachEvent) attachEvent //IE syntax first
else if (addEventListener) addEventListener //Moz syntax second

All worked fine until the Microsoft Atlas framework came along. In the so-called "browser compat layer" of Atlas, attachEvent is defined for Firefox browsers as well. This caused an immediate problem - and looking at the Microsoft code it is easy to see why - here is the important part of the attachEvent method implementation for Firefox/Mozilla:

var attachEventProxy = function(eventName, eventHandler) {

        eventHandler._mozillaEventHandler = function(e) {
        window.event = e;
        eventHandler();
        return e.returnValue;
    };
    this.addEventListener(eventName.slice(2), eventHandler._mozillaEventHandler, false);
}

As can be seen - when an event is fired in Firefox, window.event variable is defined (similar to IE) and the event handler is called without providing it with the original local variable e as its first argument! This works fine in the Atlas framework, because all Atlas event handlers are implemented to use window.event but unfortunately it did break some of our controls' Mozilla event handlers, which needed the e to come as a parameter. So we went for a simple change:

    if (addEventListener) //Moz check first
    else (attachEvent) //IE check second

and all seemed to work fine.

That is - until a problem was reported with r.a.d.window in Opera - the window never seemed to execute its onload code!

As was said, the Opera browser supports both addEventListener and attachEvent methods, it should have remained completely unaffected by the change. But, to our own great surprise, it turned out that it was.
While all other events were "hooked" fine, there was a problem with one(!) single event - the onload event. Check this:

iframe.addEventListener("load", eventHandler, true); //Does not work under Opera!
iframe.attachEvent("onload", eventHandler); //Works under Opera!

This is how our Atlas change unexpectedly came down on our Opera support.
The moral of the story is: all changes that affect cross-browser functionality, however trivial they are should be extensively tested under all supported browsers.