Hello all,

I'm working on accessibility features for one of our kendo grids, and our version of kendo ui is v2012.2.710. This one has both sortable and scrollable set to true. One problem is that if scrollable is set to true the headers and body are broken up into two separate tables, and so the headings to not get read when using screen reader navigation (which is using ctrl and the arrow keys to navigate within the table). The screen reader also correctly reads there are two tables and thus you can't navigate easily from the headings to the body using screen reader controls. The other problem being that setting sortable to true makes it so the headings are read off as links.

For the scrollable problem, I've simply set scrollable to false for now, but is there a way to keep this functionality and have the table not be broken up? Or to add some sort of setting to trick the screen reader into thinking it's all one table? I've read about adding scope="col" as an attribute to the headings but that doesn't seem to address the problem.

For sorting, I'm having a lot more difficulty. I've tried using aria-labels but I can't seem to get a consistent fix working for it. When trying to relabel the headings it seems to break the heading association that setting scrollable to false fixes, I'll get a generic "Column 1" read back to me instead of the heading name. I'm also getting mixed results when dealing with the two different screen readers (NVDA and Narrator) that we test against.

Thus far I've had the best luck setting both scrollable and sortable to false and making sure every column has fields and titles set for it. Just wondering if there's an official answer on this or if someone's been through this. I know we've got a pretty old version of kendo to work with and if you know of an update that addresses this, that's helpful as well.

Thanks!

The following does not work:

<div class="col-lg-8" id="toolbarContainer" data-ng-show="!showToolbarButtons" style="overflow:hidden;">
<div class="col-lg-1" style="padding-top: 5px;">
<kendo-button id="leftScrollButton" data-ng-click="scrollingLeft()" style="float: right;">
<span class="k-icon k-i-arrow-w"></span></kendo-button>
</div>
<div class="k-button-group" id="toolbarButtonGroup" kendo-sortable k-change="onChangeButtons" k-container="toolbarContainer"
k-auto-scroll="true" style="padding-top: 5px; overflow:hidden">
<span ng-repeat="availableWindow in availableWindows">
<kendo-button
style="font-size: 8pt"
data-ng-style="getButtonStyle(availableWindow.id)"
data-ng-click="toolbarButton(availableWindow.id)">
{{availableWindow.shortName ? availableWindow.shortName : availableWindow.window.title()}}
</kendo-button>
</span>
</div>
<div class="col-lg-1" style="padding-top: 5px">
<kendo-button id="rightScrollButton" data-ng-click="scrollingRight()">
<span class="k-icon k-i-arrow-e"></span></kendo-button>
</div>
</div>

I am using kendo UI sortable without grid in my application. But it seems IE browser is not compatible for it. Our application is using AngularJS with select and ng-repeat. I was able to get it work for Chrome and Firefox but not with IE. Below is the code snippet for HTML

<select class="form-control" kendo-sortable k-on-end="endHandler(kendoEvent)" 
            k-placeholder="placeholder" k-hint="hint" id="favorite_reports" selectedClass= "selected"
            multiple ng-model="favoriteReports.chosenReports">
        <option ng-repeat="link in config.links">
            {{link.NAME}}
        </option>
</select>

JS:

$scope.endHandler = function (e) {
        var sortable = e.sender;
        // prevent the sortable from modifying the DOM
        e.sender.draggable.dropped = true;
        e.preventDefault();
        // update the model and let Angular update the DOM
        $timeout(function () {
            $scope.$apply(function () {
                $scope.config.links.splice(
                  e.newIndex, 0, $scope.config.links.splice(e.oldIndex, 1)[0]
                );
            });
        });
    };
    $scope.placeholder = function (element) {
        return element.clone().addClass("placeholder").text("drop here");
    };
    $scope.hint = function (element) {
        return element.clone().addClass("hint");
    };

And when I use ul and li instead of select, sortable function is not working as expected in chrome, IE and other browsers as well. When I try to drag one element, next element from the queue has the index change and couple of other issues. 

Could you please give me a working example for kendo with sortable functionality (not grid) which uses select and ng-repeat and works for ALL THE BROWSERS as well as AND we can disable the sortable functionality onClick on list for other functionality.

Also onClick, I was trying to get the e.currentTarget.selectedOptions.length value which is having the issue with IE saying as selectedOptions is undefined and chrome is working as expected. 

Also I am trying to achieve "multiple" for onClick functionality to remove from the list and add it to other list. (FYI)

Please let me know, if there is any example links or code snippet which works for all browser.

Thanks in advance,

Sujatha

So this is odd...

My markup has radio buttons in each sortable item.  I can select them no problem, but once I start to drag to sort, I can see the hint and placeholder have lost the selection, and on drop it's gone as well.

WIERDER if I inspect the markup in chrome on the dropped element I still to see the "checked" attribute there... but no selection, jQuery detects no selection as well.

Checkbox lists however seems perfectly fine

I use a Kendo Sortable in 3 different places in my app. It has always worked flawlessly for me however recently I upgraded to Kendo 2019.1.115 and ONE of the kendo sortables has stopped working correctly.  I know the issue isnt kendoSortable since its working fine elsewhere. 

Here is the behavior I have seen. Before the drag begins this is what I have

https://screencast.com/t/Ov6mXlaqKw

Now if I drag Chilly to below Fresh Lemon I end up with the following

https://screencast.com/t/8UDK6LKmANK

The item that was dragged appears twice at the end of the list. I wrote out the source in the change event and it is correct. It shows 

https://screencast.com/t/JTcjSE7aj80h

As you can see the data is correct. The problem is that the kendoSortable isnt showing what is in the data model.

Here is my code and template:

Is it possible to configure the sortable to make it work in the similar was as TreeView drag and drop?

I would like not to move element during dragging, but only on drop.

I would also like to prevent some drop targets dynamically based on source element.