RadComboBox Bootstrap Lightweight skin is not loading in version 2022.3.913

Workarounds provided by Admin:

Option 1

Use RadStyleSheetManager to load the correct stylesheet from Telerik.Web.UI.Skins assembly, as per the instructions in Skin registration with RadStyleSheetManager:

Option 2

Link the correct stylesheet manually on the page in one of the following ways:

• By using the attached stylesheet file.
• Via the Telerik CDN link: https://d35islomi5rx1v.cloudfront.net/ajaxz/2022.3.913/BootstrapLite/ComboBOx.Bootstrap.css

In general, disabled Controls get grayed out and turn inaccessible. Disabling the ComboBox using the set_enabled(false) would prevent users to interact with the ComboBox, but will not have a "disabled" style applied.

I believe there's a bug in the RadComboBox WebServiceSettings tag. I use a webservice to populate the items for this RadComboBox

When I put in a fully qualified domain name in the property 'Path' and the hostname contains uppercase characters, I receive a 500 error. If the hostname is in lowercase, the items are populated correctly. The error is: Uncaught TypeError: Cannot read property 'webServiceFailedNoMsg' of undefined.

I've enclosed the Webservice1.asmx, the Default.aspx and their code behind files which can illustrate the problem very easily. There's also a log file with the details of the error.

Reproduction: https://demos.telerik.com/aspnet-ajax/combobox/examples/wai-aria-support/defaultcs.aspx

1) focus the ComboBox

2) press C 

Expected: 

- Camembert Pierrot is selected

- JAWS pronounces "c" and "Camembert Pierrot"

Actual: 

- Camembert Pierrot is selected

- JAWS pronounces "c"

Reference for expected behavior: https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html

See: https://demos.telerik.com/aspnet-ajax/combobox/examples/accessibility/defaultcs.aspx

1. Click somewhere in the page to establish focus.

2. Use the tab key to focus the combo box.  (This works in Chrome, but in IE the control is skipped.)

3. Note that the combo box does not drop-down the list of options like it does when you click the mouse. Clicking the enter key does not drop down the list. Alt-Down-Arrow does not drop down the list.

4. Press Tab and note that focus skips the arrow icon on the combo box and moves down to the "validate with Wave" link.

5. Press Shift-Tab and note that the Arrow icon is now focuses and the enter key will drop down the options list.

6. While JAWS 2019 is running, press the "C" key and note that JAWS reports that there are no combo boxes on the page.

 

Expectations:

* Jaws is able to properly identify the combo box based on ARIA tags

* Tabbing into the combo box presents the same behaviors as using the mouse button

Problem:  Latest Telerik version of Combobox or RadCombobox reads "readonly" though it's not, when EnableAriaSupport is enabled.

Details: 

url to test with JAWS - https://demos.telerik.com/aspnet-ajax/combobox/examples/wai-aria-support/defaultcs.aspx

When I use JAWS to read the combobox present on this demo it reads as follows - 
              ComboBox readonly - Alice Mutton. To change the selection press the arrow keys.

Over here, why JAWS is reading "readonly". It's not readonly. It's making our screenreader blind users confusing.

I drilled down more into the problem and found that, the input element below has the aria-readonly=true set though the combobox is not readonly.
Here is the html generated for above combobox from telerik demo site -

<input name="ctl00$ContentPlaceholder1$RadComboBox2" class="rcbInput radPreventDecorate" id="ctl00_ContentPlaceholder1_RadComboBox2_Input" role="combobox" aria-busy="false" aria-disabled="false" aria-expanded="false" aria-haspopup="true" aria-readonly="true" aria-owns="ctl00_ContentPlaceholder1_RadComboBox2_listbox" aria-autocomplete="none" type="text" readonly="readonly" value="Alice Mutton" autocomplete="off">

I understand that this input control should be readonly so that aria users should not type and go haywire. But looks like to maintain the readonly=readonly property, telerik is generating aria-readonly=true for this _Input control and resulting this issue.

When you change this attribute aria-readonly="true" to aria-readonly="false", JAWS read it correctly as follows - 
              ComboBox - Alice Mutton. To change the selection press the arrow keys.

Let me know how to achieve that so that users will not be confused.

<telerik:RadComboBox runat="server" ID="CB" AllowCustomText="true" HighlightTemplatedItems="true" EnableViewState="false" CheckBoxes="true" EnableLoadOnDemand="true" OnItemsRequested="CB_ItemsRequested" ></telerik:RadComboBox>

Specifically, note that CheckBoxes is true.

In some cases, the combo box's  item's text may have HTML tags in them, but we don't want that HTML to be interpreted, and we're happy that RadComboBox automatically encodes the Item's name.  For example, the Item's text might be <img src=xxx onerror=alert(0)> , and of course we don't want that javascript to run. 

However, we have found a case where the text is not properly escaped, in which case the javascript does run and the alert popup shows.  The error is in RadComboBox.CheckBoxes.js, in the _checkedItemsTextsFitInputWidth function.  That function is passed the comma separated string of all the selected item's text.  This function wants to measure the width of the string, and so it creates a div off-screen, and then pushes the checkedItemTexts string into the div.  If the checkedItemTexts string contains any HTML tags that contain javascript, then that javascript is executed, which can be a XSS attack.