[Solved] ADA issue on kendo grid JAWS screen reader

[Jack]

I used this demo grid in a local app to confirm that the JAWS screen reader tool reads the "Refresh" button followed by the "1 - 10 of 100 items" message upon the initial read of the page. It should read left to right ("1 - 10 of 100 items" followed by "Refresh"

 

<kendo-grid name="grid" height="700" navigatable="true" on-data-bound="onDataBound">
    <datasource type="DataSourceTagHelperType.Ajax" page-size="20"
        server-operation="false"
        auto-sync="true"
        batch="true"
        on-error="error_handler">
        <schema>
            <model id="ProductID">
                <fields>
                    <field name="ProductID" editable="false" type="number"></field>
                    <field name="ProductName" type="string"></field>
                    <field name="UnitPrice" type="number"></field>
                    <field name="Discontinued" editable="false" type="boolean"></field>
                    <field name="Category" default-value='new SandBoxApp.Models.CategoryViewModel() { CategoryID = 8, CategoryName = "Seafood" }'></field>
                    <field name="CustomerRating" type="number"></field>
                    <field name="Country" default-value='new SandBoxApp.Models.CountryViewModel() { CountryNameLong= "Bulgaria", CountryNameShort="bg" }'></field>
                    <field name="UnitsInStock" type="number"></field>
                    <field name="TotalSales" type="number" editable="false"></field>
                    <field name="TargetSales" type="number" editable="false"></field>
                </fields>
            </model>
        </schema>
        <groups>
            <group field="Category.CategoryName" typeof="string" direction="desc">
                <aggregates>
                    <aggregate field="TotalSales" aggregate="sum" />
                </aggregates>
            </group>
        </groups>
        <aggregates>
            <aggregate field="TotalSales" aggregate="sum" />
        </aggregates>
        <transport>
            <read url="@Url.Action("DetailProducts_Read","Grid")"/>
            <update url="@Url.Action("DetailProducts_Update","Grid")"/>
            <create url="@Url.Action("DetailProducts_Create","Grid")"/>
            <destroy url="@Url.Action("DetailProducts_Destroy","Grid")"/>
        </transport>
    </datasource>
    <columns>
        <column width="75" selectable="true"
            header-html-attributes='new Dictionary<string,object> { ["class"] = "checkbox-align" }'
            html-attributes='new Dictionary<string,object> { ["class"] = "checkbox-align" }'/>
        <column field="ProductName" width="300" template="#=productNameTemplate(data)#"/>
        <column field="UnitPrice" title="Price" width="105" format="{0:c}"/>
        <column field="Discontinued" title="In Stock" width=" 130" template="<span id='badge_#=ProductID#' class='badgeTemplate'></span>"/>
        <column field="Category.CategoryName" title="Category" width="125" editor="categoryDropDownEditor"
            group-header-template="Category: #=data.value#, Total Sales: #=kendo.format('{0:c}', data.aggregates.TotalSales.sum)#"/>
        <column field="CustomerRating" title="Rating" width="200" editable="returnFalse">
            <column-template>
                <kendo-rating name="rating_${data.ProductID}"
                    min="1"
                    max="5"
                    data-bind="value: CustomerRating"
                    selection="continuous">
                    <label enabled="false" />
                </kendo-rating>
            </column-template>
        </column>
        <column field="Country.CountryNameLong" title="Country" width="120"
            template="#=countryTemplate(data)#"
            editor="clientCountryEditor"/>
        <column field="UnitsInStock" title="Units" width="105"/>
        <column field="TotalSales" title="Total Sales" width="140" format="{0:c}"/>
        <column field="TargetSales" title="Target Sales" editable="returnFalse" width="220"
        template="<span id='chart_#= ProductID#' class='sparkline-chart'></span>"/>
        <column width="120">
            <commands>
                <column-command text="Delete" name="destroy"></column-command>
            </commands>
        </column>
    </columns>
    <toolbar>
        <toolbar-button name="excel"></toolbar-button>
        <toolbar-button name="pdf"></toolbar-button>
        <toolbar-button name="search"></toolbar-button>
    </toolbar>
    <pdf proxy-url="@Url.Action("Excel_Export_Save","Grid")"/>
    <excel proxy-url="@Url.Action("Excel_Export_Save","Grid")"/>
    <column-menu filterable="false" enabled="true"> </column-menu>
    <editable mode="incell"/>
    <pageable enabled="true" refresh="true"/>
    <sortable enabled="true"/>
    <resizable enabled="true" columns="true" />
    <reorderable enabled="true"/>
    <groupable enabled="true"/>
    <filterable enabled="true"/>
    <scrollable enabled="true"/>
</kendo-grid>