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

WAI-ARIA: How can I assign access keys to PanelBar control?

15 Answers 253 Views

PanelBar

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

A asked on 15 Sep 2016, 07:26 PM

radpanelbar-accesskey.png

radpanelbar-highlight.png

Hi,

I'm working on a legacy ASP.NET WebForms project and I am to add accessibility to the project.

My predecessor already tried to add accessibility by manually assigning an access key to the AccessKey property of some of the PanelBar's RadPanelItemCollection elements (see attachment #1).

15 Answers, 1 is accepted

answered on 15 Sep 2016, 07:38 PM

radpanelbar-outline.png

(*aarrggh* ... I accidentally hit [Post] when attaching the images and don't seem to be able to edit my question now.)

[...] The issue with his approach is that no outline appears when hitting one of the access keys. But this is a requirement for conforming to WAI-ARIA.

Debugging the application it looks like the CSS outline property is disabled by intention (see attachment #3).

So I added a

.radPanelBar .rpLink:focus { outline: thin dotted invert; }

rule to the application's CSS file.

However, I feel this is becoming rather a hack than a clean solution.

So I'd like to ask if there is a suggested and supported approach on how to add access keys to a PanelBar control's collection of RadPanelItems.

We are feeding our PanelBar by using the SiteMapDataSource.

answered on 16 Sep 2016, 01:56 PM

Hi,

I have tested at my side with the latest version of the controls and WAI-ARIA works just as it should (video), using the OnDataBound server event as you do:

protected void Page_Load(object sender, EventArgs e)

{

Form.Attributes.Add("role", "application");

}

protected void RadPanelBar2_DataBound(object sender, EventArgs e)

{

foreach (RadPanelItem item in RadPanelBar2.Items)

{

if (item.Text == "Andrew")

{

item.Items[0].AccessKey = "N";

item.Items[1].AccessKey = "B";

item.Items[2].AccessKey = "V";

}

Would you please elaborate what else should be done to replicate the issue?

Regards,
Anton
Telerik by Progress

Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.

answered on 20 Sep 2016, 01:13 PM

Hi,

Recently we have updated the Keyboard support focusing specially on supporting WAI-ARIA. After the change we strongly suggest the use of the new properties and to assume the PannelBar as a single object, not as different items.Thus we advise the PanelBar to be focused as it is shown in this demo and then use the Keyboard Support to navigate among the items. Using that approach WAI-ARIA requirements are fulfilled. The usage of "Access Keys" causes different behavior among the browsers and as a result of that instability we decided to use our own selectors (KeyboardNaviagationSettings) which behave the same way no matter the browser. And last, but not least, I would ask you avoiding threads duplication for an issue, which allows us to provide you with better support.

Regards,
Anton
Telerik by Progress

Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.

answered on 20 Sep 2016, 02:15 PM

[quote]Anton said:

We strongly suggest the use of the new properties and to assume the PannelBar as a single object, not as different items.Thus we advise the PanelBar to be focused as it is shown in this demo and then use the Keyboard Support to navigate among the items. Using that approach WAI-ARIA requirements are fulfilled.[/quote]

Did you use a screen reader to verify that WAI-ARIA is truely met by your changes? Because according to the (quite popular) screen reader JAWS it isn't, as this screencast shows.

[quote]Anton said:

The usage of "Access Keys" causes different behavior among the browsers and as a result of that instability we decided to use our own selectors (KeyboardNaviagationSettings) which behave the same way no matter the browser.[/quote]

That was my first question above all about: A suggested and supported approach.

[quote]Anton said:

And last, but not least, I would ask you avoiding threads duplication for an issue, which allows us to provide you with better support.[/quote]

Which thread do you see duplicated? This thread is about keyboard navigation (and, supposedly, a CSS issue), my other thread is about assigning WAI-ARIA landmark roles to Telerik controls.

answered on 23 Sep 2016, 01:19 PM

Hi Plamen,

this is quite an interesting observation you made.

So it looks like the outline appears on your machine but it doesn't appear on mine.

If you agree, I'd like to further investigate on this issue to find the reason for the outline not appearing on my machine to make sure everything is working as expected when we are applying for our corporation's Accessibility certificate for our web application.

I noticed that you are using Internet Explorer, just as I do. Would you mind telling me which version of Internet Explorer, Windows and JAWS you are using? I am using IE11 on Windows 10/64 with JAWS 17.0.2619. (I can see from the video that you are using an older JAWS version, i.e. 17.0.1377.)

Thanks for helping me on this!

Cheers,
Axel

answered on 05 Oct 2016, 06:07 PM

Hello, Plamen,

I have now continued digging into the WAI-ARIA features of RadPanelBar and found a number of issues with RadPanelBar.

Here is my observation:

In the sample video that you provided no access keys have been used for selecting an item. In fact, none of the items in the Telerik sample page have access keys assigned. If you apply access keys to items in RadPanelBar, you will notice that these don't give visual feedback. This isn't in conformance to WAI-ARIA specification.
The suggested KeyboardNavigationSettings property isn't waterproof, in contrast to Anton's claim.
Using the TAB key on the keyboard to tab from a hyperlink or input element into the RadPanelBar doesn't give visual feedback. This isn't in conformance to WAI-ARIA specification.

I created a new video demonstrating these issues. Below please find the ASP.NET code I used to create the sample. To reproduce the issues, create a ASP.NET WebForms project and copy below code into a WebForms web page. Then run the project using a German edition of Internet Explorer 11 (because of the [ALT]+[A] access key which is a IE menu access key, too, on the German edition of IE 11) and hit the keys depicted in the video.

Here are the suggested remedies:

RadPanelBar should give visual feedback (CSS: outline property) when using access keys for each of the items having access keys assigned.
KeyboardNavigationSettings is redundant and confusing users who are used to standard web browser access key navigation.
When a user is using the TAB key to give focus to any item in a RadPanelBar, RadPanelBar should give visual feedback (CSS: outline property).

Here's the ASPX code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="MyProject.Web.Test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Test</title>
   <style type="text/css">
       p > a[href] { display: block; }
       p > a[href]:focus { background-color: #eee; }
   </style>
</head>

<body>
   <form id="form1" runat="server">
       <asp:ScriptManager runat="server"/>
       <p><a href="#" accesskey="o">Ab<u>o</u>ve</a></p>

       <div>
           <telerik:RadPanelBar runat="server" ID="strip" EnableAriaSupport="true" AccessKey="r">
               <Items>
                   <telerik:RadPanelItem Expanded="true" Text="Parent" AccessKey="p">
                       <Items>
                           <telerik:RadPanelItem AccessKey="1" Text="Number 1" NavigateUrl="#"/>
                           <telerik:RadPanelItem AccessKey="2" Text="Number 2" NavigateUrl="#" />
                           <telerik:RadPanelItem AccessKey="3" Text="Number 3" NavigateUrl="#" />
                       </Items>
                   </telerik:RadPanelItem>
               </Items>
               <KeyboardNavigationSettings CommandKey="Alt" FocusKey="A"/>
           </telerik:RadPanelBar>
       </div>

       <p><a href="#" accesskey="b"><u>B</u>elow</a></p>
   </form>
</body>
</html>

answered on 10 Oct 2016, 11:27 AM

Hello,

Thank you for elaborating the issue.

10 I have successfully replicated the issue and here is the custom code that I added to make the items focusable in IE:

<script>

var $ = $telerik.$;

var $T = Telerik.Web.UI;

$T.RadPanelBar.prototype._onLinkFocus= function(e)

{

if (Telerik.Web.Browser.ie) {

this._focusedItem = this._extractItemFromDomElement(e.target);

this.get_element().focus();

}

e.preventDefault();

return false;

}

</script>

2) KeyBoardnavigation settings are designed to skip the crossbrowser navigation differences - yet they can't override the default browser shortcuts. If you don't want to use them you can just set accesskey and tabindex to the control so it become focusable.

3) In the current implementation of the keyboard support pressing tab is moving the focus to the next focusable element of the page and it is not navigating through the items of the element. You can navigate through the items with the arrow keys as it is described in this specification.

Please let me know if you have further questions.

Regards,
Plamen
Telerik by Progress

Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.

answered on 14 Oct 2016, 12:53 PM

Hi,

Yes we will create a story for updating the keyboard issues but first I would like to discuss the exact issues. I have tested the scenario same scenario with the code that I recommended in y previous reply and it worked correctly at my side in Firefox too. Here is my full code and here is my video:

<p><a href="#" accesskey="O" tabindex="1">Ab<u>o</u>ve</a></p>

<div>

<telerik:RadPanelBar runat="server" ID="strip" EnableAriaSupport="true" TabIndex="1" >

<Items>

<telerik:RadPanelItem Expanded="true" Text="Parent" AccessKey="p">

<Items>

<telerik:RadPanelItem AccessKey="1" Text="Number 1"/>

<telerik:RadPanelItem AccessKey="2" Text="Number 2" />

<telerik:RadPanelItem AccessKey="3" Text="Number 3" />

</Items>

</telerik:RadPanelItem>

</Items>

<KeyboardNavigationSettings CommandKey="Alt" FocusKey="A"/>

</telerik:RadPanelBar>

</div>

<p><a href="#" accesskey="b" tabindex="1"><u>B</u>elow</a></p>

<script>

var $ = $telerik.$;

var $T = Telerik.Web.UI;

$T.RadPanelBar.prototype._onLinkFocus= function(e)

{

if (Telerik.Web.Browser.ie) {

this._focusedItem = this._extractItemFromDomElement(e.target);

this.get_element().focus();

}

e.preventDefault();

return false;

}

</script>

Please let me know what is still not working correctly in this case

Regards,
Plamen
Telerik by Progress

Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.

Accepted